Glow
A React component in Beamline's Motion & effects category.
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.
Use it for
- Border beam (ring): a field or card that is live: a search running, a composer while the agent works, a hero search while focused (SearchField and InputDissolve `beam`).
- Voice glow (aurora): a call or recording in progress (VoiceButton, SpeechInput, ConversationBar do this themselves).
Not for
- Decoration with no state behind it: bind `active` to something that is true only for a while.
- More than one running at once on a screen; others may be mounted, inactive (they cost nothing).
- Showing audio level precisely (live-waveform, bar-visualizer); an agent's presence (orb).
Anatomy
- wrapped element
- field: three drifting blobs (aurora) or a turning conic band with bloom (ring)
Variants
- variant: aurora, ring
- intensity: 0–1
States
- active (fades in over 700ms, moves)
- inactive (fades out, all motion stops)
- off screen (paused)
- reduced motion (still light, no motion)
Keyboard
- None; the wrapped element keeps its own semantics and focus.
Motion
Aurora blobs drift on 7–9s periods; the ring turns every 3.6s. Transforms only; colours are --glow-1/2/3, derived from the brand.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
classNames | GlowClassNames | — | |
style / ref | CSSProperties / native Ref | — | native div |
Import
import { Glow } from "@/components/glow/glow";Get it
Glow 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
More in Motion & effects
- 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.
- 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…
- Liquid gooey: Liquid surfaces that merge like goo when they touch — split plus-menus, gooey switches, file chips.
- Sound: Interface sounds named by interaction class (tap, select, toggle, open/close, tick, success, error) through one provider; off by default.