Rebuild an award-winning site with 8 prompts

This is a three.js recreation of igloo.inc, built by prompting Claude. Paste these into Claude Code one at a time, in order, and check the result in your browser before moving on. The live site on the leftabove follows along as you scroll.

1. 01Set the stageWhole site

   One canvas, four scenes, all driven by scroll. This prompt sets up the skeleton everything else plugs into.

   CLAUDE

   Copy

   Build a three.js site with Vite, vanilla JS, no 3D model files. One full-screen canvas; the page is tall and scrolling drives a story through 4 scenes: an igloo on a snowy mountain, two floating ice crystals, a stone ring portal, and a particle figure on a pedestal. Render each scene to its own render target and blend them in one post-processing pass. Match the mood of igloo.inc: cool grey, foggy, cinematic. Corner UI: logo top left, a short manifesto top right, "scroll to discover" bottom left.

2. 02The iglooHero

   Chunky blocks with light leaking through the seams. That glow is what makes it read as ice, not stone.

   CLAUDE

   Copy

   Build an igloo from chunky rounded ice blocks: about 10 blocks per row, 2 straight wall rows, then a dome of 4 rows leaning inward, a small cap, and an entrance tunnel made of curved arch stones on low side walls. Chip every block slightly with 3D noise. Put a bright light inside so it glows out through every gap between blocks and lights the inward-facing sides. Blocks are cool blue-grey stone with white rims and a little snow on top faces.

3. 03The worldHero

   Mountains from noise, fog that matches the sky, and wind-blown mist so the frame never sits still.

   CLAUDE

   Copy

   Add snowy mountains around the igloo from layered fractal noise: a valley in front, peaks behind, the igloo on a small rise. Use a detailed snow normal map, darker steep slopes, soft distance fog that matches the sky, falling snow blown by the wind, and thin sheets of mist streaming across the screen in gusts. On load, swoop the camera from a high top-down view to the front.

4. 04HoverTry it on the left

   The igloo comes apart under your cursor. Move your mouse over it in the live site.

   CLAUDE

   Copy

   When the cursor moves over the igloo, the blocks near the cursor lift outward and tumble apart, and settle back when it moves away. The bottom row and the tunnel's side walls never move; the tunnel's arch stones can lift. Scrolling settles everything back into a solid dome.

5. 05Scroll transitionHero → crystals

   The world slides away under a rising cloud bank, with a glitchy pixel smear along the edge.

   CLAUDE

   Copy

   On the first scroll, the igloo scene slides up the screen while a bank of clouds rises from below and covers it, revealing the next scene. Along the cloud line, smear the image into horizontal pixel bands with rainbow chromatic fringes, like a glitch.

6. 06CrystalsScene 2

   Glass crystals cut from a sphere, each with something frozen inside, and labels that decode into place.

   CLAUDE

   Copy

   Scene 2: two faceted ice crystals float past one at a time, each made by cutting a sphere with random planes. Glass material with transmission, a frosted normal map and a glowing rim, with an object frozen inside each one. Next to each, monospace labels (name, temperature, date, "click to explore") that decode from scrambled characters when the crystal is centred, joined by thin leader lines.

7. 07The portalScene 3

   One nested structure: the front ring flies past while the broken one behind it locks into a circle and takes its place.

   CLAUDE

   Copy

   Scene 3: the pieces break out of one jagged rock and unfold into 3 nested rings, each of 10 bevelled stone blocks, facing the screen as perfect circles, with a glowing core in the middle. The outer ring is closed; the inner two start broken. On scroll, the rings turn clockwise, the front ring comes toward the camera and slides past the edges of the frame, while the broken ring behind it closes into a circle and grows into its place. Twice. Thin streaks of light pour from the inner edge into the core. Then the core flares, the camera dives in, and the next scene opens from the centre with ripples.

8. 08Particle penguinScene 4

   Two images become 90,000 particles. Make the pictures first, then hand them to Claude.

   IMAGE AI · Nano Banana or similar

   Copy

   A chubby baby penguin wearing big over-ear headphones, standing, strictly front view, soft matte clay look, grey palette, on a pure black background. Then the same penguin from behind.

   CLAUDE

   Copy

   Scene 4: a stepped stone pedestal in a pale misty room. Load these two images and turn them into 90,000 particles: inflate each silhouette into a rounded volume (depth from distance to the outline), front points shaded from the front image, back points from the back image. The particles start as a swirling pillar on the pedestal and spiral into the penguin. They keep drifting slightly. Hovering pushes them away and they spring back. Dragging rotates the figure.

A study recreation for learning, not affiliated with igloo.inc. All 3D is generated in code; the only images are the two penguin pictures.