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 32 of 511Show everything
HTML to video
- Anamorphic Streak FlareA drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. The…
- 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.
- Beat Pulse BackgroundAn accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.
- 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).
- Color WheelA wide gradient slides slowly through the colors of the rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Cosmic OrbAn iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass…
- Dynamic GridA responsive animated grid background driven by CSS variables for SaaS, code, and data scenes. Paste-in snippet: it registers no timeline…
- Falling LinesWhite lines fall down the frame at varied speeds, each fading into a trail. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Flowing GradientBands of orange and violet flow across the frame in a smooth gradient. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Fractal NoiseSoft gray fractal noise drifts across the frame like slow clouds. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Gabor NoiseGray streaky noise drifts across the frame like a moving fingerprint. A WebGPU shader from the Shaders library (shaders.com, MIT).
- GodraysRays of light fan out from a corner and drift across a deep blue field. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Grain FieldA clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.
- Halftone FieldA full-bleed halftone light field: a grid of dots whose size and color track a slow flowing simplex-noise field, so broad bands of light…
- Lens FlareA camera lens flare: a bright star burst and a faint rainbow halo that slowly shimmer on black. A WebGPU shader from the Shaders library…
- MarbleInk-dark veins wind through white in a marbled pattern that slowly shifts. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Mesh GradientSoft coral, orange and violet fields blend and drift in a mesh gradient. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Mesh Gradient BackgroundA render-safe mesh gradient using animated radial layers. Paste-in snippet: it registers no timeline, you wire it into your own.
- Minimal Gradient BackgroundProcedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable…
- PlasmaDeep violet plasma folds and churns across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
- PrismA white beam of light splits into a slowly turning rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT).
- RipplesConcentric rings ripple outward from the center, white on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Scanline Board BackgroundTextured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and…
- Sine WaveA glowing white sine wave travels across a black frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
- SpiralA bold black and white spiral turns in the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
- StrandsThin ribbons of pink and blue light weave across a black field. A WebGPU shader from the Shaders library (shaders.com, MIT).
- StripesBold black and white diagonal stripes slide across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Sun BurstCream and black rays fan out from the center and slowly turn. A WebGPU shader from the Shaders library (shaders.com, MIT).
- SwirlOrange and blue color fields swirl and flow into each other across the whole frame. A WebGPU shader from the Shaders library (shaders.com…
- VoronoiMagenta cells with glowing blue centers shift and reshape across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Worley NoiseA field of drifting cells, light at their centers and dark at their edges. A WebGPU shader from the Shaders library (shaders.com, MIT).