About this component
Blob Mask
A photo clipped by an organic SVG blob that breathes continuously, trailed by an offset outline blob, and swells gently toward the cursor. The path is rebuilt from noise-driven points each frame and written straight to the DOM. Colors, lobe count, wobble, speed, outline and swell are all props; it pauses offscreen and holds one still shape for reduced motion.
Usage
The import and the props worth knowing about, in one place.
import { BlobMask } from "@/components/beste/component/blob-mask";
<BlobMask
className="aspect-square max-w-[560px]" // give it a size; the blob fills it
src="https://images.unsplash.com/photo-1617897903246-719242758050?w=1600&q=80"
alt="A dropper bottle of golden oil"
outlineColor="#b07a5b" // any CSS color
points={7} // fewer, rounder lobes
wobble={0.8} // livelier edge, 0 to 1
bulge={0.7} // swell toward the cursor, 0 to 1
outline={false} // drop the trailing outline
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Photo shown inside the blob. |
alt | string | — | Description of the photo for screen readers. |
fillColor | string | — | Color behind the photo while it loads. Any CSS color. |
outlineColor | string | — | Color of the trailing outline blob. |
outline | boolean | — | Draw the offset outline blob behind the photo. |
outlineOffset | number | — | How far the outline blob sits from the photo, 0 to 1. |
points | number | — | Number of lobes the blob is built from, 5 to 14. |
wobble | number | — | How much the edge breathes, 0 (a still circle) to 1. |
speed | number | — | Motion speed, 1 is the default pace. |
bulge | number | — | How far the edge swells toward the cursor, 0 to 1. |
interactive | boolean | — | The edge swells toward the cursor. |
paused | boolean | — | Freeze the shape where it is. |
className | string | — | |
children | ReactNode | — |
