Niels Leenheer a porté le mythique Doom de 1993 dans un navigateur web, mais sans WebGL ni Canvas. Tout le rendu 3D repose sur des div et des transformations CSS. Le résultat est jouable, open source, et un brin absurde. On adore.

Doom en div

Le principe est aussi fou qu'il en a l'air. Chaque mur, chaque sol, chaque tonneau et chaque ennemi est une balise div, positionnée dans l'espace 3D grâce aux transformations CSS. Le jeu lit les données du fichier WAD original de 1993, celui-là même qui contenait les niveaux du Doom d'id Software, et en extrait les coordonnées des murs, des secteurs et des textures.

La logique du jeu, elle, tourne en JavaScript. Mais côté affichage, c'est 100 % CSS : pas de Canvas, pas de WebGL, pas de bibliothèque graphique. Juste des div, des calculs trigonométriques en CSS et des propriétés personnalisées.

Pour simuler une caméra, le développeur a trouvé une astuce assez maline : plutôt que de déplacer le joueur dans la scène, c'est la scène entière qui bouge dans le sens inverse. Le CSS ne gère pas nativement la notion de caméra, du coup Leenheer a tout simplement inversé le problème.

Des fonctions CSS qu'on ne soupçonnait pas

Le projet exploite des fonctions CSS relativement récentes : hypot() pour le théorème de Pythagore, atan2() pour les angles de rotation, clip-path pour découper les sols en polygones complexes, et @property pour animer des propriétés personnalisées qui servent à gérer les portes, les ascenseurs et même la chute du joueur.

Les ennemis utilisent des spritesheets classiques avec un effet de billboard, c'est-à-dire qu'ils font toujours face à la caméra. Les effets de lumière passent par un filtre brightness sur chaque secteur, et le fameux ennemi invisible Spectre utilise un filtre SVG pour reproduire l'effet de distorsion du jeu original.

Leenheer a même ajouté un mode spectateur avec caméra libre, absent du Doom de 1993, et les calculs de positionnement de cette caméra reposent eux aussi sur les fonctions trigonométriques du CSS.

Les limites du CSS poussé à fond

Le jeu est jouable sur cssdoom.wtf, et le code source est disponible sur GitHub sous licence GPL 2. Par contre, les performances restent limitées. Sur Safari iOS, le jeu peut planter au bout de quelques minutes, et les gros niveaux font souffrir le navigateur.

Leenheer le reconnaît lui-même : le projet ne remplacera jamais WebGL ou WebGPU pour du rendu 3D sérieux. Le but était avant tout de montrer jusqu'où le CSS moderne peut aller, et sur ce point, la démonstration est plutôt convaincante.

C'est le genre de projet complètement absurde qui force le respect. Doom a déjà été porté sur à peu près tout ce qui contient un processeur, des calculatrices aux tests de grossesse, et voilà qu'il tourne maintenant dans une feuille de style.

L'air de rien, ça montre que le CSS de 2026 n'a plus grand-chose à voir avec celui qu'on utilisait pour centrer un div il y a dix ans.

Source : Huckster.io

Bonne nouvelle pour ceux qui en ont ras la casquette de se taper des allers-retours entre Figma et VS Code ! Parce qu'avec Onlook , l'éditeur visuel open source qui vous permet de modifier le design de vos apps React directement dans le navigateur, vous allez pouvoir cliquer simplement sur un élément de design, et en changer la couleur, la typo...etc et hop, ça modifiera le code derrière.

Pas mal, non ?

Vous ouvrez votre projet Next.js dans Onlook, et vous vous retrouvez avec une interface à la Figma, sauf que c'est branché sur votre code source. Vous sélectionnez un titre, un bouton, n'importe quel composant, et vous modifiez son style visuellement... couleurs, padding, marges, polices, tout y passe.

Et en fait, le truc qui change tout par rapport à un inspecteur CSS classique, c'est que quand vous cliquez sur "Publish", les modifications atterrissent DIRECTEMENT dans vos fichiers .tsx. C'est donc du vrai code propre, pas du CSS inline dégueulasse.

