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
HTML to video
- 3D TransitionsShowcase of 3D perspective flip and rotate transitions. A reel of several transitions, not one drop-in: lift the one you want.
- 3D UI RevealPerspective 3D reveal animation for UI elements.
- Agent CursorAn AI agent operating a UI: a cursor with an accent name label that types out each step, clicks each target with a small ring, and ends on…
- 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 -…
- Anamorphic Streak FlareA drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. The…
- Animated Bar ChartA compact data card with deterministic bar growth and value callouts. Paste-in snippet: it registers no timeline, you wire it into your own.
- Annotate CursorA marker pen glides onto the frame and hand-draws a loose loop, an underline, or an arrow around a region, the ink laid exactly under its…
- App ShowcaseFitness app product showcase with three floating smartphone screens.
- Apple Money CountApple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound. Credited to Stronkter.
- Arc Motion PathA GSAP MotionPath primitive that flies a callout along a curved arc with autorotation. Paste-in snippet: it registers no timeline, you wire…
- ASCII Render PassA slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a…
- ASCII Trail RevealAn authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.
- AuroraGreen and violet aurora curtains ripple across a night sky. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Aurora DriftThree soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.
- Avatar CloudLettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.
- Avatar Group HoverA distance-falloff avatar group lift with bouncy hover return. Paste-in snippet: it registers no timeline, you wire it into your own.
- Background Emphasis TypeOversized low-contrast background word drifting slowly behind the subject — typography as texture.
- Badge PopA transitions.dev-inspired notification badge pop with elastic scale and count reveal. Paste-in snippet: it registers no timeline, you wire…
- Bar Chart RaceRanked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to…
- Beat AccentA single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.
- Beat Freeze CutA beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.
- Beat Pulse BackgroundAn accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.
- Beat TimelineA paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds…
- Before After WipeTwo full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests…
- Blend DifferenceAuto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background. Paste-in snippet: it…
- BlobA soft coral and pink blob with a warm highlight slowly changes shape on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- 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…
- Blur InAn Operator Black word-level content reveal that resolves its own text from controlled blur. Paste-in snippet: it registers no timeline…
- Blur Out UpWords arrive clean and depart upward with increasing blur for airy exits. Paste-in snippet: it registers no timeline, you wire it into your…
- Blur TransitionsShowcase of blur-based transitions between scenes. A reel of several transitions, not one drop-in: lift the one you want.
- Bottom Up LettersSplits text into letters and reveals each glyph from below with deterministic staggered timing. Paste-in snippet: it registers no timeline…
- Browser Device StageA generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a…
- Camcorder HUDResponsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments.
- Camera Follow CaptionsOne sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows…
- Camera Punch-InDynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse…
- Camera Rig Depth StackA 3D camera-rig-style card stack with depth, parallax, and focus shift. Paste-in snippet: it registers no timeline, you wire it into your…
- Camera Scan GateA camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.
- Camera ShakeProcedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and…
- Card ResizeA transitions.dev-inspired card resize primitive that expands a compact card into a detail panel. Paste-in snippet: it registers no…
- Caret SwapA gradient caret expands over one phrase, collapses to the left, then types its replacement with a blinking caret. Credited to Remocn. Item…
- Char Slam ExplodeHeadline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.
- Chart StoryOne chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a…
- 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…
- Chromatic Aberration WipeA fast slide wipe with RGB channel split on peak frames. Paste-in snippet: it registers no timeline, you wire it into your own.
- Chromatic Fringe TitleDisplay title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift.
- Chromatic Radial SplitDemo card for the chromatic-split shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is…
- Chrome OrbA mirror-chrome orb reflects a bright studio light, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- CinemagraphA still photograph with one living region: the frame is frozen while a single feathered window keeps moving - here, steam rising over a cup…
- Cinematic ZoomDemo card for the cinematic-zoom shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is…
- Circle Carousel 1Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots. Credited…
- Circle Carousel 2Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots. Credited…
- Circle Carousel 3Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots. Credited…
- Circle Carousel 4Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots. Credited…
- Circle Carousel 5Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots. Credited…
- Claude ExchangeA portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations…
- Clip WipeLeft-to-right clip-path wipe reveal per word.
- Code DiffAn edit shown as a colored diff — removed lines collapse in red, added lines expand in green.