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
你能得到
- 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
适合场景
- 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
不适合
- 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)
- 名称
- HyperFrames Video
- 下载数
- 2
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: 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).
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip hyperframes-video-v1.1.0.zip -d ~/.claude/skills/hyperframes-video/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
版本历史 (2)
- v1.1.02026/10/3 · 4.1 MB · 15 个文件
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.02026/10/3 · 2.1 MB · 11 个文件
Initial release: HyperFrames workflow skill with a 20s SkillStack promo video example.
评价
相关技能
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