Isometric 3D Bouncing Cube Animation

This is an Isometric 3D Bouncing Cube Animation. It utilizes the Zdog.js engine to render a pseudo-3D geometric scene onto a flat HTML Canvas. Its function is to provide an engaging, continuous background animation where a wandering cube paints a trail across a structural grid, adding depth and kinetic energy to otherwise static hero sections.

Specs

• Weight: ~30 KB (Dependencies: Zdog).
• Performance: High. Renders exclusively via the HTML Canvas 2D Context, bypassing DOM node bloat and avoiding expensive layout recalculations.
• Theming / Customization: Geometry and colors are strictly controlled via JavaScript variables (columns, rows, gap, colors).
• Responsiveness: Static base. The canvas has inline dimensions, requiring a JavaScript resize listener to dynamically recalculate the center point for fully fluid viewport scaling.
• Web APIs: HTML Canvas API.
• [!] Graceful Degradation: Fails to a blank screen if JavaScript is disabled. Canvas content is inherently invisible to screen readers without ARIA fallbacks.

Anatomy

The architecture separates the canvas container from the rendering logic.

• HTML (The Skeleton): A solitary, empty <canvas> element.
• CSS (The Skin): Minimal. Centers the canvas via CSS Grid and applies an SVG background pattern using a Data URI.
• JS (The Nervous System): The Zdog engine handles the heavy lifting. It initializes the Anchor and Box primitives, mathematically maps out the 7x7 grid, and executes a continuous requestAnimationFrame loop to track the bouncing cube’s coordinates and paint the trail.

Logic

The core mathematical elegance lies in the “Parabolic Bounce Calculation”:

const progress = ticker / cycle;
const loop = Math.sin(progress * Math.PI);
const ease = sineOut(progress);

box.translate.y = loop * lift * -1;

The bouncing motion isn’t a heavy physics engine simulation; it is pure, efficient trigonometry. By passing the linear animation progress (0 to 1) into a standard Sine function multiplied by Pi, the script generates a perfect mathematical arch. This smoothly dictates the Y-axis altitude (lift), creating a convincing gravity-defying hop that perfectly synchronizes with the cube’s horizontal translation and rotation across the grid.

Feel

Rhythmic, mechanical, and hypnotic. The bouncing cube moves with absolute mathematical predictability. The way it permanently alters the color of the platforms it lands on gives the animation a sense of lasting physical impact and history, making it satisfying to watch as it slowly paints the entire matrix.