Macintosh Classic 3D
An interactive 3D rendering of the iconic Macintosh Classic, built entirely from scratch using Canvas 2D with custom vector mathematics and perspective projection.
Technical Details
Custom 3D Engine
No Three.js or WebGL libraries. Pure mathematics: rotation matrices, perspective projection, and depth-based rendering—all implemented from scratch.
Interactive Physics
Drag to spin with momentum physics. Velocity tracking, friction decay, and continuous ambient rotation that layers naturally with user interaction.
Waveform Visualization
The screen displays an animated waveform that cycles through sine, triangle, sawtooth, and square waves—a nod to audio synthesis and sound design.
Accessibility
Respects prefers-reduced-motion.
Animations pause when the tab is hidden to conserve resources.
Animated Favicon
Look at your browser tab—the favicon is a miniature version of this Mac, spinning in real-time. The same 3D engine renders to a tiny 32x32 canvas at 12fps, converting each frame to a data URL that updates the favicon dynamically.
How it works
An off-screen canvas renders the wireframe Mac using the same vector math and perspective
projection. Each frame is converted to a PNG data URL via canvas.toDataURL(),
then assigned to the favicon link element. The animation pauses when the tab is hidden to conserve resources.
Debug Console
Open your browser's developer console and type macDebug.help() to access live controls for rotation, camera distance, and animation parameters.