Border Glow

Lights the border of its child where the pointer is, following it. A single element, no wrapper added to the DOM.

API

Props

prop	type	default
`children?`	`ReactElement`	`—`	the element to light up; cloned, not wrapped
`position?`	`BorderGlowPosition`	`"all"`	which edge glows: up, down, left, right, or the whole ring
`tolerance?`	`number`	`1`	radius of the glow as a fraction of the element's longest side

Examples

Usage

tsx

<BorderGlow>
  <Card>
    <p>position="all"</p>
  </Card>
</BorderGlow>

<BorderGlow position="down" tolerance={0.4}>
  <Card>
    <p>position="down"</p>
  </Card>
</BorderGlow>

position="all"

position="down"

Details

How the light is drawn

The glow is a radial gradient on a pseudo-element, and the border is only the part of it you see: for the full ring, the gradient is clipped to the border box minus the padding box, which leaves exactly the border width lit. For a single edge, the pseudo-element is that edge and nothing more.

tsx

<BorderGlow position="down" tolerance={0.2}>
  <header className="border-b-margo border-border">…</header>
</BorderGlow>

On an edge, the coordinate perpendicular to it is mirrored, so the light tracks the pointer along the edge and fades as it moves away — which is why the fixed header of this site lights from below as you sweep across it.

Tolerance

The radius is a fraction of the element's longest side rather than a length in pixels, so the same value reads the same on a chip and on a full-width header. Lower it when the element is large and the light would otherwise cover all of it at once.

tsx

tolerance = 1     // radius = the longest side: a wide, soft light
tolerance = 0.2   // radius = a fifth of it: a tight, fast highlight

Values are clamped between 0 and 1. The glow appears on hover and on focus-within, so a card reached with the keyboard lights up as well.

What it is for

A lit edge reads as an outline: it says where a thing ends and that the pointer has found it, without touching anything inside. That suits elements defined by their boundary — a card in a grid, a bar pinned to an edge of the screen, a control whose fill is already carrying a state — and it keeps working at small sizes, where the border is most of what you see.