Hacker News Reader

Comment by 0xCAP | Hacker News Reader

Took me a while to REALLY realize this is all CSS no WebGL. You just blew my mind... and ruined my weekend: I'm not leaving home untilI learn this sort of wizardry!

View on HN

It's deceptively easy, actually: https://github.com/simeydotme/pokemon-cards-css/blob/main/st...

CSS gradients + background images + alpha channel.

There's some supporting JS + CSS as well over here: https://github.com/simeydotme/pokemon-cards-css/tree/main/sr...

No WebGL, no <canvas>, just simple CSS. Web developers should really learn how to combine CSS effects because the heavy WebGL/WASM rendering is often complete overkill and an unnecessary battery drain.

I also notice that on older devices, CSS animations/transitions/etc. run _way_ smoother than JS-powered renderers. I'm assuming this is because the native CSS renderer is quite optimized whereas the JS rendering engines are... JS, really.

Are we sure this kind of GPU accelerated CSS is actually more efficient than WebGL? Besides, CSS is far more prone to being impacted by browser quirks.

Definitely not more efficient. The only thing JS would need to do here is updating a 4x4 matrix. Everything else would be in the GPU.

CSS 3d transforms happen on a different thread and don't block main thread. Whilst with WebGL you still have to do some work on the JS thread. So I would say CSS animations are faster.

Maybe faster as in less potential for frame drop, but not more efficient

*not necessarily more efficient.

There's a lot of JS involved here though. This is not a "pure CSS" demo.

I imagine the browser is better able to limit the redraw behavior of CSS effects. WebGL will render as long as your tab is open (though as others have said, the speed is probably better in WebGL).

We are sure it isnt, see my other post https://news.ycombinator.com/item?id=33365694 or just look at CPU utilization while flipping those cards.

in Safari on iOS 16 the effect is clearly bugged, showing a weird tiling artifact on the front of the cards

I am very sure that the Firefox/Chrome developers have written more efficient GPU accelerated rendering for CSS then I am likely to bother writing in yet another custom WebGL renderer.

I am also sure that a dedicated renderer optimized for one subject _could_ be even more efficient.

At least JS-powered renderers can do something about making sure it looks the same in all browsers. With CSS you can't do anything about the fact that this simple demo doesn't render correctly in Safari/iOS and Firefox/Android.

Working for me on Firefox/Android

I don't know. 1000 lines of CSS doesn't seem particularly easy. I'm not a css grokker myself but maybe it's easier for others.

>all CSS no WebGL

For majority of users (chrome) this is a detriment. Google really screwed up GPU Accelerated CSS Transitions. Open taskbar and look for yourself. Moving those cards around takes >10% of my old GPU (~1050) but 100% of one CPU core (3.4GHz Haswell). This is the most basic possible single quad texture being tilted around and Chrome eats whole CPU core!

Its just as bad with even simpler 2D primitive operations like "animation: linear infinite" used for example here as one line text scroller under the video:

https://ustka-panorama.webcamera.pl

~20% of GPU and ~15% of one CPU core is being eaten by Chrome scrolling _one line of text_. Nothing on modern machines Chrome devs are used to, but translates to around 30% of whole CPU burning cycles on Thinkpad X230 just to move that text around!

that's not true in my case.

every single webgl demo i open up on my 10 years old macbook air sends the fan spinning like crazy. this demo works fine and chrome is there sitting under 0.2 cpu usage.

this is one of the most cpu efficient 3D web demo i have seen in a while.

In Safari, right?

Parent mentions Chrome.

As a backend engineer with no frontend experience, why do folks care so much when something is done "only with CSS"?

Is it because there is some technical advantage, or is it more of a "code golf" thing like, "Look at this rainbow quine I wrote that renders itself in assembly ascii art!"

It's a little of both. If I can do something with CSS, like animation, I'll take that over trying to do something custom with javascript. It's a perform

But it also feels great when you can cleverly replace a piece of javascript with a CSS effect.

This is so sad. CSS is so hard to do anything in we have to gush over basic animations like this. It’s sad as a former flash developer.

Flash supported CSS & JS (ActionScript) so I'm not sure what you're comparing. Dynamic rendering like this wasn't possible with CSS in Flash - you needed JS (ActionScript).

People aren't gushing over this being possible in modern browsers - it's been possible to do this and much more in browsers for many years. They're gushing over it being possible with just CSS (no rendering using JS).

Of course it wasn’t possible with CSS in flash (not even sure how useful that was) but was child’s play with only flash (actionscript).

as it is now with webgl

Love it or hate it, something was lost with Flash. Sure the web can do it, but for some reason it doesn't. The combination of tools and language in Flash hit a magic sweet spot that let all kinds of people play and create. This demo is extra impressive for doing it in CSS, but it's also impressive for simply being done at all. You don't see stuff like this on the web too often. If this were a Flash world, I feel like it would be ancient news. I don't wish it were, but it's worth noting.

Absolutely no doubt a lot was lost with flash. Regaining it has been a slow process, mainly due to the challenge of achieving the expressiveness of what flash offered in an open, interoperable and secure way (flash was never any of those things).

But we're here now and you can do a lot more today with open web tech than was ever possible in flash.

People are gushing because it's a 3D animation with holographic effects, which is pretty surprising to be able to achieve for a primarily-2D layout language.

I've never seen something this seamless and realistic built in flash.

It’s a layer on top of the card that shifts based on how you move it. It’s very, very simple to do in flash.

So something that used to take a $299 software package and required every user to install a browser plugin can be done natively in-browser with few lines of CSS, that's great!

Few lines of esoteric, inaccessible CSS compared to something a child could do in flash.

yup. but after 2 decades and even makes HN devs go wow! and still locks the browser after scrolling 2 pages (chrome).. its very difficult to understand the point that op makes unless you were an experienced developer on flash. I get the same feeling when i see nocode/lowcode tools..[1]

1. https://youtu.be/SY3Y8gb3jYA?t=1380

Reply on news.ycombinator.com