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 426 of 511Show everything
HTML to video
- 3D TransitionsShowcase of 3D perspective flip and rotate transitions. A reel of several transitions, not one drop-in: lift the one you want.
- 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…
- AI Answer RankIs your brand in the AI answer? A question types into a chat card, the assistant answers with a ranked list of three picks, then re-ranks…
- AI Chat RevealA question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm -…
- Anamorphic Streak FlareA drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. The…
- Animated Bar ChartA compact data card with deterministic bar growth and value callouts. Paste-in snippet: it registers no timeline, you wire it into your own.
- Annotate CursorA marker pen glides onto the frame and hand-draws a loose loop, an underline, or an arrow around a region, the ink laid exactly under its…
- App ShowcaseFitness app product showcase with three floating smartphone screens.
- Apple Money CountApple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound. Credited to Stronkter.
- Arc Motion PathA GSAP MotionPath primitive that flies a callout along a curved arc with autorotation. Paste-in snippet: it registers no timeline, you wire…
- 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.
- 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.
- Avatar CloudLettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.
- 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.
- Background Emphasis TypeOversized low-contrast background word drifting slowly behind the subject — typography as texture.
- Badge PopA transitions.dev-inspired notification badge pop with elastic scale and count reveal. Paste-in snippet: it registers no timeline, you wire…
- Bar Chart RaceRanked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to…
- Beat AccentA single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.
- Beat Freeze CutA beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.
- Beat Pulse BackgroundAn accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.
- Beat TimelineA paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds…
- Before After WipeTwo full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests…
- Blend DifferenceAuto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background. Paste-in snippet: it…
- 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).
- Blue Sweater Intro VideoLink onlyWarm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_. Credited to Joe Sai. Idea only: It is a named…
- 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…
- Blur TransitionsShowcase of blur-based transitions between scenes. A reel of several transitions, not one drop-in: lift the one you want.
- Bottom Up LettersSplits text into letters and reveals each glyph from below with deterministic staggered timing. Paste-in snippet: it registers no timeline…
- Browser Device StageA generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a…
- Camcorder HUDResponsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments.
- Camera Follow CaptionsOne sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows…
- 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 Scan GateA camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.
- 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…
- 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.
- Chart StoryOne chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a…
- Chat MessageOne message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. Credited to Miao Yang.
- Chat ThreadThe measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage…
- ChatGPT ExchangeA portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the…
- Chromatic Aberration WipeA fast slide wipe with RGB channel split on peak frames. Paste-in snippet: it registers no timeline, you wire it into your own.
- Chromatic Fringe TitleDisplay title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift.
- Chromatic Radial SplitDemo card for the chromatic-split shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is…
- 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…
- Cinematic ZoomDemo card for the cinematic-zoom shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is…
- Circle Carousel 1Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots. Credited…
- Circle Carousel 2Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots. Credited…
- Circle Carousel 3Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots. Credited…
- Circle Carousel 4Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots. Credited…
- Circle Carousel 5Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots. Credited…
- Claude ExchangeA portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations…
- Clip WipeLeft-to-right clip-path wipe reveal per word.
- Code DiffAn edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
- Code Highlight SweepA highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.
- Code MorphOne snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a…
- Code Scroll To LineThe camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.
- Code Slice HeroA tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.
- Code Snippet - Apple Terminal ProApple Terminal Pro profile: black background with gray text and lime green cursor, per-character typing animation of a shell session…
- Code Snippet - Dark 2026VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs…
- Code Snippet - Dark ModernVS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs…
- Code Terminal RunA token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a…
- Code TypingToken-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.
- Color WheelA wide gradient slides slowly through the colors of the rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT).
- 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…
- Comment CardsSocial comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips.
- Comparison SplitTwo full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and…
- ConfettiA deterministic celebration burst with seeded particles and gravity. Paste-in snippet: it registers no timeline, you wire it into your own.
- Conic Progress RingA token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.
- Constellation HubFeature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.
- 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…
- Cosmic OrbAn iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass…
- Count UpA token-native stat counter that eases between values, counting up or down, and lands with a restrained scale pulse.
- Count-Up Stat CardBig-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes.
- Cover TransitionsShowcase of cover/uncover slide transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Cross Warp MorphDemo card for the cross-warp-morph shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is…
- CTA CloseA display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot…
- CTA LockupA canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with…
- 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…
- Curtain RevealTwo pleated stage curtains gather outward from center, the way real velvet bunches at the tieback, revealing the stage underneath. A static…
- Cut the CurveA velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject…
- 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…
- Data ChartAnimated bar + line chart with staggered reveal, NYT-style typography, and value labels.
- Decline ChartA metric line draws downward as its value counts down and the ambient background darkens in lockstep.
- Destruction TransitionsShowcase of destructive break-apart transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Device Frame StageA phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage…
- Directional WipeA directional scene push that slides one panel over another. Paste-in snippet: it registers no timeline, you wire it into your own.
- Dissolve TransitionsShowcase of dissolve and fade transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Distortion TransitionsShowcase of warp and distortion transitions. A reel of several transitions, not one drop-in: lift the one you want.
- 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…
- Domain Warp DissolveDemo card for the domain-warp shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not…
- 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.
- Dynamic GridA responsive animated grid background driven by CSS variables for SaaS, code, and data scenes. Paste-in snippet: it registers no timeline…
- 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 EmphasisDual-font system with dramatic size contrast for emphasis words.
- Editorial Flash OverlayFinite neutral-warm light layers for a seek-safe camera-flash cut or social reveal.
- Emoji PopEmoji integration with stroked text and horizontal squeeze entrance.
- 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…
- Facet MorphA faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat…
- Fade ThroughA calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer. Paste-in snippet: it registers no…
- 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).
- Feathered SpotlightDims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets.
- 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…
- Flash Through WhiteDemo card for the flash-through-white shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card…
- FlowchartAnimated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction.
- Flowchart VerticalPortrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction.
- Flowing GradientBands of orange and violet flow across the frame in a smooth gradient. A WebGPU shader from the Shaders library (shaders.com, MIT).
- 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…
- 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.
- Fractal NoiseSoft gray fractal noise drifts across the frame like slow clouds. A WebGPU shader from the Shaders library (shaders.com, MIT).
- 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).
- Gabor NoiseGray streaky noise drifts across the frame like a moving fingerprint. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Gesture TapA contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.
- GlitchDemo card for the glitch shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a…
- Glitch RGBRGB chromatic aberration with CRT scanline overlay.
- Gloss SweepA card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.
- 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).
- GooA glossy green liquid ball whose surface bulges and ripples like wet goo, centerd on black. A WebGPU shader from the Shaders library…
- Gooey SplitA dot splits into a three-dot menu with a gooey metaball neck, spins into a swirl mark under directional shutter motion blur, then breaks…
- Grade Split RevealThe same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare…
- Gradient FillGradient-clipped text with elastic bounce entrance.
- Grain FieldA clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.
- Grain OverlayAnimated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition. Paste-in snippet: it…
- Gravitational LensDemo card for the gravitational-lens shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card…
- Grid Card AssembleN capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a…
- Grid Pixelate WipeTransition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes. Paste-in…
- Grid TransitionsShowcase of grid-based tile transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Hairline Arc GaugeThin circular gauge that draws on while its percentage counts up; one helper call drives both.
- Halftone DissolveScene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into…
- 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…
- Hand-Drawn ArrowWobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a…
- 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.
- Hand-Drawn Box LabelWobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true…
- Hand-Drawn FlowchartWobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list.
- 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…
- HeatmapThermal colors flow through a glowing orb, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- HeyGen Avatar Promo CardLink onlyA portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout. Credited to HeyGen. Idea…
- HighlightRed background sweep behind each active word, TikTok-style.
- 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).
- 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…
- Ink Bleed RevealLiquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath…
- Inline HighlightA clean marker-style inline highlight that animates behind text using a CSS scale variable. Paste-in snippet: it registers no timeline, you…
- Input FeedbackA transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state. Paste-in snippet: it registers no…
- Instagram FollowAnimated Instagram follow overlay with profile card and follow button. Copies the look of Instagram; that brand is theirs.
- Iris RevealA circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register…
- Keyframe Scrub StackA keyframe-sequenced stack of cards with offset timing and easing presets. Paste-in snippet: it registers no timeline, you wire it into…
- 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 SlamFull-screen single-word display with alternating entrance directions.
- 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.
- 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…
- 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 LeakDemo card for the light-leak shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a…
- 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…
- Light TransitionsShowcase of light-based glow and flash transitions. A reel of several transitions, not one drop-in: lift the one you want.
- 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…
- Liquid MetalA chrome sphere ripples and flows like molten metal on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Locked Nucleus OrbitA fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.
- Logo Brand CloseA display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and…
- Logo Intro SequenceLogo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion.
- Logo OutroCinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill.
- Logo StingA wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.
- Logo WallA trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.
- Lottie Character WalkA jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP. Item…
- Lower Third — Accent UnderlineCardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility.
- Lower Third — BILD StyleNews-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.
- Lower Third — Bold BlockHigh-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops.
- Lower Third — Clean BarMinimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance.
- Lower Third — Color BlockHigh-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role.
- Lower Third — Dark CardCharcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance.
- Lower Third — Kicker NameCardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage.
- Lower Third — Mask RevealCardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage.
- Lower Third — Side RuleCardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage.
- Lower Third — Soft PillRounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance.
- Lower Third — Stack BarsTwo stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right.
- 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.
- 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…
- MarbleInk-dark veins wind through white in a marbled pattern that slowly shifts. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Marker Checklist CardA hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks…
- Marker HighlightDisplay text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on…
- 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…
- Match CutA circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.
- Matrix DecodeCharacter scramble animation before text reveal.
- Matrix DecodeRandom scramble resolves left-to-right into the target text. Paste-in snippet: it registers no timeline, you wire it into your own.
- Mechanical TransitionsShowcase of mechanical shutter and iris transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Menu MorphA transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus. Paste-in snippet: it registers no timeline…
- 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.
- Message Thread RevealA full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with…
- Micro TransitionsA transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions. Paste-in snippet: it…
- Minimal Gradient BackgroundProcedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable…
- Minimal Line GraphOne or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend.
- Modal MorphA small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only…
- Morph SwapTwo slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin…
- Morph TextGooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect.
- Motion BlurAfter Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the…
- Multi Device SplayPhone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.
- Multiplayer CursorsLabeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live…
- 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).
- Neon AccentMulti-color neon glow accents with wiggle drift animation.
- Neon BorderTwo arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name…
- Neon GlowCyan and magenta neon glow with keyword accent colors.
- News TickerPremium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.
- North Korea Locked DownRealistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash. Credited to Stronkter.
- Notes RevealA personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves…
- Notes TypingThe notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke…
- Notification CascadePhone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack…
- Notification PileupMobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.
- Notification Stack1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the…
- Number Pop InA transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal. Paste-in snippet: it registers no timeline, you wire…
- Number WheelA rolling digit counter primitive for metrics, prices, counts, and scoreboards. Paste-in snippet: it registers no timeline, you wire it…
- NYC Paris FlightApple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects. Credited to…
- ObsidianA dark glass orb catches pink and cyan iridescent light on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Offset Path TravelerA slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.
- 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.
- Onboarding Stepper FlowA composed onboarding flow with milestone rail, active step card, and next-action button. Paste-in snippet: it registers no timeline, you…
- Orbit Carousel 1Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots…
- Orbit Carousel 2Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots…
- Orbit Carousel 3Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots…
- Orbit Carousel 4Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots…
- Orbit Carousel 5Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots…
- 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)…
- Other TransitionsShowcase of miscellaneous creative transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Outline DrawA rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.
- 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…
- Overwhelm SurroundTasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial…
- Page SlideA transitions.dev-inspired page slide primitive with outgoing and incoming panels. Paste-in snippet: it registers no timeline, you wire it…
- 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.
- Paper Collage RevealA scrapbook patchwork of torn paper scraps, each with its own texture and tilt, flutters away in a staggered scatter to reveal the content…
- Parallax Device DiveA canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.
- Parallax LayersBehind-subject 3D text layering with vertical stretch effect.
- Parallax UnzoomReveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom). Paste-in…
- Parallax ZoomCenter card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition. Paste-in snippet…
- Particle BurstKeyword words trigger colored particle explosions.
- Particle Image RevealA seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image…
- Particle Text DissolveText assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at…
- Path Carousel 1Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image…
- Path Carousel 2Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image…
- Path Carousel 3Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image…
- Path Carousel 4Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image…
- Path Carousel 5Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image…
- 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…
- 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.
- Physical ExitA card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose…
- Pill KaraokePill-shaped container with per-word karaoke color highlight.
- PlasmaDeep violet plasma folds and churns across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
- PlasticA glossy white plastic orb with soft studio reflections, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Pointer Circle + CountdownDraw-on annotation ellipse around a target plus a countdown chip that pulses each tick.
- Press RippleA cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases…
- PrismA white beam of light splits into a slowly turning rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT).
- 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.
- Push TransitionsShowcase of push and slide transitions. A reel of several transitions, not one drop-in: lift the one you want.
- 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…
- Radial SurroundLabeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim…
- Radial TransitionsShowcase of radial wipe and reveal transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Reddit Post CardAnimated Reddit post card overlay with upvotes and comments. Copies the look of Reddit; that brand is theirs.
- 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.
- Ridged BurnDemo card for the ridged-burn shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not…
- Ripple WavesDemo card for the ripple-waves shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not…
- RipplesConcentric rings ripple outward from the center, white on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Rounded Media GridN-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow…
- Rubber Band BumperAn outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel…
- Scale TransitionsShowcase of scale and zoom transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Scan BandA diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.
- Scanline Board BackgroundTextured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and…
- Scramble RevealA deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.
- Screen Flow CarouselTwo to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw…
- Scribble Callout CircleWobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the…
- Scribble TransitionOverlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears.
- 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…
- Scroll FeedA loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.
- SDF IrisDemo card for the sdf-iris shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a…
- Segmentation FloodMachine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a…
- SeparatorA one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal. Paste-in snippet: it registers no…
- Settings Toggle FlowA composed settings flow with preference rows, toggle switches, and active-state feedback. Paste-in snippet: it registers no timeline, you…
- Share-Sheet CarouselA share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground…
- 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…
- 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…
- Shimmer SweepAnimated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals. Paste-in snippet: it…
- Shutter SlamOne word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn…
- Signup FlowA composed signup flow with social action, email field, password field, and submit button. Paste-in snippet: it registers no timeline, you…
- Sine WaveA glowing white sine wave travels across a black frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Skeleton RevealA skeleton loader transition that pulses, then cross-fades into content. Paste-in snippet: it registers no timeline, you wire it into your…
- Sketched FrameMedia in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block…
- Slack Notification AdLink onlyA portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff. Copies the look of Slack; that brand…
- 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…
- Slot Machine RollA vertical reel scrolls characters from one value to another. Paste-in snippet: it registers no timeline, you wire it into your own.
- SnowSeek-safe falling-snow overlay: sparse or dense flakes drift down with size, speed and opacity correlated per flake for depth…
- Social Proof CardThe app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet…
- 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…
- Soft Blur InA soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts. Paste-in snippet: it registers no timeline, you…
- Spain MapAnimated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection.
- Specs ChecklistLeft-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes.
- Speech BubbleHand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils.
- SpiralA bold black and white spiral turns in the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
- Split Tilt CardsTwo equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges…
- Split-Flap BoardSolari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on…
- 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.
- Spring PopA badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.
- Spring Stack ShuffleA stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest…
- Squiggle MarksHand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on.
- Stagger CascadeA responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the…
- Stagger LatticeA staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames. Paste-in snippet: it registers no…
- 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.
- Star Rating FillA token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.
- 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…
- State Chip RailA rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim…
- Sticky Mock SwapA pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.
- Stitched Text DrawText drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns…
- Stop Motion CadenceThe stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion.
- Store Badge LockupSettles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action. Copies the…
- StrandsThin ribbons of pink and blue light weave across a black field. A WebGPU shader from the Shaders library (shaders.com, MIT).
- 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.
- StripesBold black and white diagonal stripes slide across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
- 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…
- Sun BurstCream and black rays fan out from the center and slowly turn. A WebGPU shader from the Shaders library (shaders.com, MIT).
- 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 Mask RevealA soft token-colored sweep reveals media only through an editable SVG wordmark mask.
- 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.
- SwirlOrange and blue color fields swirl and flow into each other across the whole frame. A WebGPU shader from the Shaders library (shaders.com…
- Swirl VortexDemo card for the swirl-vortex shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not…
- Tabs Slide IndicatorA pill indicator transition that slides between active tabs. Paste-in snippet: it registers no timeline, you wire it into your own.
- Telemetry HUDQuiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout…
- Terminal SimulatorA terminal window types commands and streams log output. Paste-in snippet: it registers no timeline, you wire it into your own.
- Testimonial CardReveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.
- Testimonial Proof CardA quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and…
- 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 Clone Wall TransitionOverlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while…