Bokeh Background for React

Bokeh fills the box with soft, out-of-focus circles of light, like the background of a portrait photo. Far lights are small soft glows in amber, peach and gold; near ones are large lens discs in rose and coral, with a teal accent, each a little brighter at its rim, the outline real bokeh has. Every light drifts slowly on its own loop and gently grows and dims. On a light page they read as warm light leaks; in dark mode they're more saturated and add up where they overlap, so they glow instead of turning brown. Every orb is radial gradients placed when the page renders and moved by CSS keyframes, with no blur filter and no script.

Use it behind a warm, photographic hero. For glassy soap bubbles use Bubbles; for large colour blobs with no edges, Gradient; for small glowing points that blink, Fireflies; for tiny motes in a light shaft, Pollen.

Installation

Usage

import { Bokeh } from "@/components/ui/bokeh";

<Bokeh className="min-h-[420px]">
  <h1>In soft focus</h1>
</Bokeh>

Bokeh is a container: put your content inside and the lights drift behind it. It fills the box you give it, so set its height (min-h-[420px]), or className="fixed inset-0 -z-10" to cover the whole page. It has no background of its own: on a dark container the lights glow, on a light page they read as soft light leaks.

Demos

City lights

colors takes any CSS colours, picked for each orb. A cool palette at intensity="strong" on a dark container looks like city lights at night.

Inside a card

Fewer, smaller orbs (count={10}, minSize={24}, maxSize={90}), so whatever you put in the card stays the focus.

Accessibility

The lights are decoration: the whole layer is hidden from screen readers and ignores the pointer, and your content inside reads as usual. With reduced motion every orb holds its place and size, a still photograph of the lights. Nothing flashes: the breathing is a slow fade over 7 to 19 seconds.

Keep text in the foreground colour. On a light page the lights stay pale enough for dark text at every intensity. In dark mode a bright far glow under white text can bring contrast near 4.5:1 at the default medium and below it at strong, so use subtle behind text-heavy heroes.

FAQ

API Reference