HyperFrames is an open-source framework that turns HTML, CSS, media, and timed animations into deterministic MP4 videos. It is used locally, by coding agents, and in hosted authoring workflows to create rendered videos from web-based designs. Its catalogue add-ons provide skills, agents, instructions, hooks, settings, and a plugin for agent-driven video production.
Getting it into your agent
This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.
/plugin marketplace add heygen-com/hyperframes/plugin install hyperframesWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/heygen-com/hyperframes/music-to-video)<a href="https://agentmods.dev/skills/heygen-com/hyperframes/music-to-video"><img src="https://agentmods.dev/badge/skills/heygen-com/hyperframes/music-to-video.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00097 | $0.04189 |
| Opus 5 | $0.00048 | $0.02094 |
| Sonnet 5 | $0.00019 | $0.00838 |
| Haiku 4.5 | $0.00010 | $0.00419 |
Grade A, and why
music-to-video scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
Copies of this mod
1 near-identical copy found in the catalogue:
- music-to-video — 98% identical, 2 lines differ
How it starts
The opening of the file, as written. The whole thing — 209 lines — stays where its author put it; the contents beside it link to each section on GitHub.
First, keep this skill fresh — confirm with the user before running:
npx hyperframes skills update music-to-video. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
music-to-video — one music-grounded, beat-synced video workflow
Use this skill to turn a music track into a beat-synced HyperFrames video. You analyze the track once, lay out the frames, fill in a per-frame plan, and build each frame as a composition. The input is a music track plus optional user images or videos — there is no narration and no website capture. Typography and templates are the floor (a complete video needs zero assets); any media the user supplies is cut in on the same beat grid.
You are the orchestrator. Work in videos/<project>/. Run the steps in order and pass each Gate before moving on. Two steps need the user: Step 3 (plan approval) and Step 6 (render approval) — both are checkpoint gates per ../hyperframes-core/references/brief-contract.md (read it before Step 0): in autonomous mode, post the summary as a heads-up and proceed instead of waiting. Do every step yourself except Step 4, where you dispatch one sub-agent per frame. Keep design and motion rules out of this file — they live in references/ and the frame-worker sub-agent.
SKILL_DIR = this skill directory. PROJECT_DIR = videos/<project-name>/.
Workflow: Step 0 setup → hyperframes.json + assets/bgm.mp3; Step 1 analyze → audiomap.json; Step 2 skeleton → STORYBOARD.md (frames, groups TBD); Step 3 plan → complete STORYBOARD.md + frame.md; Step 4 build → compositions/frames/NN-*.html; Step 5 assemble → index.html; Step 6 render → renders/video.mp4.
Two ideas that shape everything
- One analyzer, and you trust it.
analyze-beatgrid.pyis the only beat analyzer — never re-measure beats with another tool or by ear. Its energy / density / rolls / onsets / silences are always reliable. Itsbpmandbeats_secare reliable only when the music is genuinely rhythmic; on calm music the grid is a metronome the tracker imposed, so pace by phrases and energy instead and never hard-cut to it. Deciding which case you're in is each frame'spacing(Step 2). - One frame = one file; groups live inside. Step 2 cuts the track into frames, and each frame becomes one composition file
compositions/frames/NN-<frame_id>.html, built by one frame-worker. A frame can subdivide into groups (each a template or a motion-primitives combo). Extra density goes inside a group, so frame count tracks distinct treatments, not beats — a fast track does not blow up the number of sub-agents.
What ships with it
60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/frame-skeleton.md 6.4 KB
- references/montage.md 3.3 KB
- references/motion-primitive-catalog.md 9.7 KB
- references/motion-primitives/3d-card-flip/index.html 4.1 KB
- references/motion-primitives/assets/gsap.min.js 71 KB runs code
- references/motion-primitives/bg-flow-field/index.html 12 KB
- references/motion-primitives/binary-decrypt/index.html 3.4 KB
- references/motion-primitives/blur-resolve/index.html 2.4 KB
- references/motion-primitives/braam-punch/index.html 3.4 KB
- references/motion-primitives/chromatic-split/index.html 4.2 KB
- references/motion-primitives/chrome-sweep/index.html 2.5 KB
- references/motion-primitives/counting-punch/index.html 3.9 KB
- references/motion-primitives/crash-zoom-in/index.html 4.1 KB
- references/motion-primitives/datamosh-smear/index.html 4.2 KB
- references/motion-primitives/directional-fill/index.html 3.5 KB
- references/motion-primitives/dolly-zoom/index.html 4.0 KB
- references/motion-primitives/electric-arc/index.html 4.1 KB
- references/motion-primitives/flash-cut/index.html 3.9 KB
- references/motion-primitives/gooey-metaball/index.html 5.6 KB
- references/motion-primitives/hard-cut/index.html 3.4 KB
- references/motion-primitives/hypercut-whip/index.html 2.0 KB
- references/motion-primitives/iris-open/index.html 2.7 KB
- references/motion-primitives/kinetic-letter-in/index.html 2.8 KB
- references/motion-primitives/liquid-morph/index.html 3.7 KB
- references/motion-primitives/mask-reveal/index.html 2.8 KB
- references/motion-primitives/mosaic-pack/index.html 3.5 KB
- references/motion-primitives/neon-flicker/index.html 2.7 KB
- references/motion-primitives/outline-to-fill/index.html 3.0 KB
- references/motion-primitives/palette-flip/index.html 3.5 KB
- references/motion-primitives/particle-burst/index.html 3.9 KB
- references/motion-primitives/pixel-dissolve/index.html 3.3 KB
- references/motion-primitives/radial-burst-lines/index.html 4.4 KB
- references/motion-primitives/screen-shake/index.html 2.9 KB
- references/motion-primitives/slot-machine-reveal/index.html 3.5 KB
- references/motion-primitives/spotlight-sweep/index.html 3.7 KB
- references/motion-primitives/staggered-exit/index.html 3.1 KB
- references/motion-primitives/text-spectral-rays/index.html 12 KB
- references/motion-primitives/text-spectral-rays/USAGE.md 2.3 KB
- references/motion-primitives/text-wave-distort/index.html 3.7 KB
- references/motion-primitives/tile-mosaic/index.html 3.8 KB
- references/motion-primitives/typewriter-reveal/index.html 3.3 KB
- references/motion-primitives/word-grid-burst/index.html 3.4 KB
- references/planning.md 6.0 KB
- references/storyboard-format.md 6.1 KB
- references/template-catalog.md 8.3 KB
- references/templates/card-flyby/index.html 20 KB
- references/templates/card-flyby/program.json 642 B
- references/templates/held-message-living-field/index.html 17 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/asphalt-031.png 113 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/bark-014.png 89 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/brick.png 40 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/bricks-075-a.png 48 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/bricks-101.png 47 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/bricks-102.png 35 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/bricks-104.png 20 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/carpet.png 159 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/concrete-034.png 46 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/concrete-042-a.png 84 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/concrete-046.png 97 KB
- references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/concrete-047-a.png 112 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 209 lines · 97 tokens per session scan A f3e29a0138de
music-to-video is a skill published in the GitHub repository heygen-com/hyperframes (44,007 stars, last pushed today), licensed Apache-2.0. It adds 97 tokens to every session and 4,189 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
gsap
GSAP(GreenSock Animation Platform)是 GreenSock / Webflow 维护的 JavaScript 动画框架。它用统一的时间轴、缓动和补间系统驱动 CSS、SVG、Canvas、WebGL、React/Vue 状态或任意 JavaScript 对象,核心库覆盖补间动画与序列控制,插件覆盖滚动触发、布局翻转、运动路径、拖拽和文本动画等场景。.
architecture-diagram
Create a professional, dark-themed software/system architecture diagram as a single self-contained HTML file with inline SVG. Use when asked to visualize system components, layers, services, or how parts of a codebase fit together.
product-launch-motion
Use when making, directing or rescuing a product launch video, promo, teaser, demo reel, sizzle, feature-announcement film or animated product explainer built from code — and when an existing one looks basic, reads as a slideshow, has reveals that miss the voiceover, an invisible cursor, an inaudible sound effect, a…
remotion
Use when creating, rendering, and managing programmatic videos using Remotion (React-based video framework). Covers compositions, frame-driven animation, transitions, effects, captions, audio, voiceover, FFmpeg post-production, and professional SaaS-grade motion design.
premium-interaction-craft
Elite interaction patterns covering scroll choreography with GSAP ScrollTrigger, spring physics for drag/toggle/swipe, the elite micro-timing scale, text reveal effects, magnetic and tilt elements, and page transitions with shared element morphing. Use proactively when implementing scroll-driven choreography, applying…
motiscope-analyze
Analyze a screen recording of an animation to characterize its motion — timing, easing, transforms, and sequencing — so it can be recreated as web code. Use when the user drops or points at a video of an animation (.mp4/.mov/.webm/.mkv/.m4v/.avi/.gif) and says things like "I want this animation on my site", "recreate…