Skip to content

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.

Notifications You must be signed in to change notification settings

Josefs-stack/3DPage

Repository files navigation

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

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published