animata 다운로드 - animata 소스 코드 다운로드

animata

AI 소스 코드

v2.0.0

다운로드

인터넷 전역에서 공급되는 수공예 ✍️ 상호 작용 애니메이션 및 시각 효과?

구축

소개

Animata 란 무엇입니까?

간단한 복사 및 붙여 넣기로 프로젝트에 원활하게 통합 할 수있는 무료 및 오픈 소스 컬렉션 인 Animata에 오신 것을 환영합니다. 애니메이션은 Tailwindcss 및 React.js를 사용하여 구축되므로 프로젝트 디자인에 쉽게 사용자 정의 할 수 있습니다.

Animata가 아닌 것은 무엇입니까?

Animata는 재료 -UI 또는 Chakra-UI와 같은 본격적인 UI 라이브러리가 아닙니다. 프로젝트 디자인을 향상시키는 데 사용할 수있는 애니메이션 및 효과 모음입니다. 다른 UI 라이브러리 또는 디자인 시스템과 함께 Animata를 사용할 수도 있습니다 (이를 위해 Tailwindcss를 설정해야 함).

시작하기

대신 종속성으로 설치할 필요가 없습니다. 대신 Shadcn/UI로 코드를 프로젝트에 복사하여 붙여 넣을 수 있습니다. 그러나 코드가 필요한 다른 종속성을 설치해야합니다.

요구 사항

Tailwindcss : 스타일링 용.
프레이머 모션 (선택 사항) : 복잡한 애니메이션의 경우.
Lucide Icons 또는 Radix Icons (선택 사항) : 아이콘에 사용하거나 다른 아이콘 라이브러리 또는 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을 제출하여 문서를 업데이트 할 수 있습니다.