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 69 of 511Show everything
HTML to video
- 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.
- Beat AccentA single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.
- Camcorder HUDResponsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments.
- 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…
- Comment CardsSocial comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips.
- ConfettiA deterministic celebration burst with seeded particles and gravity. Paste-in snippet: it registers no timeline, you wire it into your own.
- Echo SmearDistance-adaptive streak — records each element's real trajectory (position, rotation, scale, opacity), then trails time-offset copies…
- Echo TrailA moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes…
- Editorial Flash OverlayFinite neutral-warm light layers for a seek-safe camera-flash cut or social reveal.
- Facet MorphA faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat…
- Filmed ScreenYour scene, filmed off a screen: perspective, depth of field that follows an element you name, LED sub-pixels and per-shot color grades…
- Freeze-Frame DressingTimeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject.
- FrostA frozen blue orb with frost creeping in from its edge, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Gloss SweepA card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.
- GooA glossy green liquid ball whose surface bulges and ripples like wet goo, centerd on black. A WebGPU shader from the Shaders library…
- Grain OverlayAnimated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition. Paste-in snippet: it…
- Hand-Drawn BoilHand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash.
- HeatmapThermal colors flow through a glowing orb, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- HologramA pale blue holographic orb with scan rings and flicker, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- HolographicAn iridescent foil orb with a shifting rainbow sheen, centerd on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Ink Bleed RevealLiquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath…
- Instagram FollowAnimated Instagram follow overlay with profile card and follow button. Copies the look of Instagram; that brand is theirs.
- Light EdgePurple and cyan light races around the edge of an orb on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Light Sweep PassA traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and…
- Liquid MetalA chrome sphere ripples and flows like molten metal on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- macOS NotificationAnimated macOS-style notification banner with app icon and message. Copies the look of macOS; that brand is theirs.
- MagneticA sample page whose pixels bend toward a moving cursor dot: a magnetic warp shader over HTML-in-canvas. The repo marks it experimental.
- Motion BlurAfter Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the…
- Native Notification PopOne system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft…
- NebulaA small world of pink and blue gas swirls inside a sphere on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- ObsidianA dark glass orb catches pink and cyan iridescent light on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- On-Screen Display EffectGrid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display.
- Ordered Dither PassBayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or…
- Organic Light Leak OverlayFinite CSS light-leak overlay for memory beats and motivated transitions.
- Oscilloscope TraceCRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau)…
- Particle Image RevealA seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image…
- PlasticA glossy white plastic orb with soft studio reflections, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Reddit Post CardAnimated Reddit post card overlay with upvotes and comments. Copies the look of Reddit; that brand is theirs.
- Segmentation FloodMachine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a…
- Sheet Spring-UpA bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting…
- Shutter SlamOne word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn…
- Slit Scan RevealThe frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t…
- SnowSeek-safe falling-snow overlay: sparse or dense flakes drift down with size, speed and opacity correlated per flake for depth…
- Soft Blob TouchA granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction…
- Spotify Now PlayingAnimated Spotify now-playing card with album art and progress bar. Copies the look of Spotify; that brand is theirs.
- Spotlight CardA card with a scripted cursor spotlight and lit border. Paste-in snippet: it registers no timeline, you wire it into your own.
- StarfieldSeek-safe night-sky overlay: sparse or dense stars in three size tiers that twinkle and drift in two parallax layers, radial-masked to keep…
- Stop Motion CadenceThe stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion.
- Telemetry HUDQuiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout…
- Thin FilmAn orb's rim shimmers with soap-bubble iridescence on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- TikTok FollowAnimated TikTok follow overlay with profile card and follow button. Copies the look of TikTok; that brand is theirs.
- Typing IndicatorThe three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply…
- VignetteCinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center. Paste-in snippet: it…
- WaterA sphere of wind-rippled water reflecting a blue sky, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- WaveformEqualizer bars in a blue to pink gradient pulse across the middle of the frame, like an audio visualizer. A WebGPU shader from the Shaders…
- X Follow CardA social follow card with avatar, handle, and follower motion. Paste-in snippet: it registers no timeline, you wire it into your own…
- X Post CardAnimated X/Twitter post card overlay with engagement metrics. Copies the look of X; that brand is theirs.
three.js and WebGL
- 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…
- PortalA sample light-mode page opens through a portal into a second page: an HTML-in-canvas WebGL transition. The repo marks it experimental.
- ShatterA sample page breaks like glass to show the page behind it: HTML-in-canvas panels shattered in WebGL. The repo marks it experimental.
Agent skills
- figma (on demand)Bring a Figma file into a HyperFrames film: layers as SVG or PNG, brand tokens as variables, frames as editable HTML, and storyboard frames…
- hyperframes-registry (core skill)How to search and install the registry, 13 files: catalog --query, add, wiring a component, and the bar a new component has to meet…
- media treatment recipesAbout 18 written recipes for changing how footage or a still looks or reveals (freeze frame, cutout, light leak, camcorder, dither and so…
- remotion-to-hyperframes (on demand)Moves a Remotion composition OUT of Remotion and into HyperFrames. It is instructions for an agent plus a source linter, not a converter…
- reverse-any-video (on demand, Pro)Rebuild any video file as an editable HyperFrames project and check it against the original frame by frame. A paid HyperFrames Pro feature…
Tools
- dither.mjsError-diffusion dither for an image or an MP4, with 16 named palettes. No network.
- lint_source.py (Remotion source linter)Scans a Remotion project and lists what blocks a move to HyperFrames (useState, useEffect with deps, async calculateMetadata, React UI…