Vue lecture

Il y a de nouveaux articles disponibles, cliquez pour rafraîchir la page.

Shuffle - Quand 4 IA redesignent votre site (et c'est moche)

Shuffle , c'est un outil qui vous propose de redesigner votre site web avec 4 modèles d'IA différents. Vous collez votre URL, vous décrivez ce que vous voulez... et boom, Claude Opus 4.6, GPT-5.2, Gemini 3 Pro et Kimi K2.5 vous pondent chacun leur version. J'ai testé sur ma home. Verdict : c'est moche de fou !

Vous arrivez sur la page, vous entrez l'adresse de votre site, vous tapez un petit prompt du genre "modernise mon blog tech" et vous lancez la machine. Les 4 modèles bossent alors en parallèle et au bout de 30 secondes environ, vous avez 4 propositions de redesign à comparer côte à côte.

Je trouvais le concept cool, sauf que dans la pratique, c'est une autre histoire. Comme je vous le disais en intro, j'ai testé sur korben.info, et les 4 IA ont eu exactement la même idée lumineuse : tout foutre en thème sombre. QUATRE sur QUATRE ! Pas un seul n'a osé proposer autre chose qu'un fond #1a1a2e dégeu avec des accents néon bleu-vert. Original, hein !!

Les 4 propositions de redesign de korben.info... toutes en dark mode. Désolé si votre site ressemble à ça.

On dirait que pour les IA, "blog tech" = "dark mode obligatoire"... et du coup ça ressemble à tous les médias tech génériques qu'on retrouve partout. Sauf si vous précisez "fond clair" dans le prompt, mais même là, c'est pas garanti.

Claude Opus a pondu une esthétique "hacker" avec du code Matrix en fond vert (carrément, on se laaache). GPT-5.2 a carrément rebaptisé le site "KORBEN NEXT" avec une baseline inventée de toute pièce, "La veille tech qui va droit au but"... euh, merci mais non merci j'aime pas le foot. Gemini 3 Pro a opté pour un style magazine éditorial et Kimi K2.5 (le modèle chinois de Moonshot AI) a sorti le gradient hero classique, propre... ou plutôt fade.

Bah ouais, les IA analysent la structure, les catégories, les images... mais le résultat c'est finalement toujours le même template sombre "tech media 2024" qu'on a vu un million de fois. Alors que pour moi, Korben.info c'est pas du tout cette ambiance.

Mais l'outil a quand même des qualités puisque l'éditeur visuel permet de modifier le résultat en drag-and-drop sans toucher au CSS, et vous pouvez même exporter le code dans 4 formats : Next.js, Laravel, WordPress ou HTML classique. En fait, ça peut servir de très bon point de départ si vous avez la flemme de partir d'une page blanche et si votre webdesigner est devenu injoignable depuis qu'il est parti à Punta Cana.

Côté prix, y'a une version gratuite mais limitée à quelques générations, et après puis c'est 24 dollars par mois...etc.

Ça aurait pu être un excellent outil mais malheureusement, les modèles sont formatés sur les mêmes tendances, les mêmes palettes, les mêmes layouts. C'est dommage je trouve. Voilà, après je pourrais vous faire une conclusion bien neuneu genre "C'est pas demain qu'une IA remplacera un vrai directeur artistique qui comprend l'identité d'une marque." mais la réalité, c'est que un humain moyen motivé qui sait ce qu'il veut peut avoir un truc incroyablement bien généré par IA s'il prend le temps le temps de se former et qu'il ne lâche rien ! Tenez par exemple, 100% du template graphique de mon site a été généré à l'aide de l'IA et moi derrière pour la fouetter...

Voilà, si vous voulez rigoler un peu, allez tester votre site sur Shuffle mais ne vous attendez pas à un miracle !

VoxCSS – Pour faire du rendu 3D façon Minecraft avec du CSS

Y'a un truc qui me rend joyeux avec le web, c'est quand des devs décident de pousser les technos dans leurs retranchements juste pour prouver que c'est possible.

Et VoxCSS , c'est totalement ça : une bibliothèque JavaScript qui permet de faire du rendu voxel complet en utilisant uniquement le DOM et le CSS. Alors attention, quand je dis "uniquement", je veux dire sans WebGL et sans l'élément <canvas>. Juste des éléments HTML empilés intelligemment qui tirent parti de l'accélération matérielle du navigateur pour les transformations 3D.

Pour cela, VoxCSS utilise des grilles CSS superposées sur l'axe Z pour créer un espace volumétrique. Chaque niveau de profondeur est une grille CSS classique, décalée avec des translations 3D. Les voxels eux-mêmes sont des cuboïdes HTML composés de plusieurs faces positionnées avec des rotations CSS.

Par défaut, la scène utilise une perspective de 8000px et le fameux transform-style: preserve-3d pour que la magie opère... Un pur hack de génie qui transforme votre navigateur en moteur 3D sans passer par les API habituelles !

Et le rendu n'est pas dégueu du tout puisque le moteur gère les couleurs, les textures, et même différentes formes comme des rampes, des pointes ou des coins pour sortir du simple cube de base. Pour ceux qui se demandent comment ça se passe pour les ombres, VoxCSS simule également un éclairage en jouant sur l'opacité des faces, ce qui donne ce petit relief indispensable au style voxel. Vous pouvez même choisir entre différentes projections (cubique ou dimétrique) pour donner le look que vous voulez à votre scène.

Côté performances, même si on parle de manipuler potentiellement des milliers d'éléments DOM, l'équipe de Layoutit Studio a bien bossé. Y'a un système de "culling" pour ne pas calculer les faces cachées (on n'affiche que la surface extérieure, quoi) et une option de fusion (le mergeVoxels) qui permet de regrouper les cubes adjacents pour alléger la structure HTML. C'est pas activé par défaut, mais c'est indispensable dès que votre château Minecraft commence à prendre de l'embonpoint.

L'installation se fait via

npm install @layoutit/voxcss

La lib est hyper flexible puisqu'elle propose des wrappers pour React, Vue et Svelte, tout en restant utilisable en vanilla JS.

Vous posez votre caméra (<voxcamera>) pour gérer le zoom et la rotation, vous injectez votre scène (<voxscene>), et roule ma poule. Cerise sur le gâteau pour les artistes, VoxCSS inclut un parser pour charger directement vos fichiers .vox créés dans MagicaVoxel.

Si vous voulez tâter la bête sans coder, allez faire un tour sur Layoutit Voxels, l'éditeur qui sert de démo technique. Ils ont aussi sorti Layoutit Terra qui génère des terrains entiers avec la même techno.

Franchement, pour un gros jeu en prod, OK pour du WebGL, mais pour créer des éléments interactifs stylés, des petites scènes 3D ou juste pour la beauté du geste technique, c'est un sacré bel outil.

Et puis, faire de la 3D sans toucher à un seul shader, ça a un petit côté cool je trouve.

❌