18 production-ready CSS transitions for web apps, plus an AI agent skill that applies them directly inside your project.
What it does
Transitions.dev is a curated collection of 18 copy-paste CSS transitions for web apps, each namespaced under t-* selectors with semantic custom properties and a prefers-reduced-motion guard. It also ships as an installable agent skill that lets AI coding tools like Cursor, Claude Code, and Copilot a
Generic AI output produces flat, one-size-fits-all transitions. Transitions.dev gives your coding agent a curated vocabulary of 18 production-ready patterns, each tuned with real motion tokens (duration, easing, distance, blur, scale), so the AI applies the right transition instead of a guess.
Transitions.dev is two things that ship from one GitHub repo. The main site is an interactive showcase of 18 CSS transitions with a "copy CSS" button on each card. The same transitions are packaged as an agent skill and an optional live-refinement tool called Refine, both installable via npx.
The snippets are framework-agnostic: semantic CSS custom properties on :root, transition rules under t-* classes, and a @media (prefers-reduced-motion: reduce) guard. Paste a snippet, wire the documented HTML hooks, done.
Copy-paste path: visit transitions.dev, pick a pattern, hit the copy button, paste the CSS block into any project.
Agent skill path: run npx skills add Jakubantalik/transitions.dev once in your repo. Then instruct your AI tool using plain commands:
transitions reveal lists all 18 transitions.transitions review scans the project for ad-hoc keyframes and hardcoded durations, read-only.transitions apply auto-detects the best-fit pattern at cursor context, proposes it with a rationale, and installs after confirmation.Live refinement path: npx transitions-refine live injects a timeline panel into your running app. Every "Refine" click asks the agent to align the selected transition to the library's motion tokens. Add --llm to wire the Cursor CLI and get LLM-backed suggestions persistently.
Refine is the most novel part of the stack. One command, no source edits, no npm install to your own project. It injects a slide-in panel, you click Refine on any live element, and the agent proposes a replacement aligned to the transitions.dev motion tokens. Suggestions are live and reversible. Run npx transitions-refine stop to remove the injected script tag cleanly.
This library covers 18 carefully chosen patterns, not every animation scenario. Projects already deep in Framer Motion or a full animation library should treat the skill as a vocabulary reference for the agent rather than a migration target: the CSS snippets are standalone and won't integrate with Framer's motion values directly. The skill works best on projects using plain CSS or Tailwind where dropping a t-* class is enough.
Transitions.dev solves the "generic AI animation output" problem by giving your agent a concrete, citable library to pull from. Start at transitions.dev to browse the patterns, or run npx skills add Jakubantalik/transitions.dev to wire the skill into Cursor, Claude Code, or Copilot today. Made by Jakub Antalik. CSS and React snippets, no framework lock-in.
Features
Field notes
Reviewed Jun 26, 2026
Best for
Builder outcomes
Watch out
Tested with
Transitions.dev is an open-source collection of 18 production-ready CSS transitions for web app UIs, each available as a self-contained copy-paste snippet and as an installable agent skill. Every snippet uses t-* namespaced CSS classes, semantic custom properties, and a prefers-reduced-motion guard, so it drops into any project without pulling in demo markup or framework dependencies. The project also ships a Refine CLI tool that injects a live panel into your running app so you can iterate on motion with an AI agent without editing source files directly. It was created by Jakub Antalik.
Run `npx skills add Jakubantalik/transitions.dev` once in your project root to install the skill, which works with Cursor, Claude Code, GitHub Copilot, Codex, and Gemini CLI. Once installed, use `transitions reveal` to list all 18 patterns, `transitions review` to audit the project for ad-hoc keyframes and hardcoded durations (read-only), or `transitions apply` to let the agent auto-detect the best-fit transition at your cursor context and install it after confirmation. You can also name a transition directly, for example `transitions apply menu-dropdown`, to skip auto-detection.
Transitions.dev is free and open-source. The showcase site at transitions.dev, the agent skill payload, and the Refine CLI (published to npm as the `transitions-refine` package) are all available at no cost, per the GitHub repository. The source for the skill lives in the `skills/transitions-dev/` directory of the repo and is regenerated automatically from `index.html` to keep snippets in sync with the live site.
Transitions.dev is best for web app teams using AI coding agents who want consistent, named motion patterns instead of the generic easing curves AI tools produce by default: the skill gives Cursor, Claude Code, and Copilot a concrete 18-pattern vocabulary and a decision tree for matching UI elements to the right transition. It is also ideal for CSS and Tailwind projects where dropping a t-* class is enough to wire a transition without a runtime animation library. Designers handing off motion specs will find the named motion tokens (duration, easing, distance, blur, scale) useful as a shared reference. For copy-paste use without any AI tooling, the interactive showcase lets you browse, previe
Transitions.dev is a CSS-first snippet library, not a runtime animation framework, so it has no JavaScript API and does not integrate with Framer Motion's motion values or React Spring's spring system. Projects already invested in those libraries should treat the Transitions.dev skill as a vocabulary reference for the AI agent rather than a migration target, since the t-* CSS classes are standalone and won't compose with framework-level animation primitives. Transitions.dev wins on simplicity and agent-readiness: there is nothing to install in your project beyond pasting a CSS block, and the skill gives your AI a named, documented pattern set instead of a blank canvas.
The library covers 18 carefully chosen DOM and CSS transitions; it does not include 3D, canvas, SVG path, or scroll-driven animations beyond what the 18 named patterns provide. The Refine live panel requires a running local dev server to inject into, and LLM-backed suggestions require the --llm flag plus the Cursor CLI installed. Per the README, the skill payload is regenerated from index.html, so custom transitions added outside the official library will not appear in the skill until a rebuild is run.
78+ animated shadcn/ui components plus 100+ AI agent patterns, distributed as copy-paste source, free, open-source, and zero npm lock-in.
Best for React and Tailwind teams already using shadcn/ui who want animated, accessible components without npm package overheadFree, MIT-licensed React loading animation registry for shadcn-style projects, copy-paste spinners, skeletons, and motion primitives.
Best for Teams building React and Tailwind CSS products that already use shadcn/ui and need consistent pending states fastOpen-source React loading animation library with 55+ dot-matrix loaders for shadcn/Tailwind projects, install in one command.
Best for React and Tailwind CSS teams who want polished, on-brand loading animations without building from scratchDependency-free gallery of math-driven loading animations (rose, Lissajous, cardioid, and more) with formulas and copyable code for UI builders.
Best for Builders who want visually distinctive loading animations grounded in named mathematical curvesOpen-source React component kit for agentic AI apps: streaming chat, tool calls, reasoning, citations, and more, SDK-agnostic and fully owned by your codebase.
Best for React teams building agentic or chat interfaces who want streaming-ready components without writing them from scratchWebGL glass-effect library for the web, apply realistic refraction, blur, and lighting to any HTML element with a single async init call.
Best for Portfolio heroes, product landing pages, and OS-style UI shells needing physically accurate glass effects