component
Retro Display
By Abhrajit Ray
Details
- Abhrajit RayAuthor
- componentType
- $7.00Price
- 2026-05-26Published
- 2026-05-26Updated
- 2026-05-13Added
- TextCategories
Summary
Customizable LED dot-matrix text display
Description
Why it grabs attention: Plain hero type gets scanned. The same words rendered as a flickering dot-matrix sign read as a physical object on the page, not type, and that's what makes a visitor stop for two more seconds. Cycle multiple messages through one sign and your hero carries a tagline, launch date, and CTA without extra blocks. Style statement: CRTs, arcade cabinets, terminal energy. The chassis colors are tokens, so it can read as a modern brand mark or push hard into gaming, hardware, and AI tools. Under the hood: - The container size sets the dot grid. A `ResizeObserver` re-fits when the layout shifts. - 3x5 bitmap glyphs, multi-line wrap if the message overflows columns. - GSAP `stagger: { from: "random" }` cascade for the lit-dot reveal. - Cycling between messages uses one repeating timeline with dwell, fade-in, fade-out phases, cleaned up via `gsap.context`. Best for: Hero status banners, launch and waitlist pages, retro/gaming/arcade brands, hardware and IoT, AI and developer tools, hackathon and event sites, studio portfolios. Controls: - Texts : array of strings, cycles through - Accent : lit-dot color - Dot Size : 2 to 16px, sets resolution - Bezel , Ridge , Screen , Screws : chassis colors - Corner Radius : 0 to 48px Built for production: Auto-pauses offscreen (`IntersectionObserver`) and stays static on Framer's canvas and thumbnail. Respects `prefers-reduced-motion`. Auto-fits any container size. Marked as a polite live region for screen readers.
Introduction
Customizable LED dot-matrix text display
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #8786