# 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.

Website: https://transitions.dev/

## What it is 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](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- 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, 23 April 2026](https://x.com/Jakubantalik/status/2047343992350904396): 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, 2 June 2026](https://x.com/Jakubantalik/status/2061839506844660123): Ready-made, well-crafted transition patterns for product UI: input clearing, skeleton loading, text reveals, tab indicators, shimmer and tooltips.
- [@ImranUxi, 20 August 2026](https://x.com/ImranUxi/status/2090544409213272277): 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

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/transitions-dev

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.