Transitions.dev

35 essential web-app transitions, packaged as an agent skill

Tier A · StrongAnimation LibraryAgent SkillBlock Collectiontransitions.dev

(Visit transitions.dev ↗)(Docs)(Repository)

Transitions.dev is Jakub Antalik's catalogue of the transitions real product UI actually needs — card resize, modal open/close, tab slide, toast, success check, skeleton reveal, shimmer, error shake, drag-and-drop with physics and about 25 more — each shipped as portable CSS namespaced under t-* selectors with semantic custom properties, plus React versions. The differentiator is distribution: it installs as an agent skill (`npx skills add Jakubantalik/transitions.dev`) that gives Claude Code, Cursor, Codex, Copilot and Gemini CLI the commands `transitions reveal / review / apply / refine / polish`, so an agent can audit a codebase's hand-rolled animations and replace them with motion tokens. The free site demonstrates the core set; Pro unlocks the full production library, the Refine live-tuning tool and a commercial licence.

Install

npx skills add Jakubantalik/transitions.dev

For an agent

Install this as a skill rather than copying snippets — the value is `transitions review`, which walks an existing codebase, finds hand-rolled keyframes and hardcoded durations, and proposes named motion tokens instead; that is the pass to run after you scaffold UI with shadcn or beUI. It is CSS-first and framework-agnostic, so it layers cleanly on top of any component library without pulling in Motion/Framer, and it will not conflict with a library that already animates. Two cautions: the GitHub repo publishes no licence file and the full library plus commercial rights sit behind Pro, so check entitlement before shipping to a client, and do not stack its transitions on components that already have their own — you get double-easing.

Why it is here. It reframes motion as a reviewable, tokenised layer an agent can audit, which is a far better fit for AI-built UI than a gallery of copy-paste keyframes.

Install command, framework, licence and component list.

Facts

License: Commercial license, Unknown
Pricing: Freemium, Subscription, One-time purchase
Framework: React, Next.js, Vanilla JS
Styling: Vanilla CSS, CSS custom properties, Tailwind CSS
Distribution: Agent skill / rules pack, Copy-paste snippet, CLI installer, GitHub repository, Web app / online tool
Platform: Web
Content type: Code, Prompts
Agent readiness: Agent skill or rules pack, CLI installable, Copy-paste ready code, Ships a ready LLM prompt, Structured documentation
Accessibility: Honors reduced motion, Unknown
Maturity: Actively maintained
Pricing detail: Free tier on the site. Pro Solo $9/month or $149 lifetime; Pro Team $39/month for 5 seats or $499 lifetime. Pro adds the full library, the Refine tuning tool and a commercial licence for unlimited projects.
GitHub stars: 2,725

Components it ships

35 total

Helps you build

Saving Changes Showing Input Error In App Notifications Empty State Uploading Media

Notable for

ships as an agent skill, not a package
transitions review audits existing animations
portable t-* CSS with motion tokens
Refine live-tuning tool
no licence file on the repo

Provenance

Verified 2026-08-15. HTTP 200. https://transitions.dev/, https://transitions.dev/pro, https://transitions.dev/skill, gh repo view Jakubantalik/transitions.dev, web search for repo/licence

Also in Motion & Interaction

transitions.devTier A