PixelTrail
pixel-trailLeaves a fading pixel-grid trail behind pointer movement.
Usage
Basic usage
Cover the container, the mouse moves over the pixel grid, and the trailing fades out over time.
Move the mouse within this area
tsx
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<PixelTrail className="absolute inset-0" />
</div>Fine mesh + short afterglow
Increase gridSize to make the pixels finer, and lower maxAge to make the trailing shorter.
Move the mouse within this area
tsx
<PixelTrail
gridSize={72}
maxAge={200}
color="var(--color-chart-2)"
className="absolute inset-0"
/>Coarse grain + long afterglow
Lower gridSize, increase trailSize and maxAge, retro grain + long tail.
Move the mouse within this area
tsx
<PixelTrail
gridSize={24}
trailSize={0.16}
maxAge={600}
color="var(--color-chart-4)"
className="absolute inset-0"
/>Mucus Fusion
gooey=true With the SVG filter enabled, adjacent pixels merge into an organic liquid clump.
Move the mouse within this area
tsx
<PixelTrail
gridSize={48}
trailSize={0.14}
gooey
gooeyStrength={9}
color="var(--color-chart-1)"
className="absolute inset-0"
/>When to Use
Use it for a retro interactive background where pointer movement lights grid cells that fade into an afterglow. Choose hard-edged pixels or merge neighboring cells into gooey blobs. For fluid splashes, use SplashCursor; for elastic ribbons, use Ribbons.
Import
ts
import { PixelTrail } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| gridSize | number | 40 | The number of horizontal pixel grids (vertically calculated automatically in proportion to maintain the square grid), recommended 16–120 |
| trailSize | number | 0.1 | Trailing influence radius (ratio of the short side of the container 0–1), the larger the tail, the thicker the trailing |
| maxAge | number | 320 | The survival time of a single cell after it is lit (ms), the larger the value, the longer the afterglow |
| color | string | var(--color-chart-1) | Pixel color, token must be prefixed with --color- |
| gooey | boolean | false | Enable slime filter: adjacent points merge into a liquid blob instead of a hard-edged square |
| gooeyStrength | number | 8 | gooey fusion strength (Gaussian blur radius px), only effective when gooey=true |
| className | string | — | Additional class name for the root container, which defaults to block h-full w-full |
| style | CSSProperties | — | Passthrough to root container |
Usage Guidelines
- The
colorfeeding token must be prefixed with--color-, and the barevar(--primary)shader will not parse it. See [[hulian-token-color-var-needs-color-prefix]]. - WebGL/ogl component, client-side rendering only; StrictMode double-mounted canvas context reuse risk, see [[webgl-canvas-loseContext-poisons-strictmode-remount]].
- The parent container needs to be
relative+overflow-hidden, and the component should beabsolute inset-0; the pixel afterglow is clearest on a dark background.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
Move the mouse within this area
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<PixelTrail
gridSize={40}
trailSize={0.1}
maxAge={320}
gooey={false}
className="absolute inset-0"
/>
</div>