Pixel Trail
A 2D canvas-based pixelated cursor trail that can sample colors from images.
Component controls
color
#000000
lighten
20
pixel-size
20
trail-radius
2
lifetime
1
fade
0.0
Installation
npx atelier-ui add pixel-trailUsage
Imports
import { PixelTrail } from "@/components/PixelTrail"Usage example
<PixelTrail
className="fixed w-full h-full inset-0 pointer-events-none"
/>Image sampling example
<img className="hero-img" src="/hero.png" alt="Hero" />
<PixelTrail
className="fixed w-full h-full inset-0 pointer-events-none"
mode="sample"
imageSelector=".hero-img"
/>API
| Name | Type | Default | Description |
|---|---|---|---|
| mode | "color" | "sample" | "color" | Solid color trail or sample colors from images. |
| color | string | "#000000" | Trail color. Fallback when sampling misses. |
| imageSelector | string | "img" | CSS selector for images to sample. |
| lighten | number | 20 | Brightness boost on sampled colors (0–255). |
| pixelSize | number | 20 | Size of each pixel square in px. |
| trailRadius | number | 2 | Brush radius in grid cells. 0 for single pixel. |
| lifetime | number | 1 | Max pixel lifetime in seconds. |
| fade | number | 0.5 | Fade-out duration in seconds. 0 to disable. |
| showGrid | boolean | false | Show a grid overlay. |
| gridColor | string | "rgba(255, 255, 255, 0.1)" | Grid line color. |
| gridThickness | number | 1 | Grid line thickness in px. |
| className | string | — | Root element classes for positioning and sizing. |
Credits
Jonas Reymondin
Pixel trail effect inspired by his portfolio, reimplemented using a 2D canvas.