No. 10 · Interactive explainer

The Deep End

An interactive dive from the ocean's surface to the bottom of the Mariana Trench, 10,935 metres down, rebuilt by AI from a prompt published in a public gallery: five ocean zones, 17 animals at roughly the depths where they live, a depth gauge and a torch for the dark. Dive, copy the prompt, and see what it takes to teach a topic this way.

SVGCanvasCSSNo libraries Added October 2026

Scroll: Sink through the five zones of the ocean. The gauge counts the metres, the pressure and the light.
Click or tap an animal: Read what it is and how it lives at that depth.
Move the pointer: Below about 200 metres it becomes a torch. On a phone, tap to shine it.
Tab and Enter: Every animal is a button. Escape closes the card.
Short on time: The link just under the waterline skips the dive.
At the bottom: Have a look around before you head back up.

Take a deep breath.

10,935 metres to the bottom of the Mariana Trench.

Scroll to sink

Skip the dive

0–200 m

The sunlight zone

Enough light for photosynthesis. Drifting microscopic algae, phytoplankton, grow here and make roughly half the oxygen on Earth. Almost all the food in the ocean starts in this thin top layer.

200–1,000 m

The twilight zone

A little blue light still gets through, but too little for algae to grow. Many animals here have huge eyes, and lights on their bellies.

1,000–4,000 m

The midnight zone

No sunlight reaches this far. Most animals down here make their own light, to hunt, to hide or to find each other. Many are red: red light never gets this deep, so red looks black.

4,000–6,000 m

The abyssal zone

Near freezing, pitch black and enormous: the abyssal plains cover about half of Earth’s surface. Food arrives mostly as whatever sinks from above.

6,000–10,935 m

The hadal zone

Named after Hades, the Greek underworld. It only exists in deep-sea trenches, most of them in the Pacific. Many animals here live in one trench and nowhere else.

40 m The limit for recreational scuba diving

≈ 3,700 m The average depth of the ocean

3,800 m The wreck of the Titanic

8,336 m The deepest a fish has been filmed (2022)

8,849 m The height of Mount Everest. If it stood on the floor down here, its summit would still be 2 km under water.

Challenger Deep, Mariana Trench

10,935 m

The deepest known point in the ocean (surveys differ by a few dozen metres). The water above presses down with more than a tonne on every square centimetre, and it’s about 2.5 °C. You made it.

The complete prompt · about 450 words

Copy it, paste it, see what you get

This is the prompt published for Descent — Eleven Thousand Metres Down (No. 022) in Claude Opus 5.5: 100 HTML Files, word for word. It has two parts: a paragraph describing this piece, and a set of house rules the gallery added to every prompt. The button copies both.

Part 1 · The piece · 180 words

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.

Part 2 · The house rules added to every prompt in the gallery · 280 words

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.

What you’re looking at

Scroll down and you sink from a calm morning sea to the bottom of the Mariana Trench, the deepest known place in the ocean. On the way you pass five zones, 17 animals at roughly the depths where they live, and a handful of markers you can picture: where recreational divers stop, where the Titanic lies, how tall Mount Everest is. The gauge keeps count of the metres, the pressure, the temperature and how much light is left. In the twilight zone your pointer becomes a torch, because further down the animals’ own light is all there is.

Everything you see is drawn in code. No photos, no image files, no libraries. Not one line of it was written by a person.

I found the original in the same gallery as Soft Machine: 100 single-file web pages, each published with what the gallery says is the exact prompt behind it, all credited to Claude Opus 5.5. I had Claude Code rebuild this one here, because it shows something the synthesizer doesn’t: AI can now build a really good way to teach a topic.

Why scrolling teaches

Numbers like 10,935 metres don’t mean much on their own. You read them, nod, and forget them. Scroll them and they stick, because your thumb does the counting.

Watch the bar at the bottom of the gauge, drawn to true scale. The sunlight zone, where almost all the life you know from documentaries lives, takes up less than 2% of it. The rest is dark.

Three more things make it work. You set the pace, so you stop where something interests you. You go looking: in the dark you search with the torch, so you pay attention to what you find. And every caption is three sentences at most, so you read them.

It works for adults as well as children, and for anything with a scale or a sequence: the layers of the atmosphere from the ground to space, the history of the Earth, the path an order takes through your company, the steps of a regulation. If you onboard people, train a team or explain your product, this is a format worth stealing.

The line that matters most

The paragraph describing the dive is under 200 words, and like Soft Machine’s it makes the decisions that matter: the five zone colours, what the gauge shows, which animals at roughly which depths, what the pointer does in the dark. Under it sit the same ten house rules the gallery added to every prompt.

For teaching material, one short phrase does the most work: “Short, accurate captions (keep claims general and well established).” It tells the model how careful to be. A model knows a great deal about the deep sea, but it’s on firmer ground with “sperm whales hunt squid by echolocation” than with the exact depth of a particular record. General claims are much more likely to be right, though not guaranteed, so they still need a read.

