Product UI animations for video.

A product film shows the product working. These 21 components are the moments a launch or demo film is made of: a cursor that clicks, a number that counts, a chart that builds, an agent that works through steps, a pull request that merges.

Several copy a real interface on purpose: terminal-run is a Claude Code terminal, model-picker is the claude.ai menu, diff-card is a GitHub pull request. They move as the real surface moves, so a viewer who knows the product trusts the frame.

21 components21 with a clip1.6 to 6 s

Pick by the claim the beat has to prove.

Component	Use it when
Cursor click	A control is pressed and its label changes.
Count up	A number is the proof, with a delta chip and a sparkline.
Chart build	Bars rise in sequence and the newest turns accent.
AI stream response	A prompt is sent and the answer streams in chunks.
Agent progress	An AI agent works through numbered steps.
Before and after wipe	The claim is a change, shown as one card in two states.
Device tilt stage	The product should read as an object on a CSS 3D laptop.
Success check	A button resolves into a drawn check.

All 21 components in product moments

a panel or capture grows out of one point the eye is already on
Clip expand from a point
a panel or capture grows out of one point the eye is already on
a cursor travels a bowed path to a control, the control lights and dips on the press, the label rolls to its result, the cursor leaves
Cursor click
a cursor travels a bowed path to a control, the control lights and dips on the press, the label rolls to its result, the cursor leaves
a number is the proof: each digit is a wheel that rolls to its value with speed blur, then a delta chip and a sparkline
Count up
a number is the proof: each digit is a wheel that rolls to its value with speed blur, then a delta chip and a sparkline
a UI card builds: the shell lands, then each part arrives from the side of its slot, the accent action last
Card assemble
a UI card builds: the shell lands, then each part arrives from the side of its slot, the accent action last
a banner drops in on the overshoot curve, icon then text, holds a second and leaves faster than it came
Notification pop
a banner drops in on the overshoot curve, icon then text, holds a second and leaves faster than it came
gridlines draw, bars rise in sequence, the newest bar turns accent and its value tag pops on it
Chart build
gridlines draw, bars rise in sequence, the newest bar turns accent and its value tag pops on it
the claim is a change: one card in two states, and a scan line carries the after state (accent, real numbers) over the grey before on the iris curve
Before and after wipe
the claim is a change: one card in two states, and a scan line carries the after state (accent, real numbers) over the grey before on the iris curve
grey blocks in the shape of the content shimmer under one moving light, then each region resolves into real content, 200 ms apart; use once per film
Skeleton reveal
grey blocks in the shape of the content shimmer under one moving light, then each region resolves into real content, 200 ms apart; use once per film
a typed prompt is sent up into the thread, a status line shines, then the answer streams in 1 to 3 word chunks with a caret on the newest chunk
AI stream response
a typed prompt is sent up into the thread, a status line shines, then the answer streams in 1 to 3 word chunks with a caret on the newest chunk
the problem turns to the fix: 26 cards, chips and notifications flood the frame on a shrinking gap, then a fast cubic-in collapse pulls them into one point and one clean element opens
Overwhelm collapse
the problem turns to the fix: 26 cards, chips and notifications flood the frame on a shrinking gap, then a fast cubic-in collapse pulls them into one point and one clean element opens
a button resolves into a drawn check: the press dips, the width closes to a circle, the check draws on one dash, the circle lands on a small spring and one ring leaves it
Success check
a button resolves into a drawn check: the press dips, the width closes to a circle, the check draws on one dash, the circle lands on a small spring and one ring leaves it
the “works with your tools” beat: invented tool logos fly in on curved paths and land on a ring around the product mark, then every wire draws in the same frames and pulses ride into the hub
Integration hub
the “works with your tools” beat: invented tool logos fly in on curved paths and land on a ring around the product mark, then every wire draws in the same frames and pulses ride into the hub
the product as an object: the UI on a CSS 3D laptop that rises from a steep top-down angle, turns and settles on a spring, the glass reflection sliding with the lid’s angle
Device tilt stage
the product as an object: the UI on a CSS 3D laptop that rises from a steep top-down angle, turns and settles on a spring, the glass reflection sliding with the lid’s angle
the keyboard-first beat: the app dims, a Cmd+K palette drops in on a spring, a query types, non-matching rows collapse to zero height, Enter presses the chosen row and the palette leaves fast
Command palette summon
the keyboard-first beat: the app dims, a Cmd+K palette drops in on a spring, a query types, non-matching rows collapse to zero height, Enter presses the chosen row and the palette leaves fast
a tab, pill or panel must melt into the next: shapes that touch merge into one soft outline through the SVG gooey filter (blur 15, alpha matrix 19 and -9), the active tab box slides on a critically damped spring and the page swaps in 0.2 s
Gooey filter
a tab, pill or panel must melt into the next: shapes that touch merge into one soft outline through the SVG gooey filter (blur 15, alpha matrix 19 and -9), the active tab box slides on a critically damped spring and the page swaps in 0.2 s
an AI agent works through steps: a card springs in, an arc turns beside a status line that swaps states, and numbered rows flip to checks one by one, ending mid-list
Agent progress
an AI agent works through steps: a card springs in, an arc turns beside a status line that swaps states, and numbered rows flip to checks one by one, ending mid-list
an edit and its result in one frame: a cursor scrubs fields in a panel and the button on the page beside it rotates, rounds and grows in the same frames
Panel live sync
an edit and its result in one frame: a cursor scrubs fields in a panel and the button on the page beside it rotates, rounds and grows in the same frames
a coding agent works in a real Claude Code terminal: the task is typed and sent, a status line counts tokens, Read, Update (red and green diff) and Bash calls arrive, the answer lands
Terminal run
a coding agent works in a real Claude Code terminal: the task is typed and sent, a status line counts tokens, Read, Update (red and green diff) and Bash calls arrive, the answer lands
the agent asks before it acts: the Claude Code permission prompt replaces the input, the selection looks at option 2 and returns, Enter runs the command and the work goes on
Approval gate
the agent asks before it acts: the Claude Code permission prompt replaces the input, the selection looks at option 2 and returns, Enter runs the command and the work goes on
a model choice: on claude.ai a pointer opens the model menu, picks Opus, the check moves and the label rolls to the new name
Model picker
a model choice: on claude.ai a pointer opens the model menu, picks Opus, the check moves and the label rolls to the new name
code review as proof: a GitHub pull request diff builds, the diffstat counts to +312 -48, checks pass and the Open badge becomes Merged
Diff card
code review as proof: a GitHub pull request diff builds, the diffstat counts to +312 -48, checks pass and the Open badge becomes Merged