Components

Per-word slide-up from a clipping mask, with spring damping and stagger. Each word emerges from beneath an invisible bottom edge, so glyphs appear to be cut by a hard line until they snap into place. Editorial/award-show typography feel.

Attributed testimonial: an oversized accent quote mark drops in with weight, the quote reveals word-by-word on a masked rise, an accent rule draws, and the attribution fades up. Idles on a quiet hold with a breathing mark.

The launch-video staple: a big number counts up and LANDS — expo-eased so the final digits settle, tabular numerals (no jitter), an accent underline that draws in as the count completes and glows gently at idle, and an uppercase label that rises in after. "$2M ARR", "10k+ users", "99.99% uptime".

THE AI visual: a response streams in token-by-token on an irregular, human-feeling cadence — deterministic jitter with occasional micro-pauses, each token fading up, a block cursor pulsing at the head. On completion the cursor blinks twice and fades. Running text, not a terminal gimmick (that is typewriter).

Single line of text fades in from a heavy gaussian blur into sharp focus. The "focus pull" feel makes it ideal for cinematic title cards, brand reveals, and product taglines where the audience should land on one phrase.

Full-screen title card with cinematic letterbox bars sliding in, primary text fading up, and optional subtitle. Three variants tune the entrance physics: default (subtle), bold (heavy spring), zoom (scale-from-blur with overshoot).

Single sentence with one word color-shifting from a muted base color to a brand accent. The eye lands on the highlighted word naturally because the surrounding text fades to background.

Per-word motion typography with four animation styles. Each word springs in with stagger, bringing energy and pace to multi-word phrases. Different from staggered-fade-up: words have actual rotation/scale dynamics, not just position+fade.

Broadcast-style speaker identification bar at the lower-left. Spring slide-in from the left, spring slide-out at end. Three variants for different aesthetics: classic (TV news split-bar), modern (rounded accent block), cinematic (translucent with accent stripe).

A highlighter-style colored bar sweeps across a phrase, leaving a marker background behind it. Feels like physically marking up a transcript or note.

Per-character scramble that resolves left-to-right into the final text. Each glyph cycles through a charset of symbols before snapping to its true character. Hacker/cypherpunk aesthetic — feels like the system is being decrypted in real time.

A bright shine sweeps left-to-right across the text, briefly catching like light on metal. Subtle motion that adds polish without competing with the content.

Per-column vertical roll from a starting value to an ending value, like a slot reel landing. Each column springs in with stagger, so the rightmost digits land last. Feels like a counter, scoreboard, or price update.

Words rise into view one at a time, each fading in with an upward translation. Reads as deliberate, considered prose — every word lands.

Draws a strikethrough across the `from` text, then fades it to the `to` text in place. Three phases: line draws (0–40%), crossfade with slight rise (40–60%), hold (60–100%). Communicates "this, not that" — myth-busting, before/after, correction.

Cross-fade between two strings on the same line without layout shift. The first text fades out exactly as the second fades in, both centered on the same baseline.

Letters start spread apart and slightly blurred, then condense into final position with sharp focus. The "from-distance-into-place" feel.

Character-by-character text reveal with a deterministic blinking cursor. The classic terminal/typing aesthetic — feels like the audience is reading along as it types.

Standalone wipe with RGB-channel split chromatic aberration at the boundary. Feels digital, slightly broken, on-the-edge. The aberration peaks mid-transition then resolves clean.

Self-contained before/after code reveal: two code panes stacked, with a clipped wipe revealing AFTER over BEFORE plus a glowing accent handle. Not a TransitionSeries presentation — drop in as a scene primitive when the story is "this code became that code".

Hard-edge directional wipe between two scenes. Standalone component (renders both scenes as from/to ReactNodes). Four directions; clean and quick.

Standalone scene-to-scene wipe with a frosted-glass blur band sweeping across the frame. Renders both scenes as ReactNode props (from/to) and animates a glassmorphic vertical strip between them. Note: not a TransitionSeries presentation — use as a scene-pair component.

Digital glitch cut with RGB drop-shadow split, horizontal slice displacement, and snap mid-transition. The new scene appears at the peak glitch and resolves clean.

Pixelated grid wipe: a black-cell grid covers scene A, then cells fade out in a chosen pattern (wave / diagonal / spiral) to reveal scene B underneath. Standalone scene-pair component (from/to ReactNode props).

