Ambient Glow

Absolutely-positioned drifting radial glow with live CSS-var-driven color. Decorative only — aria-hidden, pointer-events-none.

Gold Variant

The gold variant uses a static warm gold at 7% opacity — matched to the Blacklight Pro surface accent. --glow-color is not consumed.

Pro surface

Live Color Override

The glowColor prop sets --glow-color as an inline custom property. For static color overrides this is the simplest path.

Live Runtime Rewrites

For hero crossfades and other live color animations, set --glow-color on an ancestor element directly — the CSS engine repaints each frame without a React re-render:

// No re-render — the CSS engine handles the repaint each frame.
function onAccentChange(newColor: string) {
  document.documentElement.style.setProperty('--glow-color', newColor);
}

This is the key differentiator over JS-resolved colors: color-mix(in srgb, var(--glow-color) 10%, transparent) is resolved at paint time by the compositor. A rAF loop that rewrites --glow-color on <html> every frame repaints all keyed glows page-wide at 60 fps with zero JS per-element overhead.

Drift Animation

The drift is a CSS keyframe (ambientGlowDrift, 18s ease-in-out infinite alternate) that animates transform only:

From: translate3d(-2%, -1.5%, 0) scale(1)
To: translate3d(2%, 2%, 0) scale(1.07)

Because only transform is animated, the compositor can run it on a GPU thread without triggering layout or paint. will-change: transform is set on the element.

Do not combine AmbientGlow with CSS utility classes that set transform — the keyframe owns that axis.

Reduced Motion

When prefers-reduced-motion: reduce is active, the drift animation is disabled. The glow remains visible at its resting position.

Positioning

AmbientGlow is position: absolute. Its parent must have a non-static position (e.g. position: relative) to contain it.

Size and position are set via className or style at the call site:

// Fills the parent completely
<AmbientGlow style={{ inset: 0 }} />

// Overflows the parent for a softer edge
<AmbientGlow style={{ inset: '-10% -15%' }} />

Installation

npx visor add ambient-glow

Usage

import { AmbientGlow } from '@/components/visual/ambient-glow/ambient-glow';

// Keyed to theme accent — fills parent
<div style={{ position: 'relative' }}>
  <AmbientGlow style={{ inset: 0 }} />
</div>

// Gold variant
<div style={{ position: 'relative' }}>
  <AmbientGlow variant="gold" style={{ inset: '-10%' }} />
</div>

// Static color override
<AmbientGlow glowColor="var(--my-accent)" style={{ inset: 0 }} />

aria-hidden="true" — the glow is purely decorative and is hidden from the accessibility tree.
pointer-events: none — the glow never captures mouse or touch events.
prefers-reduced-motion: reduce — drift animation is disabled; the glow is visible at rest.

When to Use

Atmospheric background lighting behind hero sections or focal objects on marketing pages
Live color-reactive glows that track a dynamically rewritten CSS custom property (e.g. hero crossfade accent)
Pro/premium surface accents (gold variant)

When Not to Use

Functional UI elements — AmbientGlow is purely decorative
Inside overflow: hidden containers without adjusting inset values (the glow will be clipped at the container boundary; this may be intentional)
When you need a visible element under reduced motion — the drift stops but the glow remains

Ambient Glow

Preview