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 54 of 511Show everything
HTML to video
- Background Emphasis TypeOversized low-contrast background word drifting slowly behind the subject — typography as texture.
- 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…
- Bottom Up LettersSplits text into letters and reveals each glyph from below with deterministic staggered timing. Paste-in snippet: it registers no timeline…
- 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.
- Chromatic Fringe TitleDisplay title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift.
- Code Slice HeroA tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.
- Colorama WipeHeadline reveal through a feathered, leaning wipe front that is blurred and color-mapped as it passes, then settles to clean type and wipes…
- Focus Blur ResolveA premium focus pull from heavy blur to crisp text, then a soft blur-out exit. Paste-in snippet: it registers no timeline, you wire it into…
- Handwritten TitleHandwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils.
- Handwritten Write-On TitleTrue glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a…
- Headline SlamA heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on…
- Kinetic Center BuildWords enter from the right and push the growing phrase left until the final line locks centered. Credited to Remocn. Item license: MIT.
- Kinetic Type SwapA held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.
- Line SwapA masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the…
- Line-by-Line SlideEach line enters from the left with staggered slide and exits to the right. Paste-in snippet: it registers no timeline, you wire it into…
- Matrix DecodeRandom scramble resolves left-to-right into the target text. Paste-in snippet: it registers no timeline, you wire it into your own.
- Morph TextGooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect.
- Particle Text DissolveText assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at…
- Per Word RiseWords or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional…
- Per-Word CrossfadeWords gently fade into place with a short vertical drift for calm keynote rhythm. Paste-in snippet: it registers no timeline, you wire it…
- Perspective MarqueeA 3D tilted marquee with depth feel as items roll toward the horizon. Paste-in snippet: it registers no timeline, you wire it into your own.
- RGB Glitch TextRGB-offset text copies jitter briefly for a controlled glitch window. Paste-in snippet: it registers no timeline, you wire it into your own.
- Scramble RevealA deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.
- Shared Axis YPer-word vertical shared-axis transition for sharp editorial swaps. Paste-in snippet: it registers no timeline, you wire it into your own.
- Shared Axis ZScale-based shared-axis transition for focus shifts and context depth. Paste-in snippet: it registers no timeline, you wire it into your…
- Shimmer SweepAnimated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals. Paste-in snippet: it…
- Soft Blur InA soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts. Paste-in snippet: it registers no timeline, you…
- Split-Flap BoardSolari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on…
- Staggered Fade UpWords fade in and slide up one after another with configurable delay. Paste-in snippet: it registers no timeline, you wire it into your own.
- Stitched Text DrawText drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns…
- Streaming TextWords arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing gray and inking to full color -…
- Strikethrough ReplaceDraw a strike line across old text, then reveal the replacement. Paste-in snippet: it registers no timeline, you wire it into your own.
- Text + Circle Carousel 1A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to center, hard-cuts…
- Text + Circle Carousel 2A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to center, hard-cuts…
- Text + Circle Carousel 3A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to center, hard-cuts…
- Text + Circle Carousel 4A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to center, hard-cuts…
- Text + Circle Carousel 5A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to center, hard-cuts…
- Text Along a PathHandwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input.
- Text ShimmerA static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.
- Text StaggerA transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words. Paste-in snippet: it registers no timeline…
- Text State SwapA text state swap primitive with outgoing blur and incoming lift. Paste-in snippet: it registers no timeline, you wire it into your own.
- Texture Mask TextCSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps. Paste-in snippet: it…
- Ticker TakeoverA mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.
- Titlecard CalmA restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.
- Titlecard LockupThe calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule…
- Top-Down LettersLetters descend from above in a pronounced staircase with zero blur. Paste-in snippet: it registers no timeline, you wire it into your own.
- Tracking InA precise letter-spacing reveal for premium headings and interface labels. Paste-in snippet: it registers no timeline, you wire it into…
- TypewriterCharacter-by-character text reveal with a deterministic blinking cursor. Paste-in snippet: it registers no timeline, you wire it into your…
- Variable Axis TypeA locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.
- Variable Font FlexA word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size…
- VFX Text CursorDramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader…
- Weight WaveA crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by…