Organic wipe transition using clip-path inset, with a colored ink edge leading the boundary. The entering scene reveals from the wipe direction; a thin colored bar trails the edge.

Bold typographic mask transition: a giant word holds, then scales up explosively, revealing the next scene clipped through the type. Standalone scene-pair component (renders both scenes via from/to ReactNode props).

Analog film light-leak between clips. A warm bright overlay fades in then out across the cut, simulating the look of light catching the film between exposures. Implemented as a TransitionPresentation factory for `<TransitionSeries>`.

Soft-edge wipe via CSS mask-image gradient. Three matte styles control edge softness: smoke (dreamy), brush (painterly), geometric (clean). Simulates luma-matte transitions without actual matte video files.

Cross-dissolve / morph transition. The simplest and most-versatile transition; opacity crossfade by default, with optional displacement variant adding subtle scale dynamics.

iOS-style spatial push: scene A scales down + dims + rounds its corners while scene B springs in from the chosen direction with a soft directional shadow. Standalone scene-pair component (from/to ReactNode props), spring-driven for a natural settle.

Polished swipe between two scenes with parallax + dim of the off-screen scene. Standalone showcase component with default gradient panels — pass sceneA/sceneB ReactNodes to use real content.

Camera "zooms through" the exiting scene into the entering scene. The exit scales up and fades; the enter starts large (zoomed in) and scales down to 1. Creates the illusion of flying through one frame into the next.

Aggressive zoom-through: a single content node (passed as children) scales up from 1× to a high target scale while fading at the end, leaving the background color filling the frame. Use as the bridge between two scenes — the next scene mounts after this primitive ends. Distinct from the cueframe-native `zoom-through` TransitionPresentation, which interpolates two real scenes.

Ordered-dither gradient — an animated luminance field quantized through a Bayer 8×8 matrix into hard pixel dots that drift and warp slowly. The pixel-craft dev-tool aesthetic: texture with intent, zero banding by construction. Sits between silk-flow-bg (organic threads) and mesh-gradient-bg (soft wash) as the technical register.

Luminous flow-field silk — hundreds of fine threads drawn through an organic noise current, with travelling light, bloom, film grain and vignette. Generative-art-grade texture that reads authored, not generated: the title-sequence background for product launches. On light grounds it becomes an ink-etching on paper.

Spring-driven bar chart that scales each bar up from the baseline with a configurable stagger. SVG-based, clean flat bars. Designed as a hero data visualization — full-frame, single accent color, no chart junk.

SVG line chart with stroke-dasharray draw-on animation and a leading dot that traces the path in realtime. Spring-driven progress with no bounce. Includes a faint background grid and a clean, crisp line.

Center brand hub with satellite logos (GitHub, Vercel, Stripe, Slack, Linear, Figma, Notion, Discord) orbiting on elliptical paths. Connection lines pulse on a 30-frame cycle, illuminating one satellite at a time to suggest "data flowing". Satellites assemble from offscreen on a staggered spring at frame 0.

Animated mesh gradient — multiple soft-blurred color blobs drifting across the frame. The Stripe / Linear / Vercel marketing-page background, in motion. Universal warm/cool/brand-tinted background.

God-rays / volumetric-light effect built entirely from CSS + SVG masks. Same text rendered three times: a heavily-blurred halo behind, a conic-gradient ray mask clipped to the text shape, and a solid silhouette in front. The result reads as light pouring through cut-out lettering. Slow rotation + sine-wave halo pulse keep the scene from feeling frozen.

Premium product-card primitive with a soft radial spotlight that drifts across the surface on a slow Lissajous path. The cursor-following light picks out a 1px microborder so the card always has a "hovered" feel even on still frames. Linear/Vercel/Stripe-style hero card.

Animatable blur wrapper. Wrap any child to apply CSS filter blur, optionally animating the radius across the duration (focus pull, reveal, transition out). Motion blur variant adds a slight scaleX stretch for a horizontal-pan feel.

CSS-filter-based color grading wrapper. Seven presets cover the common looks (vintage, cinematic, bleach-bypass, sepia, cool, warm, none) and per-channel overrides are available for fine-tuning. Wrap any media — Img, Video, full Composition.

Animated film-grain overlay. Canvas-based monochrome (or color) noise that brings analog warmth to digital footage. Downsampled internally for performance — grain doesn't need full resolution.

