HyperFrames
heygen-com/hyperframes · Apache-2.0 · 511 entries
HeyGen's open-source way to make video from HTML. You write a web page with one paused GSAP timeline, and its command-line tool renders it frame by frame. It comes with 456 ready-made blocks and components, nine agent skills, and the tools around them.
- Get it
npm install hyperframes@0.9.23 --ignore-scripts export DO_NOT_TRACK=1 HYPERFRAMES_NO_TELEMETRY=1 HYPERFRAMES_NO_UPDATE_CHECK=1 HYPERFRAMES_NO_AUTO_INSTALL=1 HYPERFRAMES_SKIP_SKILLS=1The second line stops it reporting each command to HeyGen and checking for updates. For one block, copy its folder from the repo, or run: npx hyperframes add <name>
- Needs
Node 22, FFmpeg and a headless Chrome (it downloads one on first render unless you point it at yours). Pages load GSAP and fonts from the network at render time unless you make them local. The WebGPU blocks want a GPU. A HeyGen sign-in only for cloud render, publish and generated media.
- Sends off your machine
Out of the box it sends a usage event to HeyGen for every command and checks GitHub and npm for updates. The five switches in the second line above turn that off. One command, "hyperframes usage", reads your coding agent's login token and no switch stops it, so skip that one. Publish, cloud render and feedback send your project or your words to HeyGen, only when you run them.
- We watched it run
A 6-second film written by hand rendered in 16 seconds, with no browser download.
A news overlay (a stat plate, a source chip, a name plate) rendered in 17 seconds, to MP4 and to a MOV with a clear background that sits over footage.
Three registry blocks drew right the first time: a chart, a lower third, a code diff.

The whip-pan transition block rendered, but it is a demo card. It proves the shader runs, not what the cut looks like on real scenes.
- Not tried here
Cloud render, publish, the two Pro skills, and most of the 456 blocks were read, not run.
- License
Apache-2.0
That covers the code. Some things inside are under other terms: GSAP has its own no-charge license, the bundled sound effects are under Pixabay's, and many blocks imitate other companies' interfaces. The code is free to use. The brands are theirs.
Everything in it
Showing 40 of 511Show everything
HTML to video
- AI Answer RankIs your brand in the AI answer? A question types into a chat card, the assistant answers with a ranked list of three picks, then re-ranks…
- AI Chat RevealA question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm -…
- App ShowcaseFitness app product showcase with three floating smartphone screens.
- Avatar CloudLettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.
- Blue Sweater Intro VideoLink onlyWarm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_. Credited to Joe Sai. Idea only: It is a named…
- Camera Scan GateA camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.
- Chat MessageOne message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. Credited to Miao Yang.
- Chat ThreadThe measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage…
- ChatGPT ExchangeA portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the…
- Claude ExchangeA portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations…
- HeyGen Avatar Promo CardLink onlyA portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout. Credited to HeyGen. Idea…
- Lottie Character WalkA jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP. Item…
- Message Thread RevealA full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with…
- Notes RevealA personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves…
- Notes TypingThe notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke…
- Notification CascadePhone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack…
- Notification PileupMobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.
- Notification Stack1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the…
- Onboarding Stepper FlowA composed onboarding flow with milestone rail, active step card, and next-action button. Paste-in snippet: it registers no timeline, you…
- Overwhelm SurroundTasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial…
- Scroll FeedA loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.
- Settings Toggle FlowA composed settings flow with preference rows, toggle switches, and active-state feedback. Paste-in snippet: it registers no timeline, you…
- Share-Sheet CarouselA share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground…
- Signup FlowA composed signup flow with social action, email field, password field, and submit button. Paste-in snippet: it registers no timeline, you…
- Slack Notification AdLink onlyA portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff. Copies the look of Slack; that brand…
- Thread Message StackA source-owned editable conversation stack with arbitrary incoming and outgoing messages.
- Toggle FlipAn oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before…
- Vector Editor RigA dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven…
- VPN YouTube SpotSnappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects. Credited to Stronkter.
three.js and WebGL
- Liquid Glass NotificationFrosted glass notification cards floating over an aurora shader background. The repo marks it experimental.
- Liquid Glass WidgetsFrosted glass stat cards, showcase panel and pill chips over an aurora shader background. The repo marks it experimental.
Starters
- blank (starter)The default starter: one black 1920×1080 page with a title and an empty paused timeline. Ships inside the npm package. Tried: init…
- Decision TreeStarter project: animated flowchart with branching paths.
- Kinetic TypeStarter project: bold kinetic typography promo.
- NYT GraphStarter project: animated data chart in print editorial style.
- Play ModeStarter project: playful elastic animations.
- Product PromoStarter project: multi-scene product showcase with SVG assets.
- Swiss GridStarter project: structured grid layout.
- VignelliStarter project: bold typography with red accents.
- Warm GrainStarter project: cream aesthetic with grain texture.