Transitions.dev: UI transitions for AI agents
Recorded: Sept. 14, 2026, 5:08 p.m.
| Original | Summarized |
Transitions.dev: UI transitions for AI agents Skip to content Transitions.dev Transitions Search Get Pro — Sign in Appearance System Support Appearance Light Dark System Transitions Sign in UI transitions for AI agents Collection of the most essential UI transitions for web apps. Copy Browse All Default Oldest first Newest first Animate Card resize 65.78 Animate Number pop-in 1 Animate Notification badge Transaction processing... Animate Text states swap Toggle menu Menu dropdown Animate Confetti burst Toggle modal Modal open/close Toggle panel Panel reveal Gooey plus menu Ethereum Avalanche BNB $10 25% $66.11 available Page side-by-side Animate Icon swap Animate Success check +2 Avatar group hover Card stack hover Please enter a valid email. Animate Error state shake How do transitions work? Reset text Input clear with dissolve Jane Cooper Animate Skeleton loader and reveal Pull request opened Animate Texts reveal Plan Tabs sliding Drag & dropit here Drag & drop with physics Planning next moves Play Shimmer text Play Organic shimmer Copy Tooltip open/close Credit 3D tilt Dropdown menu morph Appearance Accordion Toggle Toast open/close Like Like button Image open tilt Learn more Learn more hover Notify me Checkbox check Build demo page Animate Spinner to check morph Animate Spinning counter Toggle Pro Pro gradient text Delete with smoky dissolve Setting up a workplaceSetting up a workplace Play Thinking states 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. Play Reasoning stream 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. Animate Streaming text Matrix dot loader Add banner Banner stacking Play Image generation placeholder Get Pro Get Pro button Sponsors For UI animation craft, I highly recommend Emil Kowalski’s course. Take the course You can tell when an interface feels right. Invisible Details is about the small decisions behind that. Learn more Interested in sponsorship or partnership? Get in touch. Transitions.dev Collection of the most essential UI transitions for web apps Site Docs Legal & Account Created byJakub Antalik CSS |
The document presents a curated collection of essential user interface transitions designed for web applications, specifically targeting the context of AI agents. This collection serves as a resource for implementing sophisticated and fluid visual feedback in digital interfaces. The catalog includes various granular transitions, such as smooth card resizing, number pop-in effects involving digit flipping and blurring, diagonal slide transitions for notification badges, and origin-aware transitions for menu dropdowns. Other featured transitions involve physics-based effects like confetti bursts, modal open and close animations using scaling, panel reveals, and liquid menu splits. The transitions extend to more complex interactions, including side-by-side page transitions, icon swaps, success checks with blur and rotation, and avatar group hovers featuring distance-falloff lifts and bouncy returns. Further examples cover error state shakes using cubic-bezier curves, input clear effects, skeleton loader reveals, and streaming text effects where words resolve through a soft cross-blur. Interaction patterns are also addressed through tabs sliding, drag and drop physics, and custom shimmer effects, such as masked gradient sweeps and organic wavy shimmers. Additional interactive elements are covered, including tooltip management, 3D tilts for pointers, and responsive menu morphing. Beyond the specific visual effects, the text touches upon the technical considerations behind achieving performant and realistic animations. A section addresses the rationale for lag, suggesting that performance issues related to blurring and masking often stem from the fact that animating mask positions does not composite and forces repaints. This repetition, especially when combined with displacement chains, causes the filter operation to re-execute on the CPU every frame, compounding the cost. The text suggests that the solution involves ensuring the animated property leaves the paint path entirely, noting that translating a curtain over a static field is visually equivalent to masking, and that transforms composite rather than repainting. This discussion highlights a trade-off regarding motion, noting that waves traveling with the band rather than rippling through noise fixed in space can be near-indistinguishable in motion. The collection emphasizes that understanding these invisible details is crucial for crafting interfaces that feel correct, attributing the work to Jakub Antalik. The document positions these transitions as a fundamental skill for developers aiming to enhance the tactile and visual quality of their web applications. |