Preview gallery
Similar Skills
View allWhat you get
- One 1920×1080, 60 fps MP4 of 30 to 45 seconds that mixes narration, a music bed you have cleared, mouse clicks and keystrokes; every frame is HTML, CSS, SVG and GSAP in your palette
- A HyperFrames project you can reopen: SCRIPT.md, STORYBOARD.md, ledger.json, the transcript, a composition for each of the seven scenes and one interface stylesheet
- The interface kit itself (composer, connector menu, toggle, tool chip, output card, three panel steps) and a handoff note stating whether the app on screen is yours or a neutral original
Good fit
- Connectors, plugins, agent skills or APIs that people reach from inside some other app, where the demo is the argument
- Tools that prove themselves through what they hand back, so watching the flow beats a feature list
- First-run films and launches with one defensible figure worth watching rise
Not for
- Products with no interface to film, or a feature that cannot play as one continuous flow
- Versions that must run without sound, since word timestamps decide every cut
- Rebuilding another company's assistant or cutting in a capture of one without written permission; the neutral build is offered instead
About this Skill

Some products only make sense once you watch them answer. This video skill for Fable 5 users keeps the camera inside one grey assistant app for 30 to 45 seconds, with no title card and no spokesperson. A cursor flips your connector on, a plain question gets typed, and lines of the reply settle into the thread in a reading serif. The second message is the turn: it asks for what only your product returns. After one held beat on your mark, a checklist strikes itself through, folds into a result card, and a figure you can defend climbs to its value. Your mark alone carries color. Narration sets the timing: the voice is fixed and transcribed first, each scene edge is read from its word timestamps, and HyperFrames renders the 1080p, 60 fps MP4.
How it works
- Give your agent the product, the way people call it, a real question, the follow-up and a figure you would defend
- Settle the host app: your own, or a neutral one drawn for this film
- Write or record the voice, then transcribe it so each word has a timestamp
- The stylesheet comes first, then the seven scenes in order, each passing the HyperFrames checks
- Approve the preview; the film renders at 60 fps and ffprobe confirms the audio stream
Checked before delivery
- npx hyperframes check reports zero findings
- Every scene edge comes from the narration's word timestamps
- The interface is greyscale and the product's mark is the only colour and the only logo
- The probe shows 1920×1080, 60 fps, 30–45 s and an audio stream
What you need before you start
- You bring
- The product and the exact action a user takes to call it · An interface you own, or approval for a neutral original one · The question a user asks and the follow-up that brings the product in · One real number the result can count up to · A narration script, or a recorded voiceover
- 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
Will it recreate the assistant app my customers use?
Only with written permission from its owner. Without that, your agent draws plain chrome and original icons and says in the handoff that the app stands for no particular product.
Who voices the narration?
Either you supply a recording, or the HyperFrames CLI speaks your script with its bundled model on your machine, no generation key needed. Whichever you use gets transcribed, and the word timestamps set the scene lengths.
What happens if the result number cannot be defended?
The count-up comes out and the result scene ends on the output alone. A figure that stays is tweened as a plain value in GSAP and printed on each update, so any seek shows the same number.







