A realistic tomato, written in code
No 3D model: the fruit, its calyx and its stem are generated, the skin is baked into 111 KB of maps, and the shapes build in idle time so nothing stutters.
Built like a product.
Behind every frame of this site sits engineering you can inspect: measured speed, real-time 3D, two languages from one source, and a studio system that publishes in seconds. This is how it is made — with the figures measured live, on your device.
See every scene as wireframe, with the technique behind each section. Or press X on any page.
Live, on your device
Read from your browser's own performance APIs while this page runs. Nothing here is typed in by hand.
- Page load
- —
- Largest paint
- —
- Layout shift
- —
- Frame rate
- —
- Over the network
- —
- Requests
- —
Measured on real visitors
The 75th percentile of the last four weeks, from visitors' own phones and computers: the measure Google uses for its Core Web Vitals. Only anonymous timings are collected.
| Device | LCPLoading | INPResponse | CLSStability | TTFBServer |
|---|---|---|---|---|
| Phones | — | — | — | — |
| Computers | — | — | — | — |
Collecting: the figures appear once enough visits have been measured.
Performance budgets
What any page of this site may cost on its first load. Our test suite holds every page to these limits on every build, so a page that grows past them does not ship. The bars measure this page, now.
- HTML — of 20 KB Over budget
- CSS — of 36 KB Over budget
- JavaScript — of 420 KB Over budget
- Fonts — of 50 KB Over budget
Sizes are compressed bytes over the network. On a repeat visit most of this comes from your browser's cache, so the bars shrink.
Inside this site
Six problems we solved here, each one you can see working.
An astronaut who talks with his hands
A 90-bone rig driven by springs, gestures timed to the voice, and a glow guarded against the one bad pixel that could black out a whole frame.
39% lighter, not one pixel changed
Two textures the scene never sampled were removed, models and fonts compress on the wire, and each page's styles arrive as one cached file.
A hero drawn off the main thread
The film projector renders inside a Web Worker on an OffscreenCanvas, so scrolling and reading never wait on the GPU.
See it liveOne source, two languages
Every page speaks Arabic and English, right to left and left to right, from the same markup, with layout, motion and 3D included.
See it liveA studio system that publishes in seconds
Works, notes, briefs and media live in our own panel; publishing re-renders the pages through the same pipeline as the build.
Lab notesWhat we build with
Open, proven tools, chosen for what each project needs rather than by habit.
- Three.js
- WebGL 2
- WebGPU
- GLSL
- GSAP
- Lenis
- React
- Node.js
- esbuild
- sharp
- Playwright
- glTF · meshopt · Draco
- Service Worker
- Brotli
Our standards
The same standards this site was built to, applied to every project.
Performance budgets
Limits on what each page may cost, checked on every build and measured on phones.
Accessible by design
Keyboard paths, readable contrast, reduced motion respected, real labels for screen readers.
Arabic and English as equals
Right-to-left is designed, not mirrored: type, numbers and motion are checked in both.
Secure by default
A strict content policy, hashed passwords, CSRF protection, rate limits and validated input.
Tested before it ships
Automated tests and real-browser checks run on every change, not just before launch.
Cared for after launch
Error reports, daily backups and a health page keep the site well after go-live.
How a project runs
- 01
Discover
Goals, audience, constraints and what success will be measured by.
- 02
Prototype
The riskiest part first, running in the browser, before anything is polished.
- 03
Build
Design and engineering in one loop, in both languages from day one.
- 04
Prove
Budgets, tests and device checks, with the numbers shared with you.
- 05
Launch
A calm release with monitoring switched on from the first minute.
- 06
Care
Updates, backups and improvements as your audience grows.