Launch film

The films are authored, not cut. Energy comes from a camera moving over one continuous surface, with eased push-ins on the details that matter, not from edits. Every frame is a pure function of time, so a render is repeatable and a 25 s film at 1080p renders in under a minute.

The engine is engine/film.html, a 2D canvas that plays a plan.js. engine/capture.cjs steps it frame by frame in headless Chromium and pipes the frames to ffmpeg.

Mode: pick one first

• Showcase (the default): the work speaks. The opener is an accelerating flip through the project's own images (photos, drawings, stills), with no words. The body is one continuous camera over the real surface, with push-ins on the best details. It ends on the pulled-back product, or on a plain title if the user wants one. Ask before adding a title card. Add one plain caption per beat at most (people watch X muted); no taglines, no pitch copy.
• Interaction: the cursor acts on the real page. A click motivates each camera move, and hovers show the page's real states. Shoot cursor-free stills of each state with Playwright (hover() and click() draw no cursor), plus each element's centre. Then use the product scene's states (section swaps keyed by time), hovers (a band, underline or ring where the page has no hover style), cursor.clicks and cursor.hide.
• 3D product (a Three.js app): headless Chromium has no GPU, so render the 3D shots as frame sequences on a real GPU in a normal browser. A debug hook drives the camera and app state per frame, and each frame is POSTed as a JPEG to a local sink. Render at 4K, downscale to 1080p with lanczos, and play them in frames scenes. from: {image, wipe} wipes a photo into the render from the same camera. The UI take is the real app driven headless with real pointer events, one screenshot per frame (SwiftShader draws WebGL at about 1 s a frame), with the pointer recorded to cursor.json and replayed through a product scene with seq and cursor.frames. Dry-run each drag first and read the app's own state after it: a move that looks fine can turn a piece or break the app's checks. Worked example: examples/room-configurator/, a film of a room-from-photos page (film.js renders the shots, ui.cjs records the UI take, plan.js and plan45.js hold the timeline).

Length and rhythm

• Teaser, 20–30 s for X: opener about 2 s, body in two or three beats of 4–8 s each.
• Feature, about 80 s: a few continuous takes with push-ins. Calm shots have a median of 4–8 s.
• Hard cuts only between scenes. Rapid cuts live only in the opener, never over UI states. Longer than 90 s is a tutorial, not this skill.