# Product UI animations for video

> Product UI animations in CSS for demo and launch video: cursor click, count-up, chart build, AI stream, terminal run and diff cards.

Canonical: https://vawe.dev/video-components/group/product-moments
Last updated: 2026-11-03

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 components, 21 with a clip.

## Pick by the claim the beat has to prove

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

## All 21 components in product moments

- [Clip expand from a point](https://vawe.dev/video-components/clip-expand): a panel or capture grows out of one point the eye is already on
- [Cursor click](https://vawe.dev/video-components/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
- [Count up](https://vawe.dev/video-components/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
- [Card assemble](https://vawe.dev/video-components/card-assemble): a UI card builds: the shell lands, then each part arrives from the side of its slot, the accent action last
- [Notification pop](https://vawe.dev/video-components/notification-pop): a banner drops in on the overshoot curve, icon then text, holds a second and leaves faster than it came
- [Chart build](https://vawe.dev/video-components/chart-build): gridlines draw, bars rise in sequence, the newest bar turns accent and its value tag pops on it
- [Before and after wipe](https://vawe.dev/video-components/before-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
- [Skeleton reveal](https://vawe.dev/video-components/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
- [AI stream response](https://vawe.dev/video-components/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
- [Overwhelm collapse](https://vawe.dev/video-components/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
- [Success check](https://vawe.dev/video-components/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
- [Integration hub](https://vawe.dev/video-components/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
- [Device tilt stage](https://vawe.dev/video-components/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
- [Command palette summon](https://vawe.dev/video-components/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
- [Gooey filter](https://vawe.dev/video-components/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
- [Agent progress](https://vawe.dev/video-components/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
- [Panel live sync](https://vawe.dev/video-components/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
- [Terminal run](https://vawe.dev/video-components/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
- [Approval gate](https://vawe.dev/video-components/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
- [Model picker](https://vawe.dev/video-components/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
- [Diff card](https://vawe.dev/video-components/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

## Rules that come with this group

- skeleton-reveal is marked use once per film.
- A component that copies a product surface does not overshoot where the real interface does not.
- integration-hub and logo-wall use invented tool logos. Swap in real marks only with the right to show them.
- terminal-run and approval-gate show Claude Code. They suit a film about coding agents.

## More video components

- [Reveal a title](https://vawe.dev/video-components/group/reveal-a-title)
- [Change between shots](https://vawe.dev/video-components/group/change-between-shots)
- [Point the eye](https://vawe.dev/video-components/group/point-the-eye)
- [Move the camera](https://vawe.dev/video-components/group/move-the-camera)
- [End a film](https://vawe.dev/video-components/group/end-a-film)
- [Grounds](https://vawe.dev/video-components/group/grounds)

## Related

- [Render a bar chart to MP4 from code](https://vawe.dev/blog/animated-chart-video)
- [Product UI in a film](https://vawe.dev/docs/product-ui)
- [The UI demo guide](https://vawe.dev/docs/ui-demo)
- [Make a product launch video with code](https://vawe.dev/launch-video)
- [All 130 video components](https://vawe.dev/video-components)