cd /news/ai-agents/transitions-dev-ui-transitions-for-a… · home topics ai-agents article
[ARTICLE · art-129411] src=transitions.dev ↗ pub= topic=ai-agents verified=true sentiment=· neutral

Transitions.dev: UI transitions for AI agents

Transitions.dev launched a UI transition library aimed at AI agent interfaces, offering animated components including text reveals, tab sliding, drag-and-drop with physics, shimmer text, tooltips, 3D tilt, dropdown morphs, accordions, toggles, toasts, like buttons, checkbox checks, spinners and reasoning streams. The project's demo page lists 8 subtasks, and its notes state that animating mask-position never composites because it repaints the element, so the fix is to paint the field statically and translate a same-coloured curtain instead, since transform composites.

read2 min views1 publishedSep 14, 2026
Transitions.dev: UI transitions for AI agents
Image: source

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

Shimmer text

Masked gradient sweep across text

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

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

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.

── more in #ai-agents 4 stories · sorted by recency
── more on @transitions.dev 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/transitions-dev-ui-t…] indexed:0 read:2min 2026-09-14 ·