Entretenimento Demonstration project
TRINCO — Lisbon escape rooms with a playable combination lock
A mystery-noir site for an Alcântara escape-room club: warm ink, aged brass and one bottle-green, keyhole line art and dossier-paper cards — and a working three-dial combination lock in the page itself. Solve three ciphered clues, open the latch, earn a demo discount code. Rooms, records and booking follow the same case-file logic.
feitura.pt/demo/trinco — Live
An escape-room club at the end of Alcântara wants a site that plays like its rooms: before booking, visitors should solve something. They asked for a real puzzle on the page — a combination lock with clues — plus dossier-style presentations of the three rooms with difficulty, scares, team size and honest per-team pricing, an evening booking flow with a live total, a record board with the fastest escapes, and clear rules, hours and directions to the green door by the river.
What's inside
- Mystery-noir design system: warm near-black ink, aged brass and one bottle-green, with keyhole and padlock line art drawn in SVG
- Signature playable puzzle: a three-dial combination lock opened by solving a cryptogram, a key-count riddle and a mirrored digit
- Lock opens with a reduced-motion-safe hasp animation and reveals a demo reward code; wrong combos shake and nudge toward the right clue
- Dials fully operable by tap, prev/next buttons and keyboard arrows, with aria labels and live announcements
- Three rooms as dossier-paper cards with redacted-text stamps, difficulty as padlock picks out of five, fear level, team range and per-team EUR pricing
- Room detail overlay with the full case story and what each session includes
- Five-step booking flow — room, day, evening slot, team, contact — with a live team total and closed-days-aware date chips
- Mono record board of fastest escapes, starring teams like Turma da Gazua and Sem Pressa Nenhuma
- Fully bilingual PT/EN, AA contrast audited, 44 px touch targets, single h1 and reduced-motion fallbacks throughout
Build log
- Art direction and tokens — warm ink, aged brass and bottle-green palette, keyhole line-art system, cipher typography studies in IBM Plex Mono
- Hero and navigation — dossier stamp, coordinates strip, keyhole illustration, sticky nav with language toggle
- The signature puzzle — three-dial combination lock, ciphered clue cards, wrong-combo shake and nudges, open-latch reveal with the demo code
- Room dossiers — paper-texture cards, redaction effects, padlock difficulty meters, detail overlay with case stories
- Booking flow — five gated steps, closed-days-aware date chips, evening slots, live team total; record board in mono
- How-it-works strip, rules FAQ accordion, location and hours footer, full EN locale pass
- Motion pass with reduced-motion fallbacks, keyboard and screen-reader audit of the lock, contrast and touch-target audit, desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
92
Performance
100
Accessibility
100
Best practices
100
SEO