animata

Las animaciones de interacción y los efectos visuales artesanales de toda Internet. Listo para que usted copie y pegue en su proyecto sin problemas.

Construido con

Tabla de contenido

1. Introducción
   • ¿Qué es Animata?
   • ¿Qué no es animata?
2. Empezando
   • Requisitos
   • Instrucciones de configuración
     • Estructura de carpetas (recomendado)
     • Instalar dependencias
     • Crear funciones de utilidad
3. Que contribuye
4. Autores
5. Licencia

Introducción

¿Qué es Animata?

Bienvenido a Animata, una colección gratuita y de código abierto de animaciones, efectos e interacciones hechas a mano que puede integrar sin problemas en su proyecto con una simple copia y pegar. Las animaciones se construyen usando Tailwindcss y React.js, por lo que se pueden personalizar fácilmente para adaptarse al diseño de su proyecto.

¿Qué no es animata?

Animata no es una biblioteca de interfaz de usuario completa como Material-UI o Chakra-UI. Es una colección de animaciones y efectos que puede usar para mejorar el diseño de su proyecto. También puede usar Animata junto con otras bibliotecas de interfaz de usuario o sistemas de diseño (deberá configurar TailWindcss para esto).

Empezando

No necesita instalarlo como dependencia, en su lugar, simplemente puede copiar y pegar el código, como Shadcn/UI, en su proyecto. Sin embargo, aún necesita instalar la otra dependencia que necesita el código.

Requisitos

• Tailwindcss: para el estilo.
• Framer Motion (opcional): para animaciones complejas.
• Iconos de Lucide o iconos Radix (opcional): use para iconos o reemplace con cualquier otra biblioteca de iconos o SVG.

Instrucciones de configuración

Estructura de carpetas (recomendado)

/
  /components
  /ui

donde / está la raíz de su proyecto, /components es donde mantiene sus componentes y el proyecto se ha configurado utilizando rutas en el archivo tsconfig.json .

{
  "compilerOptions" : {
    "baseUrl" : " . " ,
    "paths" : {
      "@/*" : [ " ./* " ]
    }
  }
}

Instalar dependencias

Instale las dependencias requeridas, si aún no lo ha hecho:

npm install tailwind-merge clsx lucide-react tailwindcss-animate

Agregue el archivo tailwindcss-animate a los complementos en el archivo tailwind.config.js :

 module . exports = {
  plugins : [ require ( "tailwindcss-animate" ) ] ,
} ;

Crear funciones de utilidad

Crear archivo utils.ts en la carpeta libs y pegar el siguiente código:

 import { type ClassValue , clsx } from "clsx" ;
import { twMerge } from "tailwind-merge" ;
 
export function cn ( ... inputs : ClassValue [ ] ) {
  return twMerge ( clsx ( inputs ) ) ;
} 

NOTA

1. Si ve algo que se ha importado pero que no se ha mencionado en la documentación, entonces es una dependencia que debe instalar. Si comienza con @/, entonces es el componente de Animata, de lo contrario, es una dependencia externa. En tal caso, puede enviar un PR para actualizar la documentación.
2. Si algo no funciona, los documentos probablemente se pierdan las actualizaciones de tailwind.config.js. Puede buscar las entradas que se han agregado a Tailwind.config.js en el código fuente de Animata. Puede crear un problema o enviar un PR para actualizar la documentación.

Que contribuye

¡Las contribuciones a Animata siempre son bienvenidas!

• ? Solicitud de solicitudes y? Las estrellas siempre son bienvenidas.
• Lea nuestra guía contribuyente para comenzar, o encontrarnos en Discord, nos tomaremos el tiempo para guiarlo.

Autores

La gratitud sincera va a cada uno de ustedes por sus increíbles contribuciones a este proyecto. Su arduo trabajo, creatividad y dedicación han sido increíbles. Ya sea codificación, depuración, prueba o intercambio de ideas, todos los esfuerzos hicieron una diferencia significativa.

Licencia

Este proyecto tiene licencia bajo la licencia MIT. Consulte el archivo de licencia para obtener más detalles.