Animated Grid

Hero Backgrounds

A hero backdrop of hairline grid cells with a soft radial spotlight that tracks the pointer via CSS variables (no per-cell React state), plus an optional deterministic ambient cell pulse; under prefers-reduced-motion it renders a static grid with a single centered glow.

Inspired by Cult Pro — animated grid background (pattern) — independently built, not affiliated. Attribution policy

Parable UI

Move your cursor

A spotlight grid that follows the pointer and brightens the cells around it.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/animated-grid.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/animated-grid.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<AnimatedGrid
    cellSize={34}
    glowColor="#8b5cf6"
    className="w-full max-w-md rounded-2xl border border-white/10 bg-[#0f0f10]"
  >
    <div className="flex min-h-[320px] flex-col items-center justify-center gap-3 p-8 text-center">
      <span className="rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium text-white/70">
        Parable UI
      </span>
      <h3 className="text-2xl font-semibold text-white">Move your cursor</h3>
      <p className="max-w-xs text-sm text-white/55">
        A spotlight grid that follows the pointer and brightens the cells around it.
      </p>
    </div>
  </AnimatedGrid>

Props

AnimatedGridProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
cellSize	number	32	Edge length of one grid cell, in pixels.
lineColor	string	"#ffffff"	Hex colour of the resting grid lines (drawn faintly).
glowColor	string	"#8b5cf6"	Hex colour of the pointer spotlight and ambient cells. Mirrors `--pb-violet`.
radius	number	200	Radius of the pointer spotlight, in pixels.
pulse	boolean	true	Slowly pulse a scattered, deterministic set of cells.
pulseCount	number	16	How many ambient cells pulse when `pulse` is on.
children	React.ReactNode	—	Foreground content, rendered above the grid via a `z-10` wrapper.