Ken-Burns-style slow zoom + pan over a still image. Adds depth and "the camera is moving" feel to static photography. Five pan directions plus none-for-zoom-only.

Configurable ambient particle layer rendered via Canvas. Six presets cover the most common atmospheric needs (dust, bokeh, snow, sparks, embers, fireflies) and each is tunable via overrides for size, color, count, wind, and gravity.

Wrapper that pops any child element into view with spring-driven scale. The child appears with a satisfying overshoot bounce and settles. Composable with any primitive that needs a more interesting entrance than a plain fade.

Particle burst from a configurable origin point — confetti, success celebration, achievement unlock. Colors cycle through a palette; gravity and velocity tune the physics.

Edge darkening overlay. Pure CSS radial-gradient — no canvas needed. Pulls focus to the center of the frame and adds cinematic depth.

Two-pane "code → live preview" hero loop. Left: a glassy editor types JSX one component at a time. Right: each typed component renders inside a warm pastel stage, with `spatial-push` and `frosted-glass-wipe` transitions between beats (BlurReveal → DashboardPopulate → MaskedSlideReveal → TerminalToBrowserDeploy). Self-contained 24-second showcase loop for component-library marketing.

Full-frame multi-phase trailer: pulsing logo intro → app-shell flyover → outro with confetti. ~8-second self-contained scene with three named accent colors. Use as a reference template for client-trailer work or as a drop-in launch video.

Full-frame deploy beat: terminal types `pnpm deploy`, prints build/bundle/upload steps, then the success line collapses-and-blurs while a polished marketing browser springs forward at the URL. Self-contained ~6-second story for "ship it" moments.

Short-form changelog post (square or portrait) with a label/title header and side-by-side old/new content panels. Designed for social-feed posts announcing a release.

Hero shot where a laptop or phone assembles in 3D from exploded layers (lid, base, bezel, screen) into a settled device, then the screen wakes from black to a mock UI and a shimmer sweeps across. Self-contained ~3-second product reveal beat.

Composed scene showing code typing alongside a live build/output panel. Self-contained mini-product-demo for developer-tooling content. Compiles green when the code reaches a working state.

Three-card pricing layout (Free / Pro / Enterprise) where one tier scales up, lifts, and shimmers while the others dim and blur. Tier copy is hardcoded; the agent picks which tier to spotlight via `focusedTier`.

Two-pane layout with a chat panel on the left and a preview canvas on the right. The chat pane animates from a wider start ratio to a narrower end ratio, simulating the "chat conversation produces a result" pattern.

A 3500×2500 supergrid of pre-baked bento cards (charts, counters, code snippets, gradients, logos, stats, bars) with a slow diagonal camera pan and a vignette mask. The "platform overview" hero shot — gives the impression of a vast, dense product surface without needing real data.

Cinematic letterbox bars overlay. Calculates bar height from current vs target aspect ratio and optionally spring-animates the bars in.

CSS-grid photo gallery with spring-animated staggered entry. Each cell fades in, scales up from 0.85, and translates from slight Y offset.

Floating PiP overlay layout. Renders main content full-screen with a spring-animated PiP window in a chosen corner. Pass `main` and `children` ReactNodes.

Multi-panel split-screen layout. Arranges children into equal-width columns with spring-animated stagger. Each panel scales-and-fades in with a 4-frame delay between them.

Bento-style feature grid where each card pops in on a spring with a staggered delay. Mixed-span cards (1× / 2× columns) create the asymmetric "Apple keynote" rhythm that's become the default for feature recaps and product capability tours.

The benchmark slide every model launch needs: horizontal bars race out staggered, the hero row (ours) arrives LAST, overshoots, lands with a glow — and the competition dims in deference. Values count in tabular numerals. Idle: the hero glow breathes.

The product IS a conversation: user bubble springs in, the assistant thinks (breathing dots), then streams its reply token-by-token in a growing bubble. Settles with a softly breathing avatar. Translucent bubbles keep footage readable behind.

Eval culture, cinematized: rows cascade in, score bars fill with counting percentages, pass badges pop (green at threshold, amber NEAR below — honesty reads as confidence), and the summary line lands last. Idle: badges shimmer in sequence.

Glassmorphic code window with macOS-style traffic lights, syntax highlighting, and per-line staggered entrance. Premium polish for showing code on screen — softer than terminal-simulator.

