Interlocking Clockwork Gears — Mechanical CSS Animation

The Clockwork Gears simulation is a complex mechanical display that mimics the movement of a real-life timepiece. Built with interlocking cogs and moving pistons, it creates a tactile, steampunk-inspired interactive experience.

How It Works

This effect uses CSS Transforms (rotate) and CSS Custom Properties (--rotation) to synchronize multiple gear layers. Each gear rotates at a different relative speed (calculated based on tooth count) to maintain perfect interlocking logic. A lightweight JavaScript loop calculates the angle of the mouse relative to the center, allowing the user to “wind” or “drive” the mechanism manually.

Use Cases

• High-end watch or jewelry landing pages
• Precision engineering or manufacturing websites
• Steampunk-themed creative portfolios
• Interactive backgrounds for history or heritage projects

How to Customize

• Gear Material: Modify the background: linear-gradient in the .gear class to change from copper/bronze to silver or steel.
• Piston Speed: Adjust the sin(var(--rotation) * 0.5) multiplier to make the piston pump faster or with more throw.
• Mechanism Depth: Tweak the box-shadow values to make the gears look more or less “recessed” into the scene.

Frequently Asked Questions

Are the teeth real shapes?

The teeth are implemented using CSS rectangles (.tooth) rotated around the gear center. This ensures they scale perfectly and maintain sharp edges regardless of the zoom level.

Does it support automatic rotation?

Yes. You can toggle the gridPreviewScript mode to have the mechanism rotate autonomously without user interaction, perfect for subtle background motion.

Is it accessible?

Yes. The entire mechanism is contained within a properly labeled <div role="img"> or descriptive container. For users with motion sensitivity, you can simplify the logic to only rotate on specific clicks.