Organic Loader
Twenty indeterminate blob loaders — border-radius morphing and gooey metaballs. Black-and-white ink aesthetic, accessible reduced-motion support, and a Studio to customize and export with Pro.
Featured
Studio & export
Organic Loader Studio
Sign in to customize ink, speed, goo viscosity, and scale. Pro license unlocks download and API export (React, CSS, HTML).
Usage
import { OrganicLoader, OrganicGooeyFilter } from "@/components/profile"
// Single loader (gooey filter auto-included for metaball variants)
<OrganicLoader variant="03" label="Loading content" />
// Custom tokens
<OrganicLoader
variant="13"
ink="#14130f"
shellBg="#f3f2ef"
scale={1.1}
speed={0.85}
stageSize={140}
/>
// Mount filter once if you render many gooey loaders
<OrganicGooeyFilter blur={7} threshold={22} />Props
| Prop | Default | Description |
|---|---|---|
| variant | 01 | Loader id 01–20 |
| ink | #14130f | Foreground blob color |
| speed | 1 | Animation speed multiplier |
| scale | 1 | Artwork scale |
| gooey | true | Enable metaball filter on gooey variants |
| label | Loading | Visually hidden status for screen readers |