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.
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.
- 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`.
Hero status banners, launch and waitlist pages, retro/gaming/arcade brands, hardware and IoT, AI and developer tools, hackathon and event sites, studio portfolios.
- 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
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.
Abhrajit Ray
