← ClaudeAtlas

walkthrough-filmlisted

Build a long-form (2-6 minute) narrated product walkthrough film as a deterministic logical-clock HTML page, then render it per scene and assemble a pacing-warped mix. Use when a product demo is too long for a single-page explainer, when a film must ship in many review rounds or in several brand skins from ONE source tree, when scene durations must be derived from voiceover word timestamps, when a client keeps sending frame-by-frame feedback, or when parallel builder subagents each own part of one film. Triggers: "long product walkthrough video", "chaptered demo film", "white-label this film for another brand", "dark and light versions of the same video", "re-render just one scene", "the render judders / drops frames", "sync the chapters to the voiceover", "film spec for the builders", "version 7 of the video".
JagZ999/explainer-video · ★ 2 · Web & Frontend · score 73
Install: claude install-skill JagZ999/explainer-video
# Walkthrough Film A **deterministic logical-clock HTML film**: one page, one `render(gt)`, N chapter scenes, rendered frame-by-frame and assembled offline. Built for the case a single-page explainer cannot survive — a 3+ minute walkthrough that ships in 9 versions across 2 brands, where a client reviews it frame by frame and each round must re-render only what moved. **What makes it different from `explainer-video`/`smooth-render`:** the timeline is *computed from voiceover word timestamps*, not authored; each scene renders as its own MP4 by `seek()+screenshot` (zero dropped frames, re-render one scene in minutes); pacing is warped at assembly, not in the page; and the whole look is theme-token driven so a second brand is a URL parameter, not a fork. ## When to use - Chaptered product tours, platform walkthroughs, white-label demo films, launch films > 90 s. - Anything that will go through review rounds: the per-scene render + `VER` versioning is the point. - Not for: a 30-60 s single-idea explainer (use `explainer-video`), a pure CSS loop, a screen recording recut. ## The one hard rule **Every visual is a pure function of time.** A scene draws from its scene-local `lt` (and the ground from global `gt`) with no state carried between frames, no timers, no `Date`, no CSS transitions. Corollaries, each learned the expensive way: - **One easing curve per move.** Never two writers on the same element's transform in one frame. - **Verify at 1/30 s.** Shoot consecutive frames `