Pixel Trail
A grid that lights up cell by cell behind the pointer — strokes are rasterised so fast swipes leave no gaps — fading back with a shrink. Idle sparkles keep it alive.
canvaspixelpointer5 files · 417 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/pixel-trail.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs pixel-trailUsage
import { PixelTrail } from "@/components/opus/backgrounds/pixel-trail";
<PixelTrail cell={22} className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | — | Colours cycled along each stroke. |
| gridColor | string | "rgba(255,255,255,0.04)" | Grid lines (use "transparent" to hide). |
| cell | number | 22 | Cell size (px). |
| fade | number | 1.2 | Seconds to fade. |
| brush | number | 1 | Brush radius in cells. |
| sparkle | boolean | true | Random idle sparkles. |
| interactive | boolean | true | React to the pointer (tracked on window). |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Optional content rendered above the canvas. |
Notes
- Canvas 2D with a device-pixel-ratio aware backing store (capped at 2×).
- The animation loop stops off-screen and in hidden tabs; resize re-seeds the scene.
prefers-reduced-motion: reducedraws a single static frame.