animata

Buatan tangan ✍️ Animasi interaksi dan efek visual yang bersumber dari seluruh internet ?, Siap untuk Anda salin dan tempel ke proyek Anda dengan mulus.

Dibangun dengan

Daftar isi

1. Perkenalan
   • Apa itu Animata?
   • Apa yang bukan animata?
2. Memulai
   • Persyaratan
   • Petunjuk Pengaturan
     • Struktur folder (disarankan)
     • Instal dependensi
     • Buat fungsi utilitas
3. Berkontribusi
4. Penulis
5. Lisensi

Perkenalan

Apa itu Animata?

Selamat datang di Animata, koleksi animasi, efek, dan interaksi kerajinan tangan gratis dan open-source yang dapat Anda integrasikan dengan mulus ke dalam proyek Anda dengan salinan dan tempel sederhana. Animasi dibangun menggunakan tailwindcss dan react.js, sehingga mereka dapat dengan mudah disesuaikan agar sesuai dengan desain proyek Anda.

Apa yang bukan animata?

Animata bukan perpustakaan UI penuh seperti materi-ui atau chakra-ui. Ini adalah kumpulan animasi dan efek yang dapat Anda gunakan untuk meningkatkan desain proyek Anda. Anda juga dapat menggunakan animata bersama perpustakaan UI lainnya atau sistem desain (Anda perlu mengatur tailwindcss untuk ini).

Memulai

Anda tidak perlu menginstalnya sebagai ketergantungan sebagai gantinya Anda dapat menyalin dan menempelkan kode, sebagai shadcn/ui, ke dalam proyek Anda. Namun, Anda masih perlu menginstal ketergantungan lain yang dibutuhkan kode.

Persyaratan

• Tailwindcss: Untuk gaya.
• Framer Motion (Opsional): Untuk animasi yang kompleks.
• Ikon Lucide atau Ikon Radix (Opsional): Gunakan untuk ikon, atau ganti dengan pustaka ikon atau SVG lainnya.

Petunjuk Pengaturan

Struktur folder (disarankan)

/
  /components
  /ui

Di mana / adalah akar dari proyek Anda, /components adalah tempat Anda menyimpan komponen Anda dan proyek telah diatur menggunakan jalur dalam file tsconfig.json .

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

Instal dependensi

Instal dependensi yang diperlukan, jika Anda belum melakukannya:

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

Tambahkan tailwindcss-animate ke plugin di file tailwind.config.js :

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

Buat fungsi utilitas

Buat file utils.ts di folder LIBS dan tempel kode berikut:

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

CATATAN

1. Jika Anda melihat sesuatu yang telah diimpor tetapi tidak disebutkan dalam dokumentasi, maka itu adalah ketergantungan yang perlu Anda instal. Jika dimulai dengan @/ maka itu adalah komponen Animata, itu adalah ketergantungan eksternal. Dalam kasus seperti itu, Anda dapat mengirimkan PR untuk memperbarui dokumentasi.
2. Jika ada sesuatu yang tidak berhasil, dokumen mungkin melewatkan pembaruan tailwind.config.js. Anda dapat mencari entri yang telah ditambahkan ke tailwind.config.js dalam kode sumber Animata. Anda dapat membuat masalah atau mengirimkan PR untuk memperbarui dokumentasi.

Berkontribusi

Kontribusi untuk animata selalu diterima!

• ? Tarik permintaan dan? Bintang selalu diterima.
• Baca panduan berkontribusi kami untuk memulai, atau temukan kami di perselisihan, kami akan meluangkan waktu untuk memandu Anda.

Penulis

Syukur yang tulus menyertai Anda masing -masing atas kontribusi luar biasa Anda untuk proyek ini. Kerja keras, kreativitas, dan pengabdian Anda sangat luar biasa. Apakah itu mengkode, men -debug, pengujian, atau berbagi ide, setiap upaya membuat perbedaan yang signifikan.

Lisensi

Proyek ini dilisensikan di bawah lisensi MIT. Lihat file lisensi untuk detailnya.