CSS Minecraft

Original Article ↗ Hacker News Discussion ↗

Overall Reaction

  • Widespread amazement; many call it the most impressive CSS demo they’ve ever seen.
  • People report actually “playing” for a while and building small scenes, which reinforces how well the Minecraft concept translates even in this constrained form.
  • Some find it “fiendishly clever” yet acknowledge it’s clearly an experiment, not a practical architecture.

Implementation and Techniques

  • State is encoded entirely in HTML via thousands of radio inputs; each possible block position and block type is predeclared.
  • Labels map to the faces of each voxel; CSS classes select which block type is “active” in each cell.
  • Camera movement and rotation are done by toggling animation-play-state on CSS animations using :active on buttons.
  • The world is limited (roughly 9×9×9 with several block types), resulting in ~480 lines of CSS but ~46k lines of generated HTML.
  • Pug templates with deep nested loops are used to brute‑force the HTML output.

Performance and Browser Behavior

  • The demo generally runs fine on desktop Chromium/Firefox; the author explicitly recommends those.
  • Broader discussion notes that very complex CSS can strain browsers, with some pointing to other heavy CSS art pieces that choke certain devices or browsers.
  • Others counter that sophisticated CSS UIs and even 3D games can run well if designed carefully.

CSS Capabilities, Limits, and Use Cases

  • Debate over whether this kind of thing is “abuse” of CSS versus valuable experimentation that expands understanding.
  • Some worry such demos encourage using CSS where SVG or other tech would be more appropriate; others see them as a path to JS‑free interfaces.
  • Pure HTML/CSS tricks (checkboxes/radios, :has, etc.) are cited as the basis for CSS CAPTCHAs and JS‑less modals, especially for environments like Tor.

Related Experiments and Randomness

  • Thread links to other pure‑CSS creations: single‑div art, lace portraits, clicker games, puzzle boxes, CSS FPS experiments, and even Doom via checkboxes.
  • Several people muse about CSS as a programming language and its effective Turing‑completeness.
  • There’s interest in “randomness in CSS”; consensus is that true randomness isn’t available, only hacks (e.g., animated z‑indices), often with poor cross‑browser support.

Hosting and Web Fragility

  • The original site hits Firebase’s bandwidth cap, prompting mirrors on GitHub Pages and use of the Wayback Machine.
  • This sparks criticism of reliance on limited static-hosting tiers and broader concerns about the fragility of modern web hosting for viral demos.