The animated grid background is the technical-but-elegant hero backdrop seen on infrastructure, dev-tool, and crypto sites: a subtle grid of lines that slowly pans, lit by a soft glowing spotlight that follows your cursor — and gently drifts on its own when the mouse is idle. This snippet builds the whole scene in plain HTML, CSS, and one small vanilla JavaScript loop, with no canvas and no images.

The grid, drawn with gradients

The grid is a pure-CSS pattern: two linear-gradient backgrounds — one for horizontal lines, one vertical — each a 1px opaque line over transparent, tiled at 46px via background-size. Layering the two gives a crisp graph-paper grid with no SVG or image. Animating background-position by exactly one tile (46px 46px) over 18 seconds on the gbPan keyframe makes the whole grid pan diagonally and loop seamlessly, because shifting by one full cell lands on an identical pattern.

The cursor spotlight

A blurred radial-gradient circle, .gb-spot, acts as a light that reveals the grid beneath it. A pointermove listener converts the cursor position into normalized 0–1 coordinates relative to the hero, which become the spotlight's target. Because the spotlight is pointer-events: none, it never blocks interaction, and its filter: blur(20px) softens it into ambient light rather than a hard disc.

Smoothing with linear interpolation

Raw pointer coordinates are jittery, so the animation loop eases the spotlight toward its target using lerp: current += (target - current) * 0.08 each frame. This is the standard trick for buttery cursor-following — the light always chases the pointer but lags slightly, giving a fluid, weighted feel instead of snapping. The 0.08 factor controls how tight or loose that follow is.

Idle drift on a Lissajous path

The detail that makes this feel premium: when the pointer leaves or hasn't moved, the spotlight doesn't freeze. A hasPointer flag switches the target to a slowly evolving Lissajous curve — cos(t) for x and sin(t * 1.3) for y — so the light wanders in a smooth, never-repeating loop around the hero. The moment you move the mouse again, the target snaps back to the cursor and the same lerp eases it over. One loop handles both modes.

The vignette

A .gb-fade layer is a radial gradient from transparent in the center to the page background at the edges, darkening the grid toward the corners. This focuses attention on the centered content and hides the grid's hard edges, so the pattern appears to dissolve into the page rather than stopping at a border.

Customizing it

Change background-size for a denser or sparser grid, recolor the line opacity for a bolder or subtler look, resize and recolor the spotlight's radial gradient, and tune the lerp factor for a tighter or lazier cursor follow. Adjust the Lissajous frequencies for a different idle path. Pair it with text generate headline copy or a shimmer button to complete a developer-product hero.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to derive the lerp and Lissajous math by hand — paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why current.x is nudged toward target.x by a fraction each frame instead of being set directly, and how the hasPointer flag lets one requestAnimationFrame loop smoothly hand off between "chasing the cursor" and "drifting on a Lissajous curve". The same assistant is useful for optimizing it — asking whether the two-linear-gradient grid technique is cheaper to repaint than an SVG pattern at large viewport sizes, and whether the rAF loop should throttle when the hero scrolls out of view. It's just as good for extending it: ask it to make the spotlight change color based on scroll position, add a second smaller trailing spotlight for a comet-like effect, or expose the grid density and lerp speed as data attributes so the component is reusable across multiple heroes on one page. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build an "animated grid background" hero in plain HTML, CSS, and JavaScript — no canvas, no images, no libraries, using two linear-gradients for the grid and a lerp-smoothed spotlight.

Requirements:
- A full-height hero section with a background grid made from exactly two linear-gradient layers (one for horizontal lines, one for vertical), each a thin opaque line over transparent, tiled at a fixed pixel size via background-size — do not use an SVG pattern or a background image for the grid.
- Animate the grid's background-position with a linear infinite CSS keyframe that shifts it by exactly one tile's width and height, so the pan loops seamlessly with no visible jump.
- A separate blurred, circular radial-gradient "spotlight" element, positioned with left/top percentages and pointer-events disabled so it never blocks interaction with the hero.
- In JavaScript, track the spotlight's target position as normalized 0-1 coordinates. On pointermove over the hero, compute the pointer's position relative to the hero's bounding box and set it as the target; on pointerleave, mark the pointer as inactive.
- Run one continuous requestAnimationFrame loop that: when the pointer is inactive, computes the target position from a slowly evolving Lissajous curve (different sine/cosine frequencies for x and y) so the spotlight drifts in a smooth, never-repeating path; when the pointer is active, keeps the target locked to the cursor. In both cases, ease the spotlight's current displayed position toward the target using linear interpolation (current += (target - current) * smallFactor) every frame, rather than snapping directly to the target, so the motion feels weighted and lag-free of jitter.
- Add a radial-gradient vignette layer over the whole hero, transparent in the center and fading to the page's background color at the edges, so the grid dissolves into the page rather than showing a hard rectangular edge.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA hero renders with a subtly panning grid and a glowing spotlight.
2
Move your cursorThe spotlight eases toward the pointer, revealing the grid beneath.
3
Stop movingThe light drifts on its own along a slow looping path.
4
Note the vignetteThe grid fades into the page toward the corners.
5
Resize the gridChange background-size for denser or sparser lines.
6
Tune the followAdjust the lerp factor and spotlight size and color.

Real-world uses

Common Use Cases

Dev-tool heroes

Backdrop for text generate headline copy.

Infrastructure sites

Pair with a shimmer button CTA.

Crypto and fintech

A technical backdrop behind a startup hero.

Docs landing pages

Frame a floating pill nav above it.

Product launches

Set the stage for an animated gradient CTA.

Spotlight effect demos

A reference for lerp-based cursor following.

Got questions?

Frequently Asked Questions

Two layered linear-gradients — one horizontal, one vertical — each paint a 1px opaque line over transparent, tiled at 46px via background-size. That produces a crisp graph-paper grid in pure CSS. Animating background-position by exactly one 46px cell loops seamlessly because shifting by a full tile lands on an identical pattern.

The loop eases the light toward the pointer with linear interpolation: current += (target - current) * 0.08 each frame. Raw pointer coordinates are jittery, so this lerp gives a smooth, weighted follow where the light always chases but trails slightly. The 0.08 factor sets how tight or loose the follow feels.

A hasPointer flag flips on pointerleave, switching the target to a slowly evolving Lissajous curve — cos(t) for x and sin(t*1.3) for y — so the spotlight wanders in a smooth, non-repeating loop. Moving the mouse again resets the target to the cursor, and the same lerp eases it back.

A vignette layer is a radial gradient from transparent at the center to the page background color at the edges. It darkens the grid toward the corners, focusing attention on the centered content and hiding the grid's hard boundary so the pattern appears to dissolve into the page.

Keep the grid and vignette as static CSS layers. Run the rAF loop in a mount effect, storing target and current in refs so pointer moves don't trigger re-renders, and cancel the frame on unmount. Attach pointermove and pointerleave to the hero ref. In Tailwind, build the grid with a bg-[linear-gradient(...)] arbitrary value and animate background-position via a keyframe in the config.

Loading…