3D product website
A single-page site for an engineering-compliance platform, built around a scroll-driven 3D scan that makes a hard-to-explain product obvious in about five seconds.
The problem
The product catches compliance issues in building models before the rework starts. Genuinely valuable, and genuinely hard to explain. It took a paragraph, and the existing site was using that paragraph. Decision-makers were bouncing before they understood what they were looking at.
What we built
A single-page site whose centrepiece is a 3D building that scans as you scroll, flagging problem elements in front of you. The product's value isn't described. It's demonstrated, in the first few seconds, before anyone has to read anything.
Three acts, three camera positions, one continuous scroll. Real screenshots of the Arabic product interface carry the proof, and everything routes to a single action: request a demo.
How it works
- 01
Arrive
the building assembles. No hero image, no stock photography, no paragraph to read first.
- 02
Scan
scrolling drives a scan across the model; fourteen elements flag as issues, which is the product’s actual job made visible.
- 03
Prove
real interface screenshots, in Arabic, showing the flagged issues in the product itself.
- 04
Act
one call to action, repeated at the points where a decision-maker is most likely to be convinced.
What it delivers
Measured and verified: accessibility 96 on desktop and mobile · desktop performance 93 · largest content paint 159ms (1.16s throttled) · cumulative layout shift 0 · the entire 3D bundle 238KB gzipped.
Measured and not good: mobile performance scores 60 under 4× CPU throttling on a simulated slow connection. That's the cost of the 3D scene on a weak device. We know the number, we published it, and it's a deliberate trade: the scene is the reason the site works.
No business outcome yet. The site is too new for traffic or conversion data, and the demo funnel hasn't accumulated enough volume to report honestly. When it has, we'll say what it says.
Who else this benefits
Anyone selling something that's hard to explain in a sentence: technical products, platforms, and services where the buyer needs to see it to get it. Also anyone whose current site is a template that makes them look like their competitors.
Key features
- A bespoke 3D scene: procedural building, custom scan engine, three scroll-coupled cameras with a genuine render pause between acts so it isn't burning battery when nothing is moving
- Scroll-driven motion that stays smooth on a real device, not just a fast laptop
- Built translation-ready from day one: zero hardcoded strings, RTL-safe throughout
- Every layout property logical rather than physical, so an Arabic version needs translation, not a rebuild
- A capture harness that tests on a true 390-pixel viewport, because mobile emulation lies
Tools
- Next.js
- TypeScript
- Three.js / React Three Fiber
- GSAP + ScrollTrigger
- Lenis
- Tailwind
- Playwright
- Vercel
Is your product hard to explain?
That's usually a website problem, not a product problem. We build sites that show rather than tell, and we'll tell you honestly if yours doesn't need one.