Try on any frames at true physical size — in the browser.

No app, no backend, no photos leave the device. One script tag on your product page. Tap start and put it on your own face.

20–30%online eyewear return rate. Most of it is fit.

1 tag<eyewear-tryon sku="…"> — Shopify, Vue, React, plain HTML.

0 uploadsTracking runs on-device. GDPR-quiet. No face data stored.

mm-accurateCalibrate once with an ID card; frames render at real size.

Integrate in one afternoon

<script src="https://cdn.jsdelivr.net/npm/@pykero/eyewear-vto@0.1.0/dist-lib/eyewear-vto.iife.js" defer></script>
<eyewear-tryon sku="ACME-52"></eyewear-tryon>
<button onclick="this.previousElementSibling.start()">Try on</button>

{% comment %} layout/theme.liquid, before </body> {% endcomment %}
<script src="https://cdn.jsdelivr.net/npm/@pykero/eyewear-vto@0.1.0/dist-lib/eyewear-vto.iife.js" defer></script>

{% comment %} sections/main-product.liquid {% endcomment %}
<eyewear-tryon sku="{{ product.selected_or_first_available_variant.sku }}"></eyewear-tryon>
<button onclick="this.previousElementSibling.start()">Try on</button>

npm install @pykero/eyewear-vto@preview three @mediapipe/tasks-vision

import '@pykero/eyewear-vto'          // registers <eyewear-tryon>

<eyewear-tryon ref={el} sku="ACME-52" />
el.current.setFrames([{ spec: { sku:'ACME-52', lensWidthMm:52, bridgeMm:18, templeLengthMm:145,
  lensHeightMm:42, rimThicknessMm:3, frontWidthMm:138 }, modelUrl:'/frames/acme-52.glb' }])
el.current.start()

Your own frames: a glTF per SKU plus its millimetre spec — the widget measures the model and refuses it if the two disagree. Tracker can be self-hosted. Nothing downloads until the shopper presses the button. Full guide: docs/integration.md · GitHub

Want this on your catalogue?

Leave your email — I'll send back a link with your frames in it, free, within 24h.