Sistema de 2.000 partículas com cores brand reage ao movimento do mouse. Renderizado direto no WebGL via React Three Fiber.
Cada cena usa uma técnica diferente do Three.js
PlaneGeometry com vértices animados via useFrame — perfeito para backgrounds de seção
5 esferas flutuantes com MeshStandardMaterial e animação de posição independente
MeshNormalMaterial + rotação contínua. Elemento decorativo premium para hero ou seção de destaque
BoxGeometry em modo wireframe com luz colorida. Pode representar um logo abstrato ou elemento tech
Como estruturar componentes 3D no projeto
const Scene = dynamic(
() => import('./scene'),
{ ssr: false }
);useFrame(({ clock }, delta) => {
mesh.current.rotation.y += delta * 0.5;
mesh.current.position.y =
Math.sin(clock.getElapsedTime()) * 0.3;
});<Canvas
camera={{ position: [0, 0, 5], fov: 60 }}
gl={{ antialias: true }}
>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} />
<MeuComponente3D />
</Canvas>