CSS Minecraft

https://benjaminaster.com/css-minecraft/

1052•mudkipdev•1d ago

Comments

globie•22h ago

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•20h ago

So many of these look deliciously interactive but aren’t. Is that because I’m on mobile or do they not do anything?

gs17•18h ago

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•17h ago

have you seen this modern marvel? https://diana-adrianne.com/purecss-lace/

lelandfe•17h ago

Wow, mobile Safari hates this. Zooming in and scrolling around crashes the page constantly.

reaperducer•17h ago

Works fine on my iPhone 14.

lelandfe•17h ago

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•15h ago

It surprisingly smooth on Firefox on my Pixel 8

asimovDev•14h ago

Interesting. Worked fine on my MBP in Safari. Even browsed around in the dev tools to see the styles used

ryukoposting•16h ago

Wow, Dark Reader absolutely mutilated her.

qwertox•13h ago

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•5h ago

Diana is a treasure!

matrix2596•11h ago

poring over it or pouring your attention :)

globie•55m ago

My bad, I forgot I'm a liquid. It's too late to edit, but s/po\w*/poured over/ anyway :)

owjofwjeofm•11h ago

this is my favorite one one I've seen: https://lyra.horse/css-clicker/

shultays•5h ago

but they are all individual divs

kataqatsi•1h ago

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!

90s_dev•22h 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_Paintin...

shermantanktop•20h 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?

None4U•19h ago

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•22h ago

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•22h ago

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•22h ago

That is the most hacky solution I may have ever seen in a CSS demo. I love it.

johnh-hn•21h ago

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•9h ago

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•6h ago

It's always radio buttons, every single time

felineflock•22h ago

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•12h ago

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•10h ago

It's sometimes done to make the same markup compatible with XHTML, without harming its interpretation in HTML.

assimpleaspossi•6h ago

You are either running XHTML or you are not. No need to carry any compatibility overhead. I doubt he is serving XHTML.

ThunderSizzle•2h ago

I personally prefer <input /> if only to stop other developers to not try doing <input>content </input>.

pests•1h ago

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•1h ago

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•1h ago

The term for such "other developers" is "hobbyists".

There are other terms but I won't list them here.

ThunderSizzle•1h ago

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

taosx•22h ago

Blew my mind. I have hundreds of tabs open, no issue on linux chrome.

echoangle•21h ago

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•21h ago

Well done!

quantadev•21h ago

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•16h ago

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•21h ago

Damn, this is impressive.

h1fra•21h ago

Very impressive

justinde•20h ago

Web-based minecraft, when?

JLCarveth•20h ago

You used to be able to play Minecraft classic directly on minecraft.net

catgirlinspace•20h ago

It still exists at https://classic.minecraft.net/

Thorrez•19h ago

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•2h ago

Wow! I had no idea, it even supports up to 9 additional players.

charcircuit•19h ago

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•20h ago

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•20h ago

It got extended, embraced and extinguished.

catgirlinspace•20h ago

Nope, still exists :3 https://classic.minecraft.net/

andriamanitra•18h ago

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•17h ago

this is pretty empty

rbits•18h ago

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•20h ago

The phone is ringing—Java Applets called B-)

fenomas•18h ago

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•14h ago

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•9h ago

Is your repo still available?

fenomas•8h ago

Yup! Though I haven't touched it in several years:

https://github.com/fenomas/noa

beeflet•15h ago

The full java version of the game was ported to webassembly/webgl a while ago. It's called eaglercraft: https://eaglercraft.com

zimpenfish•11h ago

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•10h ago

Minecraft these days is missing a lot of what people would consider "Minecraft" 8 years ago.

sparky_•9h ago

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•5h ago

yeah, it's JVM-to-wasm plus an lwjgl-to-webgl library plus various compression packed into a single .html file

simonw•20h ago

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•19h ago

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•13h ago

Can LLMs help?

Cthulhu_•10h ago

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•3h ago

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•9h ago

Is this a thing? https://medium.com/hypersphere-codes/randomness-in-css-b55a0...

bradly•2h ago

Unfortunately that solution does not work on Firefox or Safari.

khurdula•19h ago

Damn, just visiting this site makes me want to reinstall Minecraft haha.

simonw•19h ago

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•16h ago

good write up, thanks. talk about a combinatorial explosion!

assimpleaspossi•12h ago

But highly impractical and far beyond what CSS should be used for.

sd9•10h ago

Obviously...

That's why it was done

For fun and to see whether it could be done

assimpleaspossi•1h ago

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•15m ago

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.

popcorncowboy•9h ago

If you really wanna get your blood boiling how about some Doom with HTML checkboxes - https://healeycodes.com/doom-rendered-via-checkboxes

johnisgood•8h ago

This is how CSS CAPTCHAs are made (for Tor websites), and sign up / login modals, and many other stuff.

zizomod•18h ago

That's crazy

noman-land•18h ago

Incredibly brilliant. Seems to have gone completely unnoticed 2.5 years ago.

https://news.ycombinator.com/item?id=33579407

flippyhead•4h ago

See now that's amazing. Luck is such a factor in ... everything!

zizomod•18h ago

Doing this art just with css ,you are greatest one in css sir.

