Nimbus AI Core - Landing 3D WebGL

Nimbus e uma demo independente de landing premium para um processador de IA para edge computing. A experiencia central e um chip 3D procedural criado com Three.js e React Three Fiber, sem GLTF, Blender ou assets externos.

O produto apresentado e o Nimbus AI Core: um processador quadrado com substrato escuro, contatos laterais, trilhas de circuito, nucleo neural iluminado, componentes SMD, hotspots clicaveis e exploded view para revelar camadas internas.

O Que Funciona

• Chip/processador procedural renderizado em WebGL.
• Manipulacao direta do modelo com PresentationControls.
• Hotspots clicaveis para Neural Core, Thermal Grid, Secure Enclave e I/O Fabric.
• Auto-rotacao com controle de pausar/retomar.
• Exploded view para separar camadas internas do chip.
• Configurador visual com quatro acabamentos.
• Pulso tecnico no nucleo e nas trilhas.
• Layout responsivo para desktop e mobile.

O Que E Demo

• Produto fisico real.
• Modelo GLTF/Blender de producao.
• Benchmark real de semicondutor.
• Compra, cadastro, checkout ou CRM.
• Backend, banco de dados, analytics ou telemetria.

Esses recursos podem existir em uma versao comercial, mas nao sao necessarios para demonstrar a experiencia principal no portfolio.

Stack

• Next.js 14 com App Router
• TypeScript estrito
• Tailwind CSS
• Framer Motion
• Three.js
• @react-three/fiber
• @react-three/drei
• Lucide React

Como Rodar Junto Com o Portfolio

Na raiz do portfolio:

npm.cmd run dev:all

Isso sobe:

Portfolio: http://localhost:3000
Aurora:    http://127.0.0.1:3010
FlowMail:  http://127.0.0.1:3011
Pulse:     http://127.0.0.1:3012
Nimbus:    http://127.0.0.1:3013
DocScan:   http://127.0.0.1:3014
Lumen:     http://127.0.0.1:3015

Como Rodar So o Nimbus

Entre na pasta:

cd projects/nimbus

Instale dependencias:

npm install

Rode:

npm run dev

Abra:

http://127.0.0.1:3013

Arquitetura

src/app/page.tsx
  Landing, controles de produto, metricas tecnicas e narrativa da demo.

src/components/ProductScene.tsx
  Cena WebGL, chip procedural, luzes, PresentationControls, hotspots e exploded view.

src/app/globals.css
  Sistema visual local do Nimbus: fundo tecnico, paineis, controles e estados.

src/lib/cn.ts
  Helper para classes Tailwind.

Repositorio GitHub

Nome sugerido:

nimbus-webgl-landing

Quando estiver pronto para publicar:

cd projects/nimbus
git init
git add .
git commit -m "Projeto inicial do Nimbus AI Core"

Proximos Passos

• Adicionar comparativo tecnico entre variantes do chip.
• Criar transicoes por scroll com GSAP.
• Expandir o configurador para modos de performance.
• Publicar a demo na Vercel.