An interactive mechanical contraption in pure CSS

The left rope has a "resize: vertical" attribute set, which lets you dynamically change the height of it with only css. This influences the height of the parent container, as it's the only div that doesn't have its height set as a percentage.

Every other div has is height set to a "calc()" with a percentage and an added set amount of pixels. This means that when the parent container resizes, their height adjusts, which also adjusts their background image. This is what drives both the rope and the gear animations, but in different ways.

The rope is straightforward - as the container grows in height, the rope bg changes position, creating a pulling effect.

The gear is more tricky. They each use a long vertical sprite sheet to portray a spinning animation. How this animation gets triggered is clever - note the background position-y of one of the large red gears. It's set to 10000%. If you set this to 100% instead, you'll notice the background of the gears moves in sync with the rope - each pixel of height of the element moves the background down by 1px. By setting it to 10000% what you're saying is, "for each single pixel of height of this element, shift the background by 100px". Notably, each one of these red gears in the sprite sheet is precisely 100px high. That means for each pixel added to the height, it shifts the sprite sheet to the next gear.

Really clever stuff.

The positioning of the mouse cursor over the rope end in order to pull the rope appears to be much more critical in Firefox than in Chromium/Chrome.

As mentioned, the mouse cursor must change into a double-pointed vertical arrow, to allow rope pulling, so the shape change identifies the right spot.