npm install @caustics/blob-backgrounds <script> import { BlobBackgrounds } from '@caustics/blob-backgrounds'; </script> <BlobBackgrounds preset="lava" />
npm install @caustics/blob-backgrounds import { BlobBackgrounds } from '@caustics/blob-backgrounds/react'; return <BlobBackgrounds preset="lava" />;
npm install @caustics/blob-backgrounds import { mount } from '@caustics/blob-backgrounds'; mount(document.querySelector('#hero'), { preset: 'lava' });
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | string | "lava" | Named preset. Overrides individual props when set. |
| colors | string[] | undefined | Override palette. Accepts hex, hsl, or CSS custom properties. |
| reducedMotion | 'pause' | 'static' | 'pause' | Behavior when prefers-reduced-motion is active. |
| class | string | undefined | Additional CSS classes applied to the root element. |
caustics-blob-backgrounds/ ├── svelte/ BlobBackgrounds.svelte · index.ts · types.ts ├── react/ BlobBackgrounds.tsx · index.ts · types.ts ├── vanilla/ blob-backgrounds.ts · compiled .js ├── docs/ README.md · API.md · CHANGELOG.md ├── LICENSE.md Caustics Commercial License └── package.json
Blob Backgrounds renders smooth organic blob shapes that morph and drift across the background. Several soft blobs wander on independent organic paths and melt into one another with a WebGL metaball shader — a signed-distance smooth-union of moving circles, filled with a soft colour gradient and an anti-aliased gooey threshold for the smoothest, most liquid output. Four presets (lava, cool, neon, mono), a configurable palette, and knobs for blob count, size, speed, gooeyness, edge contrast, and glow. Ships as plain ESM (the GLSL is inlined into the build), with vanilla, React, and Svelte 5 adapters and the full Caustics lifecycle: viewport-pause, reduced-motion static frame, context-loss recovery, and a CSS fallback when WebGL is unavailable.
Caustics Commercial License · lifetime updates within v1