Interação 3D com Next.js e Framer Motion

Este projeto é um site de demonstração com foco em interação 3D, utilizando React, Next.js, Tailwind CSS, Framer Motion e outras tecnologias para criar animações suaves e responsivas com base no movimento do mouse.

Tecnologias Utilizadas

• Next.js: Framework React para desenvolvimento full-stack com rotas otimizadas e recursos de renderização híbrida.
• Framer Motion: Biblioteca de animações para React, usada para criar transições suaves com base em movimento e gestos.
• Tailwind CSS: Framework CSS utilitário para estilização rápida e eficiente.
• Tailwind Perspective: Plugin para adicionar classes de perspectiva 3D no Tailwind CSS.
• ESLint: Ferramenta para identificar e corrigir problemas no código JavaScript.

Funcionalidades

• Animação 3D suave ao mover o mouse pela tela.
• Efeito de perspectiva utilizando transformações CSS.
• Integração com componentes React personalizados.

Estrutura de Diretórios

src
├── app
│   ├── favicon.ico           # Ícone do site
│   ├── globals.css           # Estilos globais
│   ├── layout.tsx            # Layout principal do site
│   └── page.tsx              # Página principal com animação 3D
assets
├── logo.png                  # Logo do projeto
components
├── CompFundo.tsx             # Componente de fundo animado
├── RedesSociais.tsx          # Componente para ícones das redes sociais
└── TitleHome.tsx             # Componente para o título na home page

#Instalação

Requisitos Node.js (versão 14 ou superior) npm ou yarn Passos para Instalar Clone o repositório: bash Copiar código git clone https://github.com/Josefs-stack/3DPage.git cd 3DPage Instale as dependências: bash Copiar código

Usando npm

npm install

Dependências

• @kamona/tailwindcss-perspective
• framer-motion
• @rocketseat/eslint