Cells on a pixel grid light up under the pointer and fade out in hard steps, like an old LED matrix.
Pixel Drift
Level 03 · Neon Harbor
Press start
npx shadcn@latest add https://hyperblur.dev/r/cursor-pixel-trail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-pixel-trail.tsx.
import { CursorPixelTrail } from "@/components/hyperblur/cursor-pixel-trail"
<CursorPixelTrail className="h-72" color="#22d3a6" />| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Lit cell color. |
| cell | number | 14 | Cell size in pixels, including the gap. |
| gap | number | 2 | Gap between cells in pixels. |
| steps | number | 6 | Number of brightness steps a cell passes through as it fades. |
| stepMs | number | 70 | Milliseconds between fade steps. |
| radius | number | 1 | Brush radius in cells. 0 lights a single cell. |
| showGrid | boolean | true | Draw the unlit cells faintly. |
| idle | boolean | true | Play a slow scripted path while the pointer is away. The effect hands over to the real pointer when it enters and eases back when it leaves. |
| children | ReactNode | Content rendered inside the stage. The stage fills its parent, so give the parent a height. |