Turn HTML into scroll-stopping MP4 videos. This skill teaches agents the HyperFrames workflow: compose scenes in a single index.html with data-* timing attributes, drive all motion with one paused, seekable GSAP timeline, and render deterministically to MP4 via headless Chromium and FFmpeg. Includes the composition contract, seek-safe animation patterns, a 5-beat product promo structure, and the CLI render loop — plus a complete 20-second SkillStack promo video example with full source.
/hyperframes-video Create a 15-second product launch video for my SaaS
What you get
- SKILL.md with the full workflow: brief, compose, animate, check, preview, render
- references/composition.md — the data-* timing contract, clips, timelines, sub-compositions
- references/animation.md — seek-safe GSAP patterns, kinetic type, count-ups, transitions
- references/promo-video.md — 5-beat product promo structure with copy rules and timing template
- references/cli.md — init/preview/check/render loop and troubleshooting
- examples/skillstack-promo — complete 20-second promo video source (index.html) plus the rendered MP4
Good fit
- Making product promos, explainers, or social ads from HTML and CSS
- Agents that need deterministic, re-renderable video output
- Kinetic typography and data-visualization motion graphics
Not for
- Editing talking-head footage (use a real video editor)
- Photoreal AI-generated video (use a diffusion video model)
- Interactive decks (build a web page instead)
- Name
- HyperFrames Video
- Downloads
- 2
- Category
- Design
- Skills inside
- 1
Download & install
What's new: Merged with community HyperFrames skill: audio rules (audio id, data-volume), template wrapping rules, font vendoring, snapshot/add/doctor commands, deterministic variation patterns. Added light-mode promo video example (dark + light videos included).
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip hyperframes-video-v1.1.0.zip -d ~/.claude/skills/hyperframes-video/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Version history (2)
- v1.1.010/3/2026 · 4.1 MB · 15 files
Merged with community HyperFrames skill: audio rules (audio id, data-volume), template wrapping rules, font vendoring, snapshot/add/doctor commands, deterministic variation patterns. Added light-mode promo video example (dark + light videos included).
- v1.0.010/3/2026 · 2.1 MB · 11 files
Initial release: HyperFrames workflow skill with a 20s SkillStack promo video example.
Reviews
Related skills
taste-skill
Leonxlnx/taste-skill
Taste-Skill - gives your AI good taste. Stops the AI from generating boring, generic slop.
archify
tt-a1i/archify
Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams.
Editorial Pitch
Editorial Pitch
Build investor pitch decks and persuasive slide decks in a warm-paper editorial style with python-pptx — claim-first headlines, numbered sections, hairline rules, and a 10-slide narrative arc. Demo: a 10-slide seed pitch for Loam, a fictional soil-health startup.
Claude Code · Codex · Cursor · Copilot +3
Apple-Style UI Design
Apple-Style UI Design
Design web pages in Apple's marketing-site visual language — gallery-like product storytelling, the SF type ramp, binary light/dark panels, and one blue reserved for action.
Claude Code · Codex · Cursor · Copilot +3