26-second example rendered by this skill from examples/fernway · 1280×720
What you get
- A 24 to 26 s MP4 at 1080p or 4K, wide 1920×1080 or tall 1080×1920 from the same brief
- A sign-up card built from your brief: 1 to 4 pages of name, email, password, code, choice and checkbox fields
- Camera close-ups on each field with a big caption per step, and a stepper that fills as pages slide by
- A one-time code that arrives as a notification and fills in, and a button that spins, then bursts into a check
- Your first screen opening out of the card, then an end card with your headline, button and URL
- An original indie-electronic soundtrack written by code, with a sound on every key, tick and tap, free to use
- Open-source licenses for every part it builds on
Good fit
- Apps that sell on a quick start can show the whole sign-up, from the first field to the first screen, in one short film.
- Teams that need the same story on a landing page and on Reels, Shorts or TikTok get a wide 1920×1080 film and a tall 1080×1920 one from one brief.
- Flows with a one-time code, a plan picker or a password rule can show each of those steps up close, with a caption that says why it is easy.
Not for
- A real screen recording of your app
- A 9 to 15 s walkthrough of one feature (see Cursor Walkthrough)
- Sign-up flows longer than 4 pages, or more than 3 fields a page
About this skill
A 24 to 26 second film of your sign-up flow, told as a story. A live sign-up card in your colour fills itself in field by field while the camera eases in on each one: an email finished from a suggestion with Tab, a password whose strength meter climbs to Strong, a one-time code that arrives as a notification and fills digit by digit, a plan picked with a click and a terms box ticked, each with a green tick. The last button turns into a spinner, then a check with a burst, the card opens into your product's first screen and an end card lands. One brief renders a wide 16:9 film and a tall 9:16 one, with its own indie-electronic soundtrack.
Example request
Make a Sign-up Flow Film for https://fernway.example: email and password, a 6-digit code by text, a pick between Everyday, Plus and Joint, then "Welcome, Ana" on our home screen. Render it 16:9 and 9:16.
How it works
Your agent
- 1
Ask three things
Which steps does the real sign-up have, in order (email, password or code, a plan or role, terms)?
- 2
Read the product
It prints the page's title, description, headings, calls to action, colours and fonts, saves them to
site.jsonand saveslogo.svgwhen the header has an inline SVG logo. - 3
Write the brief
Use the real product's labels, button words, plan names and prices; take them from its sign-up and pricing pages.
- 4
Make the film
Each run copies the template into its folder, times every key press, tick and tap, writes
soundtrack.wav(an original indie-electronic track at 118 BPM with every sound effect on the cue sheet;--key D,E,F,GorAchanges its key,--no-musicskips it), applies the brief and rendersrenders/<name>-1080p.mp4(wide) orrenders/<name>-tall-1080p.mp4(tall). - 5
Check before you hand it over
Look at the sheet, or snapshot single moments with
npx --yes hyperframes@0.8.192 snapshot film-wide --at 2,6,12.
- 1
You get
What you need
- Node.js 22 or newer and FFmpeg (with
ffprobe) on the PATH. - HyperFrames runs through
npx, pinned to the version this template was tested with:npx --yes hyperframes@0.8.192. The first render downloads a headless Chrome of its own. Ifrendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
fonts.googleapis.com(Inter Tight and Inter) andcdn.jsdelivr.net(GSAP). See Troubleshooting if either is blocked. - Chrome, Chromium or Edge for
capture.mjs, if you want to read the product's site or screenshot its first screen. SetCHROME_PATHif it isn't in the usual place. - Music is generated by
scripts/music.mjs. You can bring your own licensed track instead.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
A caption wraps to three lines or prints
text too long.Captions are 30 characters at most and shrink to fit; shorter lines read better. Two to five words is the sweet spot.
The render stops with "Chrome is missing".
Run
npx --yes hyperframes@0.8.192 browser ensureonce, then render again.The film renders with plain fonts or stops before the first frame.
The render could not reach
fonts.googleapis.comorcdn.jsdelivr.net. Allow them, or setGSAP_FILEto a localgsap.min.js3.14.2 for GSAP.
What’s in the download
- SKILL.md13.9 KB
- examples/
- examples/fernway/2.57 KB2 files
- examples/swatchly/2.51 KB2 files
- scripts/
- scripts/apply-brief.mjs15.5 KBchecks the brief, times every key, tick, tap and page turn, picks colours and writes
storyboard.js,cues.jsonand the frame size - scripts/capture.mjs23.9 KBreads a site (title, headings, colours, logo) and takes screenshots with your Chrome
- scripts/chrome.mjs3.63 KB
- scripts/color.mjs1.40 KB
- scripts/make-film.mjs4.10 KBone command from brief to MP4 (template, timing, music, render)
- scripts/music.mjs12.4 KBwrites the original 118 BPM indie-electronic soundtrack (e-piano chords, a plucked arpeggio, bass and drums) with the sound effects on the cue sheet: keys, ticks, clicks, the code notification and the success hit
- template/
- template/cues.json340 B
- template/film.css15.3 KBthe light and dark looks of the card, fields, captions, notification, keycap and end card
- template/film.js34.3 KBbuilds the form from the brief and the whole film on one GSAP timeline, in the wide or tall layout
- template/hyperframes.json298 B
- template/index.html2.06 KB
- template/package.json195 B
- template/storyboard.js61 B
- NOTICE.md1.02 KB
- TESTED.json922 B
20 files · 134 KB · installs to ~/.claude/skills/signup-flow-film for Claude Code and ~/.agents/skills/signup-flow-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 24–26 s · 1920×1080 or 1080×1920 · with music
- Needs
- Node.js 22+ and FFmpeg
- Series
- Launch & Demo Films · 8 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
Do I have to animate anything?
No. You write a brief with 1 to 4 pages of 1 to 3 fields each (name, email, password, code, choice or checkbox), a caption per step, a welcome screenshot and an end card. apply-brief.mjs times every key press and tick on a 118 BPM cue sheet, and make-film.mjs renders the MP4.
Can it make a vertical video?
Yes. Add --aspect tall and the same brief renders at 1080×1920, with the caption on top and the card bigger below it. Without it the film is 1920×1080. --resolution 4k renders either one at 3840×2160 or 2160×3840.
Where does the music come from?
music.mjs writes it: an original indie-electronic track at 118 BPM with e-piano, a plucked arpeggio, bass and drums, plus a sound on every typed key, tick, click and the success hit, all on the same cue sheet as the picture. It is generated by code in the package, so you may use it anywhere, or you can bring your own licensed track.
Which agents is Sign-up Flow Film written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesBuilt on heygen-com/hyperframes
What Lookbk adds on top of heygen-com/hyperframes (Apache-2.0): Lookbk made this package from scratch on HyperFrames: the live sign-up card and its six field types, the wide and tall camera, the beat sheet that times every key press and tick, and the indie-electronic music generator were written for it.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.