Brainwaves Background for React

Brainwaves lays a few EEG channels across its container and drifts them slowly to the left over a still grid of faint lane lines and time columns. Each trace has a slow rhythm, a jagged noise floor and a spike now and then, in one tint from your theme; the channels alternate between near and far, the far ones fainter and slower, so the lanes drift past each other, and a radial fade softens the edges. Each trace is worked out when the page renders, from its channel's number, as one seamless SVG tile that repeats across a strip, and two CSS animations slide the strips, so no script runs and they look the same on every load.

Use it for neuroscience, sleep, health and focus products, or any hero that should read as live measurement. For a single bright trace with afterglow, use Oscilloscope; for soft, blurred waves of colour without the noise, Wavy; for flowing curves, Paths; for signals travelling along circuit traces, Circuit.

Installation

Usage

import { Brainwaves } from "@/components/ui/brainwaves";

<Brainwaves className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Focus, measured</h1>
</Brainwaves>

Brainwaves is a container: give it a size, put your content inside, and the traces sit behind it. They take your theme's primary colour, so they're ink on a paper chart in light mode and glowing lines in dark mode. For the whole page, pass className="fixed inset-0 -z-10".

Demos

Clinical

The polysomnograph look: a card that stays dark in both themes (className="dark bg-[#020617]"), six colors, one per channel, from cyan to red, the montage's names in the gutter with labels, and fade="none" to keep the plot edge to edge.

Calm

A quieter card: count={3} channels, jitter={0.4} for a smoother noise floor, spikeRate={0} for no spikes and speed={0.5}.

Accessibility

The traces and their labels are decoration, not data: they're hidden from assistive tech and never take the pointer, so your content is read and clicked as usual. With reduced motion the traces stand still. Nothing flashes; the traces only drift. They're thin, faint at the edges and fainter on the far lanes, but they still cross whatever sits on top, so keep text in your foreground colour, or use 3 channels and a jitter under 1 behind body text. The time axis runs left to right on every page, as on a real EEG, and the gutter stays on the left.

FAQ

API Reference