Four interlocking gears rotate at different speeds and directions as you scroll. Small gears spin fast, big gears barely move — like a real watch movement.
An exposed watch / clockwork movement where you can see the gears turning. Different gears spin at different speeds (small = fast, large = slow) and opposite directions (because in a real gear train, alternating gears rotate opposite). The largest gear has a clock face on it with hands that move too. Used by Swiss watch brands, slow-craft sites, and anything that wants to communicate "mechanical engineering at the core."
Each gear is a circle with a conic-gradient background that creates alternating tooth segments around its edge. Inside each gear, an inner circle and a hub create depth. As scroll progress --p grows, each gear's transform: rotate uses a different multiplier — gear-1 rotates 360°, gear-2 rotates -495° (opposite direction, faster), gear-3 rotates 610°, gear-4 rotates -790°. The clock face inside the biggest gear has minute / hour hands that also rotate at different speeds tied to the same --p.
Scroll inside. Four gears rotate at different speeds + directions. The clock hands move too.
Build a scroll-driven Swiss watch movement with 4 interlocking gears. Sticky pin (top:0 height:100vh) inside a tall 2400px section, dark warm "watchmaker's bench" background. Inside the pin a 560×420 stage holding 4 gear divs: g1 (220px, top-left, biggest), g2 (160px, center), g3 (130px, top-right), g4 (100px, bottom-right). Each gear is a circle with: conic-gradient(from 0deg, gold 0deg gold 8deg, dark-bronze 8deg dark-bronze 22deg, ...) repeating every 30deg via background-size to make a tooth ring; an inset ::before for the polished disc; an inset ::after for the center hole. As scroll progress --p (0→1) grows, each gear's transform:rotate uses a different multiplier AND sign so they spin at varying speeds and directions: g1: rotate(--p × 360deg), g2: rotate(--p × -495deg), g3: rotate(--p × 610deg), g4: rotate(--p × -790deg). Inside g1, place a "clock face" — a cream circle with Roman numerals (XII, III, VI, IX), a thin "second hand" rotating --p × 1080deg, a chunky "hour hand" rotating --p × 90deg, and a center pivot dot. Add a "Crown rotation" readout at the bottom showing the current angle and a "Tempo" label that reads "stopped / winding / running / fast" based on scroll speed. Aesthetic: aged brass (#c4a35d), dark bronze (#6b4f1e), cream watch face — Swiss watchmaker palette.