Light band

A React component in Beamline's Motion & effects category.

A slow band of split light in the dark behind a section, blue at one end and amber at the other with a bright core: Prism's light at a chosen place, a hero, the plan you sell or the closing call to action. It answers the page's scroll: it moves at its own depth as its section passes, and a pulse of light runs along it while the page moves. Painted once; at rest it barely moves, and only while on screen.

Use it for

A marketing or product hero: the band rises round the headline (variant rise).
The plan you sell on a pricing section: the band rises behind its card, so that card's glass takes the colour (arc).
A closing call to action or an empty first screen that should feel considered: a low arc under the words (horizon).

Not for

Saying something is happening (glow: it is bound to a state that ends).
Every section or every card: one or two bands on a page, at the places the eye should land; the rest stays dark.
Dense working screens (tables, terminals, editors): light behind data is noise.
A page colour or texture everywhere (the look's page: Prism already lays two far-off corners of light on the page).

Anatomy

root: fills its parent (absolute, inset 0, behind the content)
body: the painted band — a soft body, fine strands near its edge each a little off in hue
core: a thin near-white line where the light is strongest, on its own layer so it can breathe
pulse: a soft window that slides along the band over a lit copy of it (hot core, strands, the body lit from inside), shown only while the page scrolls and once when the band is first on screen

Variants

variant: rise, arc, horizon
strength: 0–1
mirror: true, false
scroll: true, false

States

resting on screen (turns a degree or two over about a minute; the core brightens and dims over 13 s)
first on screen without scrolling (one pulse of light runs up the band, blue end to amber end, slowing as it reaches the top, then it rests)
page scrolling (the band moves at its own depth with its section; a pulse runs along it with the scroll, faster and brighter the faster the page moves, and fades within half a second of the page stopping)
off screen or hidden tab (paused; no pulse)
reduced motion (still: no scroll movement, no pulse)
light theme (the colours multiply onto the page, like light through a prism onto paper; the white core and the pulse disappear)

Keyboard

None: decorative and aria-hidden; nothing in it takes focus or the pointer.

Motion

Painted once per size on two canvases (repainted only when the box changes size, after 150 ms). CSS moves the finished layers in steps — 240 over 70 s for the turn, 90 over 13 s for the core — so a band on screen costs a few repaints of one layer a second and nothing off screen. Horizon slides 36 px each way instead of turning, so it never reaches past its box. Scroll (browsers with scroll-driven animations): the band's place is a pure function of its section's place in the view, run by the compositor — rise rests while its section fills the view and, as it leaves, sinks and turns at a slower depth than the page; arc rises and swings into place as its section arrives and lifts away as it leaves; horizon grows up from its bottom edge as it arrives (never past its box). Elsewhere the slow turn alone. Pulse: a lit copy of the band, painted once when the first pulse needs it, seen through a soft window that script slides along the band only while the page moves; the lit copy is held still under it by the inverse transform, so a frame is two transforms and an opacity, nothing drawn. Speed and brightness follow the scroll's (down runs blue to amber, up runs back); it fades within about half a second of the scroll stopping and the loop stops. One 2.8 s run when the band is first on screen without scrolling; a scroll during it carries that run on. Durations follow the scope's motion speed and the look's motion factor.

Props

Prop	Type	Default	Description
`variant`	`"rise" \| "arc" \| "horizon"`	—	The band's path: rise climbs from the lower left to the top right corner (a hero); arc rises behind the right half (a card set there); horizon is a low arc under content.
`strength`	`number`	—	0–1, how strong the light is (default 1).
`mirror`	`boolean`	—	Turn the band the other way round (rise to the top left).
`scroll`	`boolean`	`true`	Answer the page's scroll: the band moves at its own depth as its section passes, and a pulse of light runs along it while the page moves. False keeps only the slow turn.
`classNames`	`LightBandClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—	native div

Import

import { LightBand } from "@/components/light-band/light-band";

Get it

Light band is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent