15 ms·
CSS Minecraft
- globie 1y agoWithout a doubt the most impressive thing I've seen with CSS. This immediately brought "A Single Div"[0] to mind, which stood as the coolest CSS demo I'd seen for... 11 years! This one takes the cake. I'll be pouring over it. Thanks! [0]: https://a.singlediv.com/ https://a.singlediv.com/
- Waterluvian 1y agoSo many of these look deliciously interactive but aren’t. Is that because I’m on mobile or do they not do anything?
- gs17 1y agoI don't think any on the first page are interactive. There might be a few on the next page of it (I only found one where a pen changes color on hover).
- ericrosedev 1y agohave you seen this modern marvel? https://diana-adrianne.com/purecss-lace/ https://diana-adrianne.com/purecss-lace/
- lelandfe 1y agoWow, mobile Safari hates this. Zooming in and scrolling around crashes the page constantly.
- reaperducer 1y agoWorks fine on my iPhone 14.
- lelandfe 1y agoSimilar problems on my MBP, actually – just sans crashed tab. Zooming in and scrolling around on Chrome and Safari cause the divs to rerender (repaint?) and often not all of them even do! E.g. Chrome: https://imgur.com/a/VWCAL9G https://imgur.com/a/VWCAL9G Scrolling is fine in Firefox but extremely slow.
- yonatan8070 1y agoIt surprisingly smooth on Firefox on my Pixel 8
- asimovDev 1y agoInteresting. Worked fine on my MBP in Safari. Even browsed around in the dev tools to see the styles used
- deleted 1y ago[deleted]
- deleted 1y ago[deleted]
- ryukoposting 1y agoWow, Dark Reader absolutely mutilated her.
- qwertox 1y agoIncredible. I was so skeptical that I went in on the neckruff and from there to a lacetop, it's really all generated based on background-image but without using images but gradients of specific colors, as well as box-shadows and the like.
- deleted 1y ago[deleted]
- matrix2596 1y agoporing over it or pouring your attention :)
- globie 1y agoMy bad, I forgot I'm a liquid. It's too late to edit, but s/po\w*/poured over/ anyway :)
- owjofwjeofm 1y agothis is my favorite one one I've seen: https://lyra.horse/css-clicker/ https://lyra.horse/css-clicker/
- marky1991 1y agoWierd, posting the last blog post crashed firefox.
- mikeponders 1y agoWild, got me hooked!
- Groxx 1y agothat endgame is absolutely perfect
- i_am_a_peasant 1y agolatest in my long list of poor life choices, not going to bed at 2 AM because I'm waiting to reach 10 mil views :)))))
- i_am_a_peasant 1y agooh man this was so perfect
- koynoyno 1y agoThese were 1852 seconds well spent. If you don't hate clickers, try this one, it was definitely made with love.
- shultays 1y agobut they are all individual divs
- kataqatsi 1y agoI had the honor of seeing her give a talk. She also has a lot of other css projects that are awesome. https://lynnandtonic.com/work/ https://lynnandtonic.com/work/ Also love seeing Phoenix devs mentioned!
- hbn 1y agoDamn, that website is great on its own and it turns out she redesigns/rewrites it every year to learn new web technologies. https://lynnandtonic.com/archive/ https://lynnandtonic.com/archive/ Got this bookmarked to click around for inspiration in my free time.
- 90s_dev 1y ago> For the best performance, please close other tabs and running programs. This has always been the case with CSS, hasn't it? When you use it for rendering something relatively complex, you're kinda doomed. I get the dream, we want everything to be declarative, and leave room for future optimizations, so that we can write once and run everywhere forever. But in practice, it's not really an improvement over traditional GUIs that let you draw directly. Hence CSS is literally adding draw[1]. This is a huge reason 90s.dev doesn't use HTML/CSS but starts from scratch and lets you draw right into WebGL2 yourself, or with high-level APIs if you want. [1] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...
- shermantanktop 1y ago> When you use it for rendering something relatively complex, you're kinda doomed. Can you describe a time that happened to you, and why you felt doomed? That doesn’t like something that a person who has really used CSS in any meaningful way would say. Sharp edges, sure, but what technology doesn’t have that?
- chipsrafferty 1y ago[flagged]
- 90s_dev 1y agoStupid comment, sure. That's always true with me. Shill for my app? I don't even know what shill means. Plug for my app? Not really. It's pretty much dead atp. I'm just discussing my own experiences with the topic in the thread. But yes, please downvote me. It helps remind me that this place isn't for me.
- chipsrafferty 1y agoYou cannot downvote on this site
- None4U 1y ago
- skulk 1y agoIf anyone's wondering how it manages the state, a quick peek into the source code shows that it uses radiobuttons and the HTML contains all the blocks you could ever possibly place.
- globie 1y agoI... you're right. I was wondering why the world was only 9x9x9, there's 46k lines showing each block can have air, stone, grass, dirt, log, wood, leaves, or glass. I kind of like it.
- 90s_dev 1y agoThat is the most hacky solution I may have ever seen in a CSS demo. I love it.
- johnh-hn 1y agoIf anyone is equally curious how the camera state works, it looks like the camera is controlled by running animations when a button is in its :active state and pausing them otherwise.
- donatj 1y agoRadio buttons and checkboxes really are magic when it comes to doing neat things in pure CSS. We used to have a lot of neat stuff like pure html/css tabs and toggles but they didn't pass an accessibility audit.
- movedx01 1y agoIt's always radio buttons, every single time
- felineflock 1y agoPlease tell me if I understood it correctly: It implements voxels via <input type="radio" />. Each of the faces of each voxel is configured via <label>s, one for each face having a different CSS class. There is a voxel for each type of block (dirt, grass, stone, etc) and only one is activated at a time. The <input>s are arranged in a 9x9 grid 10 blocks tall times the number of different types of blocks (about 6500 total). All that is enclosed with <div>s with CSS classes that respond to the camera navigation (look up/down, move up/down, forward/back, clockwise/counter) That is brilliant!
- assimpleaspossi 1y agoNote: the <input> tag does not use and does not need a closing slash and never has in any HTML specification. https://html.spec.whatwg.org/dev/input.html#the-input-element https://html.spec.whatwg.org/dev/input.html#the-input-elemen...
- immibis 1y agoIt's sometimes done to make the same markup compatible with XHTML, without harming its interpretation in HTML.
- assimpleaspossi 1y agoYou are either running XHTML or you are not. No need to carry any compatibility overhead. I doubt he is serving XHTML.
- ThunderSizzle 1y agoI personally prefer <input /> if only to stop other developers to not try doing <input>content </input>.
- pests 1y agoThere are other tags you can omit the closing tag but yet the opening tag shouldn’t be self-closed. <ol> <li>one <li>two </ol> I think even the final closing ol can be omitted as there are rules to auto close elements when encountering tags that don’t make sense in context.
- taosx 1y agoBlew my mind. I have hundreds of tabs open, no issue on linux chrome.
- echoangle 1y agoI think at some point the number of tabs doesn't matter because the tab is unloaded and the state is maybe stored on disk. As long as you don't open them, having them open shouldn't slow the browser down.
- ryanisnan 1y agoWell done!
- quantadev 1y agoPretty slick! I never had played minecraft before. I never knew how blocks were place down until I ran this page. But it needs to be able to use the mouse to rotate, and mouse-wheel to scale!
- terribleperson 1y agoWhen playing the actual game, your viewpoint moves with the character, moved by the WASD keys and oriented with the mouse. You can only ever place one block at a time, though.
- sefke 1y agoDamn, this is impressive.
- h1fra 1y agoVery impressive
- justinde 1y agoWeb-based minecraft, when?
- JLCarveth 1y agoYou used to be able to play Minecraft classic directly on minecraft.net
- catgirlinspace 1y agoIt still exists at https://classic.minecraft.net/ https://classic.minecraft.net/
- Thorrez 1y agoI was confused because I thought Minecraft was originally Java, but that is Javascript. Wikipedia explains: >On 7 May, 2019, coinciding with Minecraft's 10th anniversary, a JavaScript recreation of an old 2009 Java Edition build named Minecraft Classic was made available to play online for free. https://en.wikipedia.org/wiki/Minecraft https://en.wikipedia.org/wiki/Minecraft
- deleted 1y ago[deleted]
- JLCarveth 1y agoWow! I had no idea, it even supports up to 9 additional players.
- charcircuit 1y agoThe full game was available on minecraft.net for many years. At times it was the only way to play multiplayer when the authentication server would go down.
- thrance 1y agoFun fact: one of the first versions of Minecraft (the "classic" one) was playable in a web browser. I actually did play it as a young teen and later thought I must have dreamt it, when I couldn't find it anywhere.
- salamino 1y ago[flagged]
- simonw 1y agoAnd it's only 480 lines of CSS! https://github.com/BenjaminAster/CSS-Minecraft/blob/main/main.css https://github.com/BenjaminAster/CSS-Minecraft/blob/main/mai... ... and 46,022 lines of HTML (3.07MB)
- bradly 1y agoVery impressive! As I've hit my mid-life slide and (regressed|progressed) back to my youth-self, I've found myself just writing a bunch of apps and sites in html and css and really enjoying it. One thing I still would like to see cracked is a random-like number in pure CSS. You can almost us there with some of the math functions and browser attributes, but I haven't found anything reliable.
- menzoic 1y agoCan LLMs help?
- Cthulhu_ 1y agoCan they? I think it's weird that you ask a question (or, offer a possible solution in the shape of a question) without verifying your own assertion first. To answer your question, LLMs confirm you can't generate a random number in CSS.
- reverendsteveii 1y agoalas, it seems that just shouting "AI" at problems is the latest trend in people who don't build software acting as though they know how building software works.
- simonklitj 1y agoIs this a thing? https://medium.com/hypersphere-codes/randomness-in-css-b55a0845c8dd https://medium.com/hypersphere-codes/randomness-in-css-b55a0...
- bradly 1y agoUnfortunately that solution does not work on Firefox or Safari.
- rebane2001 1y agoyou can pretty easily get randomness for clickable stuff by animating the z-index of multiple objects
- khurdula 1y agoDamn, just visiting this site makes me want to reinstall Minecraft haha.
- simonw 1y agoThis is fiendishly clever, and really quite elegant. I made some of my own notes on how this works here: https://simonwillison.net/2025/May/26/css-minecraft/ https://simonwillison.net/2025/May/26/css-minecraft/
- cmrx64 1y agogood write up, thanks. talk about a combinatorial explosion!
- assimpleaspossi 1y agoBut highly impractical and far beyond what CSS should be used for.
- sd9 1y agoObviously... That's why it was done For fun and to see whether it could be done
- assimpleaspossi 1y agoMy point is that there will be too many who will look at this and start using CSS in ways it is not intended. Even today, far too many people attempt to use CSS for things best left for SVG.
- hluska 1y agoThese sorts of CSS experiments have been around for as long as CSS. There even used to be a site where an entire community would take basic markup and use CSS to turn it into something else. (I just googled that phrase - the site is CSS Zen Garden. It’s impressive Google found it because that was a bad search.) Some people did create monstrosities, others learned the limits of CSS and used that knowledge to advance CSS. So my point is that I believe in the ability of people to advance through discovering all the things they shouldn’t do.
- 1y ago
- zizomod 1y ago[flagged]
- zizomod 1y agoThat's crazy
- noman-land 1y agoIncredibly brilliant. Seems to have gone completely unnoticed 2.5 years ago. https://news.ycombinator.com/item?id=33579407 https://news.ycombinator.com/item?id=33579407
- flippyhead 1y agoSee now that's amazing. Luck is such a factor in ... everything!
- zizomod 1y agoDoing this art just with css ,you are greatest one in css sir.
- cod3rboy 1y agoThis is breathtaking and embodiment of creativity. Truly a legend!
- bpiroman 1y agothat's amazing!!!
- dylanhouli 1y agoMind blowing
- Shemetz 1y agoAnother impressive CSS creation -- CSS Puzzle Box: https://suricrasia.online/puzzlebox/ https://suricrasia.online/puzzlebox/
- low_tech_punk 1y agoPug is an unsung hero in this demo. The template engine made it possible to brute force the UI with 4 levels of nested loop. Impressive!
- tantalor 1y agoIs pug doing something special here that another template engine, or just a custom script, could not do? Concatenating strings is not that complicated.
- perilunar 1y agoYou could write a script in JS to generate all the elements, then save the rendered HTML. Bootstrapping a HTML+CSS only site with HTML+CSS+JS.
- animanoir 1y ago[dead]
- nightpool 1y agoTruly incredible from an HTML perspective, but I think also a testament to how catchy and simple Minecraft is as a concept... a few minutes of noodling around in here and I already built myself a cute little tree and a hill: https://i.imgur.com/PjlDWo5.png https://i.imgur.com/PjlDWo5.png
- patates 1y agoJust think about setting what Minecraft has achieved as requirements from the get go: 1) Be one of the most successful games ever created. 2) Basic game mechanics should be possible to be implemented via just HTML and CSS (no JS). I really like doing this when something extraordinary happens by "accident".
- Kholin 1y agoIt's absolutely brilliant how rotation and movement control is achieved by changing the animation-play-state value using the :active pseudo-class on button elements. https://github.com/BenjaminAster/CSS-Minecraft/blob/main/main.css#L249-L272 https://github.com/BenjaminAster/CSS-Minecraft/blob/main/mai...
- akomtu 1y agoRecently I came across Quake implemented within a single WebGL shader (https://www.shadertoy.com/view/lsKfWd https://www.shadertoy.com/view/lsKfWd), but this is another level. HTML/CSS is a programming language now.
- teddyh 1y agoIt’s extremely impressive, but it’s not “Quake”; it’s only the difficulty selection hallway from Quake. No enemies.
- kazarka 1y agoGj
- simonw 1y agoAlternative URL for if the site has trouble keeping up: https://benjaminaster.github.io/CSS-Minecraft/ https://benjaminaster.github.io/CSS-Minecraft/
- est 1y agoI wonder when AIs can write clever codes like this. Given a surprising constraint.
- johnisgood 1y agoAbout a year ago I tried to make GPT give me a CAPTCHA using the same method and it failed (even after helping it quite a lot). I don't know how it would fare now. You can find a CAPTCHA like this in use for the Tor variant of Reddit (?).
- voodooEntity 1y agoVery nice work :) especially that you even support building sideways and the "hover" always is perfectly placed. Thats something that amazes me the most how clean it feels to place a block. Very good job!
- ElCapitanMarkla 1y agoReminds me of a couple of Keith Clark's projects from a good 10+ years back https://keithclark.co.uk/labs/css-fps/desktop/ https://keithclark.co.uk/labs/css-fps/desktop/ https://keithclark.co.uk/labs/css-3d-shadows/ https://keithclark.co.uk/labs/css-3d-shadows/
- ddtaylor 1y agoI remember discovering this trick nearly two decades ago. A co-worker and myself were a bit puzzled at the time and we kind of tossed the idea in the air that "doesn't this mean CSS is Turing Complete?" but we moved on to making things work on IE6 for old clients.
- anil_gr 1y agoBrilliant !
- kapildev 1y agoI got "Bandwidth Quota Exceeded"
- pkstn 1y agoSame, maybe shouldn't go with the serverless hype.. It's a static website after all :D
- crocowhile 1y agoGet the archive from github and load it locally: https://github.com/BenjaminAster/CSS-Minecraft/archive/refs/heads/main.zip https://github.com/BenjaminAster/CSS-Minecraft/archive/refs/...
- bart7782 1y agoIt also works on the web archive. https://web.archive.org/web/20250317122419/https://benjaminaster.com/css-minecraft/ https://web.archive.org/web/20250317122419/https://benjamina...
- deleted 1y ago[deleted]
- frozenlettuce 1y agoBest anti-firebase post I've ever seen
- craigseeman 1y agoYah, I hope this doesn't end up costing them an arm and a leg :( it was working last night
- deleted 1y ago[deleted]
- ycombinatrix 1y agothis project doesn't use a backend, so not sure why firebase is needed. github pages would have unlimited bandwidth.
- avestura 1y agoAnother hug of death. The website says "It must be upgraded via the Firebase console before it can begin serving traffic again." Wayback machine for when it used to work: https://web.archive.org/web/20250317122419/https://benjaminaster.com/css-minecraft https://web.archive.org/web/20250317122419/https://benjamina...
- faresahmed 1y agoMakes you wonder, how many webpages are dependant on such services. The Web has always been brittle, but it's a little sad seeing a website not able to survive ~50k users on its first day online. Even the least offenders, GitHub Pages, broke links before [0]. [0]: https://github.blog/news-insights/product-news/new-github-pages-domain-github-io/ https://github.blog/news-insights/product-news/new-github-pa...
- perdomon 1y agoMy one regret in life is not having seen this before your Firebase credits were spent for the month. Looking forward to a June attempt!
- benjaminaster 1y agoView it on GitHub Pages instead ;) https://benjaminaster.github.io/CSS-Minecraft/ https://benjaminaster.github.io/CSS-Minecraft/
- secondbrain_io 1y agoI also got "Bandwidth Quota Exceeded". Seems like you're doing well!
- ForOldHack 1y agohttps://web.archive.org/web/20250317122419/https://benjaminaster.com/css-minecraft/ https://web.archive.org/web/20250317122419/https://benjamina...
- benjaminaster 1y agoHello people, author here! Some comments on this from my side: - You people totally overwhelmed my website... I use(d) Firebase static hosting because it's completely free and super simple, which reached the 10 GB monthly limit now. I changed to Cloudflare in the meantime, but it'll need some time for the DNS records to update. IN THE MEANTIME, PLEASE USE THE GITHUB PAGES LINK INSTEAD: https://benjaminaster.github.io/CSS-Minecraft/ https://benjaminaster.github.io/CSS-Minecraft/ - I made this almost three years ago now, to try out the limits of what's possible with pure CSS, and to test out the then-new CSS :has() selector. - This project never got much traction until now, so I never bothered to write about how it works. Simon Willison now already wrote a blog post about it, so I guess I don't have to anymore... https://simonwillison.net/2025/May/26/css-minecraft/ https://simonwillison.net/2025/May/26/css-minecraft/ - For the best experience, please view this on a desktop browser, either Chromium-based or Firefox. - The source code is at https://github.com/BenjaminAster/CSS-Minecraft https://github.com/BenjaminAster/CSS-Minecraft. The "index.pug" and "main.scss" files contain the actual source code; the rest is mostly just the compiled output. - Here is a video of me building a house with it: https://www.youtube.com/watch?v=OH8-Y9frP5k https://www.youtube.com/watch?v=OH8-Y9frP5k
- mudkipdev 1y agoThis was criminally underrated, great job
- DirkH 1y agoDid anyone else involuntarily let out multiple expletives when they saw it and it dawned on them how hard this must have been? This is insane to me.
- kkkkkkmm 1y agoChuối