# Transitions.dev: UI transitions for AI agents

> Source: <https://transitions.dev/>
> Published: 2026-09-14 15:18:58+00:00

Pull request openedReview requested from 3 teammates

Animate

Texts reveal

Two lines rise with offset stagger

PlanDebugAsk

Tabs sliding

Pill indicator follows the active tab

Drag & drop it here

Drag & drop with physics

Zone morphs into the image

Planning next moves

Play

Shimmer text

Masked gradient sweep across text

Play

Organic shimmer

Wavy shimmer with edge glow

CopyShareMore

Tooltip open/close

Delayed in, travels, instant out

CreditVISAJohn Smith4111 - 1111 - 1111 - 1111

3D tilt

3D pointer tilt with cursor glare

Dropdown menu morph

Button morphs into a menu surface

Appearance

Accordion

Grid-rows height with chevron morph

Toggle

Toast open/close

Rises in with fade, blur and scale

Like

Like button

Heart fills and bursts particles

Image open tilt

Zoom with 3D tilt and bend

Learn more

Learn more hover

Chevron shifts and opens on hover

Notify me

Checkbox check

Check draws on with a stroke path

Build demo page8 subtasks

Animate

Spinner to check morph

Spinner pops into a drawn check

Animate

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 workplaceSetting up a workplace

Play

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.

Play

Reasoning stream

Agent reasoning scrolls by two lines

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.
