Spectrum Bars

Installation

pnpm dlx shadcn@latest add @clover-ui/spectrum-bars

Usage

import { SpectrumBars } from "@/components/spectrum-bars";

<div className="relative h-96 overflow-hidden rounded-2xl">
  <SpectrumBars />
  <div className="relative">Your content</div>
</div>

A signal background of bright vertical color stripes that fill the whole block, like a TV test pattern. The stripes slowly slide sideways while their colors drift and blend into each other, some dim down between them and the brightest ones glow toward white. Everything moves smoothly, with no jumps.

It fills its parent, so give the parent position: relative and a size, and put your content after it. It ignores the mouse, so clicks go through to your content.

Pick colors with theme: "signal" (green, cyan, blue, pink, red, orange and yellow, the default), "neon", "sunset" or "mono". Or pass your own list:

<SpectrumBars colors={["#00a3ff", "#7df9ff", "#ff2d75", "#ffb3d1"]} />

By default the stripes fill the whole block. Make bandWidth and bandHeight smaller (from 0 to 1) to shrink them into a band in the middle. Its left and right ends then fade softly into the background. columns sets how many stripes fit across, glow how much soft light spreads from them (0 turns it off), glitch how far everything sways sideways, smoothly, and speed how fast they slide and change; it goes up to 10 in the playground and has no upper limit.

It's drawn on a canvas and pauses when it's off screen or the tab is hidden. The stripe colors are its own and stay the same in light and dark mode. The dimmed stripes fade into your theme's background color, so it blends with the page. Pass backgroundColor to use another color behind them. When reduced motion is on, or animate is false, it draws one still frame.

Props