UXAo vivo

3D & Animações Avançadas

O impacto visual imediato é um dos maiores diferenciais de um portfólio técnico. Uma cena 3D responsiva, com iluminação realista, materiais PBR e câmera orbitável demonstra que o desenvolvedor vai além das fronteiras convencionais do frontend — e pouquíssimos portfólios têm isso. O sistema solar interativo é especialmente poderoso: o recrutador pode clicar em qualquer planeta, ver a câmera aproximar e conferir dados astronômicos reais — mostrando controle fino de câmera e estado em cena 3D. O sistema de partículas com shader personalizado demonstra domínio de WebGL e matemática 3D. Completa o quadro uma jornada guiada por scroll pela própria stack técnica do autor, via GSAP-like camera rig com drei, que cria a sensação de produto premium ao navegar pela página.

three.js react-three-fiber webgl 3d particulas shader glsl scroll-animation animação

Tecnologias

  • React Three Fiber
  • @react-three/drei
  • Three.js
  • GLSL
  • next-intl

Arquitetura

  • Cena interativa com OrbitControls
  • sistema solar com câmera que persegue o alvo focado
  • sistema de partículas com shader GLSL
  • corredor 3D guiado por scroll

Conceitos

  • Scene graph 3D
  • PBR Materials
  • Custom GLSL Shaders
  • Particle systems
  • Cel-shading
  • Scroll-driven camera
  • React reconciler 3D
  • Performance 3D

Área de demonstração

A demonstração é 100% funcional — teste agora.