A browser-based 3D skateboard configurator displaying a custom-painted deck with layered decals, shown from an angled view as users rotate and design in real time.
Skatebuilder lets you design a skateboard in 3D, which sounds straightforward until you actually try it. You're painting directly onto the deck with brushes that feel responsive, layering decals that composite cleanly, rotating the board to check your work from every angle. It's the kind of thing that makes you wonder why more product configurators don't feel this good. The answer, of course, is that making WebGL feel this smooth takes real effort.
Agustin Salinas built this with React Three Fiber and Three.js, and the implementation handles several tricky problems at once. Real-time brush painting on a 3D surface requires UV mapping that doesn't fight you. Multi-decal compositing means managing texture layering without turning the render pipeline into spaghetti. And the whole thing adapts to whatever device you're on, which is its own headache. None of this is flashy shader wizardry. It's just solid engineering, the kind that disappears when it's working.
If you're curious about how product configurators can actually feel like tools instead of demos, this is worth your time. Poke around the app, inspect how the painting system handles edge cases, and think about what it takes to make a 3D canvas feel native.
- Live Demo: https://www.skatebuilder.com/app
- Author: Agustin Salinas (LinkedIn, GitHub)