Motion FX Lab
Code-made motion graphics → MP4 with sound.
Write the animation as a web page, yourself or with an AI coding assistant, and render it frame by frame to a checked MP4 with sound. Browse the use cases, demo films and effects below, then adapt one.
Start from the video you need
Each use case is one editable page: change its words, numbers or brand near the top of the file and render a new MP4. Other ratios and brands come from the same page. Click a preview or “Play with sound” for the full film; “Scrub timeline” opens the page with a scrub bar.
One data file, three shop promos, safe for every app’s buttons.
Use for: Reels, Shorts and TikTok promos for a shop or venue.
The tea bar, bakery and yoga studio versions come from one data block; product drawings are code.
Also rendered: bakery, 9:16 · yoga studio, 9:16
Explore: 3-second headline hook · Word-synced captions · Beat sync · Light sweep · Sticker labels · Red flash + shake + stamp · Whip-in letters + motion blur · Counting number · Countdown ring
One new feature, from problem to result, in 15 seconds.
Use for: Feature launches, release notes and app-store previews.
The same page renders 16:9 and a 1:1 cut; every word stays at least 28 px at 1080p.
Also rendered: 1:1
Explore: Counting number · Sticker labels · Camera move over real UI · Light sweep · Typewriter · Highlighter · Scan and check · Frosted glass card · Red flash + shake + stamp
Your figures, each page ending on its point.
Use for: Annual reviews, reports and data explainers.
Replace the data block and the counters, charts and closing sentences follow; a 9:16 cut uses the same data.
Also rendered: 9:16
Explore: Whip-in letters + motion blur · Staggered letter pop · Highlighter · Counting number · Countdown ring · Stroke reveal · Sticker labels
Seamless loops behind a title, an interview and a “starting soon” screen.
Use for: Title backgrounds, interview backdrops and stream holding screens.
Each loop is checked for a seamless join between its last and first frame; the film shows a loop caption in place of the check.
Explore: Soft colour fields · Staggered letter pop · Noise ridgelines · Whip-in letters + motion blur
Type a name, pick a preset, render a 6-second opener.
Use for: Channel intros, podcast openers and logo stings.
All three presets play in 18 s; ?preset= exports one alone, in 16:9 or 9:16.
Also rendered: 9:16
Explore: Solid lettering · Light through a stencil · Particle flow into type · Organic closed contours · Signal breakup
Change the name and details, get a beat-locked countdown and logo reveal.
Use for: Launch, livestream and event countdowns.
The countdown, chips and logo come from one data block; a 9:16 cut uses the same page.
Also rendered: 9:16
Explore: Counting number · Countdown ring · Beat sync · Whip-in letters + motion blur · Red flash + shake + stamp · Particle flow into type · Chrome monogram · Light through a stencil · Sticker labels · Film grain
One product, three ratios: drop, callouts, colourways, price.
Use for: Shop listings, product ads and social posts.
Renders 4:5, 9:16 and 1:1 from the same page; text never covers the product.
Explore: Light sweep · Staggered letter pop · Frosted glass card · 3D card flip grid · Red flash + shake + stamp · Sticker labels · Film grain
A drop becomes a crown splash, rises into a bottle that refracts the brand, dives underwater and surfaces on the end card.
Use for: Product adverts and material-led openers.
Four water effects each carry one chapter; the brand is set in one place and a 9:16 cut uses the same page.
Also rendered: 9:16
Explore: Drop, crown and rebound · 3D shape blending · Water and glass · Below the surface
Several effects, one finished film
Each demo film combines several effects around one subject or story. Every card lists the effects it uses, so you can open them and build your own. All films by layer also gives the seconds where each effect appears.
Over 1,000 stroke-sliced Latin and CJK vectors assemble a multi-angle Bento mural, invert polarity from a single dot and close a seamless loop.
Use for: Launch reels, kinetic-typography manifestos and developer tool announcements.
Combines the stroke-swarm Bento mural and the off-center dot-iris polarity wipe; frame 0 and frame 720 meet on the same period dot.
Explore: Stroke-swarm Bento mural · Dot-iris polarity wipe
Liquid metal beads nucleate, coalesce into sculpted Latin and CJK chrome lettering under studio softboxes, then melt away into a seamless loop.
Use for: Luxury title cards, album visuals and tactile brand stings.
Runs the 16-bit Euclidean distance-field raymarcher across two word cycles; custom strings work via ?text=.
Explore: Liquid mercury chrome lettering
The bear asks for the launch video. Pip has made one small, dramatic improvement.
Use for: Voiced character stories, product explainers and comedy shorts.
Speech and lip sync, plush fur and seven library effects inside the film-within-the-film each have a story role.
Explore: Plush fur and soft-body physics · Speech, expression and lip sync · Light through a stencil · Red flash + shake + stamp · Counting number · Light sweep · Signal breakup · 3D card flip grid · Countdown ring
Original action choreography and contact holds; at the climax time stops and the camera circles the fighters as a 3D point cloud.
Use for: Action promos, game trailers and sports intros.
Same fight. Eight treatments. reuses this choreography to compare operations.
Explore: Image and footage halftone dots · Motion shatter and reassemble · Time echoes and speed ramps · Freeze frame and camera orbit
A section plane opens closed housings while the detailed core keeps moving; real cap geometry preserves wall thickness.
Use for: Technical explainers and product interior reveals.
Full render of one controllable mechanical operation.
Explore: Solid longitudinal cutaway
A detailed turbofan opens into seven service assemblies and returns along their ordered paths.
Use for: Product teardowns, maintenance explanations and assembly reveals.
Full render of one controllable mechanical operation.
Explore: Exploded assembly and reassembly
One point becomes an outlined word, a passage through space and solid engraved type.
Use for: Title sequences, technical identities and brand openers.
A finished combination of lettering, surface hatching and authored drawing/camera transitions; not additional effect families.
Explore: Solid lettering · Light-responsive surface hatching
One courier travels through twenty artworks while its flight and cape remain continuous.
Use for: Character-led journeys and transitions between visual worlds.
Flight, cape motion and camera movement stay continuous across changing artwork.
Explore: Art-gallery camera journey · Cross-frame style portal · Twenty art directions · Low-poly flight course
Hatching is anchored in object coordinates. Camera movement preserves the marks, while changing light changes ink density.
Use for: Architectural and illustrated 3D scenes.
The full render of the surface-hatching effect.
Explore: Light-responsive surface hatching
A visual cue connects type, timing, depth and a reveal; closes its loop.
Use for: Brand loops, logo openers and identity motion.
Each role is a reusable effect: letter reflow, spatial type and dot reveal.
Explore: Curve-guided letter reflow · Type in three-dimensional space · Radial halftone reveal
A common source makes eight different operations comparable.
Use for: Choosing a treatment for moving footage.
COUNTERFORM above uses the same choreography as a finished action short.
Explore: Image and footage halftone dots · Freeze frame and camera orbit · Time echoes and speed ramps · Skinned point cloud · Motion shatter and reassemble · Image relief
All 40 films by layer
1 intro · 17 use cases · 11 demo films · 11 effect films. Effect films also play inside their effect cards. Effect links name the library operations each film’s source runs; related links name operations it does not run.
Intro · 1
What the repository makes and how a page becomes an MP4.
Use cases · 17
Start from a familiar video format and replace its copy, data or brand.
Demo films · 11
Finished pieces that combine effects around one subject, story or choreography.
| Where | Film and purpose | Watch / edit |
|---|---|---|
| Card in Demo films | Every Stroke Is Code Over 1,000 stroke-sliced Latin and CJK vectors swarm into a Bento mural, invert polarity from one expanding dot and loop seamlessly. Effects: Stroke-swarm Bento mural 0–11.5 s · Dot-iris polarity wipe 3.8–12 s | Play MP4 · Scrub timeline |
| Card in Demo films | Liquid Mercury Type A top-down studio raymarcher pours liquid mercury into Latin and CJK letterforms, settles with specular glints and melts cleanly back into the cyclorama. Effects: Liquid mercury chrome lettering 0–12 s | Play MP4 · Scrub timeline |
| Card in Demo films | The Final Final The plush bear asks for the launch video; Pip has made one small, dramatic improvement. Nine library effects play a part in the story. Effects: Plush fur · Speech and lip sync 1.35–21.4 s · Launch burst 0.28–0.5 s · LAUNCH slam 0.28–0.5 s · Stuck at 99% 7.45–10.47 s · Progress sweep 7.65–10.47 s · Trailer breaks up 10.45–11.07 s · TO BE CONTINUED 11.05–11.83 s · Final, final, actually final 14.36–17.83 s · Loading face 18.9–19.93 s | Play MP4 · Scrub timeline |
| Card in Demo films | COUNTERFORM A complete fight with authored action and contact timing, and a 1.2 s freeze-orbit at the climax. Effects: Dots · Impact · Echoes · Time control 7.2–9 s · Freeze-orbit climax 12–13.2 s | Play MP4 · Scrub timeline |
| Card in Demo films | Inside the machine. A section plane opens closed housings while the detailed core keeps moving; real cap geometry preserves wall thickness. Effects: Solid longitudinal cutaway | Play MP4 · Scrub timeline |
| Card in Demo films | Apart. Together. A detailed turbofan opens into seven service assemblies and returns along their ordered paths. Effects: Exploded assembly and reassembly | Play MP4 · Scrub timeline |
| Card in Demo films | Spark / Form An ember traces a construction drawing, the camera enters its O, and the same word resolves as engraved three-dimensional lettering. Effects: Solid lettering 9.6–14.4 s · Surface hatching 9.6–14.4 s Related, not in this film: Stroke reveal: related to the authored ember drawing · Repeated space: related to the authored corridor | Play MP4 · Scrub timeline |
| Card in Demo films | One flight. Twenty worlds. One character travels through twenty art directions. Effects: Gallery journey · Style portal · Twenty art directions · Low-poly course 29.9–37 s | Play MP4 · Scrub timeline |
| Card in Demo films | One block. A drawn city. Surface hatching, staged construction and camera travel in one scene. Effects: Surface hatching | Play MP4 · Scrub timeline |
| Card in Demo films | One dot. Many roles. One orange dot becomes a switch, a letter, a spring trace and a reveal before returning to the start. Effects: Letter reflow 1.2–3.3 s · Spatial type 6.8–11 s · Dot reveal 9–11 s | Play MP4 · Scrub timeline |
| Card in Demo films | Same fight. Eight treatments. Compare eight operations on the same choreography. Effects: Dots 0–4.8 s · Frozen orbit 4.8–9.6 s · Echoes 9.6–14.4 s · Depth scatter 14.4–19.2 s · Impact 19.2–24 s · Time control 24–28.8 s · Image relief 28.8–33.6 s · Surface points 33.6–38.4 s | Play MP4 · Scrub timeline |
Effect films · 11
Full renders of one effect; each also plays inside its effect card.
| Where | Film and purpose | Watch / edit |
|---|---|---|
| Effect card: Volumetric smoke around geometry | Find the Form An extended rendered example of volumetric smoke. Effects: Volumetric smoke | Play MP4 · Scrub timeline |
| Effect card: Fluid flow and overflow | Overflow Partly filled bowl → rising water → overflow → settling. Effects: Liquid flow | Play MP4 · Scrub timeline |
| Effect card: Fluid flow and overflow | Slow Gold Inspect liquid contact, stretching and drainage over a ring. Effects: Viscous coating | Play MP4 · Scrub timeline |
| Effect card: Image relief | Pulse / Form Measured loudness pushes Milo’s portrait out into solid pins; silence is flat. Effects: Audio relief | Play MP4 · Scrub timeline |
| Effect card: Motion shatter and reassemble | Motion / Release Apricot shatters only where measured motion is fast and reassembles when she lands. Effects: Motion fragments | Play MP4 · Scrub timeline |
| Effect cards: Speech, expression and lip sync, Plush fur and soft-body physics | Say it. Mean it. The plush bear in close-up: three named expressions, a split-screen line and the nine mouth shapes. Effects: Speech and lip sync 0–11.6 s · Plush fur 0–11.6 s | Play MP4 · Scrub timeline |
| Effect card: Geared slider-crank mechanism | One turn. Everything moves. A 20:40 gear pair drives a crank, rod, piston and tachometer from one analytic model. Effects: Geared slider-crank mechanism | Play MP4 · Scrub timeline |
| Effect card: Force-field dot deformation | Pull. Warp. Return. A dot lattice pulls into an authored force field, recovers, then becomes a perspective wave floor. Effects: Force-field dot deformation | Play MP4 · Scrub timeline |
| Effect card: Animated glyph interiors | Inside the letters. One glyph silhouette contains moving stripes, an authored liquid level and a two-tone boundary. Effects: Animated glyph interiors | Play MP4 · Scrub timeline |
| Effect card: Proximity particle connections | Near enough to connect. Distance changes which particles connect; pulses travel along the surviving links. Effects: Proximity particle connections | Play MP4 · Scrub timeline |
| Effect card: Graphic long-shadow type | A different kind of depth. The same flat word gains a long graphic shadow whose direction and length keep changing. Effects: Graphic long-shadow type | Play MP4 · Scrub timeline |
Effects to reuse
Each card is one distinct effect, drawn live in your browser from code and ordered by visual design craft and motion feel. Type custom copy below, choose a variant in a card’s selector, or filter by kind and renderer; where an effect has its own full render, the card links to it. How effects are grouped.
Live scene and treatment presets · expand to preview
Reusable multi-treatment scenes behind the demo films: one object in five shader styles, twenty art directions, the gallery journey, the underwater scene and the eight-era room. They reuse effects above rather than adding new ones.
Rendering notes
Browser effects run from code; the Blender effects replay baked frames and keep their editable source recipes. The colour-grade technique uses CSS filters and a separate glow; it is not a LUT implementation. The original 3D and shader tiles share one WebGL canvas; the three optical shaders share a second context. Reaction–diffusion draws the same pixels every time on one GPU, but not the same pattern on every GPU.
Write it as a web page. Render it to MP4.
- Set up. Clone the repository, then run
npm install,npx playwright install chromiumandnpm run setup:hooks. Rendering also needs Python 3 and ffmpeg; see the quick start. - Edit. Copy a use case or demo film page and change its words, data, timeline or effects. Preview it with
node video/serve.cjs 8000and scrub to any frame: each frame is a function of time. - Render. One command renders, checks and delivers the MP4:
bash video/build.sh examples/product.htmlThe build renders every frame twice in independent browsers and compares them, masters the sound to −14 LUFS, and writes an MP4, a high-quality copy and a poster; a failed check keeps the previous files. Page contract and engine reference.
For developers: the stack, a render benchmark and authoring choices
How the films are built
The library combines drawing APIs, renderers, simulation libraries and export tools. Original effects use three.js r128; the newer 3D and compute modules pin r180.
| Stack | What it is | Why | What it does here |
|---|
A recorded rendering benchmark
Measured on a 56-second, 1,693-frame test video with heavy 3D, which is not included in this repository. Timed from launching the browsers to a finished lossless master. The first pipeline, default headless Chromium with one browser and page.screenshot, took 399.6 s. Rendering the whole video twice and comparing every frame took 52.9 s: 7.5× faster than the first pipeline. Before that, with only an 8-frame spot check, it took 26.4 s. Encoding both deliverables with every check took another 33.6 s. All measured on 2026-09-28 on an Apple M4 laptop.
Past 4 browsers there was no gain: the bottleneck moved to the single ffmpeg process that decoded the PNGs and wrote the master. The table describes that benchmark, not the current intro file.
| Step | First pipeline | Verified recorder in that test | How it is proven |
|---|---|---|---|
| 3D rendering | SwiftShader (GPU emulated on the CPU) | ANGLE Metal (the Apple M4 GPU) | The browser's WebGL renderer string is read at start; an unexpected SwiftShader fallback stops a GPU run |
| Screenshots | page.screenshot | CDP captureScreenshot with optimizeForSpeed | At 8 fast-moving moments the decoded pixels matched the old method 8/8, with no stale frame |
| Parallelism | 1 browser | 4 independent browsers, frames dealt round-robin | The whole video is rendered a second time with every frame on another browser, and all frames are compared; a frame fails if over 0.01% of plane samples differ by more than 8 levels, or over 20 samples differ by more than 48 levels |
| Master | x264 CRF 17 (lossy) | x264 lossless | Deliverables are compressed once; the master must hold every frame |
| Look | Mean SSIM 0.989 between old and new; the 71 frames under 0.95 are dense particle and dust frames that look identical side by side | ffmpeg ssim, frame by frame | |
| Sound | −21.2 LUFS · −2.1 dBTP · AAC 160 kbps | −14.1 LUFS · −1.6 dBTP · AAC 127 kbps | Limit, then two-pass loudnorm that must report “linear”; the file is measured with ebur128. 160 kbps was over Meta's 128 kbps ceiling |
| High-quality file | none | 24.9 MB · 3.5 Mbps mean · 17.2 Mbps peak second | Meta Reels allows 25 Mbps and 300 MB; moov first, no edit list |
| Web preview | 13.8 MB | 13.9 MB · two-pass 1870 kbps | Over 15 MB, it retries once at a lower rate, then stops |
What the checks caught during development
- A writer-loop bug: too few frames, stop.
- Re-rendered frames differed: GPU edge noise on rotated text. Pixel tolerance handles small GPU edge differences; it does not judge the composition or motion quality. Later, a spot check of 8 frames missed a browser that drew a label wrongly, so every frame is now rendered twice. The label had kept a stale size after a scale animation;
engine.jsnow prevents that. - A decoder deadlock: the frame comparison, the frame counts and every delivery step now have a time limit, so a hang there fails loudly.
- A bad argument: refused before starting.
Left out, and why
- HEVC: the high-quality file has no size pressure and H.264 is enough; H.264 is used for broad browser compatibility.
- GPU benchmarks were measured on macOS. WebGL-only films can use
--cpu; films with WebGPU compute require a compatible GPU adapter.
Tools and authoring choices
Current rendering choices
- Full three.js migration: the original effects keep r128; newer film modules pin r180 without migrating every existing shader.
- Timelines: each frame is calculated directly from time. These examples use the local timeline engine rather than a GSAP runtime.
- HyperFrames: another HTML-to-video framework; the current films use this repository’s existing recorder.
Other workflows and assets
- Remotion: videos use React components; free eligibility and Company License terms depend on the user or organization.
- lygia: its default Prosperity licence covers noncommercial use and a 30-day commercial trial; it is not bundled here.
- Generated speech: the dialogue films use offline Kokoro voices and Rhubarb mouth analysis. Character geometry, performance, scenery and music are authored in code; no generated footage or depth maps are used.