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

PropTypeDefault
gapSize of the pixel cells in pixels.
number6
speedDecay speed of the pixel trail. Lower values create longer trails.
number0.02
colorsArray of hex colors for the gradient. Pixels interpolate through these colors as they fade.
string[]pink to cyan gradient
variantVisual variant: "default", "trail" (rounded pixels), or "glow" (adds glow effect).
"default" | "trail" | "glow""default"
noFocusDisables mouse/touch tracking.
booleanfalse

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

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

Have any questions?
Contact on@harshjdhv
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>