About this component

A steampunk card with interlocking gears that rotate at different speeds. Hovering meshes the gears together, making them all spin in harmony. Clicking winds the mainspring, causing a burst of rotational energy that cascades through all the gears.

Difficulty

Intermediate

Style

Spin / Rotation / Flip

Frameworks

HTML/CSS, Tailwind, React, Vue, Angular, Svelte, LWC

Embed this component

Paste this snippet into any site — the design renders in a sandboxed iframe served from /embed/clockwork-gear-card.