Pixel Canvas

Visual Effects

A single-canvas grid of pixels that ripples to life on hover or focus — pixels grow in size and opacity staggered by their distance from the cursor, then settle back when the pointer leaves or focus moves away. Colours and jitter come from a pure per-cell hash (SSR-safe, no render-time randomness); a lone rAF loop runs only while pixels move and idles off-screen. Under prefers-reduced-motion it paints a static faint pixel field once and skips every ripple.

Inspired by Componentry — Pixel Canvas (free, MIT) — independently built, not affiliated. Attribution policy

Hover to ignite

A deterministic pixel field that ripples outward from your cursor.

Installation

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

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

Usage

The exact code rendering the preview above.

<PixelCanvas
    colors={["#8b5cf6", "#ec4899", "#22d3ee"]}
    gap={6}
    pixelSize={7}
    speed={1}
    className="w-full max-w-[420px] rounded-2xl border border-white/10 bg-[#0f0f10]"
  >
    <div className="flex min-h-[260px] flex-col items-center justify-center gap-3 px-8 py-12 text-center">
      <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.06)]">
        <Sparkles className="h-5 w-5 text-violet-300" aria-hidden />
      </div>
      <div className="text-lg font-semibold tracking-tight text-white">Hover to ignite</div>
      <div className="max-w-[240px] text-sm leading-relaxed text-zinc-400">
        A deterministic pixel field that ripples outward from your cursor.
      </div>
    </div>
  </PixelCanvas>

Props

PixelCanvasProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
colors	string[]	["#8b5cf6", "#ec4899", "#f5a623", "#22d3ee"]	Colours the pixels are seeded from. Defaults to the brand set violet `#8b5cf6` / fuchsia `#ec4899` / ember `#f5a623` / signal `#22d3ee` (mirrors the site's `--pb-*` tokens).
gap	number	6	Space between pixels in CSS px.
pixelSize	number	8	Edge length of each lit pixel in CSS px.
speed	number	1	Ripple/ease-speed multiplier. `1` is the default cadence; `0.1`–`8`.