Pixel Trail
A pixelated trail effect that recolors grid pixels as you move your cursor.
Installation
1pnpm dlx shadcn add @fancy/pixel-trail
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.
Customizing the pixels
You can customize the individual pixels by passing a pixelClassName prop.
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.
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.
Credits
Ported to Framer by Framer University
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 |
