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.

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.