Skills hyperframes
🎬

hyperframes

Low Risk ⚙️ External commands🌐 Network access📁 Filesystem access🔑 Env variables

Create HTML-based video compositions and animations

Creating video animations requires learning specialized video production software and complex rendering pipelines. HyperFrames lets you write HTML to define video compositions, use GSAP for animations, and render professional videos with captions, transitions, and audio.

Supports: Claude Codex Code(CC)
🥈 80 Silver
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

Using "hyperframes". Create a simple title card with "Welcome" text

Expected outcome:

An HTML composition with static positioning and GSAP entrance animation that fades in the title text.

Using "hyperframes". Add captions synced to my audio file

Expected outcome:

A composition with word-level caption elements and timing data derived from the transcript.

Using "hyperframes". Create a crossfade between two scenes

Expected outcome:

A two-scene composition with GSAP-driven opacity transitions for smooth visual continuity.

Security Audit

Low Risk
v1 • 4/26/2026

All 791 static findings are false positives. The skill is a legitimate HTML-based video composition framework with documented CLI commands, file operations for composition authoring, and optional API integrations for transcription/TTS services. The detected patterns are benign: hex color codes in palette files (misidentified as Ruby commands), relative file paths (../) in documentation, and CLI tool invocations that are expected behavior for a video production tool.

39
Files scanned
3,777
Lines analyzed
6
findings
1
Total audits
Low Risk Issues (2)
SKILL.md:279-281SKILL.md:292-293SKILL.md:324-327
CLI Command Usage (Expected Behavior)
The skill instructs users to run CLI commands like `npx hyperframes lint`, `npx hyperframes inspect`, and `node scripts/animation-map.mjs` for video composition validation. These are documented authoring tools, not command injection vulnerabilities.
references/transcript-guide.md:120references/transcript-guide.md:133
Environment Variable Documentation for External APIs
The transcript-guide.md shows curl examples with `$OPENAI_API_KEY` and `$GROQ_API_KEY` placeholders. These are documentation examples showing users how to authenticate with external transcription APIs - not actual credential exfiltration.

Risk Factors

⚙️ External commands (4)
SKILL.md:279 SKILL.md:280 SKILL.md:289 SKILL.md:325-327
🌐 Network access (1)
SKILL.md:42
📁 Filesystem access (1)
SKILL.md:269
🔑 Env variables (2)
references/transcript-guide.md:120 references/transcript-guide.md:133

Detected Patterns

Hex Color Codes (False Positive)Relative Path References in Documentation (False Positive)Word Count Commands in Validation Instructions (False Positive)
Audited by: claude

Quality Score

73
Architecture
100
Maintainability
87
Content
50
Community
86
Security
91
Spec Compliance

What You Can Build

Marketing and social media videos

Create animated title cards, product showcases, and promotional content with brand-consistent colors and professional transitions.

Educational and explainer content

Build animated explainer videos with captions, voiceovers, and visual highlights that draw attention to key points.

Event and conference presentations

Generate animated slides and highlight reels with smooth transitions, typography effects, and audio-reactive elements.

Try These Prompts

Basic composition request 
Create a HyperFrames composition with a title card that says [TITLE] on a dark background with the text fading in. Use the clean-corporate palette.
Captioned video request 
I have an audio file at [PATH]. Create a HyperFrames composition with word-level captions synced to the audio. Use a dark background with white text.
Transition sequence request 
Create a 3-scene transition sequence using crossfade, blur, and page burn transitions between scenes. Apply the bold-energetic color palette.
Full video production request 
Create a complete HyperFrames video with: title card, 3 content scenes with captions, audio-reactive background animations, and smooth transitions. Style should be [STYLE].

Best Practices

  • Define a visual identity (DESIGN.md or visual-style.md) before writing any composition HTML
  • Build the static layout first, positioning elements where they appear at their most visible moment
  • Run `hyperframes validate` to check WCAG contrast and `hyperframes inspect` to verify layout before rendering
  • Use GSAP.from() for entrances and GSAP.to() for exits, animating FROM/TO the CSS ground truth

Avoid

  • Do not write compositions with generic or default colors - always apply a defined visual identity
  • Do not position scene content containers with absolute positioning and hardcoded dimensions
  • Do not skip layout and contrast validation before final rendering

Frequently Asked Questions

What is HyperFrames?
HyperFrames is an HTML-based video composition framework. You write HTML with data-* attributes for timing and CSS for styling. GSAP handles animation. The framework manages clip visibility, media playback, and timeline sync.
Do I need to install anything to use this skill?
Yes. You need the hyperframes CLI installed via npm and the rendering engine (Puppeteer and FFmpeg) for video output. Run `npx hyperframes init` to set up a project.
Can I add captions from an audio file?
Yes. You can use external transcription APIs (OpenAI Whisper, Groq) or local transcription. The skill converts timestamps to word-level caption elements synced to your audio.
How do I add voiceover narration?
Use the built-in TTS command with Kokoro-ONNX models. Run `npx hyperframes tts` with your script text. The skill supports voice selection and generates audio files.
What animation capabilities are available?
GSAP powers all animations including entrances, exits, text effects, and audio-reactive behaviors. You can create beat-synced animations, glow effects, and complex choreography using the animation map tool.
How do I validate my composition before rendering?
Run `npx hyperframes lint` for syntax checks, `npx hyperframes validate` for WCAG contrast, and `npx hyperframes inspect` for layout verification. Fix all warnings before rendering.

Developer Details

Author

heygen-com

License

MIT

Repository

https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes/

Ref

main

File structure

📁 palettes/

📄 bold-energetic.md

📄 clean-corporate.md

📄 dark-premium.md

📄 jewel-rich.md

📄 monochrome.md

📄 nature-earth.md

📄 neon-electric.md

📄 pastel-soft.md

📄 warm-editorial.md

📁 references/

📁 transitions/

📄 catalog.md

📄 css-3d.md

📄 css-blur.md

📄 css-cover.md

📄 css-destruction.md

📄 css-dissolve.md

📄 css-distortion.md

📄 css-grid.md

📄 css-light.md

📄 css-mechanical.md

📄 css-other.md

📄 css-push.md

📄 css-radial.md

📄 css-scale.md

📄 audio-reactive.md

📄 captions.md

📄 css-patterns.md

📄 dynamic-techniques.md

📄 motion-principles.md

📄 transcript-guide.md

📄 transitions.md

📄 tts.md

📄 typography.md

📁 scripts/

📄 animation-map.mjs

📄 contrast-report.mjs

📄 data-in-motion.md

📄 house-style.md

📄 patterns.md

📄 SKILL.md

📄 visual-styles.md