Nawaz LabsJTON · Jewellery Try-On
Four tracking engines, one browser
July 2026
What this is
Try on jewellery with nothing but a browser. No app to install, no depth sensor, no server doing the heavy lifting. The camera sees you, the jewellery finds its place on your body, and it stays there while you move.
That one sentence hides four very different problems. An earring, a necklace, a ring, and a bracelet each attach to a different part of the body, track differently, and fail differently. Each needed its own engine, solved on its own terms. This page is the map; each engine has a full page of its own.
Go deeper: Earring · Necklace · Ring · Bracelet · The toolbox
Earring
The flagship, and the hardest. An earring hangs from the piercing point, a spot a few pixels wide that no off-the-shelf model can find. And finding it is only half the job. A real earring swings when you move and reacts when you touch it. A flat sticker on the screen fools no one.
The engine solves both halves. A dedicated ear network finds the ear, the anchor logic pins the piercing point, and a physics simulation written specifically for hanging jewellery makes it swing and settle like the real thing. Hand tracking takes it one step further: your fingers become part of the physics, so you can reach up and flick the earring on screen.
Necklace
A necklace looks like a face problem: find the chin, hang the necklace under it. That intuition is wrong, and it fails in a way you only see live. The necklace swings every time the head turns, because a necklace rides the body, not the face.
So the real question became: what does a necklace actually follow? The answer is the shoulders. On top of that corrected anchor sits the hook engine, which keeps the necklace perfectly still while you are still and moves it the instant you do. Those two behaviours normally fight each other. Here they are measured: zero jitter at rest, 33 milliseconds to respond.
Ring
A hand is the most restless thing a camera will ever track. It spins, tilts, comes close, pulls away. Through all of it the ring has to stay on the finger and know whether it is looking at your palm or the back of your hand, with no depth sensor to ask.
One measurement carries the whole engine: the normal of the palm plane, computed from the hand's own geometry and normalized so it reads the same at any distance. It only changes with true rotation. Wrap that signal in latches so nothing flickers at the boundaries, and the ring holds through a full spin.
Bracelet
The wrist rotates in ways that break naive placement instantly. This engine deliberately ran as research first: prove the approach, map exactly where it breaks, and only then build. The placement approach is proven in a working proof of concept, five failure modes are documented with their causes, and the build is a decision away.
How it ships
One URL. Add an embed flag and a product code, and the full try-on opens inside any product page as an iframe, on desktop and on mobile. A photo-upload path covers visitors who skip the camera. New products are data, not code: images plus a config entry.
What the play unlocks
People play with the earring because it behaves like the real thing. Play is measurable. Which pieces get touched, for how long, how often: each of those is an event the embed can stream out per visitor. For a brand, that is retargeting and merchandising signal a static product page cannot produce. The surface for it already exists in the embed; the event stream is the proposal.
The toolbox underneath
Underneath the four engines the same ideas repeat. They are the project's real infrastructure, and each one earned its place against the usual alternatives.
| Technique | What it solves | Why it wins |
|---|---|---|
| One-Euro filtering, per channel | kills jitter without adding lag | built for interactive tracking; two parameters where a Kalman filter needs a model and a matrix |
| Adaptive smoothing + velocity lead | still at rest, instant on movement | predicting from raw velocity removes the onset lag every plain filter carries |
| Hysteresis latches | flicker-free state changes | zero added delay on real changes, unlike debouncing |
| Worker inference + watchdog | heavy models off the main thread | degrades gracefully when a worker stalls instead of freezing |
| Band-only pixel reads | cheap compositing on mobile | reads the jewellery's strip, not the frame; readback is the hidden cost |
| Capped pixel-ratio rendering | memory and fill-rate discipline | invisible quality loss, measurable crash-rate gain |
Each technique has its own diagram and the full reasoning on the toolbox page.