Aller au contenu
Ce qui est possible aujourd'hui

N° 10 · Explication interactive

Le grand bain

Une plongée interactive de la surface de l'océan jusqu'au fond de la fosse des Mariannes, à 10 935 mètres, reconstruite par l'IA à partir d'un prompt publié par une galerie publique: cinq zones de l'océan, 17 animaux à peu près à la profondeur où ils vivent, un profondimètre et une lampe torche pour l'obscurité. Plongez, copiez le prompt et voyez ce qu'il faut pour enseigner un sujet de cette façon.

SVGCanvasCSSAucune bibliothèque Ajouté en octobre 2026 · Le prompt est en anglais

Comment jouer

Faire défiler
Descendez à travers les cinq zones de l'océan. Le profondimètre compte les mètres, la pression et la lumière.
Cliquer ou toucher un animal
Lisez ce que c'est et comment il vit à cette profondeur.
Déplacer le pointeur
Au-delà d'environ 200 mètres, il devient une lampe torche. Sur un téléphone, touchez l'écran pour éclairer.
Tab et Entrée
Chaque animal est un bouton. Échap ferme la carte.
Peu de temps
Le lien juste sous la ligne de flottaison permet de passer la plongée.
Tout au fond
Prenez le temps de regarder autour de vous avant de remonter.

Prenez une grande inspiration.

10 935 mètres jusqu’au fond de la fosse des Mariannes.

Faites défiler pour descendre

Passer la plongée

0–200 m

La zone ensoleillée

Assez de lumière pour la photosynthèse. De minuscules algues dérivantes, le phytoplancton, poussent ici et produisent environ la moitié de l’oxygène de la Terre. Presque toute la nourriture de l’océan naît dans cette fine couche supérieure.

200–1000 m

La zone crépusculaire

Un peu de lumière bleue passe encore, mais trop peu pour que des algues poussent. Beaucoup d’animaux ici ont des yeux immenses et des lumières sur le ventre.

1000–4000 m

La zone de minuit

La lumière du soleil n’arrive pas jusqu’ici. La plupart des animaux produisent leur propre lumière, pour chasser, se cacher ou se trouver. Beaucoup sont rouges: la lumière rouge n’atteint jamais ces profondeurs, alors le rouge paraît noir.

4000–6000 m

La zone abyssale

Proche du gel, noire comme l’encre et immense: les plaines abyssales couvrent environ la moitié de la surface de la Terre. La nourriture arrive surtout sous forme de ce qui coule d’en haut.

6000–10 935 m

La zone hadale

Nommée d’après Hadès, le monde souterrain des Grecs. Elle n’existe que dans les fosses océaniques, la plupart dans le Pacifique. Beaucoup d’animaux ici vivent dans une seule fosse et nulle part ailleurs.

40 m La limite de la plongée loisir
≈ 3700 m La profondeur moyenne de l’océan
3800 m L’épave du Titanic
8336 m Le poisson filmé le plus profond (2022)
8849 m La hauteur de l’Everest. Posé ici sur le fond, son sommet serait encore à 2 km sous l’eau.
GoodAIGuide GoodAIGuide Merci de ne pas taper sur la vitre Humain au travail BIENVENUE GAG-1 Newsletter

Fosse Challenger, fosse des Mariannes

10 935 m

Le point le plus profond connu de l’océan (les mesures diffèrent de quelques dizaines de mètres). L’eau au-dessus pèse plus d’une tonne sur chaque centimètre carré, et elle est à environ 2,5 °C. Vous y êtes.

Profondeur typique

Le prompt complet · environ 450 mots

Copiez-le, collez-le, voyez ce que vous obtenez

Voici le prompt que Claude Opus 5.5: 100 HTML Files a publié pour Descent — Eleven Thousand Metres Down (No. 022), mot pour mot. Il a deux parties: un paragraphe qui décrit cette réalisation, et des règles maison que la galerie a ajoutées à chaque prompt. Le bouton copie les deux. Il est en anglais, tel qu'il a été publié. Les modèles le comprennent tout aussi bien; si vous voulez les réponses en français, précisez-le simplement.

Partie 1 · La réalisation · 180 mots

