Bubble Background
betaLarge blurred colour blobs drift on long looping paths and fuse like liquid through a goo filter, with an optional blob that follows the pointer on a soft spring.
- Effects & motion
- 1 file
- 2 npm packages
- Accessibility notes
- Animates with motion
- See it in Backgrounds
Loading the example…
pnpm dlx @dowel-ui/cli add bubble-backgroundnpm packages installed: class-variance-authority, motion.
import { BubbleBackground } from "@/components/ui/bubble-background";Default
Blur
Warm Palette
Card
<BubbleBackground>
| Prop | Type | Default |
|---|---|---|
blur | "sm" | "md" | "lg" | "md" |
colorsBlob colours as CSS colour expressions, e.g. | string[] | DEFAULT_COLORS |
interactiveAdds a blob that follows the pointer on a soft spring. | boolean | false |
layerClassNameClasses for the decorative layer. | string | — |
speed | "slow" | "normal" | "fast" | "normal" |
Plus every attribute of <div>.
The blob layer is decorative: aria-hidden, pointer-events none, and it adds no role or tab stop. Children render above it in their own layer and stay fully interactive — the pointer is read from the root as events bubble, never captured. Text over the blobs needs its own contrast (a card or a scrim), since the colours move behind it. Under reduced motion every drift stops and the blobs rest in a composed still layout, and the pointer follower is not rendered; its spring is wrapped in MotionConfig reducedMotion="user". Touch input is ignored.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes