hyperframes - Render HTML compositions as videos
Render MP4 or WebM videos from HTML compositions with CSS, JavaScript, GSAP animation, and FFmpeg.
Tags
Updated: 2026-09-30Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Render MP4 videos
- Render WebM videos
- Animate HTML with GSAP
- Capture pages frame by frame
- Add scene transitions
- Generate captions from audio
- Create TTS narration
- Inspect visual layouts
- Validate color contrast
- Preview compositions
Inputs
- HTML compositions
- CSS styles
- JavaScript timelines
- Video assets
- Audio assets
- Website URLs
- Render options
- Visual identity rules
Outputs
- MP4 video files
- WebM video files
- Preview server
- Lint reports
- Validation reports
- Layout inspection reports
- Environment diagnosis reports
Requirements
- Node.js 22 or later
- FFmpeg
- npx
- Terminal access
- Chrome headless shell for best-quality rendering
- Linux, macOS, or Windows