# Glow

A React component in [Beamline](https://beamline.io/)'s [Motion & effects](https://beamline.io/components/effects) category. Live demo: 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.

## 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](https://beamline.io/components/live-waveform), [bar-visualizer](https://beamline.io/components/bar-visualizer)); an agent's presence ([orb](https://beamline.io/components/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

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

## More in Motion & effects

- [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.
- [Light band](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…
- [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.