Un <div> puede ser un demonio. Niels Leenheer ha reescrito las reglas del frontend, resucitando DOOM con CSS puro, una proeza que redefine la web. Publicado el 27 de marzo de 2026, este proyecto innovador ha capturado la atención de la comunidad tecnológica al demostrar que el CSS moderno es mucho más que estilos, es un motor de renderizado 3D capaz de dar vida a experiencias interactivas complejas, desafiando las percepciones tradicionales sobre lo que un navegador puede lograr.
La Anatomía de un Milagro Digital
La génesis de esta odisea digital se remonta a una curiosa experimentación previa de Leenheer: ejecutar DOOM en un osciloscopio de los años 80. Inspirado por ese desafío y con la ambición de explorar los límites del navegador, se propuso trasladar el motor de renderizado del juego al entorno CSS. El resultado es una experiencia completamente jugable, accesible en https://cssdoom.wtf/, donde cada elemento visual —desde las paredes y suelos hasta los barriles y los temibles 'imps'— es un simple elemento <div> posicionado y transformado en un espacio tridimensional mediante las propiedades de CSS. La lógica del juego, incluyendo el bucle principal y la gestión del estado, se ejecuta en JavaScript (con una parte generada por Claude basándose en el código fuente público de DOOM en C), mientras que el renderizado es, asombrosamente, responsabilidad exclusiva de CSS.
Cuando el <div> se Convirtió en Píxel 3D
La arquitectura técnica del proyecto es una muestra de ingenio y optimización. Leenheer extrajo los datos originales del juego —vértices, linedefs, sidedefs y sectores— directamente del archivo WAD de la versión shareware de 1993. Estos datos brutos se pasan a CSS como propiedades personalizadas (--start-x, --start-y, --floor-z, --ceiling-z), permitiendo que el motor de CSS del navegador realice los cálculos trigonométricos necesarios para determinar el ancho (hypot()) y la rotación (atan2()) de cada elemento. Esta separación estricta entre lógica y renderizado es fundamental para la eficiencia del sistema, delegando la geometría compleja a las funciones matemáticas nativas de CSS.
Un aspecto particularmente notable es la inteligente adaptación del sistema de coordenadas de DOOM al modelo 3D de CSS. Mientras que el clásico de id Software utiliza un sistema 2D de arriba hacia abajo donde la Y aumenta hacia el norte, y CSS 3D tiene la Y hacia arriba y la Z hacia el espectador, Leenheer logró una conversión fluida. Las transformaciones CSS utilizan translate3d(x,-z,-y) para alinear las coordenadas, y la función rotateY(atan2(var(--delta-y), var(--delta-x))) en las paredes funciona directamente, demostrando cómo las funciones matemáticas de CSS pueden manejar la geometría compleja sin necesidad de cálculos adicionales en JavaScript.
El Legado de DOOM: Un Manifiesto para el Frontend del Mañana
Este proyecto no es solo una proeza técnica, sino que tiene profundas implicaciones para el futuro del desarrollo web. Como señala un reportaje de Ecosistema Startup del 28 de marzo de 2026, la reimplementación de DOOM con CSS avanzado —que incluye transformaciones 3D, propiedades personalizadas, clipping paths y filtros SVG— abre nuevas fronteras para la creatividad y el diseño web interactivo. Inspira a fundadores de startups y equipos tecnológicos a considerar el frontend como un campo fértil para la innovación, permitiendo la creación de prototipos visualmente avanzados y experiencias interactivas sin depender de frameworks complejos o motores gráficos pesados. La disponibilidad del código en GitHub (https://github.com/NielsLeenheer/cssDOOM) fomenta, además, la experimentación y el aprendizaje dentro de la comunidad de desarrolladores, marcando un hito en la evolución de lo que creíamos posible en la web.
