transitions.dev README

The project's README from github.com/Jakubantalik/transitions.dev. As one markdown file: README.md.

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:

npx transitions-pro add card-resize      # free — no account needed
npx transitions-pro list                 # see everything available

Pro transitions unlock after a passwordless browser sign-in (device flow — no API key in your terminal):

npx transitions-pro login                # opens the browser to confirm a code
npx transitions-pro add confetti-burst    # pulls the Pro CSS + React

CLI source: cli/ (published as the public transitions-pro package — 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.

npx skills add Jakubantalik/transitions.dev

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 skill is generated from index.html so the snippets always match what the showcase site demonstrates. Re-run after editing the source site:

npm run build

build/extract.mjs parses PROTO_TEMPLATES and the :root { --pX-* } block out of index.html, then re-renders every file under skills/transitions-dev/ from the templates in build/templates/.

Refine tool

Refine is a live, agent-driven companion to the skill. One command drops a timeline + Refine panel onto your running app — no npm install, no source edits of your own — and every "Refine" click asks your coding agent to align the selected CSS/Motion transition to the transitions.dev motion tokens (or replace it with a transition from the library). Suggestions appear in a panel that slides in from the right; you pick which to apply as live, reversible overrides.

# inject the panel + start the local relay (deterministic suggestions work immediately)
npx transitions-refine live

# same, but also installs/wires the Cursor CLI so the relay answers with the LLM, persistently
npx transitions-refine live --llm

# remove the injected <script> tag again
npx transitions-refine stop

Without --llm, you can instead run /refine live in your editor to back the panel with the in-IDE agent. Source lives in refine/ and ships as the public npm package transitions-refine. See refine/README.md for the full flow and env knobs.

Files

Run locally

python3 -m http.server 8765

Then open http://127.0.0.1:8765/.

transitions.dev (Jakubantalik/transitions.dev)

Searching Database…

5.4K ·GitHub
Transitions.dev
这是什么？Transitions.dev 是一个包含 43+ 个可复用、拿来即用的 CSS 过渡效果片段的合集，通过一个交互式展示网站、一个 npm CLI 和一个可安装到 AI 编程工具的智能体技能发布。
这是一个 UI 框架，还是只是可复制粘贴的 CSS 片段？它不是框架——每个展示卡片都附带一个自包含的 CSS 片段，带有语义化的自定义属性和 reduced-motion 保护，你可以直接粘贴进自己的项目，不需要任何演示用标记。
怎么把过渡效果拉取到我的项目里？从 npm 安装 CLI 并在终端中运行，即可把任意过渡效果直接拉进项目，无需手动复制粘贴；同样的过渡效果也通过 `npx skills add` 打包成可安装的智能体技能，供 AI 编程工具使用。
哪些编程智能体能使用这个技能？该技能设计为可与 Cursor、Claude Code、Codex 以及类似的 AI 编程工具配合使用；它从 skills/transitions-dev/ 安装，其中包含 SKILL.md 以及每种过渡效果各一个的参考文件。
43+ 个过渡效果都是免费的，还是有部分内容被锁定？展示网站、CLI 和技能都是免费的，但 Pro 过渡效果需要先通过设备流完成免密码浏览器登录才能解锁；CLI 包本身不含任何付费源码，而是从需要身份验证的 API 拉取 Pro 配方。
Refine 工具是什么？Refine 是一个实时伴侣工具，一条命令就能在你正在运行的应用上叠加一个时间轴和面板；点击“Refine”会让你的编程智能体把选中的 CSS/Motion 过渡对齐到 transitions.dev 的动效 token，或换成库里的某个效果。
如果我编辑展示网站，如何让智能体技能保持同步？运行 build/extract.mjs 脚本（即项目的 'build' npm 脚本），它会解析 index.html 的模板和根级 CSS 变量，并重新渲染 skills/transitions-dev/ 下的每个文件。
这些 CSS 会尊重偏好较少动效的用户吗？会，每个生成的片段默认都带有 prefers-reduced-motion 媒体查询保护。
每个展示卡片包含什么？43+ 张卡片中的每一张都演示一种交互模式，例如卡片缩放、模态框打开/关闭或成功打勾，并带有其即用 CSS 片段的复制按钮。
What are similar projects?Libraries.dev, impeccable, hallmark, superdesign-skill, evondevKit, oil-ui, baoyu-design, taste-skill
Which topics is it in?ux-design, motion, ux, ui-design, npm-package, design-system, agent-skill, javascript-library, design, cli-tool, skill, cursor
Creator
Jakubantalik
Size
51.1 MB
Stars
5.4K
Updated
CommitOct 17
Age
5mo
Commits · 90 Days