EyeBrowse
Browser-native AR try-on for eyewear retail. Three interfaces. 135k+ products.
What This Does
A virtual try-on system that lets shoppers see how glasses look on their face in real-time, directly in the browser — no app download needed.
- —Gives independent retailers the same AR try-on technology as Warby Parker — at a fraction of the cost
- —Serves 135,000+ frames from 610+ brands through a single unified catalog
- —Enables in-store kiosks that work even when the internet goes down, with encrypted offline order queuing
- —Multi-tenant admin dashboards let a franchise owner manage every location from one screen
Platform Scale
Three interfaces, one backend, production-ready.
EyeBrowse is not a concept deck. It is a production-ready platform spanning consumer e-commerce, in-store kiosks, and a multi-role operator admin — built and ready to launch.
Explore the working platform
The operator admin runs live in the browser — role switching, command palette, realtime feed, and an Ask AI tab. No login required. A personal storefront login can be provisioned on request.
3 Interfaces, One Platform
EyeBrowse serves 3 distinct user types through 3 purpose-built interfaces — all sharing a unified backend.
Select a surface to preview how the platform changes by role.
- —AR try-on with 468 face landmarks
- —135k+ frames from 610+ brands
- —Stripe checkout & multi-step booking
- —SSR/ISR blog and SEO optimization
The Challenge
Independent eyewear retailers have no way to offer virtual try-on without building native apps or licensing enterprise AR platforms. Customers abandon online frame purchases when they can't see how glasses look on their face. Retailers need an AR solution that works in the browser, runs on any device, and integrates with their existing catalog and operations — without leaking behavioral data to a VTO vendor.
The Solution
EyeBrowse delivers browser-native virtual try-on via a custom integration of Google's open-source MediaPipe FaceMesh runtime — not a commercial VTO vendor. The face-tracking model runs entirely in the user's browser; glasses geometry serves from a self-hosted Cloudflare R2 mirror under our own domain; per-frame metadata caches in our own Supabase DB with a nightly refresh cron. Zero outbound requests to any VTO vendor from the user-facing request path. The platform spans three production interfaces: a consumer storefront, an offline-first retail kiosk with encrypted order queuing, and a 26-tab admin dashboard with Supabase Realtime subscriptions.
The AR Engine
MediaPipe maps 468 facial landmarks in real time. EyeBrowse uses these coordinates to overlay 3D frame models at 30fps — directly in the browser, zero downloads.
Hover over the demo to explore the mesh. The same production-grade pipeline powers the storefront and kiosk surfaces.
Architecture Decisions
Privacy-first VTO stack — custom integration of Google's open-source MediaPipe FaceMesh runtime (NOT a commercial VTO vendor). Face tracking runs entirely in the user's browser; frames never leave the device. Glasses geometry served from a Cloudflare R2 mirror under our own domain. Per-frame metadata cached in our own Supabase DB, refreshed nightly via cron. Zero outbound requests to any VTO vendor from the user-facing request path — no tracking scripts, no cookies, no analytics to vendor endpoints.
3-layer AR pipeline: MediaPipe face mesh → head pose computation → Three.js GLB overlay with directional image cross-fade at 12-30° yaw
Offline-first kiosk with AES-256-GCM encrypted IndexedDB queue, service worker background sync, and automatic retry with exponential backoff
Iris-diameter PD measurement (11.7mm average calibration) — captures 9 frames over 120ms intervals, applies lens correction, blends with population average below 0.7 confidence
LRU cache (60 max) for processed AR frame images with blob URL revocation to prevent memory leaks in long-running kiosk sessions
Supabase Realtime subscriptions across 26 admin tabs with optimistic updates and conflict resolution
Business lens: what changes for customers, managers, and revenue.
Customers see frames on their face instantly — no app download, no special hardware, works on any phone. The same AR technology Warby Parker uses, but accessible to independent retailers.
When a frame sells in one store, every screen in every location updates in under a second. No stale inventory, no overselling, no embarrassing "sorry, that's actually sold out" moments.
Store managers see only their location's data. Franchise owners see everything. Nobody sees what they shouldn't. Every change is tracked and auditable.
System Architecture
AR Try-On Pipeline
Camera to virtual frame overlay in <16ms per frame
Real-Time Sync
One event propagates to every screen in <200ms
Offline-First Architecture
Kiosks keep working when the internet drops
Under the Hood
The AR try-on pipeline runs entirely in the browser — no server round-trips. MediaPipe processes the camera feed, estimates head pose, and Three.js renders the frame model in real time.
This portfolio is itself a production application.
Screenshots
Consumer Storefront
Full e-commerce experience: browse 135k+ frames, filter bestsellers, product detail with virtual try-on, cart, and Stripe checkout
Super Admin Dashboard
Platform control center: executive briefing, AI analytics, commission management, practice oversight, audit log
Practice Admin Dashboard
Per-location management: AI analytics, staff, kiosk control, support
Kiosk Checkout Flow
Guided retail experience: frame selection, AI prescription parse, lens packages, order review, Cardknox payment
Tech Stack
Key Features
Privacy-first VTO: custom MediaPipe integration, self-hosted glasses geometry, zero vendor outbound requests
AR virtual try-on using MediaPipe face mesh (468 landmarks) + Three.js GLB rendering
Offline-first kiosk with AES-256-GCM encrypted order queue and service worker sync
26-tab admin dashboard with Supabase Realtime subscriptions
Supplier API integration syncing 135k+ frames with automated image pipeline
Commission/payout system, blog with SSR/ISR, multi-step booking wizard