Glow Droplet

Organic

A soft wobbling orb with a luminous rim, like a glowing drop of water.

Tip: pick a preset, use the custom picker, or paste your brand hex to preview this element in your colors. Some elements use a fixed multi-color palette.

Usage

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

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

Mood: Calm, deep, luminous. A single breathing light.
Colors: Electric blue by default, glowing from within with a soft additive halo.
Motion: Gentle surface wobble; the halo makes it pulse under bloom.

View component source

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

export default function GlowDroplet({ color = '#2b6bff', scale = 1 }: { color?: string; scale?: number }) {
  return (
    <mesh scale={scale}>
      <sphereGeometry args={[1, 96, 96]} />
      <MeshDistortMaterial
        color={color}
        emissive={color}
        emissiveIntensity={0.85}
        distort={0.3}
        speed={1.4}
        roughness={0.25}
        metalness={0.1}
        clearcoat={1}
        clearcoatRoughness={0.3}
      />
    </mesh>
  );
}