animata

Facturé ✍️ Les animations d'interaction et les effets visuels provenant de sur Internet?, Prêt pour que vous puissiez copier et coller dans votre projet de manière transparente.

Construit avec

Table des matières

1. Introduction
   • Qu'est-ce que l'animata?
   • Qu'est-ce qui n'est pas Animata?
2. Commencer
   • Exigences
   • Instructions de configuration
     • Structure du dossier (recommandé)
     • Installer des dépendances
     • Créer des fonctions d'utilité
3. Contributif
4. Auteurs
5. Licence

Introduction

Qu'est-ce que l'animata?

Bienvenue à Animata, une collection gratuite et open source d'animations, d'effets et d'interactions fabriqués à la main que vous pouvez intégrer de manière transparente dans votre projet avec une copie simple et une pâte. Les animations sont construites à l'aide de TailwindCSS et React.js, afin qu'elles puissent être facilement personnalisées pour s'adapter à la conception de votre projet.

Qu'est-ce qui n'est pas Animata?

Animata n'est pas une bibliothèque d'interface utilisateur à part entière comme Material-UI ou Chakra-UI. Il s'agit d'une collection d'animations et d'effets que vous pouvez utiliser pour améliorer la conception de votre projet. Vous pouvez également utiliser Animata aux côtés d'autres bibliothèques d'interface utilisateur ou des systèmes de conception (vous devrez configurer TailWindCSS pour cela).

Commencer

Vous n'avez pas besoin de l'installer en tant que dépendance, vous pouvez simplement copier et coller le code, comme shadcn / ui, dans votre projet. Cependant, vous devez toujours installer l'autre dépendance dont le code a besoin.

Exigences

• TailwindCSS: pour le style.
• Framer Motion (facultatif): pour les animations complexes.
• Icônes Lucide ou Icônes Radix (facultative): Utilisez pour les icônes ou remplacez par toute autre bibliothèque d'icônes ou SVG.

Instructions de configuration

Structure du dossier (recommandé)

/
  /components
  /ui

Où / est la racine de votre projet, /components est l'endroit où vous gardez vos composants et le projet a été configuré à l'aide de chemins dans le fichier tsconfig.json .

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

Installer des dépendances

Installez les dépendances requises, si vous ne l'avez pas déjà fait:

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

Ajoutez tailwindcss-animate aux plugins dans le fichier tailwind.config.js :

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

Créer des fonctions d'utilité

Créer un fichier utils.ts dans le dossier libs et collez le code suivant:

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

NOTE

1. Si vous voyez quelque chose qui a été importé mais non mentionné dans la documentation, c'est une dépendance que vous devez installer. Si cela commence par @ / alors c'est le composant d'Animata, sinon c'est une dépendance externe. Dans un tel cas, vous pouvez soumettre un PR pour mettre à jour la documentation.
2. Si quelque chose ne fonctionne pas, les documents manquent probablement les mises à jour tailwind.config.js. Vous pouvez rechercher les entrées qui ont été ajoutées au tailwind.config.js dans le code source d'Animata. Vous pouvez créer un problème ou soumettre un PR pour mettre à jour la documentation.

Contributif

Les contributions à Animata sont toujours les bienvenues!

• ? Tirez les demandes et? Les étoiles sont toujours les bienvenues.
• Lisez notre guide de contribution pour démarrer ou nous trouver sur Discord, nous prendrons le temps de vous guider.

Auteurs

La gratitude sincère va à chacun de vous pour vos contributions incroyables à ce projet. Votre travail acharné, votre créativité et votre dévouement ont été tout simplement incroyables. Qu'il s'agisse de coder, de déboguer, de tester ou de partager des idées, tous les efforts ont fait une différence significative.

Licence

Ce projet est autorisé sous la licence du MIT. Voir le fichier de licence pour plus de détails.