animata下載animata源代碼下載

animata

Ai源碼

v2.0.0

下載

手工製作的✍️相互作用動畫和視覺效果來自整個Internet？，準備好將其複制並粘貼到您的項目中。

建立

介紹

什麼是Animata？

歡迎來到Animata，這是一個免費的手工製作的動畫，效果和互動的收藏集，您可以通過簡單的副本和粘貼將其無縫地集成到項目中。這些動畫是使用parwindcss和react.js構建的，因此可以輕鬆自定義它們以適合您的項目的設計。

什麼不是Animata？

Animata不是一個成熟的UI庫，例如Material-UI或Chakra-UI。它是動畫和效果的集合，您可以用來增強項目的設計。您還可以將Animata與其他UI庫或設計系統一起使用（您需要為此設置parwindcss）。

入門

您無需將其作為依賴項安裝，而可以將代碼（將代碼（將代碼）複製為ShadCN/UI粘貼到您的項目中。但是，您仍然需要安裝代碼需要的其他依賴關係。

要求

tailwindcss：用於造型。
框架運動（可選）：用於復雜的動畫。
Lucide圖標或radix圖標（可選）：用於圖標，或用任何其他圖標庫或SVG替換。

設置說明

文件夾結構（推薦）

/
  /components
  /ui

在哪裡/是項目的根， /components是您保留組件的地方，並且使用tsconfig.json文件中的路徑設置了項目。

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

安裝依賴項

安裝所需的依賴項，如果您還沒有：

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

在tailwind.config.js文件中添加tailwindcss-animate ：

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

創建實用程序功能

在Libs文件夾中創建UTILS.TS文件並粘貼以下代碼：

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

筆記

如果您看到文檔中未提及但未提及的內容，則需要安裝它。如果它以 @/開頭，則是Animata的組件，而是外部依賴性。在這種情況下，您可以提交PR來更新文檔。
如果某些內容不起作用，文檔可能會錯過tailwind.config.js的更新。您可以在Animata的源代碼中查找已添加到tailwind.config.js的條目。您可以創建問題或提交PR來更新文檔。