Apimanufaktur
A printed business card that comes to life: point your phone camera at it and an animated 3D avatar of the owner appears on the card, greets you out loud and offers tappable actions — website, showreel, e-mail, call, save contact. No app install; it runs straight in the browser.
The challenge
Business cards get glanced at once and forgotten. The goal: a card that demonstrates its owner's craft the moment someone looks at it — an AR experience that works on any phone without installing an app, plus a desktop 3D view for embedding in a portfolio, plus a print design that doubles as the AR tracking marker. One physical object, three digital surfaces.
The approach
- WebAR with image tracking: the printed card front is the marker. The design was built for trackability — a full-bleed comic portrait fills half the card, giving the tracker dense, unique features. Marker compilation and an end-to-end test (simulated camera feed) ran fully automated; detection locks on in under two seconds.
- 3D asset pipeline with a twist: the AI-generated comic avatar arrived as a 1.4-million-vertex FBX whose micro-fragmented UV atlas broke under any mesh simplification. Solution: bake the texture into per-vertex colors (sRGB-correct), simplify, rebuild smooth normals — 81 MB became a 4 MB GLB with the dance animation and rig intact.
- The experience: on detection the avatar dances on the card, a neural-TTS greeting plays (with a tap-to-unmute fallback for browser autoplay rules), and floating buttons open the website, showreel, e-mail, phone and a vCard download generated on the fly.
- Three surfaces from one codebase:
ar.html(phone camera AR),viewer.html(desktop 3D viewer with a WebXR button for AR glasses, iframe-embeddable), and a print template that renders the card, its QR back side and the high-res marker PNG from a single config file.
The result
- A complete physical-digital product: print-ready 85×54 mm card, a ~5 MB static web app, no backend.
- Verified end-to-end before launch: headless browser tests for rendering, marker compilation and AR detection with a simulated camera.
- All contact data, links, avatar scale and the greeting audio live in one
config.js— the card can be re-branded in minutes.
What this demonstrates
- Ships polished end-to-end products fast: 3D asset pipeline → web app → print design → deployment in a single day.
- Pragmatic engineering under real-world constraints (broken UV atlases, browser autoplay policies, mobile bandwidth budgets).
- AI-assisted delivery, human-curated: generated assets and code, verified with automated visual and functional tests.
- Comfort across the full spectrum — 3D/AR, audio, print and classic web.
Tech at a glance
WebAR · MindAR · A-Frame · model-viewer · glTF · edge-tts
