May 2026/Fullstack/professional

AR WebAR Product Marketing

I built this WebAR demo because I was tired of marketing campaigns asking me to download a 200MB app just to scan a juice bottle. Like, who actually does that? The goal was a dead-simple, scan-first flow: you open a link, scan, and boom! 3D details and checkout buttons pop up right there on a single screen.
AR WebAR Product Marketing mockup 1
AR WebAR Product Marketing mockup 2
AR WebAR Product Marketing mockup 3
Making it work smoothly on mobile browsers, though, was a whole saga of pain. I ended up scrapping the entire post-scan redirect flow because every extra click felt like a crime against user experience. Instead, I forced the Three.js canvas and the React UI to share the same screen. Keeping MindAR's tracking from breaking whenever someone blinked or the lighting shifted was brutal, but it was the only way. Tech-wise, it's just MindAR and Three.js doing the heavy lifting, with React and Tailwind handling the overlay. The biggest takeaway? WebAR is a race against user impatience. If you can't lock the marker and show the value on the exact same screen in three seconds, they're already gone.
Repository