Disco Background for React

The room lit by a turning mirror ball: hundreds of soft coloured spots sweep across the section at three depths, the nearest largest and fastest, while faint beams fan down from the ball, half hidden at the top edge. Each depth is one layer, a seeded tile of spots slid sideways by exactly one tile, so the loop never jumps; the beams rock slowly about the ball. It all moves with CSS transforms that the browser composites without repainting, and there's no script.

Use it for parties, launches and countdowns. For light without the colour, use Spotlight; for twinkling points, Sparkles; for celebrations that burst, Fireworks or Confetti; for soft out-of-focus lights, Bokeh.

Installation

Usage

import { Disco } from "@/components/ui/disco";

<Disco className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold">Friday night, all night</h1>
</Disco>

Disco is a container: whatever you put inside sits on top of the light, in normal flow. The spots cover the whole box at any size, a little brighter near the ball and dimmer toward the bottom corners. In dark mode the light adds up; in light mode it's quieter, with the colours deepened so they read on white. The surface is the root's own background, so className="bg-…" sets it. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Ice palace

colors takes up to five CSS colours, repeated when there are fewer; the spots, the beams and the ball's glow all take them. Here whites and blues.

In a card

ball={false} keeps only the light the ball throws, and speed={0.6} turns it more slowly, for a calmer card.

Accessibility

The light is decoration: it's hidden from assistive tech and lets every click through to your content. Nothing flashes: the spots glide, they never blink, so it's safe for photosensitive visitors. With reduced motion the spots and the beams hold still, a still room.

Put copy over it in your foreground colour (text-foreground). The spots are small and spread out, so text keeps above 4.5:1 almost everywhere; for small text, a soft backdrop behind it (bg-background/70) keeps every letter clear as the spots pass.

FAQ

API Reference