Docs
Pixel Trail

Pixel Trail

A pixelated trail effect that recolors grid pixels as you move your cursor.

FANCYCOMPONENTS.DEV

Make the web fun again.

Installation


npx shadcn@latest add "https://fancycomponents.dev/r/pixel-trail.json"

Usage


Just drop the PixelTrail component into your project, define a pixelSize, and pass the pixelColor prop. You can also pass a className prop to style the container, and a pixelClassName prop to style the individual pixels.

Examples


Without fading

If you set the fadeDuration prop to 0, and increase the delay prop, you can create a trail effect that doesn't fade.

water surface

100%

purity

we deliver more than just hydration — we offer nature's purest refreshment, untouched by modern contaminants. Our water is sourced from deep, protected aquifers and naturally filtered through ancient rock layers, with unmatched clarity and taste.

Customizing the pixels

You can customize the individual pixels by passing a pixelClassName prop.

fancy ✽ components

with react, motion, and typrscript.

Combining with SVG Filters

The following example combines the GooeyFilter component with the PixelTrail component to create a fluid interface. Unfortunately, the component doesn't support Safari, so you'll need to create a fallback for that.

impressionist painting

Speaking things into existence

Notes


  1. The component operates by dividing the container into a grid of pixels and dynamically recoloring them as you move your cursor. Each pixel is represented by a single div element, so perf may be impacted when using a large number of pixels, especially on the first render.

  2. Keep the z-index of the effect's container lower than the rest of your content, so the pointer-events will captured by all of your other elements.

Props


PropTypeDefaultDescription
pixelSizenumber20Size of each pixel in pixels
fadeDurationnumber500Duration of the fade animation in milliseconds
delaynumber0

Delay before the fade animation starts in milliseconds

classNamestring-Additional CSS classes for styling
pixelClassNamestring-

Additional CSS classes for styling the individual pixels