Motion

BorderGlow

A light on the perimeter. Nothing at rest, a thin accent line on hover or focus, and a calm persistent ring when selected. No canvas, no always-running JavaScript — one masked conic gradient.

Playground

Hover the surface, then try travel mode. Flip the motion control in the top bar to see the reduced-motion path.

Controls

Intensity

Mode

Selected

Current configuration

intensity="subtle" mode="follow" selected=false

Featured run

glow

Total return+18.2%

Hover to light the edge. Select to keep it lit.

Pointer-reactive lighting is disabled on touch devices and under reduced motion.

<BorderGlow intensity="subtle" mode="follow" selected={false} radius="xl">
  <Card variant="raised">A panel that answers the pointer</Card>
</BorderGlow>

States

Four states, described precisely so they can be reviewed rather than debated.

At rest

No ring, no bloom, no listeners. Identical to a plain surface.

selected={false}

Hover / focus

A 1px accent ring appears over 200ms, plus a low-alpha bloom outside the edge.

group-hover / focus-within

Selected

The ring stays lit at reduced strength. Never brighter than focus.

selected

Reduced motion

Travel stops. The ring still appears on hover as a static gradient.

prefers-reduced-motion

Applied

The effect wraps the surface; the surface itself stays a normal Card.

Card

The default combination for a featured item in a grid.

Travel mode

attention

A slow light travels the perimeter. Use when something genuinely needs to be found.

Selected

Pairs with the Card's own selected state: accent border, soft tint, subtle glow.

Low intensity on a button

At the lowest intensity the same effect reads as a precise hover, not a decoration.

API

Component props
Prop	Type	Default	Notes
`intensity`	`"subtle" \| "normal" \| "strong"`	`"subtle"`	Ring opacity. Subtle is the house default for dense UI.
`mode`	`"travel" \| "follow"`	`"follow"`	Travel needs attention; follow is calm and pointer-driven.
`selected`	`boolean`	`false`	Persistent ring independent of hover.
`radius`	`"md" \| "lg" \| "xl" \| "full"`	`"lg"`	Must match the wrapped surface.
`speed`	`number`	`5.5`	Seconds per perimeter sweep in travel mode.

Rules

Wrap a surface — never paint the glow into the surface itself.
Match radius to the card so the ring hugs the edge.
Use selected for the one item the user is working on.

Don't

Apply it to every card in a dashboard.
Use travel mode in a dense grid — you cannot watch twelve lights.
Increase intensity to compensate for low contrast somewhere else.