5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T81a,

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.

5a:[["$","$L5d",null,{"post":{"id":"019e795f-5e98-7355-afe2-6ac2fa7306f0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0532c688-7359-490f-8a34-379591583552","name":"Brandson Digital","slug":"brandson","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/52579/avatar-1xzqLMAM7e0gosnh9KIapzZjzgpCp9.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"Gz30cm9fR0Tb3B1ux1xV","resolved":true,"title":"LedMatrixCursorTrail","body":"$5e","bodyJson":null,"introduction":"Interactive LED hero that follows cursor","slug":"ledmatrixcursortrail","author":{"framerUserId":"0532c688-7359-490f-8a34-379591583552","name":"Brandson Digital","slug":"brandson","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/52579/avatar-1xzqLMAM7e0gosnh9KIapzZjzgpCp9.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Gz30cm9fR0Tb3B1ux1xV/ledmatrixcursortrail-wc5V5rhrhtrDHTHeJsmGVmauXHGPo1","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-25T11:26:20.794Z","updatedAt":"2026-05-30T14:08:48.706Z","publishedAt":"2026-05-30T14:52:33.816Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Led-matrix-1bhGxE.js@C5LTBzSjTSu33wEeVjxq","previewUrl":"https://led-matrix.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"C5LTBzSjTSu33wEeVjxq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":14,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-30T14:52:33.816Z","updatedAt":"2026-05-30T14:52:33.816Z","reported":false}}],"$L5f"]

Suggested for you