Librería de fragmentos de código CSS y Tailwind listos para copiar: botones, animaciones y efectos modernos para tu web.
Una biblioteca de fragmentos de código listos para copiar y pegar, organizados en botones, animaciones y efectos CSS. Cada tarjeta muestra una vista previa real del componente funcionando junto al código completo, así ves el resultado antes de llevarlo a tu proyecto. Puedes filtrar por categoría o buscar por nombre y por el propio contenido del código, y el filtro queda reflejado en la URL para compartirlo.
No dependes de capturas ni de documentación desactualizada: lo que ves en la vista previa es exactamente lo que copias. El código usa HTML y CSS estándar o clases de Tailwind, sin librerías externas ni dependencias que engorden tu bundle. Y al copiarse con un clic, integrar un efecto lleva segundos en lugar de minutos.
Dar personalidad a un botón de llamada a la acción, añadir un hover con brillo a las tarjetas de una landing, resolver un loader mientras carga un formulario, o inspirarte cuando sabes qué efecto quieres pero no recuerdas la propiedad CSS exacta. También es un buen punto de partida para aprender animaciones leyendo código corto y comentado.
Ajusta duraciones y curvas de easing al ritmo de tu interfaz: por debajo de 150 ms una animación se pierde y por encima de 400 ms se percibe lenta. Respeta la preferencia prefers-reduced-motion para quienes desactivan el movimiento. Y adapta los colores del snippet a tus variables de diseño en lugar de dejar valores fijos.
Sí. Son fragmentos libres que puedes copiar, modificar y usar en proyectos personales o de cliente sin atribución.
No. Están hechos con HTML y CSS estándar o utilidades de Tailwind, sin dependencias adicionales.
Sí. El marcado es genérico, así que solo tienes que adaptar la sintaxis de clases o atributos a tu framework.
Sí. El filtro se guarda en la URL, así que puedes compartir directamente el enlace a botones, animaciones o efectos CSS.
Sí, la biblioteca crece de forma periódica con nuevos efectos y componentes.