animata

Animações de interação artesanais e efeitos visuais provenientes da Internet?, Pronto para você copiar e colar seu projeto sem problemas.

Construído com

Índice

1. Introdução
   • O que é animata?
   • O que não é animata?
2. Começando
   • Requisitos
   • Instruções de configuração
     • Estrutura da pasta (recomendada)
     • Instalar dependências
     • Crie funções de utilitário
3. Contribuindo
4. Autores
5. Licença

Introdução

O que é animata?

Bem-vindo ao Animata, uma coleção gratuita e de código aberto de animações, efeitos e interações artesanais que você pode integrar perfeitamente ao seu projeto com uma cópia e colar simples. As animações são construídas usando o TailWindcss e React.js, para que possam ser facilmente personalizados para se ajustar ao design do seu projeto.

O que não é animata?

O Animata não é uma biblioteca de interface do usuário completa, como material-ui ou chakra-ui. É uma coleção de animações e efeitos que você pode usar para aprimorar o design do seu projeto. Você também pode usar o Animata ao lado de outras bibliotecas ou sistemas de design da interface do usuário (você precisará configurar o TailWindcss para isso).

Começando

Você não precisa instalá -lo como uma dependência, em vez disso, pode simplesmente copiar e colar o código, como shadcn/ui, em seu projeto. No entanto, você ainda precisa instalar a outra dependência que o código precisa.

Requisitos

• Tailwindcss: para estilo.
• Motivo de Framer (opcional): para animações complexas.
• Ícones de Lucide ou ícones da Radix (opcional): Use para ícones ou substitua por qualquer outra biblioteca ou SVGS do ícone.

Instruções de configuração

Estrutura da pasta (recomendada)

/
  /components
  /ui

Onde / é a raiz do seu projeto /components é onde você mantém seus componentes e o projeto foi configurado usando caminhos no arquivo tsconfig.json .

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

Instalar dependências

Instale as dependências necessárias, se você ainda não o fez:

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

Adicione tailwindcss-animate aos plugins no arquivo tailwind.config.js :

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

Crie funções de utilitário

Crie o arquivo utils.ts na pasta LIBS e cole o seguinte código:

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

OBSERVAÇÃO

1. Se você vir algo que foi importado, mas não mencionado na documentação, é uma dependência que você precisa instalar. Se ele começar com @/, é o componente do Animata, caso contrário, é uma dependência externa. Nesse caso, você pode enviar um PR para atualizar a documentação.
2. Se algo não estiver funcionando, os documentos provavelmente perdem as atualizações do Tailwind.config.js. Você pode procurar as entradas que foram adicionadas ao Tailwind.config.js no código -fonte da Animata. Você pode criar um problema ou enviar um PR para atualizar a documentação.

Contribuindo

As contribuições para o Animata são sempre bem -vindas!

• ? Puxar solicitações e? As estrelas são sempre bem -vindas.
• Leia nosso guia contribuinte para começar ou encontre -nos na Discord, vamos reservar um tempo para guiá -lo.

Autores

A gratidão sincera vai para cada um de vocês por suas incríveis contribuições para este projeto. Seu trabalho duro, criatividade e dedicação foram incríveis. Seja codificando, depurando, testando ou compartilhando idéias, todos os esforços fizeram uma diferença significativa.

Licença

Este projeto está licenciado sob a licença do MIT. Consulte o arquivo de licença para obter detalhes.