Preview gallery
Similar Skills
View allWhat you get
- A 6.8-second MP4, 1920×1080 at 30 fps, with 3840×2160 when you ask for 4K
- 30 slots across the laptop, phone, terminal, chat, review card and caption
- An editable HyperFrames scene with replaceable logo files
Good fit
- Coding agents, CI services and developer platforms
- Apps that keep work in sync across desktop, phone and chat
- The shot in a launch film that explains what the product does
Not for
- Products without a screen workflow
- Brands with a dark identity
About this Skill

This scene is about continuity: one job, followed across every screen it touches. It starts close on a laptop as an agent works through the task and checks off three steps. Pulling back, the camera makes room for a phone that slides in with the same job, while dashed lines run to a terminal window, a team chat and a card for code review, a small pulse traveling along each. Then every screen flips to done together and your caption rises below. Thirty slots cover the labels, so the job need not be about code.
How it works
- Describe one job: its name, three steps, a progress line and a short phone version
- Fill in four terminal lines, a two-message chat, the review card and a caption
- Optionally swap the DeepSeek and GitHub marks for your own logos
- Run create.mjs, fix what it flags, then preview and render
- Check the opening, middle and closing frames
Checked before delivery
- create.mjs writes every slot value into the scene and warns about any line over its limit
- The render is 6.8 s at 30 fps, 1920×1080 (or 3840×2160)
- No line is cut off or wrapped in the start, middle and final frames
What you need before you start
- You bring
- One job your product runs: its name, three steps, a progress line and a short phone version · Four terminal lines, a two-message chat and a code review card · A closing caption; optional own logo files to replace the DeepSeek and GitHub marks · Optional: 1080p or 4K
- Dependencies
- Node.js 22 or later · FFmpeg and Google Chrome installed locally; HyperFrames renders through them
- Outside costs
- None
- Last tested
- v0.1.1 — Claude Code / Codex / Cursor
User reviews
Loading reviews…
FAQ
Can our logo replace the DeepSeek and GitHub marks?
Yes. Both marks come from LobeHub's icon set and sit as files in the assets folder. Swap in your own logo files, change the model and pr-source slots to match, and leave every logo in its original colors.
Is the scene only for coding products?
No. Each label on the laptop, phone, terminal, chat and review card is a slot, so the story can be any job your product carries out.
Where does the MP4 get made?
On your computer. HyperFrames renders the HTML and GSAP scene with Chrome and FFmpeg; no API key is involved.







