Earring
JTON · ear tracking + a hand-built physics engine
July 2026
The story
An earring hangs from one point: the piercing point on the lobe. On a webcam frame that point is a few pixels wide, and no general-purpose model knows where it is. Face models skip the lobe entirely and lose the ear on profile views, which is exactly the pose an earring needs. That was the starting position.
The rebuild happened in three moves. First the anchor: a dedicated ear detection network, a derived piercing-point anchor, per-ear smoothing, and an optical-flow fallback that keeps tracking alive on extreme close-ups. Then behaviour: hanging earrings got a physics engine written for exactly this job, so the earring image splits into a rigid top and a swinging chain simulated at 60 Hz. Then play: hand tracking feeds your fingertips into the simulation as colliders, so you can flick the earring on screen and watch it react like the real thing.
The catalog runs to 27 pieces today, studs to chain-physics drops, on desktop and mobile.
drop at public/jton/earring/media/physics-swing.mp4drop at public/jton/earring/media/finger-interaction.mp4The tracking stack
Two details carry most of the quality here. The hysteresis gap (14 degrees to show, 8 to hide) means a head hovering at the boundary never strobes. And the forward-backward check on the optical-flow fallback rejects the classic silent failure where flow tracks confidently to the wrong place.
The physics engine
Rather than adopt a general physics library, the simulation is purpose-built for one job, 2D hanging jewellery, and it stays tiny.
- It rigs itself from the artwork. The earring image's alpha profile is analysed at load and split into a rigid top and a flexible chain ending in a weighted drop. A new hanging piece needs images, not code.
- Verlet integration at 60 Hz. Points carry implicit velocity; two substeps of sixteen constraint iterations per frame keep chains responsive without going unstable. Gravity 0.55, damping 0.992, up to 24 links, configurable bob weight.
- Feel is data. Every physics parameter can be overridden per product in config, so the catalog tunes how each piece moves without touching the engine.
Finger interaction
Fingertip positions arrive from hand tracking every frame and become colliders inside the simulation. Contact pushes impulses into the chain: flicks, nudges, holds. A depth comparison decides whether the finger sits in front of the earring or passes behind it. The collider size was calibrated against measured finger width on a real hand. The result reads as touching the earring, and it is the single most-commented behaviour in demos.
Numbers
| Catalog | 27 tryable pieces (studs, drops, hoops, huggies) |
| Detection network | 1.8 MB, WebGL/WASM |
| Frontal-hide hysteresis | enter 14° · exit 8° |
| Simulation | 60 Hz · 2 substeps × 16 constraint iterations · up to 24 links |
| New hanging piece | images + a config entry, zero engine code |
Open items
- Finger interaction is complete and proven in an isolated lab; bringing it into the product path waits on a live test pass.
- Dual-ear display for drop earrings shipped, was evaluated live, and was deliberately rolled back to single-ear turn-to-show. A product call.
Next for the anchor
The anchor is the ceiling. It is derived from generic landmarks rather than learned, and every accuracy gain so far has been smoothing around it, not improving it. What it takes to own that point outright, a custom-trained lobe tracker already proven end to end, is the subject of Research Note 001.
Nawaz Labs