EDITIV 3D Configurator Demo

EDITIV is a three-person studio that builds 3D and AR product configurators, where I’m the full-stack developer alongside two 3D specialists. I moved the studio’s website from an old PHP site to Next.js and built a live configurator demo so potential clients can try what we build before they get in touch.

Live Demo:

• A modular sideboard for a fictional furniture brand: choose a low or high model, two to four bays, and a door, drawer, or open front for each compartment
• Body and front finishes (oak, smoked oak, walnut, and lacquers), handles, and the base, with tap-to-open doors and drawers
• The price updates on every change, with a line-by-line breakdown; a pure pricing function validated with Zod runs behind a simulated API, and newer requests always replace older ones
• Falls back to a still image when WebGL isn’t available, while pricing keeps working
• The detailed parts are modelled by a headless Blender Python script that exports the same 136 KB GLB on every run, and the cabinet boards are built in code
• Measured on a throttled phone (Fast 4G, 4x CPU slowdown, cold cache): first 3D frame in about 4 seconds, 879 KB of page assets, and re-pricing in under 0.75 seconds

Website:

• Rebuilt the site with Next.js 16 and the App Router, with case studies written in MDX
• Redirected every old PHP URL to its new page and compared the new site’s HTML against the old one to catch regressions
• SEO: metadata, canonical URLs, sitemap, JSON-LD structured data with zero errors in Google’s Rich Results Test, breadcrumbs, and llms.txt
• Optimized images to WebP and recompressed the hero video
• Contact form protected by Cloudflare Turnstile and sent through Resend
• The demo page scores 100 in Lighthouse for accessibility, best practices, and SEO, with no layout shift

Tech Stack:

• Next.js 16, React 19, TypeScript, MDX, Zod
• three.js, React Three Fiber, drei, Blender (Python)
• Vercel, Cloudflare, Resend

Try the demo at editiv.id/demo.