BeeEngine JS

Building a Pure CSS 3D Interactive Tower (Zero WebGL Dependencies) I wanted to display the modular architecture of my open-source 2D game framework, BeeEngine JS , directly on its landing page—without the massive overhead of heavy 3D WebGL libraries. Instead of loading bulky 3D engines just for a visual widget (which adds unnecessary JavaScript payload and destroys the Total Blocking Time on mobile), I built a fully interactive 3D rotating tower using Pure CSS 3D Transforms driven entirely by the GPU compositor layer. 🚀 Key Highlights 100% Native CSS 3D: Built using perspective , rotateY() , translateZ() , and standard semantic HTML elements. GPU Accelerated: Layout transformations run off the main thread, keeping Total Blocking Time (TBT) at zero. Lightweight JS Interaction: Minimal Vanilla JS (ES6) handling touch and mouse drag events to smoothly control rotation without blocking normal clicks. SEO & Crawler Friendly: Unlike WebGL canvas elements, every card in this tower is a standard <a> link, fully discoverable by search engine crawlers. 🛠️ The Architecture Behind It The goal of BeeEngine JS is to provide an ultra-lightweight (27.9 kB) and razor-sharp environment for 2D web games. Forcing users to download hundreds of kilobytes of WebGL code just to see the features of a 2D framework felt like a complete technical contradiction. By offloading the 3D math ( rotateY calculation based on the number of cards) directly to the browser's CSS rendering engine, the main thread remains 100% free to handle game logic, asset loading, and smooth scrolling. 🔗 Live Demo Check out the interactive CodePen demo below: Check out this Pen I made!