Animated Background Beams

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Put the layer inside any positioned container, before your content:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

The demo's index.html holds the full network used in the preview; copy it as a starting point.

Using It With Your Own Design

What the effect needs from your markup:

• One [data-beams] element holding one inline <svg> with a viewBox. The layer fills its parent (position: absolute; inset: 0), so the parent must be positioned. Clicks, taps and pointer movement anywhere in that parent drive the effect.
• Tracks: every <path data-beam>. Draw them in SVG units where one unit is one CSS pixel at a 1200px-wide layer; the script scales the network with the layer (from 0.6x on phones up to 1.5x on wide screens).
• Junctions: every <circle data-beam-node>. Two tracks are connected where their ends meet (within 2 units), so split a line into separate paths at each junction. A track end with no circle is still a junction, just an invisible one; off-frame line ends work this way.
• The hub: the junction with data-beam-hub. The script positions the whole SVG so the hub sits exactly under the centre of the data-beams-target element. Pulses flow towards it, and the target flares when they arrive. With no target, the hub sits at the centre of the layer.

What is only the demo's styling: the Inter type, the headline and button styling, the ground colour and the network's shape. Draw any network you like: 45 and 90 degree turns with rounded corners give the transit-map look, but the script accepts any path.

CSS the effect depends on:

• [data-beams] { position: absolute; inset: 0; overflow: hidden; pointer-events: none }, and your content above it (position: relative; z-index: 1).
• .has-js [data-beams] > svg { visibility: hidden } keeps the network from jumping before it is placed; the script reveals it.
• The track and node strokes use calc(1.25px * var(--beams-unit, 1)), which keeps hairlines the same thickness at any scale.
• The flare: the script tweens --beams-flare from 0 to 1 and back on the target element. Your button styles decide what that does; the demo mixes the border towards the pulse colour and adds a soft ring.

Colours are CSS custom properties, read once when the effect starts. Set them on the layer or any ancestor:

Options

Set on the [data-beams] element. Every number accepts an explicit 0.

On tracks and content:

Accessibility

• Reduced motion: the network is a still with three resting pulse marks. A click or tap lights the whole network and the button at once, with no travelling pulses, then fades back.
• Keyboard: the layer is focusable (it gets tabindex="0", role="button" and an aria-label unless you set your own). Enter or Space lights the network and flares the target at once rather than playing the wave.
• Touch: a tap pings; dragging sideways draws the current; vertical drags still scroll the page (touch-action: pan-y). Phones get fewer ambient pulses.
• Readable copy: mark text with data-beams-calm and pulses dim behind it. The SVG is aria-hidden.
• No JavaScript: the network shows as a still drawing.

Performance Notes

• Pulse elements are pooled (at most 64 per layer) and reused; nothing is created per frame.
• The network graph is built once from the path ends, and rebuilt only when the set of visible tracks changes.
• Every animation pauses while the layer is off screen or the tab is hidden. With ambient pulses off, an idle layer runs nothing.

Dependencies

Required:

• GSAP 3.12+ (core only; the demo pins 3.15.0)