This is so creative! I'm trying to figure out how it works! It relies on the resize property and css grid. I don't quite understand why the gears spin in the grid when the rope resizes it though. This is wildly impressive!
So in summary, if I'm understanding properly, this uses a few tricks. First resizing the rope (by dragging it) changes the size of a css grid holding all the other elements. Since percentages refer to this parent grid this can be used to resize the other ropes and chains and with the right background + clipping this causes it to "move". For the spinning a sprite sheet is used with the background position depend on the size of the container but with a big enough multiple so we only see one sprite at a time
I was slightly disappointed at the heavy use of sprite sheets (which seems less than "pure" css), but after looking closely there would be no way to get the gears right just relying on css transforms (i.e. rotation) because of the 3d and brushed metal look they wanted for the gears.
But yeah extremely impressive. I could do implement it if you gave me those sprite sheets and javascript easily enough, but wouldn't have any clue how to with css.
Edit: The gear is a sprite sheet! Brilliant!