Blob de Distorção

import { Canvas } from "@react-three/fiber";
import { Float, MeshDistortMaterial } from "@react-three/drei";
import "./styles.css";

function Blob() {
  return (
    <Float speed={2} rotationIntensity={1} floatIntensity={1.6}>
      <mesh>
        <sphereGeometry args={[1, 128, 128]} />
        <MeshDistortMaterial
          color="#8b5cf6"
          distort={0.45}
          speed={2}
          roughness={0.12}
          metalness={0.25}
        />
      </mesh>
    </Float>
  );
}

export default function App() {
  return (
    <div className="stage">
      <Canvas camera={{ position: [0, 0, 3], fov: 45 }} dpr={[1, 2]}>
        <ambientLight intensity={0.55} />
        <directionalLight position={[3, 3, 4]} intensity={1.5} color="#67e8f9" />
        <pointLight position={[-3, -2, -2]} intensity={0.9} color="#f472b6" />
        <Blob />
      </Canvas>
    </div>
  );
}