webdevpuneet.com

Related Snippets

175 in Animations category
1–6 of 60

Matter.js Ball Pit Hero Section

Matter.js Rope Bridge You Can Cut

Matter.js Soft-Body Jelly Blobs

Matter.js Drag-and-Throw Physics Playground

Matter.js Newton's Cradle (Drag to Swing)

Rough.js Sketchy Annotation Highlight

Animated Grid Background — Free HTML CSS JS Hero Snippet

Animated Grid Background · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
TagsCSS Animation

Copy & paste

Source Code

<section class="gb-hero" id="gbHero">
  <div class="gb-grid" aria-hidden="true"></div>
  <div class="gb-spot" id="gbSpot" aria-hidden="true"></div>
  <div class="gb-fade" aria-hidden="true"></div>
  <div class="gb-content">
    <span class="gb-pill">◆ Infrastructure</span>
    <h1>Deploy on a grid<br>that moves with you</h1>
    <p>An animated dot-grid backdrop with a cursor spotlight — pure CSS and one tiny script.</p>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

CSS-only grid
Two linear-gradients tiled — no SVG or image.
Seamless pan
background-position shifts one full cell and loops.
Cursor spotlight
A blurred radial light follows the pointer.
Lerp smoothing
The light eases toward its target each frame.
Idle Lissajous drift
It wanders on a smooth curve when idle.
Single unified loop
One rAF handles cursor and idle modes.
Vignette fade
A radial mask dissolves the grid into the page.
Non-blocking light
pointer-events none keeps the hero interactive.

About this UI Snippet

Animated Grid Background — Panning Grid with Cursor Spotlight

Screenshot of the Animated Grid Background snippet rendered live

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.

Step by step

How to Use

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

Real-world uses

Common Use Cases

Developer tool heroes
Put a slowly panning grid behind text generate copy, with a spotlight that follows the cursor and drifts by itself when idle.
Infrastructure sites
Pair with a shimmer button call to action, using two tiled linear gradients and no SVG or image.
Crypto and fintech startups
Provide a technical backdrop for a startup hero in crypto or fintech, with a vignette fade keeping the edges clean.
Documentation landing pages
Frame a floating pill nav above it, where background-position loops one full cell for a seamless pan.
Lerp spotlight reference
Study how the light eases toward its target each frame, and continue to an animated gradient CTA in the next section.
Related: Anime.js SVG Shape Morph
See the Anime.js SVG Shape Morph for a related animations pattern worth pairing with this one.
Related: Character Wobble Hover Text
See the Character Wobble Hover Text for a related animations pattern worth pairing with this one.

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.