Development · Web app
Transitions.dev
Curated library of copy-paste web app micro-interactions and transitions
Transitions.dev is a curated gallery of hand-crafted UI transitions and micro-interaction snippets designed by Jakub Antalik. It offers self-contained, copy-paste CSS and React code with live interactive previews, accessible reduced-motion guards, and integration options for AI coding agents.
What it's for
- Drop polished UI transitions like skeleton reveals, rolling counters, or modal animations into web apps
- Install the motion library as a skill for coding assistants like Claude or Cursor
- Audit frontend codebases for missing transitions and motion accessibility using the motion agent CLI
Features
- Interactive live preview gallery for common UI transition patterns
- Self-contained, SSR-safe copyable snippets in pure CSS and React
- Accessibility built-in with prefers-reduced-motion media queries and CSS variable tuning
- Transitions Motion Skill to inject motion recipes into AI coding assistants
- CLI tool (transitions-agent) to scan codebases, score motion quality, and generate fix PRs
- Online studio remixer to tweak transition parameters directly in the browser
Pricing
Freemium. Free tier with core recipes; paid Pro plan for premium transitions and effects.
Details
- Type
- Web app
- Category
- Development
- Topic
- UI Components
- Open source
- No
- Platforms
- Web, Command line
- For
- Frontend engineers, UI/UX designers, and developers building polished web applications.
- Alternative to
- animations.dev
- Tags
- transitions, microinteractions, animation, css, react, motion design
Why it was saved
- @Jakubantalik: Provides hand-tuned implementations of the most common web app transitions, so a designer/engineer can drop polished motion into a project without building animations from scratch.
- @Jakubantalik: Ready-made, well-crafted transition patterns for product UI: input clearing, skeleton loading, text reveals, tab indicators, shimmer and tooltips.
- @ImranUxi: One-click, self-contained animations to lift an app from good to great: card resize, number pop-in, notification badge, text states swap, confetti burst, menu dropdown, modal open/close, panel reveal, gooey plus menu, page side-by-side, card stack hover, icon swap, success check, avatar group hover, error state shake, organic shimmer, input clear with dissolve, skeleton loader and reveal, texts reveal, tabs sliding, drag & drop, image open tilt, shimmer text, tooltip open/close, 3D tilt, dropdown menu morph, accordion, toast open/close, like button, learn more hover, checkbox check, spinner to check, spinning counter, toggle, pro gradient text. Free tier plus some Pro-only items.
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated