Kaleidoscope Background for React

Q: How do I change the number of slices?

Set symmetry, 12 by default, from 6 to 16. Odd numbers round up, because the slices come in mirrored pairs: an odd count would leave a seam where two copies meet unmirrored.

Q: How do I recolour it?

colors takes up to five CSS colours, repeated when there are fewer; each shard is a gradient from one colour into the next. By default they're amethyst, sapphire, teal, amber and rose at moderate chroma. You can also set --kaleidoscope-color-1 to --kaleidoscope-color-5 from CSS.

Q: Can I get a different picture?

count sets how many shards there are (40) and seed cuts and places them differently; each whole number gives another mandala, the same on every render.

A crisp kaleidoscope: shards of jewel-toned glass drift behind mirrors, mirrored round the centre into a mandala that keeps reforming and slowly turns. For React with Base UI, when a creative tool, a studio or a launch page wants ornament rather than noise.

A crisp kaleidoscope. Shards of coloured glass, each a gradient with a hairline of light at its edges, drift and tumble behind mirrors; every slice of the circle shows the same glass, every other one mirrored, so the picture is a jewelled mandala that keeps reforming as the shards slide past the mirror lines, and the whole of it turns slowly. Overlapping shards multiply on a light surface and add on a dark one, like glass with light behind it, and the centre is calmer for the copy on top. It's SVG drawn once at render, clipped and moved with CSS; nothing runs in script.

Use it for creative tools, design studios and portfolio covers that want ornament. For the same jewel tones as a still mosaic, use Voronoi; for a faceted low-poly surface, Facets; for a spectrum from a single beam, Prism; for soft colour without mirrors, Mesh Gradient; for bodies gliding along elliptical orbits, Orbits.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { Kaleidoscope } from "@/components/ui/kaleidoscope";

Kaleidoscope is a container: give it a size and put your content inside. The mandala is centred on the box and reaches its corners at any aspect. It's ornate, so keep copy short and large, or use intensity="subtle".

<Kaleidoscope className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">See it from every side</h1>
</Kaleidoscope>

For a backdrop behind the whole page, leave it empty and fix it under everything else:

<Kaleidoscope className="fixed inset-0 -z-10" intensity="subtle" />

Demos

Sea glass

colors takes up to five CSS colours, here teal, cyan, sapphire, indigo and seafoam. The demo's dark class gives it the dark theme's surface, so the glass glows; count={34} and seed={3} cut another set of shards.

PreviewCode

Subtle

symmetry={8} cuts the circle into eight slices for broader, bolder shapes, intensity="subtle" pales the glass for a card, and speed={0.6} slows it down.

PreviewCode

Accessibility

The mandala is decoration: it's hidden from screen readers and lets every click through to the content. With reduced motion the glass and the turn stop, so it stays a still mandala. Nothing flashes, and the picture turns once every four minutes, slow enough that it shouldn't make anyone queasy; lower speed for an even calmer drift. The pattern is ornate, so set copy in your foreground colour at a large size, or use intensity="subtle" behind body text.

FAQ

How do I change the number of slices?

Set symmetry, 12 by default, from 6 to 16. Odd numbers round up, because the slices come in mirrored pairs: an odd count would leave a seam where two copies meet unmirrored.

How do I recolour it?

colors takes up to five CSS colours, repeated when there are fewer; each shard is a gradient from one colour into the next. By default they're amethyst, sapphire, teal, amber and rose at moderate chroma. You can also set --kaleidoscope-color-1 to --kaleidoscope-color-5 from CSS.

What is backdropColor for?

The glass lies on an opaque surface, your theme's background by default, so the slices meet without a seam. If the component sits on another colour, pass it as backdropColor so the surface matches.

Can I get a different picture?

count sets how many shards there are (40) and seed cuts and places them differently; each whole number gives another mandala, the same on every render.

Is it heavy?

No script runs, and nothing repaints: each slice holds its own copy of the glass, and the browser only moves those copies and turns the stage. Every copy is just larger than its slice, which keeps graphics memory to about 180 MB for a 1280 by 720 box on a high-density screen; it grows with the box's area, so use it for one hero rather than many sections.