animataダウンロード - animataタソースコードのダウンロード

animata

AI ソースコード

v2.0.0

ダウンロード

手作りされたInteraction Animationsとインターネット上から調達された視覚効果は、プロジェクトをシームレスにコピーして貼り付ける準備ができています。

で構築されています

導入

アニマタとは何ですか？

Animataへようこそ。簡単なコピーと貼り付けでプロジェクトにシームレスに統合できる、手作りのアニメーション、エフェクト、インタラクションの無料でオープンソースコレクションです。アニメーションはTailWindCSとReact.jsを使用して構築されているため、プロジェクトのデザインに合わせて簡単にカスタマイズできます。

アニマタとは何ですか？

Animataは、Material-UIやChakra-UIのような本格的なUIライブラリではありません。これは、プロジェクトのデザインを強化するために使用できるアニメーションとエフェクトのコレクションです。 Animataを他のUIライブラリまたは設計システムと一緒に使用することもできます（このためにTailWindCSSをセットアップする必要があります）。

はじめる

代わりに、依存関係としてインストールする必要はありません。代わりに、ShadCn/UIとしてコードをコピーしてプロジェクトに貼り付けることができます。ただし、コードに必要な他の依存関係をインストールする必要があります。

要件

Tailwindcss：スタイリング用。
Framer Motion（オプション）：複雑なアニメーション用。
LucideアイコンまたはRadixアイコン（オプション）：アイコンに使用するか、他のアイコンライブラリまたはSVGに置き換えます。

セットアップ手順

フォルダー構造（推奨）

/
  /components
  /ui

ここで/プロジェクトのルート、 /componentsコンポーネントを保持する場所であり、 tsconfig.jsonファイルのパスを使用してプロジェクトがセットアップされています。

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

依存関係をインストールします

まだ必要であれば、必要な依存関係をインストールします。

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

tailwindcss-animateにPluginsをtailwind.config.jsファイルに追加します。

 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を送信してドキュメントを更新できます。