Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
A decorative moving colour field for marketing pages, app shells, and preview stages. The component owns its visual layer and sizing; render it directly with props and place HTML content inside it. Use placement="absolute" for a section-sized layer, or placement="fixed" to cover the viewport.
isolation, mix-blend-mode, or CSS filters on ancestors of a WebGL canvas; keep those effects on the blobs themselves.| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | HTML content rendered above the colour field. |
placement | "fixed" | "absolute" | "fixed" | Viewport cover vs a section-sized layer. |
size | "too-large" | "large" | "medium" | "small" | "large" | Blob diameter scale. large is the original marketing size. |
animated | boolean | true | Drift the colour masses. |
blur | number | 80 | Gaussian blur radius in pixels. |
blobs | BackgroundBlob[] | four Opus tones | Override colours, size, and position. |
className | string | — | Optional class on the layer. |
aria-hidden and pointer-events: none; children remain accessible and interactive.prefers-reduced-motion stops the drift animation.