Pixel Trail Cursor

An interactive, shader-based grid cursor that leaves a trail of pixels behind your pointer. Customize parameters and copy the implementation code.

Interactive Preview

Move mouse inside this area

Controls

Grid Size26

Trail Size0.12

Max Age (ms)400ms

Interpolate1.8

Gooey Filter

Gooey Strength4

Pixel Color

Implementation Code

import PixelTrail from './PixelTrail';

<div style={{ height: '500px', position: 'relative', overflow: 'hidden' }}>
  <PixelTrail
    gridSize={26}
    trailSize={0.12}
    maxAge={400}
    interpolate={1.8}
    color="#191919"
    gooeyEnabled={true}
    gooStrength={4}
  />
</div>