Heroes Venture Arcade — the flagship build.

The brief

Heroes Venture is a fictional flagship built to show what a big venue gets from a small studio. The brief: a site that feels like powering on a cabinet — scanlines, neon, the dragon mark from the logo hovering over a real floor photo — while staying serviceable enough for a non-technical owner to run alone.

Arcades run on uptime and events. The site had to sell both: the machines by day, the bar and shows after dark, and every photo slot ready for the client's own Facebook library.

The build

The design system is CRT noir taken seriously: magenta-pink for energy, cyan for the machines' glow, gold for score readouts, green for the money. Three typefaces do three jobs — Press Start 2P as the 8-bit voice, Orbitron for marquee headlines, Inter for everything that needs to be read. Scanlines and glow are pure CSS, GPU-cheap, and reduced-motion aware.

• Five-row lineup ledger — classic cabinets, the 13-wide Atomiswave vault, pinball, rhythm and console lounge; hovering lights the row pink, turns the number gold and zooms the photo.
• Self-healing media slots — photo placeholders declare the exact filename they want; when the file lands in the folder the image appears and the placeholder disappears. Documented per-slot in a GAP-FILLS checklist.
• Self-healing sizzle reel — the video slot falls back to a poster frame automatically, and swaps in the moment a reel is uploaded.
• Justified photo mosaic — nine real venue photos in Flickr-style flush rows; every photo keeps its native ratio with per-photo flex values, so ragged gaps are impossible.
• Custom lightbox — keyboard arrows, touch swipe, Esc, click-outside, counter and captions, in under 60 lines. No library.
• Event ledger — late nights, underground electronic sets and family free-play Sundays, each with pixel-font price pills, age gates and links wired to the client's Facebook.
• Back-room booking split — private parties, live shows and community nights sold with numbered steps past the cabinets.
• Provenance & honesty — every photo annotated with source and license; unverified facts flagged inline with TO VERIFY comments so the client reviews facts, not code.

What's real vs. demo

The design system