LedMatrixCursorTrail

Interactive LED hero that follows cursor

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.

Interactive LED hero that follows cursor