animation examples
Interaction & Feature Demo Animation Examples
Interaction and feature-demo shots show a product in use: typing, toggling, filtering, selecting, and AI responses. 15 shots with video previews and agent-ready Remotion code below.
AI Stream ResponseAn AI response panel lands a readable summary line first, then evidence rows with status icons stream in one by one, and finally everything settles into a completed state
~4–5s (120–150f, including ≥15f of completed-state stillness)
Autolayout Gap DialA gap dial drives the layout — a row of link blocks with a marquee selection outline and gap annotations, badge numbers ticking up step by step while blocks get pushed apart in real time by the parameter and spring back into place; visualizing "parameter-driven layout"
~4s (120f: marquee entry + widening 38f + hold + spring bounce-back)
Canvas Materialize MovesContent "materializes onto the canvas" in two variants — panel-to-canvas row-flip cards (panel table rows fly out along an arc, morphing across containers into canvas cards) and diagram-cascade cascading tree generation (after the prompt types out, nodes pop in layer by layer, connections growing before their nodes)
A ~4.3s (130f) / B ~5.3s (160f)
Chip Grid Single Select BlackoutFive option chips, arranged 3+2 and centered, fade in one by one; at the selected frame a single gray press frame is inserted, then over a few frames the background flips pure black, the text flips white, and there's a very light 1→1.04→1 bounce-back, while the other chips dim to 18% with their positions locked; the remaining items then go to zero, the black chip lifts and narrows, and a calculation row fades in below
~5.0s (150f@30fps)
Chip Lift To User PillThe target chip in the grid hard-cuts to inverted black-on-white over 3 frames, the other chips fade out and shrink staggered by their Manhattan distance from it; the black chip grows rightward anchored at its left edge into a pill, typing out a name character by character and lighting a green dot, then a 1px connector line pulls over to a circular badge
~5.0s (150f@30fps)
Collab Cursor MovesCollab cursors as actors in two variants — dialogue-duet, a two-cursor dialogue duet on a dark stage (approach/orbit/light handoff/magnified into a transition), and cast-ensemble, a five-cursor ensemble atmosphere layer (staggered fly-in + sine drift + typing cameo + converging onlookers)
A ~4.7s (140f) / B ~4.7s (140f)
Command Palette SummonThe command palette descends — the whole screen dims with blur, the ⌘K palette drops in with overshoot, candidate rows surface staggered, and typing narrows the list in real time
4–5s
Glass Pill Dictation TypingOn pure black, a fixed-width glass pill pops in at about 1.25× then settles down softly; inside, an accent light sweeps in from dark-on-the-left to bright-on-the-right; the caret leads, then a placeholder sentence types out, the light gradually dies as typing progresses, ending as a neutral dark glass bar
~1.7s (50f@30fps)
Hashtag To Pill MaterializeA topic word types itself into being — "#word" types out centered (red solid caret steady-on), hard-cuts in 1 frame into a wide pill tag, holds, then shrinks and shifts left to land in the page's tag slot, then hard-cuts in 1 frame to reveal the finished page; a "two hard cuts sandwiching one slide" rhythm skeleton
typing ~40f + hard-cut pill hold ~18f + shrink-shift ~14f + stillness after hard-cut reveal; whole segment ~3.5s (original film 18–21.5s)
Input Trigger MovesInput triggers in two variants — cursor-performance, a cursor performing a click push-in, and keycap-smash-cut, a keycap fuse detonating into a smash cut
A ~5s / C ~5s
Picker Carousel Feature CycleA mobile-style vertical picker — the focus pill stays put while content flows through it, each item snapping to a halt with pronounced outQuint deceleration then fully resting, opacity/font size/grayscale layered by distance from center, and the pill does a very light scaleY breath on landing
~3.6s (108f@30fps)
Segmented Thumb HeroA segmented control's thumb displacement takes the hero close-up — an oversized capsule segmented control springs in, an outlined-arrow cursor slides in from off-frame and presses, the white thumb slides to the other segment in 8f ease-out, and at the moment it lands a new icon springs out while the old icon retracts
~3.5s (demo 110f: float-in 18f + cursor 24f + click + 8f slide + icon pop + hold)
Theme Switch MovesTheme switching in two variants — theme-sweep, a diagonal sweep (the interface reskins in place where the boundary passes), and palette-ripple, the combo piece (the ⌘K palette shrinks to a point and a ripple spreads from that point to reskin)
A 3–4s / B 5–6s
Type And FilterOn a real UI you type to search, the grid converges into a single card by itself, and a click dives through into the detail page
~2.5s (118–190f)
Voice Waveform LiveA recording pill's live voiceprint — 64 thin vertical bars rise and fall with "speech", towering in the middle while speaking and collapsing to a dotted line on pauses, with the waveform scrolling right to left; a full performance of speak → pause → speak → submit-collapse
~5s (150f: entry 12f + speak 1.4s + pause 0.8s + speak 1.4s + submit-collapse 0.8s)