Glossy lit spheres with halos that float on slow orbits and change depth, reflected on a dark polished floor below them.
Spatial audio for every room
npx shadcn@latest add https://hyperblur.dev/r/bg-glow-orbs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-glow-orbs.tsx.
import { BgGlowOrbs } from "@/components/hyperblur/bg-glow-orbs"
<div className="relative h-96"><BgGlowOrbs><h1>Studio</h1></BgGlowOrbs></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#2f7bff", "#9b6bff", "#38e1c6", "#ff7a59"] | One color per orb, up to eight. Hex colors. |
| background | string | "#050509" | Backdrop color. Hex color. |
| floor | boolean | true | Shows the reflective floor and the horizon line. |
| size | number | 1 | Orb size multiplier. |
| speed | number | 1 | Speed of the orbits. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |