Circles Background for React

Q: Can I change the colours?

Pass colors, any CSS colours or theme variables, cycled from the innermost ring out; one colour gives a single-colour set. By default every ring is your theme's --primary, a little deeper at the arcs' heads on a light page and a little whiter on a dark one, so it follows light and dark mode.

Q: How do I change the pace?

speed multiplies every ring's rate: 2 is twice as fast, 0.5 half as fast. The rings keep their relative speeds.

Q: How do I change the fade at the edges?

fade masks the rings toward the edges (radial, the default), the top or the bottom, or not at all (none). It's a mask, not a dark overlay, so it works on any background. intensity (subtle, medium, strong) sets how strongly the rings show.

Glowing concentric rings turning around the centre, each carrying bright arcs with long fading tails. For React with Base UI, when a launch page, a loading screen or a product hero should feel technical but stay calm.

Seven glowing rings turn around the centre, each at its own pace and every other one the other way. Each ring is a thin line of light the whole way round, with one to three bright arcs riding it, a sharp head and a long fading tail, over a soft glow in the middle. The smallest ring sits well inside the box and the largest passes its corners, so the rings fill a card, a banner or a whole page. CSS keyframes turn masked conic gradients; no JavaScript runs.

Use it behind a launch headline, a loading or idle state, or anything that should look precise without much movement. For rings that breathe instead of turn, use Ripple; for a beam sweeping over range rings, Sonar; for rings flying toward you, Portal.

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 { Circles } from "@/components/ui/circles";

The rings sit behind whatever you put inside, centred and sized to the container. Give the container a height; for the whole page, className="fixed inset-0 -z-10" with no children.

<Circles className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-4xl font-semibold">Launch day</h1>
</Circles>

Demos

Color

colors takes any number of CSS colours, cycled from the innermost ring out: here cyan, sky and indigo on near-black, with intensity="strong". The glow in the middle takes the first colour.

PreviewCode

Speed

speed={0.4} slows every ring to well under half its pace, for an idle or waiting state in a small card. The rings are sized to the box, so the smallest stays inside the card and the largest still reaches its corners.

PreviewCode

Accessibility

The rings are decorative: they're hidden from screen readers and never take the pointer, and your content stays on top in normal flow. With reduced motion the rings stop where they are, so the arcs stay as a still picture. Nothing flashes. The rings are thin lines and the glow behind a centred headline is at most 15% of the colour, so text in your foreground colour keeps its contrast in light and dark themes; only an arc's head is the full colour, and it passes behind any one word for a moment.

FAQ

How do the rings move?

Each ring is a conic gradient masked to a soft band and turned by CSS keyframes. One turn takes 22 seconds for the innermost ring and up to two minutes for the outermost, every other ring turning back, so the arcs rarely line up the same way twice.

Can I change the colours?

Pass colors, any CSS colours or theme variables, cycled from the innermost ring out; one colour gives a single-colour set. By default every ring is your theme's --primary, a little deeper at the arcs' heads on a light page and a little whiter on a dark one, so it follows light and dark mode.

How do I change the pace?

speed multiplies every ring's rate: 2 is twice as fast, 0.5 half as fast. The rings keep their relative speeds.

Why does it fill my card, not the window?

The rings are sized in container units of the background layer: the smallest is a third of the box's shorter side and the largest just passes its corners, so the set stays round and fills a small card, a wide banner or the whole page.

How do I change the fade at the edges?

fade masks the rings toward the edges (radial, the default), the top or the bottom, or not at all (none). It's a mask, not a dark overlay, so it works on any background. intensity (subtle, medium, strong) sets how strongly the rings show.