# Light band

A React component in [Beamline](https://beamline.io/)'s [Motion & effects](https://beamline.io/components/effects) category. Live demo: https://beamline.io/components/light-band

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](https://beamline.io/components/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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Motion & effects

- [Glow](https://beamline.io/components/glow): Ambient light around one element that says something is happening: an aurora under a working composer, or a ring of light round a live card.
- [Halftone Dots](https://beamline.io/components/halftone-dots): A picture rebuilt as a field of dots whose size follows brightness; a new picture morphs the dots, a click ripples through, the pointer pushes dots aside.
- [Liquid gooey](https://beamline.io/components/liquid-gooey): Liquid surfaces that merge like goo when they touch — split plus-menus, gooey switches, file chips.
- [Sound](https://beamline.io/components/sound): Interface sounds named by interaction class (tap, select, toggle, open/close, tick, success, error) through one provider; off by default.