Retro Display

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.