Hacker News Reader

Comment by aceazzameen | Hacker News Reader

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!

Edit: The gear is a sprite sheet! Brilliant!

View on HN

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

That's how I see it too. Very creative!

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.

Why, I can imagine a CSS mask which rotates occluding a fixed CSS-generated brushed metal gradient.

(No, not going to try to implement it.)

now I kinda want to try

Reply on news.ycombinator.com