Glow
Pointer-following border highlight — proximity, spread, and optional rainbow or global gradient attachment.
Glow wraps content the same way Beam does: a transparent Surface shell with radius, and the visible card as a child Surface with radius="auto". Pointer position drives a highlight arc along the rim.
Tune how near the pointer must be, how wide the arc reads, and whether a faint rim stays when the pointer is far away. Shared globalHighlight keeps one fixed gradient across several cards; turn it off — or use rainbow colors — when a single card should feel independent. Prefer Glow when the highlight should follow the pointer; continuous spin or pulse belongs on Beam.
Glow hides under coarse pointers and prefers-reduced-motion. Do not use it as keyboard focus or status chrome.
Performance cost
Glow tracks the pointer and paints CSS variables on every move. Prefer one focal instance, or a small shared grid, per view. Do not default-decorate every card on a dense page.
When to use
- Feature cards where a pointer-driven rim adds polish without changing layout
- A small shared grid that should share one highlight gradient
- Pill list rows that need a subtle edge response on hover
When not to use
- Continuous border spin, traveling line, or pulse → Beam
- Keyboard focus or status indication (Glow is decorative only)
- Wallpapering every card on a dense dashboard
Related
- Beam — continuous animated border, line, or pulse
- Surface — shell and nested card radius
- ProgressiveBlur — edge fade over scroll or media
Common examples
Shared highlight grid
A small set of cards with shared globalHighlight is the baseline Glow pattern. Move the pointer across the row — the arc follows and the gradient stays consistent across shells.
Set globalHighlight={false} when each card should own an independent gradient path.
Rainbow highlight
rainbowColors switches to a multi-stop palette and forces shared attachment off — useful for a single featured card that should feel distinct from a shared grid.
Pill list rows
Tight proximity and a flush ring suit pill list rows inside a list shell. Glow stays decorative — row actions own the accessible labels.
Ask your agent
Add a pointer-following glow to each feature card in this grid — shared highlight across the row on hover. Keep the card copy and padding unchanged.Last updated on