KQ-460 · EDGE/HALO

Edge Halo

The element under the pointer outlined in light: a halo traced from the painted texture's edges inside the element's box, breathing softly, with a faint fill so the whole thing reads as chosen. It follows the real DOM, so it always finds a real edge.

KQ-460 · EDGE/HALO

Waylight · harbour board

Whatever the watch is reading, lit at the edges.

Nothing under the glass moves — the halo only finds the thing under the cursor and traces it, off the same texture the rest of the board is painted from.

Berth	Vessel	ETA	State
B1	Halcyon	05:40	cleared
B3	Tern Light	06:15	inbound
B5	Grey Petrel	06:50	holding

outlined in light

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/edge-halo

Props

Prop	Type	Default	Description
selector / padding	string · number	—	Which elements can be haloed and how far the halo extends beyond their box.
color / breath / fill	string · number · number	—	The halo colour, its breathing amplitude, and the inner fill's strength.