Interactive WebGL showcase with fluid simulation
Overview
A self-initiated project, no client behind it: the fictional rider site of a MotoGP racer, built to show what's technically possible when design and WebGL programming come together. Scroll-driven animation, a hand-built loading intro, and a real-time fluid simulation that morphs the portrait's face into a helmet visor on hover.
The Challenge
Screenshots alone don't prove technical depth. To show that complex interaction can actually be built, not just claimed, this project was built with no client brief behind it: full creative freedom, full technical risk.
How We Got There
Built with Vite and Three.js. The centerpiece is a hand-written GLSL 2D fluid simulation (a Navier–Stokes approximation) that reacts to mouse movement and distorts the portrait in real time, revealing a helmet visor on hover over the head. Alongside that: a hand-drawn SVG loading intro with a laser-trace reveal, scroll-linked hero shrink, parallax layering, and a custom Canvas 3D track preview for the "Next Race" card.
The Outcome
A fully working one-page demo shown live on r2rstudio.de instead of sitting in a portfolio PDF. Not a live client project, but proof that effects like this one are reproducible inside real client work.