VIDEOML / EFFECTS INDEX
Explore the catalog.
Discover the building blocks for frame-driven video. Entries show their current implementation status as the catalog grows.
Agent Cursor
An 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 a check.
Animated Bar Chart
A compact data card with deterministic bar growth and value callouts.
Arc Motion Path
A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.
ASCII Render Pass
A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.
ASCII Trail Reveal
An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.
chromatic-split
Separates color channels across the transition. Ported from the pinned Hyperframes shader.
cinematic-zoom
Zooms between scenes with a cinematic distortion. Ported from the pinned Hyperframes shader.
cross-warp-morph
Uses noise fields to warp and blend both scenes. Ported from the pinned Hyperframes shader.
domain-warp
Distorts the scene boundary with animated noise. Ported from the pinned Hyperframes shader.
Echo Smear
Distance-adaptive streak — records each element's real trajectory (position, rotation, scale, opacity), then trails time-offset copies behind it in proportion to its speed, combined by brightest pixel, so fast moves smear and slow ones stay sharp; spinning edges stay smooth
flash-through-white
Transitions through a white flash. Ported from the pinned Hyperframes shader.
glitch
Disrupts the image with digital glitch patterns. Ported from the pinned Hyperframes shader.
gravitational-lens
Warps scene pixels around a lens-like transition. Ported from the pinned Hyperframes shader.
light-leak
Reveals the next scene with a warm light leak. Ported from the pinned Hyperframes shader.
Particle Image Reveal
A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.
Particle Text Dissolve
Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.
ridged-burn
Reveals the next scene through a glowing, ridged burn. Ported from the pinned Hyperframes shader.
ripple-waves
Distorts both scenes with expanding waves. Ported from the pinned Hyperframes shader.
sdf-iris
Opens an iris-shaped reveal between scenes. Ported from the pinned Hyperframes shader.
swirl-vortex
Twists the transition through a swirling vortex. Ported from the pinned Hyperframes shader.
thermal-distortion
Distorts the image with a heat-like shimmer. Ported from the pinned Hyperframes shader.
whip-pan
Sweeps between scenes with directional motion and blur. Ported from the pinned Hyperframes shader.
3D Transitions
Showcase of 3D perspective flip and rotate transitions
3D UI Reveal
Perspective 3D reveal animation for UI elements
AI Answer Rank
Is 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: the promoted brand slides into its slot, the picks below step down, and the brand row lands with the one accent highlight and a check. For answer-engine and AI-visibility marketing
AI Chat Reveal
A 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 - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card
Anamorphic Streak Flare
A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.
Annotate Cursor
A 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 nib, then lifts and leaves.
App Showcase
Fitness app product showcase with three floating smartphone screens
Apple Money Count
Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.
Aurora
Green and violet aurora curtains ripple across a night sky. A WebGPU shader from the Shaders library (shaders.com, MIT).
Aurora Drift
Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.
Avatar Cloud
Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.
Avatar Group Hover
A distance-falloff avatar group lift with bouncy hover return
Background Emphasis Type
Oversized low-contrast background word drifting slowly behind the subject — typography as texture
Badge Pop
A transitions.dev-inspired notification badge pop with elastic scale and count reveal
Bar Chart Race
Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads
Beat Accent
A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.
Beat Freeze Cut
A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.
Beat Pulse Background
An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.
Beat Timeline
A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.
Before After Wipe
Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.
Blend Difference
Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background
Blob
A 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 Video
Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.
Blur In
An Operator Black word-level content reveal that resolves its own text from controlled blur
Blur Out Up
Words arrive clean and depart upward with increasing blur for airy exits.
Blur Transitions
Showcase of blur-based transitions between scenes
Bottom Up Letters
Splits text into letters and reveals each glyph from below with deterministic staggered timing
Browser Device Stage
A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.
Camcorder HUD
Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments
Camera Follow Captions
One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small.
Camera Punch-In
Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay
Camera Rig Depth Stack
A 3D camera-rig-style card stack with depth, parallax, and focus shift.
Camera Scan Gate
A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.
Camera Shake
Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe
Canopy Part Title
Leaves sweep through the frame and part to reveal the headline.
Card Resize
A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel
Caret Swap
A gradient caret expands over one phrase, collapses to the left, then types its replacement with a blinking caret.
Char Slam Explode
Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.
Chart Story
One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.
Chat Message
One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from
Chat Thread
The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits
ChatGPT Exchange
A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result
Chromatic Aberration Wipe
A fast slide wipe with RGB channel split on peak frames.
Chromatic Fringe Title
Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift
Chromatic Radial Split
Shader transition with chromatic aberration radial split
Chrome Orb
A mirror-chrome orb reflects a bright studio light, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Cinemagraph
A still photograph with one living region: the frame is frozen while a single feathered window keeps moving - here, steam rising over a cup - drawn from the seek time alone with a period that divides the duration, so the render loops seamlessly. Swap the placeholder scene for a freeze-frame still masked over a looping video to cinemagraph real footage.
Cinematic Zoom
Shader transition with dramatic zoom blur
Circle Carousel 1
Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots.
Circle Carousel 2
Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots.
Circle Carousel 3
Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots.
Circle Carousel 4
Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots.
Circle Carousel 5
Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots.
Claude Exchange
A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions
Clip Wipe
Left-to-right clip-path wipe reveal per word
Code 3D Extrude
Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.
Code Diff
An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
Code Highlight Sweep
A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.
Code Morph
One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.
Code Particle Assemble
Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.
Code Scroll To Line
The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.
Code Shader Dissolve
The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.
Code Slice Hero
A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.
Code Snippet - Apple Terminal Pro
Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.
Code Snippet - Dark 2026
VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
Code Snippet - Dark Modern
VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
Code Terminal Run
A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.
Code Typing
Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.
Color Wheel
A wide gradient slides slowly through the colours of the rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT).
Colorama Wipe
Headline reveal through a feathered, leaning wipe front that is blurred and colour-mapped as it passes, then settles to clean type and wipes off again — the After Effects masked-text + Compound Blur + Colorama 'shiny wipe' as a deterministic canvas effect on any text element
Comment Cards
Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips
Comparison Split
Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.
Confetti
A deterministic celebration burst with seeded particles and gravity.
Conic Progress Ring
A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.
Constellation Hub
Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.
Context Menu Cursor
A 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 out: duplicate, rename, move to trash, or a confirmation toast.
Cosmic Orb
An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.
Count Up
A token-native stat counter that eases between values, counting up or down, and lands with a restrained scale pulse.
Count-Up Stat Card
Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes
Cover Transitions
Showcase of cover/uncover slide transitions
Cross Warp Morph
Shader transition with cross-warped morphing
CTA Close
A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.
CTA Lockup
A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.
Cuboid Carousel
A chain of bevelled cuboids rides a travelling wave as a content carousel.
Cursor Glyph Trail
A tutorial cursor path: on a settings screen the arrow clicks through three steps, leaving a dotted trail spaced evenly by distance and a numbered marker at each click; each step's trail fades as the next move begins.
Curtain Reveal
Two pleated stage curtains gather outward from center, the way real velvet bunches at the tieback, revealing the stage underneath. A static pelmet frames the top; a soft spotlight can bloom in as they part.
Cut the Curve
A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.
Dart Cursor
A bold outlined arrowhead that dives in from camera depth, flies nose-first with motion blur along its path, squashes on two clicks, and whips out of frame.
Data Chart
Animated bar + line chart with staggered reveal, NYT-style typography, and value labels
Decision Tree
Animated flowchart with branching paths
Decline Chart
A metric line draws downward as its value counts down and the ambient background darkens in lockstep.
Destruction Transitions
Showcase of destructive break-apart transitions
Device Frame Stage
A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float
Directional Wipe
A directional scene push that slides one panel over another.
Dissolve Transitions
Showcase of dissolve and fade transitions
Distortion Transitions
Showcase of warp and distortion transitions
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 the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.
Domain Warp Dissolve
Shader transition with fractal noise domain warping
Drag and Drop Cursor
A 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, and the list closes the gap behind it.
Drift Hold
A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.
Dynamic Grid
A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes
Echo Trail
A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.
Editorial Emphasis
Dual-font system with dramatic size contrast for emphasis words
Editorial Flash Overlay
Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal
Emoji Pop
Emoji integration with stroked text and horizontal squeeze entrance
Exploded Stack
Isometric layer plates explode apart with a label beside each layer, hold, then collapse back into one stack. Built for architecture and system diagrams.
Extended Keyframe
The 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, exits along its arrival vector, and carries shutter motion blur — from any side or by scale, one call per element, plus the ease on its own for any tween
Extruded Logo
Beveled 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 matte.
Facet Morph
A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.
Fade Through
A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer
Falling Lines
White lines fall down the frame at varied speeds, each fading into a trail. A WebGPU shader from the Shaders library (shaders.com, MIT).
Feathered Spotlight
Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets
Filmed Screen
Your scene, filmed off a screen: perspective, depth of field that follows an element you name, LED sub-pixels and per-shot colour grades. Shots glide into each other, focus racks between elements, and the focused element stays sharp.
Flash Through White
Shader transition with white flash crossfade
Flowchart
Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
Flowchart Vertical
Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
Flowing Gradient
Bands of orange and violet flow across the frame in a smooth gradient. A WebGPU shader from the Shaders library (shaders.com, MIT).
Focus Blur Resolve
A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.
Focus Rack
Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.
Focus Swap
Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.
Fractal Noise
Soft grey fractal noise drifts across the frame like slow clouds. A WebGPU shader from the Shaders library (shaders.com, MIT).
Freeze-Frame Dressing
Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject
Frost
A frozen blue orb with frost creeping in from its edge, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Frost Sequence Camera Orbit
An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades.
Gabor Noise
Grey streaky noise drifts across the frame like a moving fingerprint. A WebGPU shader from the Shaders library (shaders.com, MIT).
Gallery Tunnel
An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.
Gesture Tap
A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.
Glass Hero
A solid glass object rises in front of a giant headline and keeps turning, so the type bends and splits into colour through it.
Glass Shard Title
Glass shards fly in through fog and tile themselves into the headline.
Glitch
Shader transition with digital glitch artifacts
Glitch RGB
RGB chromatic aberration with CRT scanline overlay
Gloss Sweep
A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.
Godrays
Rays of light fan out from a corner and drift across a deep blue field. A WebGPU shader from the Shaders library (shaders.com, MIT).
Goo
A glossy green liquid ball whose surface bulges and ripples like wet goo, centred on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Gooey Split
A dot splits into a three-dot menu with a gooey metaball neck, spins into a swirl mark under directional shutter motion blur, then breaks back into three dots and merges into one. The goo is an SVG blur-and-threshold filter on the dots; the blur integrates each part along its real trajectory, so the smear follows the direction and speed of the spin.
Grade Split Reveal
The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match.
Gradient Fill
Gradient-clipped text with elastic bounce entrance
Grain Field
A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.
Grain Overlay
Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition
Gravitational Lens
Shader transition with gravitational lensing distortion
Grid Card Assemble
N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.
Grid Pixelate Wipe
Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes
Grid Transitions
Showcase of grid-based tile transitions
Hairline Arc Gauge
Thin circular gauge that draws on while its percentage counts up; one helper call drives both
Halftone Dissolve
Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.
Halftone Field
A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.
Hand-Drawn Arrow
Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen
Hand-Drawn Boil
Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on
Hand-Drawn Box Label
Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils
Hand-Drawn Flowchart
Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list
Handwritten Title
Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils
Handwritten Write-On Title
True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils
Headline Slam
A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.
Heatmap
Thermal colours flow through a glowing orb, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
HeyGen Avatar Promo Card
A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout
Highlight
Red background sweep behind each active word, TikTok-style
Hologram
A pale blue holographic orb with scan rings and flicker, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Holographic
An iridescent foil orb with a shifting rainbow sheen, centred on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Icon Morph Beat
An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.
Icon Swap
A scale-and-blur icon swap primitive for toolbar and action state changes
Ink Bleed Reveal
Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.
Inline Highlight
A clean marker-style inline highlight that animates behind text using a CSS scale variable
Input Feedback
A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state
Instagram Follow
Animated Instagram follow overlay with profile card and follow button
iOS 26 Liquid Glass Home Screen
3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.
iPhone & MacBook 3D Showcase
Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.
Iris Reveal
A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.
Keyframe Scrub Stack
A keyframe-sequenced stack of cards with offset timing and easing presets.
Kinetic Center Build
Words enter from the right and push the growing phrase left until the final line locks centered.
Kinetic Slam
Full-screen single-word display with alternating entrance directions
Kinetic Type
Bold kinetic typography promo
Kinetic Type Swap
A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.
Lens Flare
A camera lens flare: a bright star burst and a faint rainbow halo that slowly shimmer on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Light Edge
Purple and cyan light races around the edge of an orb on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Light Leak
Shader transition with cinematic light leak overlay
Light Sweep Pass
A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.
Light Transitions
Showcase of light-based glow and flash transitions
Line Swap
A 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 same beat, with an optional accent underline drawing beneath one word of line B.
Line-by-Line Slide
Each line enters from the left with staggered slide and exits to the right.
Liquid Background
Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.
Liquid Glass
VFX composition block
Liquid Glass Notification
Frosted glass notification cards floating over an aurora shader background
Liquid Glass Widgets
Frosted glass stat cards, showcase panel and pill chips over an aurora shader background
Liquid Metal
A chrome sphere ripples and flows like molten metal on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Locked Nucleus Orbit
A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.
Logo Brand Close
A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.
Logo Intro Sequence
Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion
Logo Outro
Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill
Logo Sting
A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.
Logo Wall
A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.
Lottie Character Walk
A 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.
Lower Third — Accent Underline
Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility
Lower Third — BILD Style
News-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 Block
High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops
Lower Third — Clean Bar
Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance
Lower Third — Color Block
High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role
Lower Third — Dark Card
Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance
Lower Third — Kicker Name
Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage
Lower Third — Mask Reveal
Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage
Lower Third — Side Rule
Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage
Lower Third — Soft Pill
Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance
Lower Third — Stack Bars
Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right
macOS Notification
Animated macOS-style notification banner with app icon and message
macOS Tahoe Liquid Glass Desktop
3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.
Magnetic
VFX composition block
Magnetic Cursor
A soft dot pointer glides across an editor toolbar, is pulled into each button and morphs into its rounded hover plate while the icon leans toward it, presses one, and leaves as a dot.
Marble
Ink-dark veins wind through white in a marbled pattern that slowly shifts. A WebGPU shader from the Shaders library (shaders.com, MIT).
Marker Checklist Card
A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows
Marker Highlight
Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.
Marquee Select Cursor
A 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 counts the selection up.
Match Cut
A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.
Matrix Decode
Character scramble animation before text reveal
Matrix Decode
Random scramble resolves left-to-right into the target text.
Mechanical Transitions
Showcase of mechanical shutter and iris transitions
Menu Morph
A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus
Mesh Gradient
Soft coral, orange and violet fields blend and drift in a mesh gradient. A WebGPU shader from the Shaders library (shaders.com, MIT).
Mesh Gradient Background
A render-safe mesh gradient using animated radial layers.
Message Thread Reveal
A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message
Micro Transitions
A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions
Minimal Gradient Background
Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode
Minimal Line Graph
One 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 Morph
A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.
Morph Swap
Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.
Morph Text
Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect
Motion Blur
After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the GSAP timeline at sub-frame times and averaging equal-weight additive copies of the element along its real trajectory, so translation, scale, rotation, 3D rotation and skew all drive the smear
Multi Device Splay
Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.
Multiplayer Cursors
Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.
Native Notification Pop
One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.
Nebula
A small world of pink and blue gas swirls inside a sphere on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Neon Accent
Multi-color neon glow accents with wiggle drift animation
Neon Border
Two 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 and role.
Neon Glow
Cyan and magenta neon glow with keyword accent colors
News Ticker
Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.
North Korea Locked Down
Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.
Notes Reveal
A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist
Notes Typing
The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter
Notification Cascade
Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card
Notification Pileup
Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.
Notification Stack
1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.
Number Pop In
A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal
Number Wheel
A rolling digit counter primitive for metrics, prices, counts, and scoreboards
NYC Paris Flight
Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.
NYT Graph
Animated data chart in print editorial style
Obsidian
A dark glass orb catches pink and cyan iridescent light on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Offset Path Traveler
A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.
On-Screen Display Effect
Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display
Onboarding Stepper Flow
A composed onboarding flow with milestone rail, active step card, and next-action button
Orbit Card
A single feature card orbits a dot sphere on approved Blender camera motion.
Orbit Carousel 1
Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots.
Orbit Carousel 2
Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots.
Orbit Carousel 3
Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots.
Orbit Carousel 4
Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots.
Orbit Carousel 5
Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots.
Ordered Dither Pass
Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.
Organic Light Leak Overlay
Finite CSS light-leak overlay for memory beats and motivated transitions
Oscilloscope Trace
CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows
Other Transitions
Showcase of miscellaneous creative transitions
Outline Draw
A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.
Oversized Cursor
The 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 it so the result stays in view, then exits off-screen
Overwhelm Surround
Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.
Page Slide
A transitions.dev-inspired page slide primitive with outgoing and incoming panels
Pan Stations
A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.
Panel Reveal
A panel reveal primitive with height expansion and content fade
Paper Collage Reveal
A scrapbook patchwork of torn paper scraps, each with its own texture and tilt, flutters away in a staggered scatter to reveal the content underneath.
Parallax Device Dive
A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.
Parallax Layers
Behind-subject 3D text layering with vertical stretch effect
Parallax Unzoom
Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)
Parallax Zoom
Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition
Particle Burst
Keyword words trigger colored particle explosions
Path Carousel 1
Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image slots.
Path Carousel 2
Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image slots.
Path Carousel 3
Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image slots.
Path Carousel 4
Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image slots.
Path Carousel 5
Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image slots.
Pendulum Swing
Content hangs from a fixed pivot and swings into rest with gravity-damped oscillation, like a hanging sign settling on its hook.
Per Word Rise
Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).
Per-Word Crossfade
Words gently fade into place with a short vertical drift for calm keynote rhythm.
Perspective Marquee
A 3D tilted marquee with depth feel as items roll toward the horizon.
Physical Exit
A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.
Pill Karaoke
Pill-shaped container with per-word karaoke color highlight
Plasma
Deep violet plasma folds and churns across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
Plastic
A glossy white plastic orb with soft studio reflections, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Play Mode
Playful elastic animations
Pointer Circle + Countdown
Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick
Portal
VFX composition block
Press Ripple
A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with two small click rings while the label swaps to a check, then exits off-stage while the confirmed state holds.
Prism
A white beam of light splits into a slowly turning rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT).
Product Promo
Multi-scene product showcase with SVG assets
Product Turntable
A 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 your own label.
Pull Back Reveal
A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.
Pull to Refresh
A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.
Push In
A centered headline gains focus through one slow, continuous camera push and a gentle fade out.
Push Transitions
Showcase of push and slide transitions
Rack Focus
A 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 hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.
Radial Surround
Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.
Radial Transitions
Showcase of radial wipe and reveal transitions
Reddit Post Card
Animated Reddit post card overlay with upvotes and comments
RGB Glitch Text
RGB-offset text copies jitter briefly for a controlled glitch window.
Ridged Burn
Shader transition with ridged turbulence burn effect
Ripple Waves
Shader transition with concentric ripple wave distortion
Ripples
Concentric rings ripple outward from the centre, white on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Rounded Media Grid
N-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 settle
Rubber Band Bumper
An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.
Scale Transitions
Showcase of scale and zoom transitions
Scan Band
A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.
Scanline Board Background
Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title
Scramble Reveal
A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.
Screen Flow Carousel
Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.
Scribble Callout Circle
Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils
Scribble Transition
Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears
Scroll Camera Story
A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.
Scroll Feed
A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.
SDF Iris
Shader transition with signed distance field iris reveal
Segmentation Flood
Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.
Separator
A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal
Settings Toggle Flow
A composed settings flow with preference rows, toggle switches, and active-state feedback
Share-Sheet Carousel
A 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 swaps behind it, ending on an accept tap
Shared Axis Y
Per-word vertical shared-axis transition for sharp editorial swaps.
Shared Axis Z
Scale-based shared-axis transition for focus shifts and context depth.
Shatter
VFX composition block
Sheet Spring-Up
A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease
Shimmer Sweep
Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals
Shutter Slam
One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn about each axis — on the measured easing of the After Effects export the shutter model was fitted to
Signup Flow
A composed signup flow with social action, email field, password field, and submit button
Sine Wave
A glowing white sine wave travels across a black frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
Skeleton Reveal
A skeleton loader transition that pulses, then cross-fades into content
Sketched Frame
Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)
Slack Notification Ad
A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff
Slit Scan Reveal
The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.
Slot Machine Roll
A vertical reel scrolls characters from one value to another.
Snow
Seek-safe falling-snow overlay: sparse or dense flakes drift down with size, speed and opacity correlated per flake for depth, radial-masked so the frame center stays clear
Social Proof Card
The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup
Soft Blob Touch
A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.
Soft Blur In
A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts
Spain Map
Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection
Specs Checklist
Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes
Speech Bubble
Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils
Spiral
A bold black and white spiral turns in the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
Spiral Galaxy
A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own.
Split Tilt Cards
Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.
Split-Flap Board
Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.
Spotify Now Playing
Animated Spotify now-playing card with album art and progress bar
Spotlight Card
A card with a scripted cursor spotlight and lit border.
Spring Pop
A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.
Spring Stack Shuffle
A 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 compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.
Squiggle Marks
Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on
Stagger Cascade
A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.
Stagger Lattice
A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.
Staggered Fade Up
Words fade in and slide up one after another with configurable delay.
Star Rating Fill
A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.
Starfield
Seek-safe night-sky overlay: sparse or dense stars in three size tiers that twinkle and drift in two parallax layers, radial-masked to keep the frame center clear
State Chip Rail
A 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, pending chips hollow, optional badges pop beside one state.
Sticky Mock Swap
A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.
Stitched Text Draw
Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.
Stop Motion Cadence
The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.
Store Badge Lockup
Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.
Strands
Thin ribbons of pink and blue light weave across a black field. A WebGPU shader from the Shaders library (shaders.com, MIT).
Streaming Text
Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter
Strikethrough Replace
Draw a strike line across old text, then reveal the replacement.
Stripes
Bold black and white diagonal stripes slide across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
Success Check
A success check primitive with ring pop, path draw, and subtle rotate blur
Sun Burst
Cream and black rays fan out from the centre and slowly turn. A WebGPU shader from the Shaders library (shaders.com, MIT).
SVG Line Draw Loader
An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.
SVG Mask Reveal
A soft token-colored sweep reveals media only through an editable SVG wordmark mask.
SVG Stroke Trace
An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.
Swipe Rail
A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.
Swirl
Orange and blue color fields swirl and flow into each other across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
Swirl Vortex
Shader transition with swirling vortex distortion
Swiss Grid
Structured grid layout
Tabs Slide Indicator
A pill indicator transition that slides between active tabs
Telemetry HUD
Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.
Terminal Simulator
A terminal window types commands and streams log output.
Testimonial Card
Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.
Testimonial Proof Card
A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.
Text + Circle Carousel 1
A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 1).
Text + Circle Carousel 2
A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 2).
Text + Circle Carousel 3
A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 3).
Text + Circle Carousel 4
A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 4).
Text + Circle Carousel 5
A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 5).
Text Along a Path
Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input
Text Clone Wall Transition
Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered
Text Match Cut
One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide.
Text Select Cursor
An arrow turns into an I-beam over a document, drags a selection across a phrase character by character, raises a format toolbar, turns back into an arrow and clicks Bold.
Text Shimmer
A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.
Text Stagger
A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words
Text State Swap
A text state swap primitive with outgoing blur and incoming lift
Texture
Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable
Texture Mask Text
CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps
Thermal Distortion
Shader transition with heat haze thermal distortion
Thin Film
An orb's rim shimmers with soap-bubble iridescence on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Thread Message Stack
A source-owned editable conversation stack with arbitrary incoming and outgoing messages
Three Orbiting Cards
A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.
Ticker Takeover
A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.
TikTok Follow
Animated TikTok follow overlay with profile card and follow button
Tilt Card
A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax
Titlecard Calm
A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.
Titlecard Lockup
The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.
Toggle Flip
An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.
Top-Down Letters
Letters descend from above in a pronounced staircase with zero blur.
Torn Paper Rip
A fibrous paper tear runs across the frame: the torn sheet shows its white paper core along the edge and lifts away on a soft shadow, leaving the next scene standing.
Touch Indicator
A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass on the frame the host target responds, then lifts. Tap or swipe, picked by variable.
Tracing Beam
A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.
Tracking In
A precise letter-spacing reveal for premium headings and interface labels
Trust Strip
A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.
Type Match Cut
A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.
Typed Prompt
A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.
Typewriter
Character-by-character text reveal with a deterministic blinking cursor.
Typing Indicator
The 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 is coming, and vanishes when the message lands
UI Focus Zoom
A 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, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.
US Bubble Map
Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map
US Flow Map
Animated connection arcs between US cities over a base map — composable origin-destination flow visualization
US Hex Grid Map
Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label
US Map
Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP
Variable Axis Type
A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.
Variable Font Flex
A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.
Vector Editor Rig
A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.
Velocity Throw Snap
A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.
Vertical Media Filler
Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)
VFX Text Cursor
Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.
Vignelli
Bold typography with red accents
Vignette
Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center
Vision Carousel 1
A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 1); 12 image slots.
Vision Carousel 2
A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 2); 12 image slots.
Vision Carousel 3
A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 3); 12 image slots.
Vision Carousel 4
A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 4); 12 image slots.
Vision Carousel 5
A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 5); 12 image slots.
Voronoi
Magenta cells with glowing blue centres shift and reshape across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).
Vox Annotate
The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.
VPN YouTube Spot
Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.
Warm Grain
Cream aesthetic with grain texture
Water
A sphere of wind-rippled water reflecting a blue sky, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).
Waveform
Equalizer bars in a blue to pink gradient pulse across the middle of the frame, like an audio visualizer. A WebGPU shader from the Shaders library (shaders.com, MIT).
Week in Merges
Each author's avatar bounces across their row at a speed set by how many pull requests they merged
Weight Shift
Elegant font-weight transition between caption lines
Weight Wave
A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.
Whip Pan
Shader transition simulating a fast camera whip pan
Whip Pan Cut
A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.
Whiteboard Ink
A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.
Wireframe Portal Title
A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.
Word-Sweep Highlight
A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover
Wordmark Tiles
A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.
World Map
Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection
Worley Noise
A field of drifting cells, light at their centres and dark at their edges. A WebGPU shader from the Shaders library (shaders.com, MIT).
X Follow Card
A social follow card with avatar, handle, and follower motion.
X Post Card
Animated X/Twitter post card overlay with engagement metrics
YouTube Lower Third
Animated YouTube subscribe lower third with avatar and channel info
Zoom Follow Cursor
Screen-recording auto-zoom: the camera pushes in toward each upcoming click, trails the cursor on a smooth spring, marks every click with a press and a ring, then eases back out to the full screen as the cursor leaves.
Zoom Through Transition
A transition that zooms through a focal card into the next scene.