Open source · MIT

Scenes for software
product commercials.

Written in Remotion and locked to the frame clock. The ecosystem ships 81 templates and nine of them are ways to reveal a logo. None of them do a prompt being typed, a cursor that acts, real app UI on a tilted plane, or a response streaming in. That gap is what this is for.

The scenes

Prompt input PromptInput · 1920×1080 · 30fps

Four beats in one unbroken shot: the cursor arrives, the prompt is typed with uneven human rhythm, it is sent, and the answer streams back word by word. The app behind it is real product UI — its own tokens, its own radii, the system font stack — not a drawing of it.

UI mockup UIMockup · 1920×1080 · 30fps

A slab of real product UI enters from off-frame onto an inclined 3D plane, and the camera rotates toward frontal while the board fills in. It ends more frontal than it started, so the next scene can enter from this final state instead of cutting to it.

Card handoff CardHandoff · 1920×1080 · 30fps

This one starts where the last one stopped. Not roughly: both scenes read the same camera pose from the same module, so the first frame here is the last frame above, and seam.sh proves it by diffing the two — the join comes out 32× closer than a deliberate cut taken from the middle of this same scene, which is the control that stops the number from being decoration. The card lifts, crosses in an arc and lands, and the column below only closes up while it is landing. Snapping the gap shut on the frame it leaves would be a cut wearing an animation costume.

Four rules

Frame-locked

useCurrentFrame() and nothing else. No CSS keyframes, no rAF, no wall clock. A frame renders the same in the studio and in headless CI.

A progress escape hatch

Every scene takes a normalized 0→1 progress so a parent timeline can drive it. Left unset, it derives one from its own frame.

No cuts

The reference commercials run 52 and 41 seconds in one shot. Scenes chain by continuous transformation, not by cut. A scene that has to enter from another one's final state can be measured, which is what seam.sh does to the join above.

Real UI

Slabs of the actual product on inclined planes, with the product's own tokens. A mockup that is 3px off reads as a mockup.