It really does make them feel that much more collectible. I don't know much about NFTs, but this kind of pseudo-3D experience ought to be standard for browsing digital collectible art.
I also wonder how this would hold up for viewing artworks on a display.
Maybe a website or browser extension that gives you a similar experience for any image you come across could be useful.
I'm working on a project around this but am a developer and not a business/sales person so I'm actively looking for a partner/co-founder. The NFT part is not at the core of it but exists as ownership and authenticity validation mechanism, which if you consider the actual app is a tremendously valid use case. How can I find a co-founder to help drive this to market?
this would be a big hit with NFTs in a couple ways:
easiest: the team's own website can display the NFT images in their own gallery, similar to OP. Anywhere else displaying the NFT will not have these effects, like the marketplaces
medium: major NFT marketplaces and displayers allow 3mf file format, which is a 3D file format which can also accept mouse over movement and other UI interactivity on top of the main image (or 3D object). so one would do this in 3D software first and then render out distinct files
hard but efficient: you can embed an HTML/SVG viewer into the NFT code itself, which could theoretically include all of this CSS and mouseover/tap events. This would make it more portable to be rendered with these features in more places and wouldn't require as much cumbersome processing and file portability to do everything needed for the .3mf format. The additional benefit is that all of this code could be directly onchain (while the raster image still is on IPFS/elsewhere)
I’m the biggest fan of the third option, basically you are relying on nft image viewers being so universally compatible with everything that can be returned from the nft getImage protocol standards
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!
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.
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.
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).
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.
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:
~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!
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.
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.
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.
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!
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]
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).
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.
It’s also really refreshing to see a project done for the love, the passion, the fun.
There was a question the other day about how come people, especially programmers, don’t have as much hobbies or frivolous projects anymore.
It feels like many projects nowadays are done with some ulterior motive or motivation such as buffing up your resume, ego, credibility, employment potential, or startup funding. This affects the priorities and level of polish you put into certain things
I agree with you. Last weekend I had the same realisation and thought how that as a programmer it's comparatively very easy to make weird stuff for fun. But somehow we rarely do.
I made a page that converts sentences to GIFs a couple of years ago[^1]. I remember how I revelled in the fact that I could create absurd stuff likes this out of nothing.
This is really cool but I noticed something weird or a bug.
As I do on HN went to the next tab, and then the next tab, and finally when i started closing tabs landed back on this page. All the cards were spinning very crazy.
Is this some delay between events for css or js thats adding maxV?
Looks great, I'm always amazed how easy it is to do complicated graphics using CSS. It reminds me how outdated my OpenGL CompSci college course felt, drawing triangles by defining each point coordinates.. I'm thankful I don't have to do that nowadays.
Your work is incredible, thanks for sharing! Mind boggled by the swift card design you did and posted next in the Twitter thread. Im mind boggled by how realistic the 3d effect looks using the gyroscope and tasty design.
This is beautiful. Made me realize one of the biggest things that the Hearthstone online TCG got right. The overall handling of the cards, especially when opening packs, is very well done and almost feel tactile. Many online TCGs just take flat pictures of cards and pretend to be done.
Very cool, but it does not look great on Safari. The back of the card occludes the front of the card at some angles and aggressively flickers between the two images. But when it's working it looks great! Would make a good module in a card game engine.
Yeah – it's exhibiting that problem even in the technology preview, so this won't be getting better anytime soon :(
Expanding the card is noticeably laggy in Firefox as well (M1 MBP), only getting smooth results in Chrome, and even some of those, like the "Pokemon V" ones, lag a small bit
The way the images of the cards are compressed is very good, they look absolutely crisp and load super fast. In fact, so crisp that I've wondered whether they aren't images at all but recreations of the cards in CSS as well.
Only vaguely related, but the site (https://pokemontcg.io/) that the high resolution card images are from is very big and fancy for something that is:
> This website is not produced, endorsed, supported, or affiliated with Nintendo or The Pokémon Company.
...which surprises me, because in general Nintendo are Not Amused by people making money off of their IP... but, it's been around for a while, so I guess they don't care?
I don't think Nintendo is very involved in the TCG. The Pokémon Company is a separate company, though with 1/3 ownership by Nintendo. Nintendo only really steps in for titles published on Nintendo hardware. The card game and the mobile games are fully under control of The Pokémon Company.
I don't know elsewhere but where I live it's 10x easier to buy pirated Pokemon cards rather then the original ones. You can even buy them in Amazon (but that's nothing extraordinary).
Something like this would look amazing on Scryfall or Gatherer. I'm not sure how you'd go about selling this to them, but I think the Magic: the Gathering world would be better off for it.
Getting in touch with Scryfall is easy, go chat with April King. She is on Twitter. But is it really all that useful beyond looking cool? Granted it seems easy to implement.
Especially with the new foiling types in Magic (etched foil, galaxy foils), it can be difficult for people to know what to look for when identifying one vs. the other. Having it illustrated and animated this way would be really helpful, I think.
I just noticed that on mobile devices the gyroscope can be used to move the cards.
Now I wonder if the card could actually stay fixed in place, and just make the holo effects move. That would probably look more realistic and impressive, as if the card was actually on
the screen.
I'm a little surprised that Ancient Mew, one of the original uniquely holographic cards, isn't represented here. It was very unlike any other card seen when it was handed out at the first movie premiere.
Panini presented the NFTs from their Megacracks 2022-2023 card collection in a similar way[0], aesthetically, but using video files (MP4) which makes it much less interesting (and even so, the visual effects in those are inferior to this CSS implementation). The fact that this CSS version does not work properly in Safari in unfortunate, though.
I would assume in this instance a lack of license is equivalent to all rights reserved (instead of a OSS license) if they're within a country where copyright is vested automatically.
(But yes, this could certainly use a MIT or similar.)
I stopped playing before all the expansions (there's a secret gold rare? is best!) and it's really cool to be able to 'handle' a card to see the cartwheel effect.
That may date me a bit, but that also means there's a place in my heart for pure css.
You might have some success selling this "technology" to wedding invitation printers and similar websites. They always have trouble demonstrating the various paper options / partial glossy / metalic cut out options
Does anyone know how the foils work on physical cards?
I know it's some type of diffraction grading but I have no idea how the foil is made, where you can buy it, etc. I'm sure there's a nice in depth post somewhere explaining it all.
I imagine in the case of mixed printed/foil cards that they've printed ink on top of whatever clear layer protects the diffraction grating, leaving a gap anywhere they want the card to be shiny.
I spent a bit of time doing this effect in CSS, though not to this degree. Quickly abandoned it when I couldn't find a way around the glitchy safari and sometimes chrome implementations of this effect.
This just makes me realize how long it's been since I played Pokemon TCG (the original Base Set). This is amazing, great work! Wish there were another game like the GB Pokemon TCG and TCG2 games.
Why are the coolest web demos always using Pokemon? Anyone remember the pokedex.org html5 progressive web app? (Sadly doesn't seem to work properly for me anymore)
my first reaction to this was "cmon, wow, y'all, we need to stop, this is too good". And then immediately after my second reaction was "we need to bake this into ALL the games!" :)
People pursuing whatever tickles them is what gives our culture its vibrancy. Especially for things that don't hurt anyone, we should encourage such expeditions.
This is art and clever engineering mixed into one. I think it's one of the coolest things I've seen lately on HN. I wonder why you view something so harmless as so culturally damning.
Unless you're trolling, I don't understand what would be an acceptable response to you. We all spend some of our time in things that don't bring immediate returns to humanity, even you spent some time writing your quick dismissal and replying to me.
I didn't flag anyone, in fact I'll usually vouch for flagged content. But I'm curious what you think would be a non-defensive statement (and what does that even mean?). Also, some of the replies seemed genuinely curious at what makes you have this strong opinion and you refused to elaborate...
I also wonder how this would hold up for viewing artworks on a display. Maybe a website or browser extension that gives you a similar experience for any image you come across could be useful.