# Animated Background Beams

> A GSAP animated background of ink hairlines carrying light pulses into your call to action: the pointer draws a current, a click sends a ping through the whole network.

Canonical: https://gsapvault.com/effects/background-beams
Live demo: https://gsapvault.com/demos/background-beams/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | svg-path, svg-animation, ambient, stagger, pointer-attraction, radial-burst |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 7 October 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

An animated background beams layer for hero sections. A quiet network of ink hairlines, drawn like a transit map with 45 and 90 degree turns and rounded joints, fans out from behind your content to the edges of the frame. Light pulses travel along it, each a comet with a bright head and a fading tail, and they flow towards your primary button: when one arrives, the button's border flares, so the background visibly powers the call to action.

Move the pointer near a track and it draws a current: pulses on that line speed up and brighten, and fresh pulses are sent towards the junction you are nearest. Click or tap anywhere and a ping spreads out from the closest junction through the whole network, staggered by distance along the lines, sparking where two fronts meet and converging on the button. The network is plain SVG you author yourself, so it restyles and rewires without touching the script.

## Features

- Comet pulses with a bright head and a fading tail, in one accent colour
- Pulses flow into a target element and flare its border on arrival
- Pointer current: the nearest track brightens and its pulses speed up
- Click or tap pings spread through the real network, staggered by distance along the lines
- Radial sparks where two fronts of a ping meet at a junction
- Bring your own network: any SVG path is a track, any marked circle a junction
- Content marked as calm dims the pulses behind it, so copy stays readable
- One intensity setting, an ambient rate and speed, and off switches for ambient pulses and the pointer current
- Runs only while on screen and the tab is visible; pausable from JavaScript
- Reduced motion shows a still network with resting pulses; keyboard users can send a ping too

## Use Cases

- SaaS and developer-tool heroes where the background should lead the eye to the sign-up button
- Logistics, payments or infrastructure landing pages that want a network or routing motif
- Product launch pages that need movement without a video or a WebGL canvas
- Waitlist and pricing headers where one call to action deserves the attention

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

The network is inline SVG: hairline paths for the tracks and small circles for the junctions, with one junction pinned underneath the button so the lines appear to plug into it. Junctions are joined wherever track ends meet, so the effect knows which lines connect and how far apart every junction is along them.

GSAP owns all of the motion. Each pulse is a GSAP timeline that carries a comet from one junction to the next along the stroke, using stroke dash animation, and chains the legs of its route towards the button. A ping is a single timeline whose pulses start in order of distance along the lines from the junction you clicked, which is the stagger that makes the wave read as one front. Sparks are short radial bursts, the button flare is a GSAP tween of a CSS custom property, and GSAP also swaps the moving network for the reduced-motion still when the visitor's motion preference changes.

Pulse elements are pooled and capped, so a busy network never creates new elements per frame, and everything pauses when the layer leaves the screen or the tab is hidden.

## Documentation

How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### 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:

| Property | Default | Used for |
|----------|---------|----------|
| `--beams-line` | `rgba(20, 20, 18, 0.16)` | The hairline tracks (CSS) |
| `--beams-node` | `#f7f7f6` | Junction fill, and the colour a flashed junction returns to |
| `--beams-pulse` | `#f2541b` | Pulses, sparks, lit tracks and the flare |

### Options

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

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-beams-target` | CSS selector | none | The element that sits on the hub and flares when pulses arrive |
| `data-beams-rate` | Number | `0.85` | Ambient pulses per second (about half that on touch devices) |
| `data-beams-speed` | Number | `1` | Speed multiplier for every pulse and ping |
| `data-beams-ambient` | `0`, `1` | `1` | `0` turns off ambient pulses and the opening ping |
| `data-beams-current` | `0`, `1` | `1` | `0` turns off the pointer current |
| `data-beams-intensity` | `0` to `1` | `1` | Scales the whole response: pulse brightness, lit tracks, sparks, flare |

On tracks and content:

| Attribute | On | Description |
|-----------|----|-------------|
| `data-beam` | `<path>` | A track |
| `data-beam-node` | `<circle>` | A junction |
| `data-beam-hub` | one `<circle>` | The junction pinned under the target |
| `data-beam-wide` | `<path>` | Hidden under 600px by the demo CSS; the script drops any hidden track from the network |
| `data-beam-rest` | `<path>` | `0` to `1`: where a resting pulse mark sits on this track under reduced motion. Without any, the three longest tracks get one |
| `data-beams-calm` | any element in the container | Pulses passing behind it dim to this fraction (default `0.2`) so copy stays readable |
| `data-beams-ignore` | any element | Clicks on it do not send a ping (links, buttons and form fields are already ignored) |

### 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)

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Animated Background Beams](https://gsapvault.com/effects/background-beams)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Spotlight Background](https://gsapvault.com/effects/spotlight-background.md): A theatrical GSAP and WebGL spotlight background: two stage follow-spots in a hazed room sweep in from the wings, cross over your headline and land on it, then trail the cursor like spots worked by an operator.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt