skills.rest
xu1713
xu1713COMMUNITY
Explore all skills by this author →
GitHub

hyperframes

Create HTML-based video compositions and render them to MP4 or WebM with GSAP animations.

Updated Jun 5, 2026
Search Tags:#captions#ffmpeg#motion graphics#tts#video generation#gsap#html animation
One-click install
npx skills add https://github.com/xu1713/openhorse --skill hyperframes-xu1713
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/xu1713/openhorse/tree/main/openhorse/openhorse/optional-skills/creative/hyperframes
Command: npx skills add https://github.com/xu1713/openhorse --skill hyperframes-xu1713

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires hyperframes, puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve? Producing motion-graphics videos, captioned talking-head clips, and animated social content normally requires manual timeline editing in video software. This Skill treats HTML as the source of truth for video: you author a composition with data attributes, CSS, and a GSAP timeline, and the HyperFrames engine captures it frame-by-frame and encodes it to MP4 or WebM with FFmpeg. ## Core Features & Use Cases - HTML-to-video rendering: Scaffold projects with npx hyperframes init, preview with live reload, and render deterministic MP4/WebM output at draft, standard, or high quality. - Captions, TTS, and audio-reactive visuals: Generate local TTS narration (Kokoro, 54 voices across 8 languages), transcribe with Whisper for word-level captions, and drive visuals from pre-extracted audio bands. - Transitions and website-to-video: Install shader transitions (flash-through-white, liquid-wipe) and run a 7-step capture-to-video pipeline that turns a URL into a scripted, storyboarded promo. - Use Case: A user provides a product landing page URL and asks for a 30-second vertical promo. The Skill captures the site, derives a DESIGN.md from its brand tokens, writes a narration script, generates TTS audio, builds the composition, and renders a final 1080x1920 MP4. ## Quick Start Ask the assistant to run the setup script and then scaffold a new video project with npx hyperframes init, describing the style, duration, and any media or URL you want included.

Frequently Asked Questions about hyperframes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render an HTML animation to an MP4 video?▼

Author an HTML composition with data-start and data-duration attributes plus a paused GSAP timeline registered on window.__timelines, then run npx hyperframes render --output final.mp4. The engine captures the page frame-by-frame and encodes with FFmpeg.

How do I add captions synced to TTS narration in a video?▼

Generate narration with npx hyperframes tts using a Kokoro voice, then run npx hyperframes transcribe on the WAV file to get word-level timings. Bind caption groups to those timings on the GSAP timeline with a hard visibility kill at each group's end.

When should I use HyperFrames instead of Manim for video generation?▼

Use HyperFrames for motion graphics, talking-head videos with captions, product tours, social overlays, and anything driven by real video or audio media. Use Manim for mathematical or geometric explainer animations like equation derivations.

Why does hyperframes render fail with HeadlessExperimental.beginFrame not found?▼

Chromium 147+ removed the beginFrame CDP command. Upgrade to hyperframes 0.4.2 or later, which auto-detects support and falls back to screenshot mode, or set PRODUCER_FORCE_SCREENSHOT=true as an escape hatch.

What are the system requirements for running HyperFrames?▼

HyperFrames requires Node.js 22 or newer, FFmpeg on PATH, and at least 4 GB of free RAM. Installing chrome-headless-shell via Puppeteer is recommended for the fastest, highest-quality render path.

Why does my GSAP animation break the HyperFrames render?▼

Common causes are repeat: -1 infinite tweens, Math.random() or Date.now() making output non-deterministic, and building timelines inside async or setTimeout. Timelines must be synchronous, paused, finite, and registered on window.__timelines.

Related Skills

Explore More Design & Creative Skills→
compozycompozy
182

website-to-hyperframes

Convert a website URL into a HyperFrames video workflow with design tokens and storyboard.

Official
Advanced
Growth4U-systemsGrowth4U-systems

ai-social-graphics

Generate platform-optimized social graphics and thumbnails for Instagram, YouTube, LinkedIn, Twitter, and TikTok.

Official
Intermediate
whyiloveher2411whyiloveher2411

hyperframes-media

Automate audio, music, and sound effect asset creation for HyperFrames compositions.

Community
Advanced
gaoqiongxiegaoqiongxie
1

remotion-video

Generate animated MP4 and WebM videos using React and Remotion.

Community
Intermediate