Ótica Demonstration project
Ótica Mira — family optician with a virtual frame try-on
An editorial one-pager for an independent Aveiro optician run by the same family since 1987: porcelain paper, near-black ink and a tortoiseshell amber accent system, a virtual try-on that overlays six hand-drawn SVG frames on five face shapes with per-combination fit notes, a lens configurator with a live mono receipt, and a Snellen-chart section header — no photography, all inline SVG.
feitura.pt/demo/mira — Live
A family optician on Rua da Costeira, Aveiro — three generations since 1987 — wants a site with the confidence of the shop itself. It has to help people find the right frame for their face before they walk in, explain lens options and prices with no small print, present the 45-minute eye exam, list the insurers they hold agreements with, and carry the weight of the azulejo façade and the original workbench. Warm expertise: the shop where you trust the person measuring your eyes.
What's inside
- Porcelain, ink and tortoiseshell-amber design system with hairline rules like lens-edge markings
- Virtual try-on: five hand-drawn gender-neutral SVG face shapes and six drawn frame styles overlaid live
- Thirty per-combination fit notes with optician's-voice advice and frame prices in EUR
- Lens configurator — main use plus treatments — with a live itemized mono receipt and demo booking sink
- Eye-exam section headed by a Snellen-chart typographic scale with mono acuity tags
- Hero focus-ring illustration with 48 computed tick marks and dioptre annotations
- Fictional brand wall typeset as eight distinct logotypes in pure CSS
- Since-1987 heritage timeline on ink with a founder's quote, plus insurance agreements and Aveiro contacts
- Fully bilingual PT/EN with a native toggle, SSR-safe reveals, AA contrast and 44 px touch targets
Build log
- Art direction and tokens — porcelain/ink/tortoiseshell palette, Archivo display scale, focus-ring and concentric-circle SVG studies
- Hero with dioptre-annotated ring illustration, sticky nav, info strip and the bilingual PT/EN scaffolding
- Face-shape SVG set — five gender-neutral drawn faces with shared features, ears and hair per shape
- Frame collection — six drawn SVG frames with a tortoise gradient, mirrored lens geometry, try-on state, fit notes and prices
- Lens configurator — main-use and treatment pricing, live itemized mono receipt with dotted leaders, demo consultation sink
- Snellen exam header, brands wall logotypes, insurance agreements, since-1987 timeline on ink, Aveiro contacts and hours
- EN locale pass, reduced-motion and reveal audit, contrast and touch-target audit, mobile-first recomposition at 375 px
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
96
Performance
100
Accessibility
100
Best practices
100
SEO