---
title: "LedMatrixCursorTrail — Free Framer component · Best of Framer"
description: "Free Framer component · by Brandson Digital · Cursors. Interactive LED hero that follows cursor"
canonical: "https://framer.elliotli.dev/component/ledmatrixcursortrail"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/LedMatrixCursorTrail

# LedMatrixCursorTrail

Interactive LED hero that follows cursor

[View on Framer](https://framer.com/marketplace/components/ledmatrixcursortrail/?via=elliot-li)

![LedMatrixCursorTrail preview image 1](https://framer.elliotli.dev/og/component/ledmatrixcursortrail/a1fda86374f422a0/1600x1200.jpg)

## Summary

Interactive LED hero that follows cursor

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2740

## Details

- **Author**: Brandson Digital
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-25
- **Categories**: Cursors

## More like this

-   [Ribbon Hero](/component/ribbon-hero) — Divyesh WebCraft · Free — 3D ribbon with smooth motion
-   [Spider Hunt](/component/spider-hunt) — Karim Saif · $6 — ٍpider that tracks your cursor
-   [Pixel Fluid](/component/pixel-fluid) — Jamik · $12 — Fluid cursor trail in pixels/ASCII
-   [CursorImageTrail](/component/cursorimagetrail) — princeee · $20 — Image Trail is a dynamic Framer component that creates an immersive hover experience by displaying a sequence of images that trail behind…