Creating 3D scenes with CSS has always been possible[0], but like this project, it's required JavaScript for interactivity.

But there's a lot more CSS features now. While in the past, Turing completeness in CSS required humans to click on checkboxes, now CSS can emulate an entire CPU without JavaScript or requiring user interaction.[1] So I wonder if DOOM could be purely CSS too, in real time.

[0]: https://keithclark.co.uk/labs/css-fps/ [1]: https://lyra.horse/x86css/

So impressive! Bonus, you can wall hack by just deleting a div ahah

But where can I try it out in my browser?

EDIT: https://cssdoom.wtf/

    IDDQD

    IDKFA

This feels like one of those “because we can” projects that accidentally reveals where the platform is going.

CSS started as purely declarative styling, but between things like conditionals, math functions, and now these rendering tricks, it’s slowly creeping into “programmable system” territory. Not because it’s the right tool for it, but because browsers are becoming the real runtime. The interesting question isn’t “can Doom run in CSS”, it’s how much logic we’ll keep pushing into layers that were never meant to handle it.

I remember when we needed 4 gifs to make rounded corners on a div

Seriously impressive, especially the viewport culling trick, not seen that one before.

FYI if you want to use inspect element, the viewport div consumes mouse elements, you can get rid of this with

  #viewport {
    pointer-events: none;
  }
  #viewport * {
    pointer-events: initial;
  }

Great example as to why people are yearning for CSS in TypeScript. Something as simple as if() only works in Chrome and there's not a good shim story for CSS versus a more complete language, so you end up with this:

> The problem: CSS can compute a number – 0 for visible and 1 for hidden – but you can’t directly use that number to set visibility. There is a new feature coming to CSS that solves this: if(), but right now it only just shipped in Chrome.

> So I used a trick called type grinding. You create a paused animation that toggles visibility between visible and hidden. Then you set the animation-delay based on the computed value to determine which keyframe is used:

  animation: cull-toggle 1s step-end paused;
  animation-delay: calc(var(--cull-outside) \* -0.5s);

  @keyframes cull-toggle {
    0%, 49.9% { visibility: visible; }
    50%, 100% { visibility: hidden; }
  }

I feel there should be a gov dep where all the "i turned this into DOOM" folks get hired, to build the next spicy interplanetary propulsion systems. They are clearly needing an exotic task to stop twiddling their fingers.

Its incredible how far concepts like CSS can be pushed. But sometimes I wonder what if CSS would be just JavaScript i.e both concept are merged.

Would that be better or worse for webdev? I don't know. But I like to ponder.

just a small note on this very cool implementation and write up. you wrote modeling tools and animation stuff has camera that moves around.

i think ultimately, there also the world moves aroun the player and cameras are just a concept to make the frustrum etc (maybe modern tools do it differently, im a little out of date)

In recent years CSS has become closer to a full programming language through experimental features, for example in 2025 they added if statements and some math functions like modulo

https://www.simplethread.com/new-and-upcoming-css-features-i...

With how these things are going, soon hackers will be challenging themselves to run Crysis on calculators and microwaves

This page could use some "Practical CSS scroll snapping": https://css-tricks.com/practical-css-scroll-snapping/

In 2006, Ars Technica published an April Fool's article[0] declaring that the perennially-forthcoming Duke Nukem Forever would finally see the light of day... as... a browser game! Ho ho, how droll.

Crazy to see how far we've come.

[0]: https://arstechnica.com/gaming/2006/04/forever/

CSS is /the/ spec to look at to understand how awful something designed by committee gets.

In web specs closely rivaled by SVG.

You can pick which one is uglier and you'll be right.

This is great. And Firefox should get kudos too, for running it the best, with fewest workarounds needed.

> "I used Claude to create an approximate version of the game loop in JavaScript based on the original DOOM source"

This is the real horror here, Uncanny-Valley gameplay Doom. It's like those Doom maps where people tried to recreate the game levels from memory, but still made a few mistakes and got some details wrong. This is like that, but for the gameplay rather than the level layouts. It's different enough to be wrong.

We have Green Armor that sets your armor to 200%. Health Bonuses that reset your health to 100% if you exceeded that number, too bad if you recently collected a Soul Sphere. Switch-activated doors that are supposed to stay open, but instead automatically close, but then the secret wall unexpectedly activates like a manual door.

While standalone CSS is not yet Turing complete, I worry about the new attack vector categories opened up by moving it towards that state. Already I believe attackers have a choice to spread the attack payload between CSS, HTML and JavaScript to evade current detectors and analysis at the network borders, and evade CSP's since we're well into undecidability territory, like using CSS attribute selectors if the CSP allows external images or fonts. But I'm far from proficient at web browser red teaming. Is this worry unfounded?

Couldn't agree more ... Especially how platforms like Stitch 2 are eliminating the barriers for non-technical individuals to actually get pretty decent UI/UX experience ..

The fact that Claude is killing CSS officially means we need to switch back to IRC or something. AI is a parasite we cannot integrate but only avoid. (P.s. if you work in AI, stop, you are literally destructive to humanity.)

Never ceases to amaze me what people will port doom to

I LOVE this! You did a bang up job, is the skin change function coming in a future update?

The fact that CSS has evolved enough to pull off 3D rendering is wild. Makes me wonder where the ceiling actually is.

super playable on ff but I got stuck here https://imgur.com/a/6nXbPY3

It would be really interesting to see this without the texturing applied.

Beautiful. Art.

at this point i’m more interested in what _can’t_ run doom.

soooooooo cooool thank you

Perfect!

While running Doom on X is typically a show of personal hacking skills, and a display of the turing completeness/power of X,

I think that running Doom on X can also be a criticism of X, certainly the opposite of the intention in some cases. Consider a config mechanicsm, if I prove that I can run Doom on .md or .ini, or notepad.exe, most people should be concerned, not just for bloat, but for security reasons.

The value of some tech is precisely in what it cannot do, not just what it can do.

But can it run crysis?

soo good

thats really cool

What a master class in linear algebra…

Really cool!

https://freedom.github.io

Use Deutex, GNU make and Pillow for Python to compile.

Then wou will have up-to-date IWADS to be used aywhere. No need to put ID copyrights, just a mention to FreeDoom creators.

The game logic runs in JavaScript

Also: a modern CPU is around 10000x faster than the 486 CPU Doom was designed for. Per core.

this is wild.

itt: web developers continue to get more dumb

Yawn.

[flagged]

[flagged]

I try a simple absolutely layout (all calculated on a server), and helps me a lot. 1) no reflow 2) very few exceptions 3) WAY EASIER FOR LLMs

Is this a proof of how great CSS is?

Or is it proof that CSS has "jumped the shark", adding in a plethora of features that have no place in a "stylesheet"?

Is CSS that awesome? It's still a language designed for styling webpages with 30 year of added features. I'd argue something purpose built would be a much better tool for the potential usecases people try to use CSS for now.

I guess I am asking, if modern CSS is so awesome, it's awesome compared to what exactly?