An interactive mechanical contraption in pure CSS | Hacker News Reader

An interactive mechanical contraption in pure CSS

cohost.org

277 pointszdw53 comments

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.

Really clever stuff.

Thanks for this explanation. Very clever indeed.

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!

Edit: The gear is a sprite sheet! Brilliant!

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

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!

Does this work with a touchscreen? I’m on mobile and don’t see anything happening.

(I pulled the rope.)

Doesn't work for me on touch screen too

It's a little finicky but I got it to work eventually. I had to get my finger on the black tape at the end of the rope just right.

Occasionally work but the handle on the rope is very small. Pinch to zoom in, the you can move it.

Tried everything. Zooming in, out, tap, swipe, just at the right spot, everywhere around etc.

Doesn't seem to work in iOS 15.5 Safari .

Not for me, either.

Doesn't work in IE11, going to have put in a ticket

I don't want to be the bearer of bad news, but IE11 has reached its EOL.

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...

I believe it was a joke

Interesting that even after its EOL, we're still not sure if IE was a joke or not

As of two days ago, 15 June 2022.

https://blogs.windows.com/windowsexperience/2022/06/15/inter...

Of last month.

Oops. Thanks for the correction.

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?

Sprite sheets as per robbrown451

Someone please build a version of Charles Babbage's Analytical Engine using this.

Yeah, can we get a mobile responsive version?

Also, I need offline and realtime support

Dear downvoters, it’s a joke.

That is awesome!

Kudos!

Reminds me of Stu Nicholls' site http://cssplay.co.uk

Most of the stuff is "curiosity-only," but awesome, nonetheless.

What's supposed to happen? All I get is a static image and a progress bar across the screen...

Grab the rope. Took me a while too.

Very cool indeed. What things CSS can do in the hands of an expert these days is seriously impressive.

EDIT: Cohost seems interesting... if anyone has an invite that would be lovely. Email is in my profile here.

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

I made remotion-confetti. :)

Is this supposed to be serious use of CSS or rather, as suggested by "Committing CSS Crimes", a critique of the absurdity of CSS?

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.

I didn't know about about cohost. How does one go about getting an invite code?

Offtocpic, but are you the person behind the blackle dark google search ui?

nope. that was around before I got this name.

It's the latter.

This is an example that even the very old tech can sometimes sprout amazing new power, just, people have to find it!

Super choppy in Safari, super smooth in Chrome.

Nice and smooth in Firefox, too. But yes, it's quite laggy in Safari.

While this is pretty nice the title is incorrect (as others mentioned because of the sprite images).

This is amazing!!

doesn't work in firefox.

yes it does.

Pull the rope

Works perfectly on my Debian system with a fairly old Firefox version (91.10.0esr). You have to pull the rope hanging from the upper left pulley.

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.

It's a bit fiddly, don't just click-drag the end of the rope, hold the mouse pointer over the end until it changes.

Yes, indeed.

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.

You're right, on further investigation it seems it does work but the active area of the rope end is only a ~3x3pixel square at the bottom right.

Nice of everyone to downvote my report though, as if I was just making things up in here to troll.

Reply on news.ycombinator.com