Floating Orbs Background

Large blurred gradient orbs floating slowly past each other for a soft ambient background.

Several large blurred gradient orbs drift slowly and breathe in scale, each on its own period, weaving into a soft ambient background through mix-blend color layering. Content is layered above the orbs through the children slot, which suits hero sections, sign-in pages, and empty states.

Loading preview…

npx shadcn@latest add https://webberui.com/r/floating-orbs-background.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Orb countcount

Float speedspeed

Blur radiusblur

Layer opacityopacity

0.55

<FloatingOrbsBackground />

Installation

npx shadcn@latest add https://webberui.com/r/floating-orbs-background.json

Or, once registries are configured in components.json, install it as @webberui/floating-orbs-background.

Usage

import { FloatingOrbsBackground } from "@/components/ui/floating-orbs-background";

<FloatingOrbsBackground className="rounded-3xl border">
  <div className="px-8 py-24 text-center">
    <h1 className="text-4xl font-semibold">A hero section with a soft mood</h1>
  </div>
</FloatingOrbsBackground>

Props

Prop	Type	Default	Description
`palette`	`string[]`	Five built-in colors (purple / pink / blue / green / amber)	Orb color palette, taken by cycling through the index
`count`	`number`	`4`	Number of orbs, clamped between 1 and 8
`speed`	`number`	`1`	Float speed multiplier — higher drifts faster
`blur`	`number`	`80`	Blur radius (px) — higher makes the glow softer
`opacity`	`number`	`0.55`	Overall opacity of the orb layer (0–1)
`children`	`React.ReactNode`	—	Content shown layered above the orbs
`className`	`string`	—	Forwarded to the outermost container

Accessibility

The orb layer is marked aria-hidden, so this decorative content never enters the accessibility tree
When the user has "reduce motion" enabled at the system level, the orbs stop floating while the static gradient mood is kept
The orb layer is set to pointer-events-none and intercepts no mouse or touch events, so the children content stays fully interactive
The orbs are decorative only; use opacity to control how strongly the colors layer, and make sure foreground text keeps enough contrast