Transitions.dev: UI transitions for AI agents

Transitions.dev

Get Pro —

Used by designers and engineers at

Library includes 43+ crafted transitions, ready to drop into your project.

Card resize

Smooth card resize transition

65.78

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

Jane Cooper [email protected]

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
it here

Drag & drop with physics

Zone morphs into the image

Planning next moves

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

Notify me

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

Setting up a workplace

Thinking states

Status line shimmers, then swaps to the next

Two things could explain the lag: the blur is re-running every frame, or the mask is forcing a repaint. Worth separating them before picking a fix.

Animating mask-position never composites — it repaints the element. And the element being repainted sits inside a displacement chain, so the whole filter re-executes on the CPU each frame. That compounds: it isn't one cost, it's the repaint feeding the filter.

So the fix isn't tuning the blur radius. The animated property has to leave the paint path entirely. If the field is painted statically and covered by a same-coloured curtain, translating the curtain is visually identical to masking — and transform composites.

One trade-off: the waves travel with the band instead of rippling through noise fixed in space. In motion, near-indistinguishable.

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

Browse all

Transitions Agent scans your codebase, scores its motion and fixes it as pull requests.

Learn more

A motion score for every codebase

One command scores your motion 0 to 100, every finding mapped to the recipe that fixes it. Local and deterministic: no AI, no account.

$ npx transitions-agent

Scanning 142 files in ./src

Motion score 64 / 100 (needs work)

Modal.tsx:24 modal pops in with no transition

recipe: modal open/close

Tooltip.tsx:41 tooltip appears with no transition

recipe: tooltip open/close

nav.css:118 hover snaps, no transition on base

recipe: learn more hover

app.css:203 transition: all animates layout

fix: name the properties

Toast.tsx:12 hardcoded 0.3s, no motion token

fix: --duration-quick

global.css:9 no prefers-reduced-motion guard

fix: reduced-motion guard

6 findings, 2 major. Run fix to see the diffs.

Fixes as diffs, then a pull request

Polish keeps diffs small. Revamp rewrites motion with the real recipe. Nothing lands without your yes.

src/components/Modal.tsx

.modal {

- transition: all 0.3s;

+ transition:

+ opacity var(--duration-quick) var(--ease-out),

+ transform var(--duration-quick) var(--ease-out);

}

+@media (prefers-reduced-motion: reduce) {

+ .modal { transition: none; }

Apply 3 fixes? (y/n)

A score gate on every pull request

The Action scores every pull request and can block merges when motion quality drops.

UI motion agent,
backed by a library

Library includes 43+ crafted transitions, ready to drop into your project.

Pro

Transitions Agent scans your codebase, scores its motion and fixes it as pull requests.

A motion score for every codebase

Fixes as diffs, then a pull request

A score gate on every pull request

Sponsors