Proximity Glow

Preview

Import

import { ProximityGlow, ProximityGlowCard } from "@sigil-ui/components";

Usage

<ProximityGlow proximity={100} spread={60} blur={4}>
  <ProximityGlowCard>Content here</ProximityGlowCard>
  <ProximityGlowCard>Content here</ProximityGlowCard>
</ProximityGlow>

How it works

Three layers combine to create the effect:

1. Masked conic-gradient border

The ::before pseudo-element on each card uses mask-composite: intersect with two mask layers — one clips to the padding box, the other to the border box. Their intersection reveals only the border region:

[data-glow]::before {
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  mask:
    linear-gradient(transparent, transparent),
    conic-gradient(from calc(var(--glow-angle) * 1deg), ...);
}

2. Pointer angle tracking

On pointermove, JavaScript calculates the angle between the pointer and each card's center using Math.atan2, then sets --glow-angle as a scoped custom property:

let angle = Math.atan2(
  event.y - cardCenter[1],
  event.x - cardCenter[0]
) * 180 / Math.PI;

card.style.setProperty('--glow-angle', angle + 90);

3. Blurred glow layer

The ::after pseudo-element duplicates the masked gradient with filter: blur() for the soft glow halo. Both layers fade in only when the pointer is within the configured proximity distance.

Props

ProximityGlow

ProximityGlowCard

No custom props — accepts all standard div attributes.

Token integration