Plataformas

3D com WebGL

Quase todo o Aura é 3D em CSS. Quando você quer WebGL de verdade, aura-ui-three traz cenas React Three Fiber prontas — e só pesa no bundle de quem importar.

1Instale

bash

pnpm add aura-ui-three three @react-three/fiber

globals.css

@import "aura-ui-three/tailwind.css";

2Hero pronto

hero.tsx

import { HeroScene } from "aura-ui-three";
import { Button } from "aura-ui-components/button";

export function Hero() {
  return (
    <HeroScene height="520px">
      <div className="grid h-full place-items-center text-center">
        <h1 className="text-5xl font-bold">Seu produto em 3D</h1>
        <Button variant="gradient">Começar</Button>
      </div>
    </HeroScene>
  );
}

A câmera segue o ponteiro, as cores vêm do tema e, com prefers-reduced-motion, a cena vira um gradiente estático — sem criar contexto WebGL.

3Monte a sua cena

scene.tsx

import { AuraCanvas, FloatingMesh, ParticleField } from "aura-ui-three";

export function Scene() {
  return (
    <AuraCanvas camera={{ position: [0, 0, 5], fov: 45 }} style={{ height: 360 }}>
      <ambientLight intensity={0.6} />
      <pointLight position={[3, 3, 3]} intensity={30} />
      <FloatingMesh shape="torus" color="#6366f1" position={[-1.2, 0, 0]} />
      <FloatingMesh shape="icosahedron" color="#ec4899" position={[1.2, 0.2, 0]} spin={0.4} />
      <ParticleField count={300} />
    </AuraCanvas>
  );
}

AuraCanvas — Canvas com dpr limitado, fundo transparente e fallback.
FloatingMesh — box, sphere, torus ou icosahedron flutuando.
ParticleField — nuvem de partículas leve.

Quer profundidade sem WebGL?

Os efeitos (Card 3D, Layered Card, Perspective Grid, Orbiting Circles…) usam só CSS 3D e animações CSS — mais leves e funcionam em qualquer dispositivo.