Lab
Explore my work in 3D
A small React Three Fiber scene I built to show how I approach 3D on the web: it works with a keyboard and a screen reader, and it adapts to the device it runs on.
Loading the 3D scene…
What's under the hood
- Accessible hotspots. Each project is a real HTML button placed over the canvas, so Tab, Enter and screen readers just work. Escape goes back to the overview and returns focus to where you were, and every selection is announced.
- Quality tiers. The scene starts at low, medium or high based on device hints (memory, CPU cores, data saver, network type, touch screen) and caps the pixel ratio to match. You can override it, and your choice is remembered.
- No wasted frames. Rendering stops completely when the scene is off screen. With reduced motion it renders only when something changes.
- Reduced motion respected. No idle animation, and the camera jumps instead of flying.
- Nothing to download. Every model is procedural geometry, and the 3D code is split out so it only loads on this page.
The same techniques, at a much larger scale, power the 3D campaigns I built for The LEGO Group. Read the case study.