# Earth, Top to Bottom

One scroll from the space station down to the Earth's core.

Category: Scale story

## The brief

Build a single vertical scroll journey from the orbit of the International Space Station down to the center of the Earth, with a live altitude/depth counter and a short on-screen note explaining how you handled scale. Mark at least 25 real landmarks along the way (for example cruising airliners, Mount Everest, the deepest point of the ocean, the deepest borehole, the crust–mantle boundary, and the outer and inner core), each with an accurate figure and a one-line fact. Draw every illustration yourself, in code or as assets you generate, and let color, light and ambient sound shift as I descend.

## The exact prompt every model received

````markdown
Build a single vertical scroll journey from the orbit of the International Space Station down to the center of the Earth, with a live altitude/depth counter and a short on-screen note explaining how you handled scale. Mark at least 25 real landmarks along the way (for example cruising airliners, Mount Everest, the deepest point of the ocean, the deepest borehole, the crust–mantle boundary, and the outer and inner core), each with an accurate figure and a one-line fact. Draw every illustration yourself, in code or as assets you generate, and let color, light and ambient sound shift as I descend.

## House rules (identical for every model)

- Build a website in `./site/`. The entry point is `./site/index.html`. Only `./site/` gets published, so keep scratch files, scripts and tooling outside it.
- It must be fully static: no backend, no server code, no API keys, no logins. It will be served as plain files from a CDN under a sub-path and shown inside an iframe, so use relative URLs only.
- JavaScript libraries and web fonts from public CDNs are fine (cdn.jsdelivr.net, unpkg.com, cdnjs.cloudflare.com, esm.sh, Google Fonts). Nothing else may be fetched at runtime.
- Resources: you may create any media the site needs (images, textures, audio, video, 3D models, data files) and put them in `./site/`. Make them yourself with code or local tools: node, python3 and ffmpeg are installed, and you may `npm install` packages into a folder outside `./site/`. Do not download third-party media. Budget: 40 MB total, 15 MB per file.
- It must work with mouse, keyboard and touch, on screens from 375 px phones to wide desktops, and run smoothly on a mid-range laptop.
- The first 3 seconds matter: it should look impressive immediately.
- Test it. Run `node .prism/check.mjs`: it opens `./site` in a real headless Chromium at desktop (1440×900) and phone (390×844) sizes, prints console errors and failed requests, and saves screenshots to `./.prism/shots/`. Look at the screenshots. Run it as often as you like.
- Work autonomously; nobody will answer questions. You have up to 60 minutes.
- When you are done, write `./NOTES.md` (outside `./site/`) covering what you built, your key decisions, and known issues.
````

## Artifacts

- **Haiku 4.5** (`claude-haiku-4-5-20251001`, 3m 31s): live https://prism-artifacts.berrocal.xyz/earth-top-to-bottom/haiku-4-5/site/index.html · replicate https://prism.berrocal.xyz/i/earth-top-to-bottom/haiku-4-5/index.md · pack https://prism-artifacts.berrocal.xyz/earth-top-to-bottom/haiku-4-5/pack.zip

Input resources: none