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.
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.

Speaking things into existence
Notes
-
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.
-
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
Prop | Type | Default | Description |
---|---|---|---|
pixelSize | number | 20 | Size of each pixel in pixels |
fadeDuration | number | 500 | Duration of the fade animation in milliseconds |
delay | number | 0 | Delay before the fade animation starts in milliseconds |
className | string | - | Additional CSS classes for styling |
pixelClassName | string | - | Additional CSS classes for styling the individual pixels |