Transitions.dev: UI transitions for AI agents

Card resize

Smooth card resize transition

Number pop-in

Digit flip with blur and stagger

Notification badge

Diagonal slide with spring pop-in

Transaction processing...

Text states swap

Text swap transition with blur

Menu dropdown

Origin-aware open / close transition

Confetti burst

Physics confetti lands on the button

Modal open/close

Modal transition with scale

Panel reveal

Panel open / close transition

Gooey plus menu

Liquid split into a fan of actions

Page side-by-side

Forward / back page transition

Icon swap

Scale and blur icon swap

Success check

Succes check with blur and rotate

Avatar group hover

Distance-falloff lift with bouncy return

Card stack hover

Stack fans out with a spring on hover

Please enter a valid email.

Error state shake

Cubic-bezier shake on error

Input clear with dissolve

Clear with per-word dissolve

Skeleton loader and reveal

Pulse to content cross-fade

Pull request opened Review requested from 3 teammates

Texts reveal

Two lines rise with offset stagger

Tabs sliding

Pill indicator follows the active tab

Drag & drop with physics

Zone morphs into the image

Shimmer text

Masked gradient sweep across text

Organic shimmer

Wavy shimmer with edge glow

Tooltip open/close

Delayed in, travels, instant out

Credit VISA John Smith 4111 - 1111 - 1111 - 1111

3D tilt

3D pointer tilt with cursor glare

Dropdown menu morph

Button morphs into a menu surface

Accordion

Grid-rows height with chevron morph

Toast open/close

Rises in with fade, blur and scale

Like button

Heart fills and bursts particles

Image open tilt

Zoom with 3D tilt and bend

Learn more hover

Chevron shifts and opens on hover

Checkbox check

Check draws on with a stroke path

Build demo page 8 subtasks

Spinner to check morph

Spinner pops into a drawn check

Spinning counter

Digits spin like a reel to the value

Toggle

Thumb slides with a double bounce

Pro

Pro gradient text

Colour washes orbit the letters

Delete with smoky dissolve

Image shreds and falls into smoke

Thinking states

Status line shimmers, then swaps to the next

Reasoning stream

Agent reasoning scrolls by two lines

Streaming text

Words resolve through a soft cross-blur

Matrix dot loader

16-dot matrix pulses in four patterns

Banner stacking

Banners stack like toasts, three deep

Image generation placeholder

Dot noise wakes, then resolves into the image

Get Pro button

Pro gradient glows in from the pill’s rim