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 51 of 511Show everything
HTML to video
- 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…
- 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.
- Badge PopA transitions.dev-inspired notification badge pop with elastic scale and count reveal. Paste-in snippet: it registers no timeline, you wire…
- 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 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…
- Context Menu CursorA cursor right-clicks a file, a context menu blooms from its tip, the hover highlight tracks the item under it, and the chosen action plays…
- Cursor Glyph TrailA tutorial cursor path: on a settings screen the arrow clicks through three steps, leaving a dotted trail spaced evenly by distance and a…
- Dart CursorA bold outlined arrowhead that dives in from camera depth, flies nose-first with motion blur along its path, squashes on two clicks, and…
- Dolly Zoom (Vertigo Shot)Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while…
- Drag and Drop CursorA cursor grabs a task card, lifts and tilts it into its motion, carries it in lockstep to an empty column, drops it with a small settle…
- Drift HoldA centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.
- Extended KeyframeThe never-fully-lands arrival: an element covers most of its move in the first fifth of the duration and creeps the rest to the last frame…
- Focus RackFocus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.
- Focus SwapMoves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.
- Gesture TapA contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.
- Icon Morph BeatAn icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.
- Icon SwapA scale-and-blur icon swap primitive for toolbar and action state changes. Paste-in snippet: it registers no timeline, you wire it into…
- Input FeedbackA transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state. Paste-in snippet: it registers no…
- Magnetic CursorA soft dot pointer glides across an editor toolbar, is pulled into each button and morphs into its rounded hover plate while the icon leans…
- Marquee Select CursorA cursor drags a selection rectangle across a photo grid; each tile rings and pops a check the frame the rectangle touches it, while a pill…
- Menu MorphA transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus. Paste-in snippet: it registers no timeline…
- Micro TransitionsA transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions. Paste-in snippet: it…
- Modal MorphA small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only…
- Multiplayer CursorsLabeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live…
- Offset Path TravelerA slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.
- Oversized CursorThe look-here pointer for a video: the macOS arrow at 3.5x its normal size lands its tip on one control, clicks it on, settles just below…
- Pan StationsA lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.
- Panel RevealA panel reveal primitive with height expansion and content fade. Paste-in snippet: it registers no timeline, you wire it into your own.
- Pendulum SwingContent hangs from a fixed pivot and swings into rest with gravity-damped oscillation, like a hanging sign settling on its hook. Paste-in…
- Physical ExitA card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose…
- Press RippleA cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases…
- Pull Back RevealA tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.
- Pull to RefreshA mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps…
- Push InA centered headline gains focus through one slow, continuous camera push and a gentle fade out.
- Rack FocusA focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into…
- Scroll Camera StoryA compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at…
- Skeleton RevealA skeleton loader transition that pulses, then cross-fades into content. Paste-in snippet: it registers no timeline, you wire it into your…
- Spring PopA badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.
- Success CheckA success check primitive with ring pop, path draw, and subtle rotate blur. Paste-in snippet: it registers no timeline, you wire it into…
- SVG Line Draw LoaderAn Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline. Paste-in snippet: it registers no timeline, you wire…
- SVG Stroke TraceAn authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.
- Swipe RailA contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.
- Tabs Slide IndicatorA pill indicator transition that slides between active tabs. Paste-in snippet: it registers no timeline, you wire it into your own.
- Text Select CursorAn arrow turns into an I-beam over a document, drags a selection across a phrase character by character, raises a format toolbar, turns…
- Tilt CardA transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax. Paste-in snippet: it registers no timeline, you…
- Touch IndicatorA translucent contact-circle gesture actor for mobile UI scenes: it touches the glass on the frame the host target responds, then lifts…
- UI Focus ZoomA full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state…
- Zoom Follow CursorScreen-recording auto-zoom: the camera pushes in toward each upcoming click, trails the cursor on a smooth spring, marks every click with a…