Hyperframes
Author HTML-first video compositions—captions, TTS, beat-synced motion, and scene transitions—for launch and marketing assets without a separate NLE toolchain.
Overview
HyperFrames is an agent skill most often used in Build (also Launch distribution, Grow content) that authors HTML-based video compositions with GSAP timing, captions, voiceover, and scene transitions.
Install
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframesWhat is this skill?
- HTML compositions with data-* timing attributes, GSAP timelines, and CSS—framework handles clip visibility, media sync,
- Full video production workflow: title cards, overlays, captions/subtitles synced to audio, TTS narration, audio-reactive
- Animated text highlighting modes: marker sweeps, hand-drawn circles, burst lines, scribble, sketchout
- Scene transitions: crossfades, wipes, reveals, and shader-style transitions between scenes
- Discovery protocol for open-ended briefs (audience, platform, brand intent) before committing to visual direction; defer
- Covers animated text highlighting modes including marker sweeps, hand-drawn circles, burst lines, scribble, and sketchou
- Documents scene transition types including crossfades, wipes, reveals, and shader transitions
Adoption & trust: 89.2k installs on skills.sh; 25.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need branded motion video and synced captions but want a code-native composition format instead of ad-hoc After Effects or one-off Remotion experiments.
Who is it for?
Solo builders producing launch trailers, website hero videos, or captioned product demos who already work in HTML/CSS animation stacks.
Skip if: Teams that only need a single static screenshot, pure backend video pipelines with no HTML authoring, or CLI-only render jobs without composition design (use hyperframes-cli instead).
When should I use this skill?
Asked to build HTML-based video content, captions/subtitles synced to audio, TTS narration, audio-reactive animation, animated text highlighting, or scene transitions in HyperFrames HTML.
What do I get? / Deliverables
A timed HyperFrames HTML composition ready for preview/render via hyperframes-cli and asset prep via hyperframes-media when those steps are needed.
- HyperFrames HTML composition with timed data-* attributes and GSAP timeline
- Scene structure with captions, overlays, transitions, and optional audio-reactive layers
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Build is the canonical shelf because compositions are HTML files with GSAP timelines, CSS, and data-* timing—the core authoring loop lives here before render and distribution. frontend matches HTML-as-source-of-truth, animation timing, and overlay UI patterns rather than backend APIs or agent meta skills.
Where it fits
Author a 30s website hero composition with title cards, VO, and crossfade transitions between feature scenes.
Cut a 15s social variant with platform-aware pacing after discovery on audience and placement.
Refresh onboarding explainer captions and highlighted callouts without rebuilding the whole brand system.
Prototype a landing-page motion concept in HTML before committing to a full ad spend.
How it compares
HTML-first composition skill for timed video—not a general frontend component library and not the CLI render toolchain by itself.
Common Questions / FAQ
Who is hyperframes for?
Indie builders and small teams creating marketing or product videos as HyperFrames HTML, especially when captions, narration, or audio-reactive motion are part of the spec.
When should I use hyperframes?
Use it in Build while authoring timed HTML compositions; in Launch when preparing distribution assets for social or site heroes; and in Grow when refreshing lifecycle or content clips—always when the deliverable is HTML-based video, not just a one-off render command.
Is hyperframes safe to install?
Authoring guidance may assume local media and CLI follow-ups; check the Security Audits panel on this Prism page and review filesystem/network needs of companion CLI/media skills before running renders.
Workflow Chain
Then invoke: hyperframes cli, hyperframes media
SKILL.md
READMESKILL.md - Hyperframes
# HyperFrames HTML is the source of truth for video. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync. ## Approach ### Discovery (exploratory requests only) For open-ended requests ("make me a product launch video", "create something for our brand") where the user hasn't committed to a direction, understand intent before picking colors: - **Audience** — who watches this? Developers? Executives? General consumers? - **Platform** — where does it play? Social (15s), website hero, product demo, internal? - **Priority** — what matters most? Motion quality? Content accuracy? Brand fidelity? Speed? - **Variations** — does the user want options, or a single best shot? For specific requests ("add a title card", "fix the timing on scene 3"), skip discovery. For exploratory requests, consider offering 2-3 variations that differ meaningfully — not just color swaps, but different pacing, energy levels, or structural approaches. One safe/expected, one ambitious. Don't mandate this — it's a tool available when appropriate. ### Step 1: Design system If `design.md` or `DESIGN.md` exists in the project, read it first (check both casings — they're different files on Linux). It's the source of truth for brand colors, fonts, and constraints. Use its exact values — don't invent colors or substitute fonts. Any format works (YAML frontmatter, prose, tables — just extract the values). If it names fonts you can't find locally (no `fonts/` directory with `.woff2` files, not a built-in font), warn the user before writing HTML: "design.md specifies [font name] but no font files found. Please add .woff2 files to `fonts/` or I'll fall back to [closest built-in alternative]." If no `design.md` exists, offer the user a choice: 1. **User named a style or mood?** → Read [visual-styles.md](./visual-styles.md) for the 8 named presets. Pick the closest match. 2. **Want to browse options visually?** → Run the design picker: read [references/design-picker.md](references/design-picker.md) for the full workflow. This serves a visual picker page. The user configures mood, palette, typography, and motion in the browser, then copies the generated design.md and pastes it back into the conversation. 3. **Want to skip and go fast?** → Ask: mood, light or dark, any brand colors/fonts? Then pick a palette from [house-style.md](./house-style.md). **design.md defines the brand. It does not define video composition rules.** Those come from [references/video-composition.md](references/video-composition.md) and [house-style.md](./house-style.md). Use brand colors at video-appropriate scale — not at web-UI opacity. ### Step 2: Prompt expansion Always run on every composition (except single-scene pieces and trivial edits). This step grounds the user's intent against `design.md` and `house-style.md` and produces a consistent intermediate that every downstream agent reads the same way. Read [references/prompt-expansion.md](references/prompt-expansion.md) for the full process