hyperframes-creative
heygen-com/hyperframes
Creative direction for HyperFrames videos: palettes, typography, narration, composition, and brand style.
What is hyperframes-creative?
Handles non-animation creative decisions for HyperFrames video projects, including design specs, color palettes, typography, narration pacing, beat planning, audio-reactive visuals, and composition patterns. Use this for style and brand direction; pair with hyperframes-animation for motion patterns and transitions.
- Parse and apply design specs from frame.md/design.md files with frontmatter-driven brand tokens
- Select and adapt visual styles, palettes, and typography from presets or custom definitions
- Plan multi-scene rhythm, beat timing, and narration pacing before authoring
- Compose scenes using patterns (picture-in-picture, text-behind-subject, title cards, slide shows)
- Structure data visualization and infographic presentation for motion
- Verify design adherence post-authoring (colors, type, spacing, contrast, depth)
How to install hyperframes-creative
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-creative- HyperFrames core technical setup (hyperframes-core skill installed)
- Optional: existing design spec file (frame.md, design.md, or DESIGN.md) or willingness to adopt a preset
How to use hyperframes-creative
- 1.Read references/house-style.md and references/video-composition.md first for any non-trivial composition
- 2.If a design spec exists, load and parse it per references/design-spec.md; treat frontmatter tokens as brand truth
- 3.If no spec exists, choose a route: adopt a frame-preset, select a named style from visual-styles.md, use fast defaults, or run the design picker
- 4.For multi-scene work, plan beats and rhythm using references/beat-direction.md before writing HTML
- 5.Use routing table to find task-specific references (palettes, composition patterns, data presentation, typography, narration, audio-reactive visuals)
- 6.Run contrast-report.mjs or extract-audio-data.py scripts as needed for verification or audio mapping
- 7.Verify final output against references/design-adherence.md for color, type, spacing, and depth compliance
Use cases
- Define brand colors, fonts, and tone for a multi-scene video project before animation work begins
- Choose a visual style preset and adapt it to match a client's design system
- Plan beat-by-beat narration and transition timing for a structured video narrative
- Compose an infographic or stats-heavy scene with proper video-medium density and readability
- Extract audio bands and map them to motion-reactive visual elements
- Creative directors and designers building HyperFrames video projects
- Video producers planning pacing, narration, and visual hierarchy
- Brand teams enforcing style consistency across video content
- Data visualization specialists creating motion-driven infographics
hyperframes-creative FAQ
Use hyperframes-creative for brand, style, palettes, typography, narration, beat planning, composition patterns, and design specs. Use hyperframes-animation for atomic motion patterns, scene blueprints, transitions, and CSS marker effects.
Choose a route: adopt a ready-made frame-preset, select a named style from visual-styles.md, use house-style.md defaults, or run the interactive design picker in references/design-picker.md.
No. Reading references/house-style.md and references/video-composition.md first is mandatory for anything beyond a one-line edit. Skipping them is the biggest cause of generic, web-page-looking output.
Only if the request explicitly calls for them or you first propose the expansion. Do not add extras unprompted.
Use references/audio-reactive.md for precomputed audio bands mapped to motion, and run scripts/extract-audio-data.py to pre-extract audio bands from your audio file.
Full instructions (SKILL.md)
Source of truth, from heygen-com/hyperframes.
name: hyperframes-creative
description: Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
HyperFrames Creative
Brand, pacing, style, narration, and composition direction. Use after the technical contract from hyperframes-core is in place.
For motion patterns, scene blueprints, transitions, and CSS marker effects, use hyperframes-animation — this skill is intentionally non-animation.
Read these two FIRST for any non-trivial composition — they override web instincts:
references/house-style.md— "interpret the prompt, generate real content," the lazy-default list, and the background/foreground layer recipe. This is what turns a literal restyle into a concept.references/video-composition.md— video-medium density, scale, foreground metadata (the "produced, not generated" detailing: data bars, registration marks, monospace readouts, 8-10 elements/scene).Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.
Workflow
- If a project has a design spec, read it first and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints). Which file to read (precedence
frame.md→design.md→DESIGN.md) and how to parse it (frontmatter = normative, prose = context) are defined once inreferences/design-spec.md— resolve and load per that doc. - If no design spec exists and the user asks for visual direction, choose a route:
- Ready-made frame-preset (optional) →
frame-presets/(adopt aFRAME.mdasframe.md; seereferences/design-spec.md) - Named style or mood →
references/visual-styles.md - Fast defaults →
references/house-style.md - Interactive selection →
references/design-picker.md
- Ready-made frame-preset (optional) →
- For multi-scene work, plan beats and rhythm before writing HTML →
references/beat-direction.md. For scene transitions, jump tohyperframes-animation/transitions/. - For motion-heavy work, read
references/motion-principles.md(high-level guardrails), then go tohyperframes-animationfor atomic rules.
Routing
| Topic | Read |
|---|---|
Adopt a ready-made frame-preset as frame.md (optional) | frame-presets/ · references/design-spec.md |
| Default palettes, motion, typography, lazy defaults to question | references/house-style.md |
| Named style presets, mood-to-style routing | references/visual-styles.md |
| Palette-specific color tokens | palettes/*.md |
| Composition patterns — PiP, text-behind-subject, title card, slide show | references/composition-patterns.md |
| Stats / infographic presentation | references/data-in-motion.md |
| Structured expansion for open-ended prompts | references/prompt-expansion.md |
| Video-medium density, scale, color, frame composition | references/video-composition.md |
| Per-beat direction, rhythm planning, transition timing | references/beat-direction.md |
| Post-authoring spec verification (colors, type, corners, spacing, depth) | references/design-adherence.md |
| High-level motion guardrails and GSAP-quality rules | references/motion-principles.md |
| Font selection, pairings, rendered-video type guardrails | references/typography.md |
| Script pacing, tone, openings, number pronunciation | references/narration.md |
| Precomputed audio bands mapped to motion | references/audio-reactive.md |
Scripts
scripts/contrast-report.mjs— inspect contrast warnings from rendered frames.scripts/extract-audio-data.py— pre-extract audio bands for audio-reactive compositions.scripts/package-loader.mjs— support script for bundled creative tooling.
Run from the repo root with explicit paths, for example:
python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>
Animation analysis (animation-map.mjs) lives in hyperframes-animation/scripts/.
Boundaries
- Do not override
hyperframes-coretechnical rules. - Do not require a design system for a minimal technical composition.
- Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.
- Keep recipe references task-specific; do not read every reference for simple edits.
Related skills
More from heygen-com/hyperframes and the wider catalog.
hyperframes
Router and entry skill for video authoring—renders video from HTML with intent-based workflow selection.
hyperframes-cli
CLI for HyperFrames video composition: scaffold, lint, validate, render locally or on AWS Lambda.
hyperframes-registry
Install and wire reusable blocks and components into HyperFrames compositions via registry.
remotion-to-hyperframes
Port existing Remotion (React) video compositions to HyperFrames HTML—one-way translation only.
hyperframes-media
Audio and media engine for HyperFrames: TTS, background music, sound effects, transcription, captions, and background removal.
gsap
GSAP animation reference for HyperFrames compositions with timelines, easing, and performance optimization.