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.

Source code

Install the uuid package:

npm install --save @types/uuid uuid

We use the uuid package to generate a unique ID for each trail instance — so each trail will work without interfering with other effects.

Then copy and paste the following code into your project:

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.

make the web fun again.

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
delaynumber0Delay before the fade animation starts in milliseconds
classNamestring-Additional CSS classes for styling
pixelClassNamestring-Additional CSS classes for styling the individual pixels