LedMatrixCursorTrail

What it does

A retro LED dot-matrix display effect, rendered on WebGL.

The cursor leaves a soft phosphor trail that reveals the shape

hidden behind the grid — like an old arcade screen waking up

under your hand.

Features

• 5 built-in shapes — Asterisk, Bauhaus, Wave, Cluster, Rings

• Custom image input — drop in any PNG, SVG, or JPG as the source

• Full color control over dots and background

• Adjustable grid density, smear, trail decay, and halo

• Runs at 60fps on raw WebGL — no Three.js or external libraries

• Responsive across desktop, tablet, and mobile breakpoints

• Touch support for mobile interaction

How to use

Drag the component onto your canvas. It fills its container, so

size it to your hero section or use it as a full-bleed background.

Pick a built-in shape from the Shape dropdown, or upload your own

image in the Source field — the component will sample its

brightness through the LED grid.

Tweak the look from the property panel:

• Grid size controls dot density (smaller = denser)

• Trail decay controls how long the cursor trail lingers

• Smear adds horizontal motion blur to the source shape

• Halo amount controls the glow around bright dots

Tips

• For CRT/phosphor authenticity, set Halo to 0.45 and Smear to 0.8

• For a sharper, modern LED look, set Halo to 0.2 and Smear to 0.3

• White silhouettes on black backgrounds work best as custom images

• The component reads the red channel of your source — colored images get auto-converted to brightness

Performance

Uses WebGL with a single ping-pong framebuffer for the trail.

DPR is capped at 2 for retina displays. Tested on Chrome, Safari,

Firefox, and Edge. On low-end mobile devices, reduce Grid size

to 14+ for smoother performance.