Behind the WordPress Block: Fueled.com’s Animated 3D Objects
One of the more ambitious design goals behind the new Fueled.com involved bringing to life animated 3D objects in the browser—without relying on WebGL or heavy, real-time rendering.
The solution was a custom animation system that simulates 3D using optimized image sequences, built leveraging WebP image formats, Motion.js, and Intersection Observer techniques. The final product offers smooth, high-quality animation that works reliably across devices and browsers.
Packaged within a custom Gutenberg block, editors can easily select from multiple 3D objects, customize styles with blend modes, and see a preview directly inside the WordPress editor.
I’ve published a deep dive article breaking down the path to the final product—from early experiments with videos and sprite sheets to lightweight image sequences and smart rendering logic to our approach to the custom WordPress editor block.
Read the full article on LinkedIn, and get in touch if you’d like help creating this kind of experience for your own digital properties.