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

Usage

API Reference

PropertyTypeDefault
src

Image URL revealed by the pixel trail.

string—
alt

Accessible description for the image.

string—
pixelSize

Width and height of each square in pixels.

number36
radius

Maximum distance for an occasional satellite pixel.

number58
fadeDuration

Milliseconds before an untouched square disappears.

number900
maxPixels

Maximum squares retained before the oldest are removed.

number84
initialPixels

Image fragments visible before the first interaction.

number24
className

Additional classes for size, surface, and shape.

string—
children

Optional content rendered above the pixel canvas.

ReactNode—

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
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"
/>