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来更新文档。