When we set out to rebuild Fueled.com, one of our most ambitious goals was also one of the most technically complex: delivering a modern, motion-rich design that felt dynamic and alive, without compromising performance.
One deceptively challenging feature was our animated 3D shape component, which you can find on pages throughout this site. Instead of relying on traditional browser-based 3D rendering techniques like WebGL—which can be resource-intensive and unreliable across devices—we challenged ourselves to engineer the same visual impact using a lighter-weight, more reliable approach.
In a new article, I break down the full journey from early ideas (like embedding videos) to clever workarounds using sprite sheets and, ultimately, the performant image-sequence solution we shipped.
Along the way, I share insights into browser rendering limits, how we used modern image formats like WebP to keep assets lean, and how we layered interactivity and design polish with tools like CSS blend modes, Intersection Observer, and the Motion animation library… and how I embraced ChatGPT as a coding partner to rapidly scaffold, iterate, and experiment with different approaches.
