proNew192 lines · framer-motion

Animated Grid

A grid with a spotlight that drifts and lingers. A full-width section backed by a fine canvas line grid; a soft spotlight travels a lissajous path across it, brightening nearby lines toward the signal colour, under a short glass-card headline.

Use it for: A technical, structured section break for product or platform pages that wants quiet geometric motion instead of a flat grid image.
Themes: Light + dark
License: Commercial use

Live

A grid that notices where you look

A fine line grid with a spotlight that drifts and brightens as it passes.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width section backed by a fine canvas line grid with a soft spotlight that
 * drifts across it on a lissajous path, brightening nearby lines. A glass card
 * holds a short headline on top.
 */

export interface BgAnimatedGridProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Canvas redraws the full line grid every frame; cells near the drifting spotlight interpolate from the border colour toward the signal colour with distance falloff.
→The spotlight's path is a lissajous curve driven by speed; glow scales its radius and the radial wash it leaves behind.
→cellSize controls grid density; colours are re-read from --border and --signal on every .dark toggle via a MutationObserver.
→Pauses when the section scrolls offscreen or the tab is hidden; prefers-reduced-motion renders a single static frame.

Accessibility

✓Canvas is aria-hidden; only the heading and copy are in the accessibility tree.
✓Headline sits on a translucent blurred card for contrast against the grid in both themes.
✓Honours prefers-reduced-motion.