[HN Gopher] CSS Minecraft
___________________________________________________________________
CSS Minecraft
Author : mudkipdev
Score : 1084 points
Date : 2025-05-26 18:28 UTC (1 days ago)
(HTM) web link (benjaminaster.com)
(TXT) w3m dump (benjaminaster.com)
| globie wrote:
| Without 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/
| Waterluvian wrote:
| So many of these look deliciously interactive but aren't. Is
| that because I'm on mobile or do they not do anything?
| gs17 wrote:
| I 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 wrote:
| have you seen this modern marvel? https://diana-
| adrianne.com/purecss-lace/
| lelandfe wrote:
| Wow, mobile Safari _hates_ this. Zooming in and scrolling
| around crashes the page constantly.
| reaperducer wrote:
| Works fine on my iPhone 14.
| lelandfe wrote:
| Similar 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
|
| Scrolling is fine in Firefox but extremely slow.
| yonatan8070 wrote:
| It surprisingly smooth on Firefox on my Pixel 8
| asimovDev wrote:
| Interesting. Worked fine on my MBP in Safari. Even
| browsed around in the dev tools to see the styles used
| ryukoposting wrote:
| Wow, Dark Reader absolutely mutilated her.
| qwertox wrote:
| Incredible. 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.
| bigyikes wrote:
| Diana is a treasure!
| matrix2596 wrote:
| poring over it or pouring your attention :)
| globie wrote:
| My bad, I forgot I'm a liquid. It's too late to edit, but
| s/po\w*/poured over/ anyway :)
| owjofwjeofm wrote:
| this is my favorite one one I've seen: https://lyra.horse/css-
| clicker/
| mikeponders wrote:
| Wild, got me hooked!
| Groxx wrote:
| that endgame is absolutely perfect
| shultays wrote:
| but they are all individual divs
| kataqatsi wrote:
| I 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/
|
| Also love seeing Phoenix devs mentioned!
| hbn wrote:
| Damn, 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/
|
| Got this bookmarked to click around for inspiration in my
| free time.
| 90s_dev wrote:
| > 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_Paintin...
| shermantanktop wrote:
| > 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?
| None4U wrote:
| The game https://corru.observer/ is a great example of a CSS-
| rendered 3D video game that runs fairly well on modern devices
| (even playable on mobile although it'll try to block you based
| on viewport size if you're not in "desktop mode")
| skulk wrote:
| If 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 wrote:
| I... 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 wrote:
| That is the most hacky solution I may have ever seen in a CSS
| demo. I love it.
| johnh-hn wrote:
| If 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 wrote:
| Radio 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 wrote:
| It's always radio buttons, every single time
| felineflock wrote:
| Please 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 wrote:
| Note: 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-elemen...
| immibis wrote:
| It's sometimes done to make the same markup compatible with
| XHTML, without harming its interpretation in HTML.
| assimpleaspossi wrote:
| You are either running XHTML or you are not. No need to
| carry any compatibility overhead. I doubt he is serving
| XHTML.
| ThunderSizzle wrote:
| I personally prefer <input /> if only to stop other
| developers to not try doing <input>content </input>.
| pests wrote:
| There 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.
| ThunderSizzle wrote:
| I know that, but many developers don't. I can't wait to
| see the confusion on why my tag didn't auto-close like a
| <li> tag.
|
| Ambiguity can be a dangerous thing, and not closing HTML
| tags can be a cause of that in my experience.
| assimpleaspossi wrote:
| The term for such "other developers" is "hobbyists".
|
| There are other terms but I won't list them here.
| ThunderSizzle wrote:
| Sometimes "other developers" is also "coworkers".
|
| I've found less ambiguity to be a better thing than not,
| where possible. Self-closing a tag that can't contain
| anything is one such example of removing ambiguity for
| "hobbyists".
| assimpleaspossi wrote:
| One would need to know the tag is self-closing in order
| to put the closing slash in. Right? So if one knows it's
| self-closing already, why do they need to add the extra
| weight?
|
| Makes no sense.
|
| If one wants to add content to a self-closing element,
| one has far more problems than we're talking about here.
| taosx wrote:
| Blew my mind. I have hundreds of tabs open, no issue on linux
| chrome.
| echoangle wrote:
| I 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 wrote:
| Well done!
| quantadev wrote:
| Pretty 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 wrote:
| When 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 wrote:
| Damn, this is impressive.
| h1fra wrote:
| Very impressive
| justinde wrote:
| Web-based minecraft, when?
| JLCarveth wrote:
| You used to be able to play Minecraft classic directly on
| minecraft.net
| catgirlinspace wrote:
| It still exists at https://classic.minecraft.net/
| Thorrez wrote:
| I 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
| JLCarveth wrote:
| Wow! I had no idea, it even supports up to 9 additional
| players.
| charcircuit wrote:
| The 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 wrote:
| Fun 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.
| protocolture wrote:
| It got extended, embraced and extinguished.
| catgirlinspace wrote:
| Nope, still exists :3 https://classic.minecraft.net/
| andriamanitra wrote:
| Not "still". That is not the same game that was on the
| website when I first got into Minecraft in 2010 but a
| JavaScript recreation made in 2019.
| make3 wrote:
| this is pretty empty
| rbits wrote:
| Yeah I remember that. I think it was back in version 1.6 or
| something. It kinda blew my mind as a kid playing a full-on
| computer game in a browser.
| auxiliarymoose wrote:
| The phone is ringing--Java Applets called B-)
| fenomas wrote:
| Only guessing, but I have a theory that Mojang considered that
| circa 2017 :D
|
| In 2019 they released a web version of minecraft classic, as a
| quirky marketing thing for the game's anniversary. But what
| they released turned out to be built on my open-source voxel
| engine, and when I dug around their code I realized they'd
| yoinked my engine a solid two years earlier.
|
| And the demo they released was probably not two year's of work,
| so my theory is that somebody at Mojang investigated the idea
| of minecraft-but-JS, and made a demo but then decided not to
| pursue it, and then later on it got recycled for the marketing
| demo. (which, annoyingly for me, they pretended was an old
| alpha build of Minecraft instead of a new thing built on open
| source.)
|
| The demo is still live, though the multiplayer stopped working
| the same day it launched:
|
| https://classic.minecraft.net/
| fenomas wrote:
| Humorous postscript, btw: two months after Mojang forked my
| voxel engine, somebody left an anonymous "this is awful, you
| are a terrible programmer" comment on the engine repo.
|
| It's probably a total coincidence, but I like to imagine that
| the comment came from somebody at Mojang, and that my awful
| code is the reason why minecraft isn't a web app today :D
| BtM909 wrote:
| Is your repo still available?
| fenomas wrote:
| Yup! Though I haven't touched it in several years:
|
| https://github.com/fenomas/noa
| beeflet wrote:
| The full java version of the game was ported to
| webassembly/webgl a while ago. It's called eaglercraft:
| https://eaglercraft.com
| zimpenfish wrote:
| Minor nit - "the full java version of an at-least 8 years old
| release" (which is necessarily missing -a lot- of what people
| would consider "Minecraft" these days.)
| immibis wrote:
| Minecraft these days is missing a lot of what people would
| consider "Minecraft" 8 years ago.
| sparky_ wrote:
| I don't get it - isn't this blatant copyright infringement?
| Seems like they're just running some kind of cracked
| Minecraft build with a JVM-in-JS layer or some such trickery?
| beeflet wrote:
| yeah, it's JVM-to-wasm plus an lwjgl-to-webgl library plus
| various compression packed into a single .html file
| simonw wrote:
| And it's only 480 lines of CSS!
| https://github.com/BenjaminAster/CSS-Minecraft/blob/main/mai...
|
| ... and 46,022 lines of HTML (3.07MB)
| bradly wrote:
| Very 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 wrote:
| Can LLMs help?
| Cthulhu_ wrote:
| Can 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 wrote:
| alas, 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 wrote:
| Is this a thing? https://medium.com/hypersphere-
| codes/randomness-in-css-b55a0...
| bradly wrote:
| Unfortunately that solution does not work on Firefox or
| Safari.
| khurdula wrote:
| Damn, just visiting this site makes me want to reinstall
| Minecraft haha.
| simonw wrote:
| This 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/
| cmrx64 wrote:
| good write up, thanks. talk about a combinatorial explosion!
| assimpleaspossi wrote:
| But highly impractical and far beyond what CSS should be used
| for.
| sd9 wrote:
| Obviously...
|
| That's why it was done
|
| For fun and to see whether it could be done
| assimpleaspossi wrote:
| My 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 wrote:
| These 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.
| johnisgood wrote:
| CSS Minecraft, or CSS CAPTCHAs, or sign up / login modals
| cannot be done via SVG. This is needed for JS-less
| websites (e.g. Tor). CSS with HTML is perfect for this
| use-case.
| spookie wrote:
| If anything these tricks enable people to build stuff
| without JS.
|
| I'm still here waiting for someone at W3C to get their
| stuff together and provide a spec for something that
| could enable an accessible hamburger menu with plain HTML
| + CSS.
|
| Or a sane details element that DOES NOT REQUIRE JS TO
| CHANGE STATE (without interaction). Jesus.
| popcorncowboy wrote:
| If you really wanna get your blood boiling how about some
| Doom with HTML checkboxes - https://healeycodes.com/doom-
| rendered-via-checkboxes
| johnisgood wrote:
| This is how CSS CAPTCHAs are made (for Tor websites), and sign
| up / login modals, and many other stuff.
| zizomod wrote:
| That's crazy
| noman-land wrote:
| Incredibly brilliant. Seems to have gone completely unnoticed 2.5
| years ago.
|
| https://news.ycombinator.com/item?id=33579407
| flippyhead wrote:
| See now that's amazing. Luck is such a factor in ...
| everything!
| zizomod wrote:
| Doing this art just with css ,you are greatest one in css sir.
| cod3rboy wrote:
| This is breathtaking and embodiment of creativity. Truly a
| legend!
| bpiroman wrote:
| that's amazing!!!
| dylanhouli wrote:
| Mind blowing
| low_tech_punk wrote:
| Pug 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 wrote:
| Is pug doing something special here that another template
| engine, or just a custom script, could not do?
|
| Concatenating strings is not that complicated.
| perilunar wrote:
| You 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.
| nightpool wrote:
| Truly 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
| patates wrote:
| Just 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 wrote:
| It'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/mai...
| akomtu wrote:
| Recently I came across Quake implemented within a single WebGL
| shader (https://www.shadertoy.com/view/lsKfWd), but this is
| another level. HTML/CSS is a programming language now.
| teddyh wrote:
| It's extremely impressive, but it's not "Quake"; it's only the
| difficulty selection hallway from Quake. No enemies.
| Shemetz wrote:
| Another impressive CSS creation -- CSS Puzzle Box:
| https://suricrasia.online/puzzlebox/
| kazarka wrote:
| Gj
| simonw wrote:
| Alternative URL for if the site has trouble keeping up:
| https://benjaminaster.github.io/CSS-Minecraft/
| est wrote:
| I wonder when AIs can write clever codes like this. Given a
| surprising constraint.
| johnisgood wrote:
| About 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 wrote:
| Very 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 wrote:
| Reminds 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-3d-shadows/
| ddtaylor wrote:
| I 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 wrote:
| Brilliant !
| kapildev wrote:
| I got "Bandwidth Quota Exceeded"
| pkstn wrote:
| Same, maybe shouldn't go with the serverless hype.. It's a
| static website after all :D
| crocowhile wrote:
| Get the archive from github and load it locally:
| https://github.com/BenjaminAster/CSS-Minecraft/archive/refs/...
| bart7782 wrote:
| It also works on the web archive.
|
| https://web.archive.org/web/20250317122419/https://benjamina...
| frozenlettuce wrote:
| Best anti-firebase post I've ever seen
| craigseeman wrote:
| Yah, I hope this doesn't end up costing them an arm and a leg
| :( it was working last night
| ycombinatrix wrote:
| this project doesn't use a backend, so not sure why firebase is
| needed. github pages would have unlimited bandwidth.
| avestura wrote:
| Another 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://benjamina...
| faresahmed wrote:
| Makes 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-
| pa...
| perdomon wrote:
| My 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 wrote:
| View it on GitHub Pages instead ;)
| https://benjaminaster.github.io/CSS-Minecraft/
| secondbrain_io wrote:
| I also got "Bandwidth Quota Exceeded". Seems like you're doing
| well!
| ForOldHack wrote:
| https://web.archive.org/web/20250317122419/https://benjamina...
| benjaminaster wrote:
| Hello 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/
|
| - 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/
|
| - 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. 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
___________________________________________________________________
(page generated 2025-05-27 23:01 UTC)