Preview gallery
Similar Skills
View allWhat you get
- An 11-second MP4 at 30 fps: 1920×1080 by default, 3840×2160 for 4K
- 4 slots: opening line, headline, supporting line and button label
- The editable HyperFrames project folder
Good fit
- Countdown posts and release-day teasers
- Openers or closers for a product launch video
- Dark, cinematic moments with almost no text
Not for
- Feature explainers or tours of your product's screens
- Light or pastel brand styles
- Videos built from your own footage
About this Skill

Before a release, a short burst of suspense can do more than a feature list. This scene opens with your line over a turning two-armed blue galaxy that collapses to one white star with a flash. Then warp streaks race at the camera with five blue rings, a planet's curved edge lifts from the bottom of the frame, and a small rocket rides a glowing trail out of view. Your headline, a supporting line and a button close the shot. You write four lines; the galaxy, rings and warp are drawn in code.
How it works
- Write an opening line (up to 28 characters) and a headline (up to 22); [[ ]] turns words blue
- Add a supporting line of up to 40 characters and a button label
- create.mjs fills the scene and warns on anything too long
- Preview the scene, then render at 1080p or switch to 4K
- Review frames near the start, middle and end before sharing
Checked before delivery
- create.mjs writes every slot value into the scene and warns about any line over its limit
- The render is 11 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
- An opening line, a short headline, one supporting line and a button label · 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 the rocket be replaced?
Yes. It is a single image file in the scene's assets folder, and your agent can swap in a different drawing with the same tall shape.
Is the galaxy stock footage?
No. About 2,600 specks of dust are drawn on a canvas from the scene's clock, so every render comes out identical and the project stays light.
What does it need to render?
No API key. HyperFrames draws the HTML and GSAP scene into an MP4 on your machine with Chrome and FFmpeg.







