import * as React from "react"; import { AuraCanvas, FloatingMesh, type FloatingMeshProps } from "aura-ui-three"; import { Tabs, TabsList, TabsTrigger } from "aura-ui-components/tabs"; import { Slider } from "aura-ui-components/slider"; type Shape = NonNullable<FloatingMeshProps["shape"]>; const SHAPES: { value: Shape; label: string; color: string; emissive: string }[] = [ { value: "icosahedron", label: "Icosaedro", color: "#7857ff", emissive: "#2b85ff" }, { value: "torus", label: "Toro", color: "#ff5b79", emissive: "#ff9900" }, { value: "sphere", label: "Esfera", color: "#00f2fe", emissive: "#4facfe" }, { value: "box", label: "Cubo", color: "#22c55e", emissive: "#0ea5e9" } ]; export default function FloatingMeshDemo() { const [shape, setShape] = React.useState<Shape>("icosahedron"); const [spin, setSpin] = React.useState([0.4]); const current = SHAPES.find((s) => s.value === shape) ?? SHAPES[0]!; return ( <div className="flex w-full max-w-xl flex-col gap-4"> <div className="h-[300px] overflow-hidden rounded-2xl border border-aura-border bg-aura-muted/40"> <AuraCanvas camera={{ position: [0, 0, 4], fov: 45 }}> <ambientLight intensity={0.55} /> <directionalLight position={[4, 6, 8]} intensity={1.1} /> <pointLight position={[-4, -2, 3]} intensity={0.6} color={current.emissive} /> <FloatingMesh shape={shape} color={current.color} emissive={current.emissive} spin={spin[0]} float={0.2} /> </AuraCanvas> </div> <Tabs value={shape} onValueChange={(v) => setShape(v as Shape)}> <TabsList fullWidth> {SHAPES.map((s) => ( <TabsTrigger key={s.value} value={s.value} className="flex-1"> {s.label} </TabsTrigger> ))} </TabsList> </Tabs> <div className="flex items-center gap-4"> <span className="w-28 text-sm text-aura-muted-foreground"> Rotação {spin[0]?.toFixed(1)} </span> <Slider value={spin} onValueChange={setSpin} min={0} max={2} step={0.1} aria-label="Velocidade de rotação" /> </div> </div> ); }

Instalação

Uso

API

Código-fonte

floating-mesh.tsx