CSS Minecraft

Original Article ↗ Hacker News Discussion ↗

A web-based Minecraft-style sandbox built entirely with HTML and CSS—no JavaScript—has stunned developers with how far it pushes the capabilities of styling and markup alone. Commenters unpack the underlying tricks, such as massive pre-generated HTML using radio buttons, labels, and `:has()` selectors to manage voxel state and camera movement, while noting performance constraints and the impracticality of such an approach for real applications. The project prompts broader reflections on CSS as a quasi-programming medium, the value of extreme experiments, and the fragility of modern hosting setups when a static demo suddenly goes viral.

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.