It also tells you what to check. Specific numbers are where errors hide, so for this page Claude Code looked up the precise figures before they went in. The prompt’s 10,935 metres comes from a 2021 survey; others measured between 10,925 and 10,994, which is why the floor says surveys differ by a few dozen metres. The deepest fish ever filmed was a snailfish at 8,336 metres, in 2022. If you use AI for teaching material, do the same: let it write, then check every number someone might repeat. Don’t Let Your AI Grade Its Own Homework has a simple way to do that with a second model.

What the prompt never says

The prompt describes the experience. Building it meant working out a lot that it doesn’t mention:

How far to scroll for a metre. Draw 11 kilometres to one scale and the sunlight zone flashes past in a single flick while the trench takes forever. So the scale changes with depth: the first 200 metres get almost five screens, and the last five kilometres not many more.

What “fixed” means inside an article. On the gallery’s standalone page, the gauge can sit on the screen the whole time. Here, it has to appear when the dive starts and leave when it ends, and stay out of the way of the site’s own header.

Which animal the torch lights. Every animal has a body that fades with the daylight at its depth, and lights of its own that don’t. The torch adds light by distance, so an animal half in the beam is half visible. One detail worth finding is the comb jelly: its rainbows aren’t its own light but light scattered by its moving hairs, so they only appear when your torch is on it. That’s how it works in the real ocean too.

When to stop working. The light shafts, the marine snow and the blinking animals in the dark are drawn about 60 times a second, but only while the dive is on screen and the tab is open. With reduced motion switched on in your system settings, everything holds still.

What changed for this page

It lives in an article. Full width, in the site’s fonts, with the gauge out of the way of the header and a link under the waterline that skips the dive.
It speaks three languages. Every caption is in English, German and French, and the numbers follow each language: 10,935 here, 10.935 in German, 10 935 in French.
More to find. The prompt names eight animals; the dive has 17, plus the depth markers and the 1960 descent of the Trieste, which the Swiss physicist Auguste Piccard designed and his son Jacques took down with Don Walsh of the US Navy.
Something at the bottom that the original prompt didn’t ask for. If you skipped the dive, it’s worth going back for.

The adapted brief at the bottom of this page has all of these folded back into the original prompt.

Try it yourself

Copy the full prompt above. The button takes both parts.
Paste it into Claude, ChatGPT or Gemini. Depending on your plan and settings, the result can appear next to the chat (Claude calls it an artifact, the other two Canvas). If it doesn’t, save the code as descent.html and open it in your browser.
Then change the topic. Keep the structure and swap the subject: “the same idea for the atmosphere, from the ground to the edge of space”, or the history of the Earth, one screen per hundred million years. Ask it to keep claims general, then check its numbers.

Expect your first version to need a round or two of “this part is broken, please fix it”. The gallery’s version and this one were both checked and fixed in a loop. There’s no company data in this prompt, so it’s a safe one to try on whichever assistant you have, including the one your employer gave you.

The brief, adapted for this page The same prompt with every change for this site folded in. Useful if you want to see how a spec changes when a demo has to live inside a real product.

Create "The Deep End", a scroll-driven journey from the ocean surface to the bottom of the Mariana Trench (~10,935 m) that lives inside an article page on goodaiguide.com, as a full-width component of the site rather than a standalone page. As you scroll, the background transitions through the ocean zones — sunlight (#1e90c8), twilight (#0b3a66), midnight (#04142b), abyssal (#020812) and hadal (#000204) — while a depth gauge, fixed while the dive is on screen, counts metres and shows the zone name, pressure (≈ 1 additional atmosphere per 10 m), temperature and light notes, and a bar drawn to true scale from 0 to 10,935 m. Give the sunlit metres the most scroll room and compress the trench, so every zone gets time on screen. Illustrated SVG 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; add other well-known deep-sea animals where they live, such as a hatchetfish, a barreleye, an Atolla jellyfish, a comb jelly, a dumbo octopus, sea pigs and a tripod fish on a rock shelf, and a snailfish between the trench walls. Deeper creatures are bioluminescent, with pulsing blue/green light; marine snow drifts through the water; light rays from the surface fade out gradually. Mark a few depths readers can picture: the recreational diving limit, the ocean's average depth, the Titanic, the deepest fish ever filmed and the height of Mount Everest, plus a short note on the first crewed descent in 1960. Short, accurate captions (keep claims general and well established), in English, German and French, with numbers written the way each language writes them. Interaction: scroll; in the dark zones the pointer is a faint torch revealing nearby creatures (on a touch screen, the last tap); clicking a creature opens a caption card. At the very bottom, as a reward for whoever scrolls all the way down: a small underwater base on the trench floor with the Good AI Guide logo on its roof, and through its big window Fabian at a desk with six screens, who turns round and waves when you arrive. Clearly fictional, with cute details around it. It ends with an elegant "Return to surface" button that scrolls back up to the start of the dive.

Shared requirements as in the original, except: build it as a component of the existing site instead of a standalone file, and use the fonts the page already loads. There is no sound, so there is no mute button. The dive itself makes no network requests.