Background Blobs · 2026-09-05

The atmosphere is part of the system too.

The colour field behind the Opus home page is now the same fully configurable Background Blobs component available to every application that installs opus-react.

A piece of visual character should be portable, configurable down to every colour, size, position, blur, brightness, and motion path, and considerate of the people using the product — not a one-off marketing trick.

Explore the components

Background BlobsOpen component →

<BackgroundBlobs
  placement="fixed"
  count={8}
  colors={["#8f6cff", "#22d3ee", "#fb7185", "#f59e0b", "#34d399", "#60a5fa", "#f472b6", "#a78bfa"]}
  size="too-large"
  blur={96}
  brightness={1.15}
/>

The same layer, everywhere

The four-colour atmosphere behind the Opus home page now renders through BackgroundBlobs. It is not a separate visual effect reserved for marketing; it is the published component working in a real product surface.

Every blob, every colour

Applications can build a field from one to eight generated blobs and assign any valid CSS colour to each one. For an art-directed composition, pass individual blobs with their own start and end colours, opacity, position, size, and drift direction.

Tune the atmosphere

The overall blob scale has small, medium, large, and too-large presets; individual blobs can use their own CSS size. Blur is a pixel value, brightness is a numeric multiplier, and both can be tuned precisely rather than selected from a fixed theme. Placement can cover the viewport or fill a positioned parent, with optional padding around the content rendered above it.

Motion with an off switch

Choose whether the field animates, then let BackgroundBlobs respect each person’s reduced-motion preference automatically. The decorative layer stays out of the accessibility tree and never intercepts pointer input, so content placed over it remains usable.

← All stories