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.
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
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
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
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.
Brandson Digital
