NEW LIFE MOTION / VERSION 1.1

Your church. In motion.

A browser-based animated lower-third studio with 12 styles, 14 content templates, custom logos, palettes, typography, animation timing, and service cues.

Open the studio →

1. Put it on Cloudflare

Sign in to your Cloudflare dashboard and open Workers & Pages.
Choose Create application → Pages → Use direct upload (the wording may also appear as drag and drop).
Name the project, for example newlife-motion.
Upload New-Life-Motion-Cloudflare.zip. Its index.html is already at the ZIP root. You can also extract the ZIP and upload the folder containing index.html.
Choose Deploy site. Open the resulting pages.dev address.

No build command, environment variables, API keys, database, or paid video service is needed. Choose a Pages static upload, rather than pasting the files into a Worker code editor.

To update later, open this same Pages project and create a new production deployment with the replacement ZIP. You do not need to delete the project.

Cloudflare’s official direct upload guide

2. Build your service lineup

Pick a template from the left: speaker, pastor, location, social media, scripture, sermon, giving, service times, welcome, prayer, event, ticker, worship song, or custom.
Edit text in Content. Upload a PNG/JPEG/WebP logo, or keep the editable letter badge. The supplied NL letters are a placeholder badge, not your official logo.
Choose one of the 12 styles. In Design, adjust colors, font, card dimensions, corner rounding, opacity, margins, alignment, and overall scale.
In Motion, choose an entrance, entrance/exit speeds, hold duration, and ambient movement. The ticker has its own scroll speed.
Select Save as new cue. After editing a saved cue, use Save changes to selected cue. Live output changes only when you press Show output; editing a draft does not update the on-air graphic.
Use Save project to download a backup containing cues, settings, and logos. Use Open project to transfer your work to another computer.

Your browser stores your project locally. Uploading this app to Cloudflare does not synchronize your saved cues between devices. Clearing browser data removes the browser copy. Keep downloaded project backups.

3. Download transparent video for ProPresenter

The website now downloads a finished ProRes 4444 MOV with alpha. No BAT file, ZIP extraction, command line, or installed converter is needed.

Set your graphic’s entrance, hold, and exit timing.
Click Export graphic and choose 1080p or 720p and 30 or 60 fps.
Click ProPresenter · Transparent MOV.
Wait for the progress bar. The first export automatically loads about 31 MB of encoding software into your browser and caches it when browser storage allows. Your graphics stay on your computer.
The finished your-cue-ProPresenter.mov downloads automatically. If your browser blocks the automatic download, use the Download MOV again link in the export window.
Import the MOV into ProPresenter as a slide media element or overlay above your video. Keep the underlying video visible rather than assigning the MOV as a replacing background. If you see dark edges, check the media inspector’s straight-alpha setting.

Keep the page open until the export finishes. Rendering takes time, especially at 1080p or 60 fps. You can cancel at any time. If your computer runs out of memory, choose 720p, 30 fps, or a shorter hold.

Direct MOV export works from the hosted HTTPS website, on Windows or Mac with a supported desktop browser. It does not run by double-clicking a local index.html file. The engine loads from pinned FFmpeg.wasm CDN URLs with a fallback source. No Cloudflare server encoding or paid backend is required.

Ordinary video players may show black behind a transparent MOV. Check it over a video inside ProPresenter. A MOV’s alpha channel does not make a normal HDMI output transparent; the switcher still needs its appropriate key/fill or chroma-key setup.

A ready-made 1080p transparent sample MOV is included for testing.

Official ProPresenter format guidance · Straight and premultiplied keying

4. Other output choices

Output	How to use it
Transparent PNG	A still 1920 × 1080 image with alpha, captured after the entrance completes.
Standalone animated HTML	In OBS, create a Browser Source → Local file → select the exported HTML. Set source width 1920 and height 1080. It can loop with a 3-second clear gap; turn looping off for a single play. Refresh the source to restart. The file includes the design, logo, and animation engine and needs no network.
Green-screen WebM	Video with a solid green background. Apply a chroma key in your video software. This format does not have alpha. Keep the tab visible while recording; export cancels when hidden. Chrome/Edge is recommended for recording support.
Transparent PNG frames	Import the first PNG as an image sequence at the selected frame rate in a video editor. For a ready-to-use MOV, choose the dedicated ProPresenter export instead.
Live output window	Open live output in the same browser on the same computer. Click Show output. Double-click the output to enter full screen. Escape exits full screen. The controller’s Hide button removes the graphic. Use the Motion tab to choose a transparent, green, blue, or black background.

Live control does not cross browser profiles, computers, or OBS’s separate browser engine. For OBS, use the exported standalone HTML. For a physical ATEM input, use a computer’s HDMI output with a chroma-key background and configure the ATEM’s keyer.

5. Tips and limits

Text is automatically reduced to fit its line. Keep speaker names and second lines concise for readability. The ticker is best for longer announcements. Scripture templates hold a short excerpt; verify wording and attribution yourself.
Uploaded logo images are resized to a maximum of 256 pixels to keep projects portable. Preview background images are preview-only and never appear in exports.
PNG frame exports are limited to 1,800 frames and 240 MB of compressed frame data. MOV exports are limited to 1,800 frames and 110 MB of compressed input data to reduce browser memory pressure. If you reach a limit, choose 720p, 30 fps, or a shorter hold time. ProRes files can be larger than compressed MP4 files.
Choose 30 fps for smaller files, or 60 fps to match a 60 fps production. Fractional 29.97/59.94 export is not included in this version.
Auto cycle plays saved cues in their saved order, with the chosen gap. Hide also stops the playlist. Clicking a cue or content template stops automatic cycling.
Space previews the animation; Enter shows the output; Escape hides and stops cycling; Right Arrow selects the next cue. Shortcuts do not fire while typing.
The app uses no trackers, API keys, or remote fonts. The direct MOV exporter automatically loads the FFmpeg.wasm encoding engine in a worker. All animation frames and video encoding stay in your browser; they are not uploaded.

Verification

The animation renderer, cue actions, project import/export, HTML escaping, PNG output, and ZIP integrity were checked programmatically. The direct exporter was exercised with the actual FFmpeg WebAssembly engine and worker message flow. Its resulting ProRes 4444 MOV was decoded and confirmed to retain transparent and opaque pixels. The included sample uses the same renderer and encoding settings.

Interactive browser playback and playback in your installation of ProPresenter could not be run in this build environment. Try the sample MOV and your first exported cue before using them during a service.

New Life Motion 1.1 · October 2026 · Source code included in this package.