Distorted Blob

Organic

A soft wobbling blob using drei's MeshDistortMaterial.

Usage

Install: three @react-three/fiber @react-three/drei

Drop <DistortedBlob /> inside your own <Canvas>.

Mood: Playful, liquid, alive.
Colors: Magenta blob glowing on dark.
Motion: Self-animating vertex distortion.

View component source

import { MeshDistortMaterial } from '@react-three/drei';

export default function DistortedBlob({ color = '#ff2fd0', scale = 1 }: { color?: string; scale?: number }) {
  return (
    <mesh scale={scale}>
      <icosahedronGeometry args={[1, 12]} />
      <MeshDistortMaterial
        color={color}
        speed={2}
        distort={0.45}
        roughness={0.2}
        metalness={0.4}
        emissive={color}
        emissiveIntensity={0.4}
        sheen={1}
        sheenRoughness={0.3}
        sheenColor={color}
      />
    </mesh>
  );
}