The latency brag: a 240° instrument gauge sweeps to the value with an expo settle while the readout counts in tabular numerals. At idle the needle micro-jitters like a LIVE meter and the arc glow breathes. "87ms time to first token."

The agent trace: steps cascade in with a live spinner while each "runs", then a spring-weighted check lands — the final step in accent. A faint shimmer scans the completed card so it idles alive. The chain-of-thought made cinematic.

The agent's hands: monospace function-call cards slide into a stack — each call line types fast, then its result chip pops green. The newest card breathes an accent border. The tool-use aesthetic of modern agent demos.

Source-image → AI-generated-image transition with three layers: source blurs out, dot-grid overlay shimmers on top, "Generating…" pill pulses, then the generated image fades in. Built for image-editing or upscale-style "what AI just did" beats.

Four-phase narrative scene: typewriter prompt in centered input → input transforms into header bar → skeleton cards fade in with shimmer → cards 3D-flip to reveal generated dashboard tiles (KPI / bar / line / rows mix).

A release badge that ARRIVES: spring pop with overshoot, a shine sweep as it settles, then an idle pulse ring every ~2.5s. The "NEW / v2.0 / BETA / GA" moment, over footage or a scene.

The product-improvement shot: a comparison divider sweeps right to reveal the AFTER, overshoots, springs back to rest near center, and breathes at idle. Corner chips label both sides. In code use, pass two children [before, after]; via params it demos with a dim slate vs. an indigo gradient.

End-to-end simulated browser navigation: address-bar URL typing, autocomplete suggestion, progress bar, page render, scroll, virtual cursor traversal, and CTA click. Effectively a turnkey "show the user discovering the product" beat.

Code window with a slice of lines that collapses on cue into a single "⋯ N lines collapsed" placeholder, driven by one heavy spring. Built for "the messy version → the clean version" reveals.

The context-window flex: document chips fly in and compress into a capacity bar as the fill rises under a huge capacity headline ("1M tokens of context"). At idle a chip keeps drifting in every ~2.5s — the window never stops swallowing docs.

Empty 2×2 dashboard structure fades in, then four tiles populate in sequence: KPI counts up, bars stagger up, line chart draws on with dot reveals, donut sweeps to its target. Pure SVG — no chart library.

Architecture-diagram-style graph: cubic-bezier pipes between named nodes, with bright pulse heads + fading ghost trails travelling along each edge on its scheduled startFrame. Reads as "data flowing through your stack".

Laptop or phone bezel that starts at 2× zoom and eases down to 1× over the duration. Wraps any child content as the screen, so it doubles as a "this is your UI" reveal frame.

Three-phase upload narrative: file icon arcs into a dashed dropzone, the dropzone border highlights as it nears, the file fades and a progress bar fills to 100%. End-to-end "the user uploaded a thing".

Shared-element transition: a feed-card image lifts off, expands toward fullscreen, and lands inside an editor frame as light page fades to dark canvas and top/bottom toolbars slide in. One spring drives all the morph properties.

A small card morphs into a near-fullscreen modal — one heavy spring drives all five animatable properties (left/top/width/height/radius) for a true shared-element feel. Source content fades out in the first third, modal content arrives in the last third with a translateY offset.

Kanban board (Todo → In Progress → Done) where one ticket card flies between columns on an arc, lands with a spring + column flash, dwells in In Progress with a running timer, then flies to Done and explodes confetti.

Simulated terminal/console window with typed lines, prompt, and macOS-style chrome. Lines reveal in chunks (configurable chunkSize) and color by type (command/log/success/error).

Macos-style toast notification slide-in. Variant-driven icon + accent (success/error/info/warning), spring-animated entry, configurable card and text colors.

Floating glassmorphic tool palette slides up from the bottom of an editor canvas, then icon glyphs pop in one-by-one. The first icon is shown as the active tool. Built around an editor-style frame with top toolbar + centered placeholder image.

Documentation-style scene: browser frame fades in, cursor arcs to a CTA and clicks, a bounding box draws on around it (animated stroke-dashoffset + corner ticks), then a tooltip card stagger-fades in pointing at the box. The all-in-one "documenting a button" composition.

The voice-agent beat: a symmetric waveform SPEAKS in phrases — deterministic burst/pause envelopes with per-bar frequency character and center bars leading — or breathes gently in listening mode. Loops seamlessly; the idle is the design.