DVD Screen Saver

Canvas-based recreation of the classic bouncing DVD logo animation, extended with aim-and-launch controls, configurable trail effects, and real-time parameter tuning via dat.GUI. The animation runs on an HTML5 canvas element with frame-by-frame collision detection against the viewport edges; each wall bounce randomizes the logo color.

The animation runs on a requestAnimationFrame loop, which ties motion to the browser’s actual frame timing rather than a fixed setInterval. The practical consequence is that velocity is applied as a per-frame delta against the elapsed time, so the logo moves at the same real-world speed whether the display refreshes at 60Hz or 144Hz instead of running faster on a faster monitor. The trail effect comes from this same loop: rather than clearing the canvas each frame, it paints a low-opacity fill over the previous frame, so older positions fade out gradually instead of vanishing — and the trail-persistence slider is just the opacity of that fill.

Aim-and-launch controls let you set direction and power with the mouse, computing the launch vector from the drag, so the starting trajectory is deliberate rather than random — you can try to hit the corner. dat.GUI exposes speed, aim length, trail persistence, and color cycling as live sliders, a tooling pattern from game development that makes tuning the feel of the motion immediate. SVG logos load dynamically, decoupling the animation from the specific asset so swapping the image needs no code change.