animata

Handgefertigtes ✍️ Interaktionsanimationen und visuelle Effekte aus dem Internet? Sie können nahtlos kopieren und in Ihr Projekt einfügen.

Gebaut mit

Inhaltsverzeichnis

1. Einführung
   • Was ist Animata?
   • Was ist keine Animata?
2. Erste Schritte
   • Anforderungen
   • Setup -Anweisungen
     • Ordnerstruktur (empfohlen)
     • Abhängigkeiten installieren
     • Nutzfunktionen erstellen
3. Beitragen
4. Autoren
5. Lizenz

Einführung

Was ist Animata?

Willkommen bei Animata, einer kostenlosen und Open-Source-Sammlung von handgefertigten Animationen, Effekten und Interaktionen, die Sie nahtlos in Ihr Projekt mit einer einfachen Kopie und Einfüge integrieren können. Die Animationen werden mit Tailwindcss und React.js erstellt, sodass sie leicht so angepasst werden können, dass sie das Design Ihres Projekts entsprechen.

Was ist keine Animata?

Animata ist keine vollwertige UI-Bibliothek wie Material-UI oder Chakra-UI. Es handelt sich um eine Sammlung von Animationen und Effekten, mit denen Sie das Design Ihres Projekts verbessern können. Sie können Animata auch neben anderen UI -Bibliotheken oder -Entechnik -Systemen verwenden (Sie müssen dafür Tailwindcss einrichten).

Erste Schritte

Sie müssen es nicht als Abhängigkeit installieren, sondern können einfach den Code als Shadcn/UI in Ihr Projekt kopieren und einfügen. Sie müssen jedoch weiterhin die andere Abhängigkeit installieren, die der Code benötigt.

Anforderungen

• Tailwindcss: Zum Styling.
• Framer Motion (optional): Für komplexe Animationen.
• Lucide -Symbole oder Radix -Symbole (optional): Verwenden Sie für Symbole oder ersetzen Sie sie durch andere Symbolbibliothek oder SVGs.

Setup -Anweisungen

Ordnerstruktur (empfohlen)

/
  /components
  /ui

Wo / ist die Stammin Ihres Projekts, /components , wo Sie Ihre Komponenten aufbewahren und das Projekt mit Pfaden in der Datei tsconfig.json eingerichtet wurde.

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

Abhängigkeiten installieren

Installieren Sie die erforderlichen Abhängigkeiten, wenn Sie es noch nicht getan haben:

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

Fügen Sie den Plugins in tailwind.config.js Datei zu den Plugins tailwindcss-animate :

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

Nutzfunktionen erstellen

Erstellen Sie die Datei utils.ts im Ordner LIBS und fügen Sie den folgenden Code ein:

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

NOTIZ

1. Wenn Sie etwas sehen, das in der Dokumentation importiert, aber nicht erwähnt wurde, ist es eine Abhängigkeit, die Sie installieren müssen. Wenn es mit @/ beginnt, ist es die Komponente von Animata, sonst ist es eine externe Abhängigkeit. In einem solchen Fall können Sie eine PR einreichen, um die Dokumentation zu aktualisieren.
2. Wenn etwas nicht funktioniert, vermissen die Dokumente wahrscheinlich die Updates von Tailwind.config.js. Sie können nach den Einträgen suchen, die in den Quellcode von Animata zum Quellcode von Animata hinzugefügt wurden. Sie können ein Problem erstellen oder eine PR einreichen, um die Dokumentation zu aktualisieren.

Beitragen

Beiträge zu Animata sind immer willkommen!

• ? Anfragen ziehen und? Sterne sind immer willkommen.
• Lesen Sie unseren beitragenden Leitfaden, um loszulegen, oder finden Sie uns auf Zwietracht. Wir werden uns die Zeit nehmen, um Sie zu führen.

Autoren

An jedem von Ihnen geht herzliche Dankbarkeit für Ihre erstaunlichen Beiträge zu diesem Projekt. Ihre harte Arbeit, Kreativität und Ihr Engagement waren einfach unglaublich. Egal, ob es sich um Codierung, Debuggen, Testen oder Teilen von Ideen handelte, alle Anstrengungen machten einen erheblichen Unterschied.

Lizenz

Dieses Projekt ist unter der MIT -Lizenz lizenziert. Weitere Informationen finden Sie in der Lizenzdatei.