DocsPixel 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

Dependencies: clsx tailwind-merge

Usage

API Reference

PropTypeDefault
gapnumber

Size of the pixel cells in pixels.

6
speednumber

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

0.02
colorsstring[]

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

pink to cyan gradient
variant"default" | "trail" | "glow"

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

"default"
noFocusboolean

Disables mouse/touch tracking.

false

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
PreviousMatrix RainNextPixel Image Trail
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>