Bubble Background
Soft colored bubbles, one follows the cursor. Pro · Effects › Backgrounds
Large soft colour bubbles that slowly orbit and mix behind content. Each bubble is a radial gradient (no blur filter), moved by transform only, over a base tinted with the first colour; the theme's --ui-bubble-background-intensity sets their strength. Pauses off screen and in a hidden tab; still under reduced motion.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add bubble-backgroundnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { BubbleBackground } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
interactive | boolean | false | A sixth bubble follows the pointer on a spring while it is inside (never on touch or under reduced motion). |
colors | readonly string[] | Up to six bubble colours, the last one for the pointer bubble (default: neighbouring hues around the theme's accent). | |
transition | { stiffness?: number; damping?: number } | Spring of the pointer bubble (default stiffness 100, damping 20). | |
scrim | boolean | true | Softens the middle of the field with the page colour, so text over it stays readable (default true). |
Related components
- Aurora Background — Slow aurora behind your content
- Gradient Background — Slowly shifting gradient
- Stars Background — Starry sky with cursor parallax
- Hexagon Background — Hexagon grid with a glowing trail
- Hole Background — Portal tunnel with rings and particles
- Fireworks Background — Fireworks for wins and achievements, launch on click
- Spotlight — Stage beams and a cursor spotlight
- Meteors — Falling meteors
- Background Pattern — Fading dot, grid and line backgrounds
- Particles — Particle field that reacts to the cursor
- Glass Lens — Glass lens with real refraction
- Morphing Capsule — Capsule that flows between states
Previous: Gradient Background · Next: Stars Background · All Effects