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 26 of 511Show everything
three.js and WebGL
- Canopy Part TitleLink onlyLeaves sweep through the frame and part to reveal the headline. Idea only: The repo's CREDITS.md says the origin of its two leaf textures…
- Code 3D ExtrudeSyntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and…
- Code Particle AssembleThousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted…
- Code Shader DissolveThe code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then…
- Cuboid CarouselA chain of bevelled cuboids rides a traveling wave as a content carousel.
- Exploded StackIsometric layer plates explode apart with a label beside each layer, hold, then collapse back into one stack. Built for architecture and…
- Extruded LogoBeveled 3D letters flip up one by one, the word swings so light runs across the bevels, then settles for a readable hold. Chrome, gold or…
- Frost Sequence Camera OrbitLink onlyAn orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. Idea only: The repo's CREDITS.md says…
- Gallery TunnelAn infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated color…
- Glass HeroA solid glass object rises in front of a giant headline and keeps turning, so the type bends and splits into color through it.
- Glass Shard TitleLink onlyGlass shards fly in through fog and tile themselves into the headline. Idea only: The repo's CREDITS.md says the origin of its matcap image…
- iOS 26 Liquid Glass Home Screen3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from…
- iPhone & MacBook 3D ShowcaseReal GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera…
- Liquid BackgroundOrganic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time…
- Liquid GlassA sample landing page (headline and stat cards) seen through a liquid-glass parallax layer, drawn with HTML-in-canvas and WebGL. The repo…
- 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.
- macOS Tahoe Liquid Glass Desktop3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move. The repo marks it…
- Orbit CardA single feature card orbits a dot sphere on approved Blender camera motion.
- Path-Traced 3DA three.js scene with a fast raster preview and an opt-in path-traced export, with three-gpu-pathtracer vendored beside it. In the examples…
- PortalA sample light-mode page opens through a portal into a second page: an HTML-in-canvas WebGL transition. The repo marks it experimental.
- Product TurntableA product turns a full revolution on a studio plinth in a seamless loop. Drop in a GLB or glTF model, or keep the built-in drink can with…
- ShatterA sample page breaks like glass to show the page behind it: HTML-in-canvas panels shattered in WebGL. The repo marks it experimental.
- Spiral GalaxyA spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up…
- Three Orbiting CardsA Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders. Paste-in snippet: it registers no timeline, you…
- Wireframe Portal TitleA wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.