{"slug": "transitions-dev-ui-transitions-for-ai-agents", "title": "Transitions.dev: UI transitions for AI agents", "summary": "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.", "body_md": "Pull request openedReview requested from 3 teammates\n\nAnimate\n\nTexts reveal\n\nTwo lines rise with offset stagger\n\nPlanDebugAsk\n\nTabs sliding\n\nPill indicator follows the active tab\n\nDrag & drop it here\n\nDrag & drop with physics\n\nZone morphs into the image\n\nPlanning next moves\n\nPlay\n\nShimmer text\n\nMasked gradient sweep across text\n\nPlay\n\nOrganic shimmer\n\nWavy shimmer with edge glow\n\nCopyShareMore\n\nTooltip open/close\n\nDelayed in, travels, instant out\n\nCreditVISAJohn Smith4111 - 1111 - 1111 - 1111\n\n3D tilt\n\n3D pointer tilt with cursor glare\n\nDropdown menu morph\n\nButton morphs into a menu surface\n\nAppearance\n\nAccordion\n\nGrid-rows height with chevron morph\n\nToggle\n\nToast open/close\n\nRises in with fade, blur and scale\n\nLike\n\nLike button\n\nHeart fills and bursts particles\n\nImage open tilt\n\nZoom with 3D tilt and bend\n\nLearn more\n\nLearn more hover\n\nChevron shifts and opens on hover\n\nNotify me\n\nCheckbox check\n\nCheck draws on with a stroke path\n\nBuild demo page8 subtasks\n\nAnimate\n\nSpinner to check morph\n\nSpinner pops into a drawn check\n\nAnimate\n\nSpinning counter\n\nDigits spin like a reel to the value\n\nToggle\n\nThumb slides with a double bounce\n\nPro\n\nPro gradient text\n\nColour washes orbit the letters\n\nDelete with smoky dissolve\n\nImage shreds and falls into smoke\n\nSetting up a workplaceSetting up a workplace\n\nPlay\n\nThinking states\n\nStatus line shimmers, then swaps to the next\n\nTwo 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.\n\nAnimating 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.\n\nSo 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.\n\nOne trade-off: the waves travel with the band instead of rippling through noise fixed in space. In motion, near-indistinguishable.\n\nPlay\n\nReasoning stream\n\nAgent reasoning scrolls by two lines\n\nAnimating 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.", "url": "https://wpnews.pro/news/transitions-dev-ui-transitions-for-ai-agents", "canonical_source": "https://transitions.dev/", "published_at": "2026-09-14 15:18:58+00:00", "updated_at": "2026-09-14 17:27:29.603601+00:00", "lang": "en", "topics": ["ai-agents", "ai-products", "developer-tools", "ai-tools"], "entities": ["Transitions.dev"], "alternates": {"html": "https://wpnews.pro/news/transitions-dev-ui-transitions-for-ai-agents", "markdown": "https://wpnews.pro/news/transitions-dev-ui-transitions-for-ai-agents.md", "text": "https://wpnews.pro/news/transitions-dev-ui-transitions-for-ai-agents.txt", "jsonld": "https://wpnews.pro/news/transitions-dev-ui-transitions-for-ai-agents.jsonld"}}