Una colección interactiva de transiciones CSS reutilizables y listas para copiar: redimensionado de tarjetas, animaciones de modales y menús, aparición de insignias y más, cada una con un fragmento autocontenido que incluye una protección para movimiento reducido.
Qué hace
Transitions.dev es una exhibición interactiva de 18 fragmentos de transición CSS reutilizables para aplicaciones web, cada uno autocontenido y listo para copiar. Las mismas transiciones están empaquetadas como una habilidad de agente instalable para que herramientas de codificación con IA como Cursor, Claude Code y Codex puedan aplicarlas directamente en tu proyecto.
Transitions.dev es una colección interactiva de transiciones CSS reutilizables. Cada tarjeta del sitio de exhibición demuestra un patrón de interacción distinto: redimensionado de tarjeta, aparición de número, insignia de notificación, cambios de estado de texto, apertura y cierre de menú y modal, revelado de panel, transiciones de página, intercambio de iconos, marca de éxito, hover de grupo de avatares y sacudida de estado de error, y viene con un fragmento autocontenido listo para copiar. Los fragmentos usan propiedades personalizadas CSS semánticas en :root, reglas de transición con espacios de nombres bajo clases t-* y una protección prefers-reduced-motion, de modo que puedes pegarlo en cualquier proyecto y aplicarlo a cualquier componente sin arrastrar el marcado o el tamaño específicos de la demo.
Las mismas dieciocho transiciones también están empaquetadas como una habilidad de agente instalable (npx skills add Jakubantalik/transitions.dev) para que herramientas de codificación con IA como Cursor, Claude Code y Codex puedan aplicarlas directamente dentro de tu proyecto. Un paso de compilación regenera la habilidad a partir del index.html de la exhibición, manteniendo los fragmentos publicados sincronizados con lo que demuestra el sitio, y un playground interactivo te permite ajustar duraciones, distancias y funciones de temporización.
Características
Notas de campo
Revisado el Jun 21, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
Costo
Gratuito y de código abierto.
Herramientas usadas
Copia el fragmento CSS autocontenido de una tarjeta en transitions.dev y pégalo en tu proyecto; usa clases `t-*` con espacio de nombres y propiedades personalizadas CSS, por lo que se aplica a cualquier componente sin marcado específico de la demo.
Sí. Las transiciones están empaquetadas como una habilidad de agente instalable (`npx skills add Jakubantalik/transitions.dev`) que Cursor, Claude Code y Codex pueden aplicar directamente.
Sí. Cada fragmento incluye una protección `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 overheadUna colección de spinners, loaders y animaciones de carga para aplicaciones web modernas, construida con React, Next.js, shadcn/ui, Tailwind CSS y Framer Motion.
Best for Añadir spinners y animaciones de carga rápidamenteUna biblioteca de animaciones de carga reutilizables en estilo dotmatrix para React y Next.js, instalable a través del registro de shadcn o copiando el código fuente directamente desde la documentación.
Best for Loaders con el distintivo estilo dotmatrixUna galería ligera de animaciones de carga basadas en curvas matemáticas: curvas de rosa, figuras de Lissajous, hipotrocoides, cardioedes y más, construida en HTML, CSS y JavaScript puro con notas de fórmulas y código listo para copiar.
Best for Animaciones de carga distintivas impulsadas por matemáticasOpen-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 scratchUna biblioteca de efecto liquid-glass para la web: aplica refracción de vidrio realista, desenfoque, aberración cromática e iluminación a cualquier elemento HTML mediante shaders WebGL.
Best for Refracción de vidrio realista en la web mediante WebGL