animation examples
Typography & Title Cards Animation Examples
Typography and title-card shots put words in motion — letterspacing collapse, gradient sweeps, typewriter reveals, and flipboard titles. 25 shots with video previews and agent-ready Remotion code below.
Blur SlideTitle words enter one by one — y 40→0 + blur 10→0 + opacity 0→1, all three channels converging on the same outCubic easing with word gaps of ~3.5f; the subtitle follows with a stagger before the title finishes settling
~3.8s (114f@30fps)
Brace ExpandA pair of curly braces first appears small in the center, then shoots outward to ±148px while scaling up to title size; the text's clip width is strictly bound to the brace spacing, revealing it like a curtain being drawn; after settling, letter-spacing relaxes slightly
~3.8s (114f@30fps: 7f appear → spring open → letter-spacing relax after settling → hold)
Cel Flash StompBackground-flash word stomp — large words slam full-screen slightly tilted like stamps, and at each word's landing frame the background layer strobes between two solid colors for a few frames while the text stays rock-still; a UI translation of anime finisher-attack title cards
~30f per word × word count + ≥45f ending; three words ≈ 4.8s
Countdown Arc ScatterA white-background dial with 9 equal-size numbers arranged tangentially along a large arc; the whole dial sweeps 96° then decelerates to a hard stop, "5" halts at the arc's apex and pans into place as the title's first character, the other numbers blur-scatter in place, and the title words blur-fade in one by one with the last word tinted accent
~1.1s (33f@30fps, an extremely short single beat)
Document Typewriter RevealA fully typeset real document "writes" itself in after the cursor, the sidebar follows, and history entries drop into the track one by one
~3.7s (110f, including the history-list-stack tail)
Flying Words22 keywords laid out by golden angle on a flattened ellipse cross-section, flying along the z-axis from -1750px past the camera at 800px; opacity follows the [0,1,0.5,0.2,0] life curve, running 2 full loops end-seamlessly
~6.0s (180f@30fps, 2 full loops, seamlessly loopable)
Glitch CycleA single monospace slot row cycles 4 status phrases; each phrase's head and tail go full-glitch via the probabilistic keyframes [1,0,0,0.1,0,0,1], the middle occasionally twitches a single character, and on every switch the whole line layers RGB split with a horizontal jitter; the last phrase's probability drops to 0 so the ending is clean
~5.6s (168f@30fps, 4 phrases at 42f each)
Gradient Word SweepOn a black background, a keyword in a slogan gets "charged" by a gradient color sweep fast left-to-right — the wavefront characters glow brightest then decay backward, and once filled, thin purple-red lightning links between characters while the whole word holds a steady breathing glow
sweep-charge ~15–20f (must be fast) + steady lightning-breathing 1–2s; total 2.5–3.5s
Marker Underline TitleAfter the big title settles, a marker underline quickly draws left-to-right beneath the keyword — tapered stroke, rough edges, slight upward tilt following the italic letterform, hugging the text baseline
title settles + stroke starts 4~8f later, draw 8–12f, total 1–1.5s
Outline Word FillAn outlined word (1px gray stroke, 500 weight) slams in from 3.2x scale with rapid deceleration; a dashed large circle then shrinks from 2.8x around the word and slowly self-rotates; horizontal dashed lines extend inward from the frame edges; the stroke brightens slightly first, then the solid white ignites within 0.6 frames, a one-frame flash and freezes
~2.5s (75f@30fps, a short single beat)
Paper Title CardA one-sentence line presses word by word onto the paper, one word marked with accent italic, a short dash closes in
1.7–1.8s (50–55f)
Pill Chip Slot Cycle HandledIn the white-background sentence "Your `chip` Handled", the word inside the dark capsule cycles on a vertical wheel; capsule width smoothly stretches by interpolating pre-measured text widths, the words on either side are naturally pushed apart and pulled back together, and 13%-opacity gray ghost items peek above and below the capsule
~5.0s (150f@30fps: stillness → 3 switches (0.25/0.47/0.69) → tail stillness)
Pill Slot CycleIn-sentence slot cycling — the fixed sentence stem stays pinned rock-still, the trailing pill badge rolls one slot-machine tick every ~0.7s (the old one flies up with accelerating fade-out, the new one slides in from below with blur), and after cycling through N feature words the complete sentence settles as the closer
entrance 12f + 21f per tick × word count + closer 14f + hold; 6 words ≈ 5.8s (demo 175f)
ScrambleA monospace whole line of characters first scrambles rapidly every 2 frames, then locks into the real characters one by one left-to-right; each lock frame flashes a blue-white highlight — a seed-driven reproducible decryption feel
~3.2s (96f@30fps)
Split Flap TitleAirport split-flap display title — each character is a mechanical flip cell split into top/bottom halves, flipping through 2 scrambled characters with a click to land on the target, cascading left-to-right as a wave
~4.7s (140f: ≥20f scrambled stillness to establish + cascading flips + ≥15f settled stillness)
Text Column ConvergeTwo words in standoff converge — the left "NEW" and a right feature word stay pinned to equal frame margins on their respective sides with hard-cut cycling and zero shrinkage throughout, and only on the final word does a single ease-in-out slide bring them to the center line, interlocking into a phrase; small text below appears almost as a hard cut; an end-reveal title card
cycling 7–16f/word × 8–9 words + converge ~36f + stillness after small text; whole segment ~5–6s
Title Demote To LabelBig title demotes into a section label, two variants — A: the centered big title develops, holds one beat, then continuously shrinks 0.3x and pans to the top-left corner as a small section label while the content area grows beneath it; B: same routine but its entrance carries a text-selection highlight block that sweeps in then withdraws
A ~3s (92f) / B ~3.5s (104f); demo plays both variants back-to-back in 196f
Type Assembly MovesText assembly, four variants — split-text-stagger per-character split rise, letterform-drift-assembly drift convergence, tracking-expand-reveal letter-spacing breathing, text-on-path flowing in along a line
single variant 4–5s (action segments A ~56f / B ~104f / C ~58f / D ~99f, all including hold)
Type Entrance MovesTitle entrance, two variants — scramble-decode (the answer grows out of noise) and letter-drop-physics (characters fall with gravity, bounce, settle), pick one by tone
single variant 4–5s (including hold and still ending; action segments A ~66f / B ~106f)
Type Rhythm SyncText synced to sound, two variants — font-weight-pump (strokes thicken and snap back with the drum) and karaoke-fill-sync (words light up one by one with the voiceover)
single variant 4–5s; A 10f decay window per hit, B 15–35f per word by speech rate
Typewriter MovesTypewriter, two variants — terminal-typewriter: the terminal command finishes typing and detonates a scene switch; error-retype: a "rephrase" three-act play of mistyping, deleting, and retyping
A ~5s / B ~5.5s
Typing Code BlockThe same syntax-highlighted code shows two reveals side by side — left side line-level stagger with 4f gaps, fading in and rising 8px; right side per-character typing keeping each character's original token color, with a #3a4468 block cursor behind the current character
~4.6s (138f@30fps)
Vertical Word Roll Blur CycleThe trailing word of a sentence becomes a vertical wheel, 3 word swaps at 0.55s each (outQuint seven-tenths + outBack three-tenths, fast-then-very-slow with a micro overshoot), adjacent rows get vertical blur and gray scaling by distance, and the center word tints from gray to the accent color the instant it settles
~5.0s (150f@30fps: stillness → 3 word swaps → whole group fades out at tail)
Word Relay FilmstripA left column of equal-height black-and-white alternating page cards steps forward in scroll, while the right side has a serif large word relaying in place (noun constant + verb rotating) — the column scrolls exactly one step at the instant the word swaps, and the word block's vertical center precisely aligns with the current page card's midpoint
~1.5–2s per word period × 3–4 words; whole segment 5–7s
Word Relay GeometryThree benefit words each carry a dedicated geometry relay — dashed large circle self-rotating and shrinking → three solid circles growing in sequence via trim (phase offset 0.06) → a metal sheen sweeps and the last beat settles into pure white; old words shrink to 0.86 and fade out, new words reveal outline→fill
~6.0s (180f@30fps: three segments at 0.36 time windows each, 0.04 overlap between segments)