Côté technique, l'outil gère nativement TailwindCSS (parce que bon, en 2026, si vous faites du React sans Tailwind, vous aimez forcément le cuir qui claque et la souffrance). Vous éditez en mode visuel, ça génère les bonnes classes Tailwind, et vous gardez un contrôle total. Y'a aussi un mode LLM intégré... "rends ce bouton bleu avec des coins arrondis" et hop, c'est fait. Comme ça, pas besoin de chercher si c'est rounded-lg ou rounded-xl dans la doc.

Pourquoi prendre des vacances d’été et glander sur une plage, alors qu’on pourrait pondre projet open source qui résout un vrai problème ?

Adrien Revel a fait exactement ça avec Microfolio, et le plus rigolo c’est qu’il s’est fait assister par Claude Code pour développer son bébé. Une fois installé, vous lui balancez vos fichiers dans des dossiers, vous ajoutez du Markdown pour les descriptions, et paf, vous avez un portfolio statique qui a la classe.

Pas de base de données qui rame, pas de CMS à maintenir, pas de plugins WordPress qui vous lâchent au pire moment. Juste des fichiers, du contenu, et un site qui booste.

Microfolio tourne sur SvelteKit 2, l’un des générateurs de sites statiques les plus utilisés, couplé à Tailwind CSS 4. Pour ceux qui ne suivent pas l’actu dev, SvelteKit est un framework qui compile votre code en vanilla JavaScript ultra-optimisé. Du coup, les sites chargent à la vitesse de l’éclair même sur une connexion 3G pourrie.

Maintenant, l’installation, c’est du velours. Par exemple, sous macOS, une ligne de Homebrew et c’est parti :

brew install aker-dev/tap/microfolio
microfolio new mon-portfolio
cd mon-portfolio
microfolio dev

Pour les autres OS, un bon vieux clone Git et pnpm font l’affaire. Le projet est pensé pour les designers, architectes, photographes, bref tous les créatifs qui veulent montrer leur travail sans se prendre la tête avec du code.

Ce qui est intéressant dans l’histoire, c’est qu’Adrien a développé Microfolio avec Claude Code, ce nouvel assistant IA d’Anthropic qui cartonne chez les développeurs. Claude Code est d’ailleurs particulièrement doué pour bosser avec Svelte 5 et sa nouvelle syntaxe de runes. L’IA l’a visiblement bien aidé sur la doc et le code, ce qui montre qu’on peut faire de l’open source de qualité en duo avec une IA.

La démo en ligne montre déjà ce que ça donne à savoir une interface épurée, une navigation fluide entre les projets, une vue carte pour les projets géolocalisés (pratique pour les architectes), et un système de tags pour filtrer le contenu. Le tout responsive évidemment, c’est la base aujourd’hui.

Moi j’en ai fait un site de chat pour rigoler…

Pour le déploiement, GitHub Pages est supporté d’office avec possibilité de mettre un domaine custom. Adrien cherche également des beta-testeurs pour peaufiner le projet avant de sortir la v1.0 à la rentrée. Donc si vous avez un portfolio à refaire ou si vous voulez juste tester un outil moderne, c’est le moment.

Bref, du bon “file-based CMS” comme on les aime. Comme ça, au lieu de stocker vos contenus dans une base de données qui peut foirer, tout est dans des fichiers que vous pouvez versionner avec Git. Vous gardez le contrôle total sur vos données, vous pouvez tout éditer offline, et surtout vous n’êtes pas prisonnier d’un système.

Puis ce combo SvelteKit + Tailwind CSS est vraiment pertinent, je trouve. SvelteKit permet de générer des sites statiques en automatique, ce qui veut dire que votre site est servi en HTML statique pour le SEO, puis devient interactif côté client. C’est le meilleur des deux mondes.

Pour les devs qui veulent contribuer, le code est sur GitHub sous licence MIT. Le projet utilise les dernières versions de tout (SvelteKit 2, Tailwind CSS 4, Node.js 20+), donc c’est aussi l’occasion de jouer avec les dernières technos du moment.

A découvrir ici !

Merci à Adrien Revel pour avoir partagé son projet !