Uma coleção interativa de transições CSS reutilizáveis e prontas para copiar, incluindo redimensionamento de cards, animações de modais e menus, pop de badges e muito mais, cada uma emitindo um snippet autocontido com um guard de reduced-motion.
O que faz
Transitions.dev é uma vitrine interativa de 18 snippets de transição CSS reutilizáveis para aplicações web, cada um autocontido e pronto para copiar. As mesmas transições estão empacotadas como uma agent skill instalável para que ferramentas de codificação com IA como Cursor, Claude Code e Codex possam aplicá-las diretamente no seu projeto.
Transitions.dev é uma coleção interativa de transições CSS reutilizáveis. Cada card no site de demonstração apresenta um padrão de interação diferente: redimensionamento de card, pop-in de número, badge de notificação, troca de estado de texto, abertura e fechamento de menu e modal, revelação de painel, transições de página, troca de ícones, check de sucesso, hover de grupo de avatares e shake de estado de erro, e disponibiliza um snippet autocontido pronto para copiar. Os snippets utilizam custom properties semânticas do CSS em :root, regras de transição com namespace em classes t-* e um guard prefers-reduced-motion, permitindo que você cole qualquer um deles em qualquer projeto e o aplique a qualquer componente sem precisar arrastar markup ou dimensionamento específicos da demo.
As mesmas dezoito transições também estão empacotadas como uma agent skill instalável (npx skills add Jakubantalik/transitions.dev), para que ferramentas de codificação com IA como Cursor, Claude Code e Codex possam aplicá-las diretamente no seu projeto. Um passo de build regenera a skill a partir do index.html do showcase, mantendo os snippets publicados em sincronia com o que o site demonstra, e um playground interativo permite ajustar durações, distâncias e easings.
Recursos
Notas de campo
Revisado em Jun 21, 2026
Ideal para
Resultados para quem cria
Atenção
Testado com
Custo
Gratuito e open source.
Ferramentas usadas
Copie o snippet CSS autocontido de um card em transitions.dev e cole no seu projeto; ele utiliza classes `t-*` com namespace e custom properties do CSS, portanto se aplica a qualquer componente sem markup específico da demo.
Sim. As transições estão empacotadas como uma agent skill instalável (`npx skills add Jakubantalik/transitions.dev`) que Cursor, Claude Code e Codex podem aplicar diretamente.
Sim. Cada snippet inclui um guard `prefers-reduced-motion: reduce`.
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 overheadUma coleção de spinners, loaders e animações de carregamento para aplicações web modernas, construída com React, Next.js, shadcn/ui, Tailwind CSS e Framer Motion.
Best for Adicionar spinners e animações de carregamento rapidamenteUma biblioteca de animações de carregamento reutilizáveis no estilo dotmatrix para React e Next.js, instalável pelo registro do shadcn ou copiando o código-fonte direto da documentação.
Best for Loaders com estilo dotmatrix distintoUma galeria leve de animações de carregamento baseadas em curvas matemáticas - curvas rosa, figuras de Lissajous, hipotrocoides, cardioides e muito mais - construída com HTML, CSS e JavaScript puros, com notas de fórmulas e código copiável.
Best for Animações de carregamento distintas e orientadas por matemáticaOpen-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 scratchUma biblioteca de efeito liquid-glass para a web, aplica refração realista de vidro, blur, aberração cromática e iluminação em qualquer elemento HTML usando shaders WebGL.
Best for Refração realista de vidro na web via WebGL