Create "Descent — Eleven Thousand Metres Down", a scroll-driven journey from the ocean surface to the bottom of the Mariana Trench (~10,935 m). As you scroll, the background transitions through the ocean zones — sunlight (#1e90c8), twilight (#0b3a66), midnight (#04142b), abyssal (#020812) and hadal (#000204) — while a fixed depth gauge counts metres and shows the zone name, pressure (≈ 1 additional atmosphere per 10 m) and temperature notes. Illustrated SVG/canvas creatures appear at approximately correct depths: dolphins and sunlit fish near the top, jellyfish, a sperm whale (~1,000 m and deeper), an anglerfish with a glowing lure, a vampire squid, a gulper eel, amphipods, and finally the trench floor. Deeper creatures are bioluminescent, with pulsing blue/green light; marine snow drifts through the water; light rays from the surface fade out gradually. Short, accurate captions (keep claims general and well established). Interaction: scroll; in the dark zones the pointer is a faint torch revealing nearby creatures; clicking a creature opens a caption card. It ends with an elegant "Return to surface" button that smooth-scrolls up.
Partie 2 · Les règles maison ajoutées à chaque prompt de la galerie · 280 mots
SHARED REQUIREMENTS (apply to every page in this 100-page collection):
1. One standalone HTML5 file. All CSS inline in <style>, all JavaScript inline in <script>. No external resources of any kind: no CDN, no libraries, no web fonts, no external images/SVG/audio files, no network requests. All visuals come from CSS, inline SVG, Canvas and procedural code.
2. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, a viewport meta tag, a meaningful <title> and meta description, well-nested semantic markup, unique ids, labels/aria attributes for controls, <button type="button"> for actions.
3. Typography from local system font stacks only, always ending in a generic family; display lettering may be drawn with SVG or Canvas.
4. Responsive from 360px phones to large desktops with no horizontal page scroll; canvases match their container and devicePixelRatio (capped at 2) and re-layout on resize.
5. Works offline by opening the file directly (file://); no console errors; storage access guarded with try/catch.
6. Smooth motion via requestAnimationFrame and transform/opacity; animation pauses when the tab is hidden where it matters; honours prefers-reduced-motion with a calmer fallback.
7. Pointer events so mouse and touch both work; visible :focus-visible styles; keyboard support where it makes sense.
8. Any sound is synthesized with the Web Audio API, starts only after a user gesture, and has a visible mute/toggle.
9. Premium finish: a deliberate palette and spacing, polished micro-interactions, a beautiful first frame before any interaction, and original copy (no lorem ipsum). Factual content must be accurate; fictional brands, people and data are clearly fictional.
10. Quality bar: visually impressive, bookmark-worthy, showcase-grade, premium, full of delightful details, and clearly distinct from the other 99 pages in concept, layout, palette, typography and motion.

Ce que vous voyez

Faites défiler et vous coulez d’une mer calme du matin jusqu’au fond de la fosse des Mariannes, l’endroit le plus profond connu de l’océan. En chemin, vous traversez cinq zones, croisez 17 animaux à peu près à la profondeur où ils vivent et quelques repères qu’on peut se représenter: là où s’arrêtent les plongeurs loisir, là où repose le Titanic, la hauteur de l’Everest. Le profondimètre compte les mètres, la pression, la température et ce qui reste de lumière. Dans la zone crépusculaire, votre pointeur devient une lampe torche, car plus bas, la seule lumière est celle des animaux eux-mêmes.

Tout ce que vous voyez est dessiné en code. Pas de photos, pas de fichiers image, pas de bibliothèques. Pas une ligne n’a été écrite par un humain.

J’ai trouvé l’original dans la même galerie que Soft Machine: 100 pages web d’un seul fichier, chacune publiée avec ce que la galerie présente comme le prompt exact qui l’a produite, toutes attribuées à Claude Opus 5.5. J’ai fait reconstruire celle-ci par Claude Code, parce qu’elle montre ce que le synthétiseur ne montre pas: l’IA sait aujourd’hui construire une très bonne manière d’enseigner un sujet.

Pourquoi le défilement enseigne

Des nombres comme 10 935 mètres ne disent pas grand-chose à eux seuls. Vous les lisez, hochez la tête et les oubliez. Faites-les défiler et ils restent, parce que votre pouce compte avec vous.

Regardez la barre au bas du profondimètre, dessinée à l’échelle réelle. La zone ensoleillée, où vit presque toute la vie que vous connaissez des documentaires, en occupe moins de 2 %. Le reste est sombre.

Trois choses s’y ajoutent. Vous choisissez le rythme, et vous vous arrêtez là où quelque chose vous intéresse. Vous partez à la recherche: dans le noir, vous cherchez avec la lampe, donc vous regardez vraiment ce que vous trouvez. Et chaque légende fait trois phrases au plus, donc vous la lisez.

Cela fonctionne pour les adultes comme pour les enfants, et pour tout ce qui a une échelle ou une séquence: les couches de l’atmosphère du sol jusqu’à l’espace, l’histoire de la Terre, le chemin d’une commande à travers votre entreprise, les étapes d’une réglementation. Si vous accueillez de nouveaux collaborateurs, formez une équipe ou expliquez votre produit, c’est un format à copier sans scrupules.

La phrase qui compte le plus

Le paragraphe qui décrit la plongée fait moins de 200 mots et, comme celui de Soft Machine, il prend les décisions qui comptent: les cinq couleurs des zones, ce qu’affiche le profondimètre, quels animaux à peu près à quelle profondeur, ce que fait le pointeur dans le noir. En dessous viennent les mêmes dix règles maison que la galerie a ajoutées à chaque prompt.

Pour du matériel pédagogique, une courte formule fait le plus de travail: « Short, accurate captions (keep claims general and well established) » (en substance: des légendes courtes et exactes, des affirmations générales et bien établies). Elle dit au modèle à quel point il doit être prudent. Un modèle en sait beaucoup sur les grands fonds, mais il est plus sûr de lui avec « les cachalots chassent les calmars par écholocation » qu’avec la profondeur exacte d’un record particulier. Les affirmations générales ont beaucoup plus de chances d’être justes, sans garantie, donc il faut quand même les relire.

Elle vous dit aussi quoi vérifier. Les erreurs se cachent dans les chiffres précis, alors pour cette page, Claude Code a vérifié les valeurs exactes avant de les intégrer. Les 10 935 mètres du prompt viennent d’un relevé de 2021; d’autres ont mesuré entre 10 925 et 10 994, c’est pourquoi le fond indique que les mesures diffèrent de quelques dizaines de mètres. Le poisson filmé le plus profond était une limace de mer, à 8336 mètres, en 2022. Si vous utilisez l’IA pour du matériel pédagogique, faites pareil: laissez-la écrire, puis vérifiez chaque nombre que quelqu’un pourrait répéter. Ne laissez pas votre IA corriger ses propres devoirs montre une manière simple de le faire avec un second modèle.

Ce que le prompt ne dit pas

Le prompt décrit l’expérience. Pour la construire, il a fallu trouver beaucoup de choses qu’il ne mentionne pas:

Combien défiler pour un mètre. Dessinez 11 kilomètres à une seule échelle et la zone ensoleillée passe en un seul geste, tandis que la fosse n’en finit pas. Alors l’échelle change avec la profondeur: les 200 premiers mètres ont presque cinq écrans, et les cinq derniers kilomètres à peine plus.

Ce que « fixe » veut dire dans un article. Sur la page autonome de la galerie, le profondimètre peut rester à l’écran tout le temps. Ici, il doit apparaître quand la plongée commence, disparaître quand elle se termine et ne pas gêner l’en-tête du site.

Quel animal la lampe éclaire. Chaque animal a un corps qui s’efface avec la lumière du jour à sa profondeur, et ses propres lumières, qui, elles, restent. La lampe ajoute de la lumière selon la distance, donc un animal à moitié dans le faisceau est à moitié visible. Un détail à chercher: le cténophore. Ses arcs-en-ciel ne sont pas sa propre lumière, mais de la lumière diffusée par ses cils qui battent, ils n’apparaissent donc que lorsque votre lampe est sur lui. C’est aussi comme ça dans le vrai océan.

Quand s’arrêter de travailler. Les rayons de lumière, la neige marine et les animaux qui clignotent dans le noir sont dessinés environ 60 fois par seconde, mais seulement tant que la plongée est à l’écran et l’onglet ouvert. Si vous avez activé la réduction des animations dans les réglages de votre système, tout reste immobile.

Ce qui a changé pour cette page

  • Elle vit dans un article. Sur toute la largeur, dans les polices du site, avec le profondimètre à l’écart de l’en-tête et un lien sous la ligne de flottaison qui permet de passer la plongée.
  • Elle parle trois langues. Chaque légende existe en anglais, en allemand et en français, et les nombres suivent chaque langue: 10,935 en anglais, 10.935 en allemand, 10 935 ici.
  • Plus à découvrir. Le prompt nomme huit animaux; la plongée en compte 17, plus les repères de profondeur et la descente du Trieste en 1960, bathyscaphe conçu par le physicien suisse Auguste Piccard et que son fils Jacques a fait descendre avec Don Walsh, de la marine américaine.
  • Quelque chose tout au fond, que le prompt d’origine ne demandait pas. Si vous avez passé la plongée, cela vaut la peine d’y retourner.

Le brief adapté en bas de cette page reprend tous ces points, intégrés au prompt d’origine.

Essayez vous-même

  1. Copiez le prompt complet ci-dessus. Le bouton prend les deux parties.
  2. Collez-le dans Claude, ChatGPT ou Gemini. Selon votre abonnement et vos réglages, le résultat peut s’afficher à côté du chat (Claude appelle cela un artifact, les deux autres Canvas). Sinon, enregistrez le code sous descent.html et ouvrez le fichier dans votre navigateur.
  3. Puis changez de sujet. Gardez la structure et remplacez le thème: « la même idée pour l’atmosphère, du sol jusqu’aux confins de l’espace », ou l’histoire de la Terre, un écran par centaine de millions d’années. Demandez-lui de garder des affirmations générales, puis vérifiez ses chiffres.

Attendez-vous à ce que votre première version demande un ou deux tours de « cette partie est cassée, corrigez-la ». La version de la galerie et celle-ci ont toutes deux été vérifiées et corrigées en boucle. Il n’y a aucune donnée d’entreprise dans ce prompt, vous pouvez donc l’essayer sans risque avec l’assistant que vous avez, y compris celui que votre employeur vous a fourni.

Le brief, adapté pour cette page Le même prompt, avec toutes les modifications faites pour ce site. Utile si vous voulez voir comment une spécification change quand une démo doit vivre dans un vrai produit.
Créez « Le grand bain », un voyage en défilement de la surface de l'océan jusqu'au fond de la fosse des Mariannes (~10 935 m), qui vit dans une page d'article de goodaiguide.com, comme composant du site sur toute la largeur plutôt que comme page autonome. Au fil du défilement, l'arrière-plan passe par les zones de l'océan: zone ensoleillée (#1e90c8), zone crépusculaire (#0b3a66), zone de minuit (#04142b), zone abyssale (#020812) et zone hadale (#000204). Un profondimètre, fixe tant que la plongée est à l'écran, compte les mètres et affiche le nom de la zone, la pression (≈ 1 atmosphère supplémentaire par 10 m), des indications sur la température et la lumière, et une barre à l'échelle réelle de 0 à 10 935 m. Donnez le plus de défilement aux mètres ensoleillés et comprimez la fosse, pour que chaque zone ait son temps à l'écran. Des animaux illustrés en SVG apparaissent à des profondeurs à peu près correctes: des dauphins et des poissons de la zone ensoleillée en haut, des méduses, un cachalot (~1000 m et plus), une baudroie des abysses avec un leurre lumineux, un calmar vampire, un grandgousier pélican, des amphipodes et enfin le fond de la fosse; ajoutez d'autres animaux des grands fonds bien connus là où ils vivent, par exemple un poisson-hachette, un poisson à tête transparente, une méduse Atolla, un cténophore, une pieuvre Dumbo, des cochons de mer et un poisson-trépied sur une corniche rocheuse, et une limace de mer entre les parois de la fosse. Les animaux plus profonds sont bioluminescents, avec une lumière bleue et verte qui pulse; la neige marine dérive dans l'eau; les rayons de lumière venus de la surface s'estompent progressivement. Marquez quelques profondeurs qu'on peut se représenter: la limite de la plongée loisir, la profondeur moyenne de l'océan, le Titanic, le poisson filmé le plus profond et la hauteur de l'Everest, plus une courte note sur la première descente habitée en 1960. Des légendes courtes et exactes (affirmations générales et bien établies), en anglais, en allemand et en français, avec les nombres écrits comme chaque langue les écrit. Interaction: défilement; dans les zones sombres, le pointeur est une faible lampe torche qui révèle les animaux proches (sur un écran tactile, le dernier toucher); un clic sur un animal ouvre une carte avec sa légende. Tout au fond, en récompense pour qui fait défiler jusqu'au bout: une petite base sous-marine au fond de la fosse, avec le logo Good AI Guide sur le toit, et par sa grande baie vitrée, Fabian à un bureau avec six écrans, qui se retourne et fait signe à votre arrivée. Clairement fictive, avec des détails mignons tout autour. Le tout se termine par un élégant bouton « Remonter à la surface » qui fait défiler jusqu'au début de la plongée.

Exigences communes comme dans l'original, sauf que: construisez-le comme un composant du site existant plutôt que comme un fichier autonome, et utilisez les polices que la page charge déjà. Il n'y a pas de son, donc pas de bouton pour couper le son. La plongée elle-même n'effectue aucune requête réseau.

Restez au courant

Ne manquez pas la suite

Un e-mail quand j'ai appris quelque chose qui vaut la peine d'être partagé, environ une fois par mois.La newsletter est en anglais.