DocsPixel Image Trail

Pixel Image Trail

An image reveal made from cursor-painted square fragments. New pixels appear around the pointer while the oldest fragments fade away, keeping the trail expressive but bounded.

Installation

pnpm dlx shadcn@latest add @componentry/pixel-image-trail

Dependencies: clsx tailwind-merge

Usage

API Reference

PropTypeDefault
srcstring

Image URL revealed by the pixel trail.

—
altstring

Accessible description for the image.

—
pixelSizenumber

Width and height of each square in pixels.

36
radiusnumber

Maximum distance for an occasional satellite pixel.

58
fadeDurationnumber

Milliseconds before an untouched square disappears.

900
maxPixelsnumber

Maximum squares retained before the oldest are removed.

84
initialPixelsnumber

Image fragments visible before the first interaction.

24
classNamestring

Additional classes for size, surface, and shape.

—
childrenReactNode

Optional content rendered above the pixel canvas.

—

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
PreviousPixel CanvasNextRipple Transition
A green mountain lake beneath a cloudy sky
import { PixelImageTrail } from "@/components/ui/pixel-image-trail"
 
<PixelImageTrail
  src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1800&q=85"
  alt="A green mountain lake beneath a cloudy sky"
  className="h-screen"
/>