Jakubantalik / transitions.dev

# Transitions.dev
Transitions.dev is an interactive collection of reusable CSS transitions. Each card on the index page demonstrates a different interaction pattern and ships a copy-ready, portable CSS snippet for each.
Live site: https://transitions.dev/
## Transitions
| # | Name | What it shows |
|---|------|---------------|
| 1 | **Card resize** | Smooth card resize transition. |
| 2 | **Number pop-in** | Digit flip with blur and stagger. |
| 3 | **Notification badge** | Diagonal slide with spring pop-in. |
| 4 | **Text states swap** | Text swap transition with blur. |
| 5 | **Menu dropdown** | Origin-aware open / close transition. |
| 6 | **Modal open / close** | Modal transition with scale. |
| 7 | **Panel reveal** | Panel open / close transition. |
| 8 | **Page side-by-side** | Forward / back page transition. |
| 9 | **Icon swap** | Scale and blur icon swap. |
| 10 | **Success check** | Confirmation icon with fade, rotate, blur, Y-bob, and SVG path draw. |
| 11 | **Avatar group hover** | Hovered avatar springs up while neighbours follow with a falloff. |
| 12 | **Error state shake** | Input shake on validation error with auto-revert to neutral. |
Each card has a copy button that emits a self-contained CSS snippet: semantic CSS custom properties on `:root`, the transition rules namespaced under `t-*` classes, and a `@media (prefers-reduced-motion: reduce)` guard — so you can paste the snippet into any project and apply it to any component without pulling in demo-specific markup or sizing.
## Install with the CLI (npm)
Pull any transition into your project from the terminal — no manual copy:
 [code] 
Pro transitions unlock after a passwordless browser sign-in (device flow — no API key in your terminal):
 [code] 
CLI source: `cli/` (published as the public `transitions-dev` package; `transitions-pro` is the old name and forwards to it — it holds no premium source; Pro recipes are fetched from the authenticated API).
## Use as an agent skill
The same transitions are packaged as an installable agent skill so AI coding tools (Cursor, Claude Code, Codex, …) can apply them directly inside your project.
 [code] 
Skill source lives in `skills/transitions-dev/` — `SKILL.md`, eighteen per-transition reference files (`01-card-resize.md` … `18-texts-reveal.md`), and `_root.css` (the universal install block on its own).
The same command also installs `skills/transitions-ui-generation/`: it makes any UI appear as if an agent is generating it. A dotted wireframe is drawn from the element's own structure, then the real UI is revealed. It has two modes, `skeleton` and `skeleton-texts` (with an agent log, the motion CSS being written and a step line), and one dependency-free runtime for any framework. Preview it with `demo.html`.
The skill is generated from `index.html` so the snippets always match what the showcase site demonstrates. Re-run after editing the source site:
 [code] 
`build/extract.mjs` parses `PROTO_TEMPLATES` and the `:root { --pX-* }` block ou