Moving Raster Canvas Filmv1.0.0
Use this Skill to make a launch video.
- Yours to keep: the files stay on your computer.
- Payment by Waffo Pancake, our merchant of record.
- 38 free Skills to try first
A launch film skill for Claude Fable 5: a single dot-raster canvas never cuts away and moves ahead of each edit, so the film feels steered.
Updated Nov 7, 2026
Preview gallery
Similar Skills
View all
What you get
- A 20 to 30 second MP4 at 1920×1080 and 30 fps on one dot-raster element that never cuts, restarts or resets from start to finish
- A HyperFrames project holding the shared canvas component, a composition for each of the eight beats, ledger.json and a storyboard with a column for what the field does
- The seam method in writing: the field leads by 0.1 seconds and covers more ground than the type, with a handoff note listing the canvas values for each beat
Good fit
- Inspectors, editors and parameter panels whose promise is that people can now change the thing themselves
- Teams with real support threads or session logs, because the film runs on the plain things users type
- Anyone who can capture their actual control, or rebuild their own interface in code, for the proof beat
Not for
- People-first or plot-driven launches. This film is quiet and exact, with no place for characters or a story arc
- Anything needing footage or a presenter, which would swamp the one surface the film has
- Launches limited to a generic mock for the proof beat. Your agent will tell you so before building it
About this Skill
Products built around exact control deserve a film that behaves the same way. In this Fable 5 video skill there is no second scene: one field of dots holds the frame for 20 to 30 seconds and each beat only changes it, denser, warmer, darker, closer. The sequence runs from a plain statement, through a word that swells until its letters fill with raster, to a blunt four-word problem and a single small request on an empty prompt line. Then come the ordinary asks in a rush, your real control doing one job, the shift in how people work, and the lockup. At every change the field leaves about 0.1 seconds before the type and travels further. It is all HTML, CSS, SVG and GSAP, rendered locally, with nothing generated.
How it works
- Confirm the product is about control, that real small asks exist, and that a real control can be shown
- Build the field alone and watch it with nothing on top before adding a word
- Storyboard the canvas beside the foreground and set the direction of each seam in the ledger
- Build eight beats in order, from the plain statement and the rush of asks to the proof and the lockup
- Clear HyperFrames check, snapshot each boundary, render at 30 fps and complete the handoff
Checked before delivery
- The canvas is one element for the whole runtime: it never cuts, restarts or resets, and ends at its opening density
- At every seam the canvas moves about 0.1 s before the foreground, and further than it
- The asks read as things people really type, and the proof beat shows the caller's real control
- The field moves with transforms and wash opacities only, with no Math.random and no infinite repeat
- npx hyperframes check reports zero findings and ffprobe shows 1920×1080, 30 fps, 20–30 s
What you need before you start
- You bring
- The product and the exact control it gives people · Real small requests your users type, in their own words (support threads or session logs) · A capture, or a rebuild in code, of your actual control doing its job · A deep canvas colour and two raster hues that sit close together · A warm colour for type and up to two support accents
- Dependencies
- HyperFrames CLI and skills · Node.js 22+ · FFmpeg
- Outside costs
- None
- Last tested
- v1.0.0 — Claude Code / Codex / Cursor
User reviews
Loading reviews…
FAQ
What does it mean for the canvas to go first?
On every beat change the dots begin traveling about a tenth of a second ahead of the words, and cover more distance. The eye is already moving when the type leaves, so the film looks like one surface under control.
Is the dot field an image or a video loop?
It is CSS: two tiled radial gradients at different pitches in one oversized element, moved by transforms, with two wash layers for warmth and darkness. It never restarts and finishes at its opening density.
Why not use polished lines for the requests?
Because the argument is that this is what using the product feels like. A line such as "nudge the title up 12px" sounds like a person, and ad copy would sink it, which is why the Skill wants your real support messages or logs.