Pulsating Border

A multi-source perimeter light that travels around a rounded frame, layering a precise core, soft bloom and drifting atmospheric spill without covering its content plane.

• Framed media
• Vector studies
• Focused product surfaces

• Three independent light sources travel one continuous rounded perimeter
• Core edge, bloom and atmospheric spill are rendered as separate layers
• Pixel-space sizing keeps the border attached during responsive changes
• Content-safe inner plane remains stable across every glow setting
• Every control maps directly to this component's independent renderer contract
• Full-size and compact previews use the same implementation and behavior

Adaptive sampling, capped DPR and visibility-based suspension keep the renderer predictable. Test density on low-power mobile hardware before increasing it.

Pointer and touch coordinates are container-scoped; offscreen renderers stop work and pixel ratio is capped.

The visual canvas is decorative by default. Pair it with a semantic heading or description, and reduced motion holds a stable rendered frame.