cod3rboy•17h ago

This is breathtaking and embodiment of creativity. Truly a legend!

bpiroman•17h ago

that's amazing!!!

dylanhouli•16h ago

Mind blowing

low_tech_punk•16h ago

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•7h ago

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•6h ago

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•15h ago

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•12h ago

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•15h ago

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•14h ago

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•7h ago

It’s extremely impressive, but it’s not “Quake”; it’s only the difficulty selection hallway from Quake. No enemies.

Shemetz•13h ago

Another impressive CSS creation -- CSS Puzzle Box: https://suricrasia.online/puzzlebox/

kazarka•12h ago

simonw•12h ago

Alternative URL for if the site has trouble keeping up: https://benjaminaster.github.io/CSS-Minecraft/

est•11h ago

I wonder when AIs can write clever codes like this. Given a surprising constraint.

johnisgood•7h ago

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•10h ago

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•8h ago

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•8h ago

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•7h ago

Brilliant !

kapildev•6h ago

I got "Bandwidth Quota Exceeded"

pkstn•6h ago

Same, maybe shouldn't go with the serverless hype.. It's a static website after all :D

crocowhile•6h ago

Get the archive from github and load it locally: https://github.com/BenjaminAster/CSS-Minecraft/archive/refs/...

bart7782•5h ago

It also works on the web archive.

https://web.archive.org/web/20250317122419/https://benjamina...

frozenlettuce•5h ago

Best anti-firebase post I've ever seen

craigseeman•4h ago

Yah, I hope this doesn't end up costing them an arm and a leg :( it was working last night

ycombinatrix•1h ago

this project doesn't use a backend, so not sure why firebase is needed. github pages would have unlimited bandwidth.

avestura•3h ago

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•51m ago

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•2h ago

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!

secondbrain_io•1h ago

I also got "Bandwidth Quota Exceeded". Seems like you're doing well!

ForOldHack•1h ago

https://web.archive.org/web/20250317122419/https://benjamina...

Square Theory

Pyrefly vs. Ty: Comparing Python's Two New Rust-Based Type Checkers

Launch HN: Relace (YC W23) – Models for fast and reliable codegen

How a hawk learned to use traffic signals to hunt more successfully

In defense of shallow technical knowledge

LumoSQL

BGP handling bug causes widespread internet routing instability

Running GPT-2 in WebGL: Rediscovering the Lost Art of GPU Shader Programming

Roundtable (YC S23) Is Hiring a Member of Technical Staff

CSS Minecraft

Show HN: Malai – securely share local TCP services (database/SSH) with others

The Art of Fugue – Contrapunctus I (2021)

Outcome-Based Reinforcement Learning to Predict the Future

DuckLake is an integrated data lake and catalog format

Comparing Docusaurus and Starlight and why we made the switch

GitHub MCP exploited: Accessing private repositories via MCP

The Hobby Computer Culture

Why Cline Doesn't Index Your Codebase (and Why That's a Good Thing)

Worlds first petahertz transistor at ambient conditions

Show HN: Free mammogram analysis tool combining deep learning and vision LLM

Just make it scale: An Aurora DSQL story

Right-Truncatable Prime Counter

Revisiting the Algorithm That Changed Horse Race Betting (2023)

Show HN: Lazy Tetris

Trying to teach in the age of the AI homework machine

The Myth of Developer Obsolescence

From OpenAPI spec to MCP: How we built Xata's MCP server

Highlights from the Claude 4 system prompt

LiveStore: State management based on reactive SQLite and built-in sync engine

Lossless video compression using Bloom filters

Square Theory

Pyrefly vs. Ty: Comparing Python's Two New Rust-Based Type Checkers

Launch HN: Relace (YC W23) – Models for fast and reliable codegen

How a hawk learned to use traffic signals to hunt more successfully

In defense of shallow technical knowledge

LumoSQL

BGP handling bug causes widespread internet routing instability

Running GPT-2 in WebGL: Rediscovering the Lost Art of GPU Shader Programming

Roundtable (YC S23) Is Hiring a Member of Technical Staff

CSS Minecraft

Show HN: Malai – securely share local TCP services (database/SSH) with others

The Art of Fugue – Contrapunctus I (2021)

Outcome-Based Reinforcement Learning to Predict the Future

DuckLake is an integrated data lake and catalog format

Comparing Docusaurus and Starlight and why we made the switch

GitHub MCP exploited: Accessing private repositories via MCP

The Hobby Computer Culture

Why Cline Doesn't Index Your Codebase (and Why That's a Good Thing)

Worlds first petahertz transistor at ambient conditions

Show HN: Free mammogram analysis tool combining deep learning and vision LLM

Just make it scale: An Aurora DSQL story

Right-Truncatable Prime Counter

Revisiting the Algorithm That Changed Horse Race Betting (2023)

Show HN: Lazy Tetris

Trying to teach in the age of the AI homework machine

The Myth of Developer Obsolescence

From OpenAPI spec to MCP: How we built Xata's MCP server

Highlights from the Claude 4 system prompt

LiveStore: State management based on reactive SQLite and built-in sync engine

Lossless video compression using Bloom filters

CSS Minecraft

Comments