Super impressive use of the height of the container to set state. How it works:
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.
That's another level. CSS for me just means traversing through deeply nested divs looking for the culprit that has an unwanted padding or margin or, more likely, something completely different that makes little sense to me, causing the icon to misalign by 2px. :)
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.
According to current stats 28 million global users still use IE. These are 28 million opportunities that the Mozilla Foundation is likely to mess up again...
The specular highlights on the gears appear to be independent of the gear image. Also, they appear to have a bump/normal map that responds accurately to the light source as the gear rotates. Anyone want to take a guess at how they did it?
I've been trying out Remotion to make videos in React and my mind is blown. Utilizing CSS (filters,translations,blend-modes e.t.c) has made me more proficient than I ever was in After Effects
author here. the website that hosts this is a new social media website that allows a limited amount of html (only inline css, no js or <style> elements), and a small subculture/arms race has developed to see who can make the wildest thing under those restrictions.
In 102 it works on macOS. FF's CSS implementation hasn't seen big changes recently, AFAIK, so I'd bet it runs on somewhat older versions too. Mouse over the black piece at the end of the rope on the top left and 'pull' it down.
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.