# Transitions.dev

> A curated, copy-paste collection of essential CSS transitions for web apps, packaged as interactive demos and an installable AI agent skill.

Transitions.dev is an open-source showcase of reusable CSS transitions built by Jakub Antalik. Each transition is presented as a live interactive demo with a one-click "copy CSS" button that emits a self-contained, portable snippet ready to drop into any project. The repository has accumulated over 1,400 GitHub stars since its creation.

## What It Is

Transitions.dev is a reference library and copy-paste toolkit for UI motion patterns commonly needed in web applications. Rather than a full animation framework, it focuses on a curated set of interaction transitions — things like card resizes, modal open/close, tab pill indicators, skeleton loaders, and error shakes — each implemented as a minimal, dependency-free CSS snippet. The project also ships an installable agent skill so AI coding tools can apply the transitions directly inside a developer's project.

## Transition Catalog

The showcase currently includes eighteen named transitions, each demonstrated on its own interactive card:

- **Card resize** — smooth card resize transition
- **Number pop-in** — digit flip with blur and stagger
- **Notification badge** — diagonal slide with spring pop-in
- **Text states swap** — text swap transition with blur
- **Menu dropdown** — origin-aware open/close transition
- **Modal open/close** — modal transition with scale
- **Panel reveal** — panel open/close transition
- **Page side-by-side** — forward/back page transition
- **Icon swap** — scale and blur icon swap
- **Success check** — confirmation icon with fade, rotate, blur, Y-bob, and SVG path draw
- **Avatar group hover** — hovered avatar springs up while neighbours follow with a falloff
- **Error state shake** — input shake on validation error with auto-revert

Each snippet uses semantic CSS custom properties on `:root`, transition rules namespaced under `t-*` classes, and a `@media (prefers-reduced-motion: reduce)` guard.

## Agent Skill Integration

The same eighteen transitions are packaged as an installable agent skill, enabling AI coding tools such as Cursor, Claude Code, and Codex to apply them directly inside a project. The skill is installed via:

```
npx skills add Jakubantalik/transitions.dev
```

The skill payload lives in `skills/transitions-dev/` and consists of a `SKILL.md`, eighteen per-transition reference files, and a universal `_root.css` block. A build script (`build/extract.mjs`) regenerates the skill files from `index.html` so the snippets always stay in sync with the live showcase.

## Motion Tokens Playground

Beyond the transition cards, the site includes a Motion Tokens section with interactive controls for the five core animation primitives — Duration, Easing, Distance, Blur, and Scale — letting developers tune and preview the underlying variables before copying them into a project.

## Architecture and Deployment

The project is a static HTML site with no build step required for local development; running `python3 -m http.server 8765` is sufficient. The main files are `index.html` (showcase), `prototypes.html` (live tuning playground), `skill.html` (agent skill landing page), and `example.html` (a side-by-side "generic AI output vs. with Transitions.dev skill" modal demo). The repository is hosted on GitHub and the live site is served at transitions.dev.

## Features
- 18 copy-paste CSS transition snippets
- Live interactive demos for each transition
- One-click copy CSS button per transition
- Self-contained snippets with CSS custom properties
- prefers-reduced-motion guard included
- Installable agent skill via npx skills add
- Compatible with Cursor, Claude Code, and Codex
- Motion tokens playground (Duration, Easing, Distance, Blur, Scale)
- CSS and React snippet variants
- Build script to keep skill in sync with showcase

## Integrations
Cursor, Claude Code, Codex, npx / Node.js

## Platforms
WEB, CLI

## Pricing
Open Source

## Version
main

## Links
- Website: https://transitions.dev
- Documentation: https://github.com/Jakubantalik/transitions.dev
- Repository: https://github.com/Jakubantalik/transitions.dev
- EveryDev.ai: https://www.everydev.ai/tools/transitions-dev