Docs·Pixel Canvas

Pixel Canvas

An interactive pixel grid with beautiful trailing effects. Pixels light up under your cursor and smoothly fade with color interpolation. Highly performant and perfect for dark hero sections.

Installation

pnpm dlx shadcn@latest add @componentry/pixel-canvas

Usage

API Reference

PropertyTypeDefault
gap

Size of the pixel cells in pixels.

number6
speed

Decay speed of the pixel trail. Lower values create longer trails.

number0.02
colors

Array of hex colors for the gradient. Pixels interpolate through these colors as they fade.

string[]pink to cyan gradient
variant

Visual variant: "default", "trail" (rounded pixels), or "glow" (adds glow effect).

"default" | "trail" | "glow""default"
noFocus

Disables mouse/touch tracking.

booleanfalse

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
Move your cursor
import { PixelCanvas } from "@/components/ui/pixel-canvas"
<div className="relative h-[400px] w-full overflow-hidden rounded-xl border bg-neutral-950">
  <PixelCanvas 
    colors={["#e879f9", "#a78bfa", "#38bdf8", "#22d3ee"]}
    speed={0.02}
  />
</div>