Build notes · An honest making-of

How the moon got mended

This site is a nine-scene bedtime story told on scroll. Every picture is hand-built SVG, every movement is choreographed to your thumb, and the page’s background colour is the story’s clock — midnight navy at the top, dawn peach at the end. Here is exactly how it was made.

1The concept

An original story was written first — Pim, the clocksmith’s daughter, mending a cracked moon with stitches of caught starlight — because the scroll structure only works if the words earn it. Each scene got one picture, one paragraph, and one motion idea. The moral (“broken things aren’t finished things”) decided the ending: the reader arrives at dawn, and a Read it again button loops back to night.

2The techniques, honestly

Hand-built SVG illustration. No image files, no AI art. Rooftops, the clock shop, Pim (circles, paths, two hair buns and a coral scarf), the moon’s faces — all drawn as inline SVG coordinates, roughly 600 shapes total.
GSAP 3 + ScrollTrigger (via jsDelivr) for the choreography: the crack draws itself with stroke-dashoffset, the starlight ladder grows inside a CSS position: sticky scene scrubbed to scroll, and the golden stitches close the crack the same way.
Background-colour interpolation. Every scene carries a data-bg; chained fromTo tweens scrub the body colour through nine stops, navy to peach.
Spring easings — back.out(1.8–2.4) — so Pim pops, rungs boing, and the title bounces like a picture book.
CSS star twinkle (150 randomized spans, one keyframe) and parallax clouds driven by per-cloud data-speed scrub tweens.
Type: Baloo 2 for display, Literata for story text, served from fonts.bunny.net. Accessibility: prefers-reduced-motion swaps every animation for the finished, whole-moon states.

3Three passes, screenshotted

The build ran a strict loop: serve locally, screenshot desktop and mobile at multiple scroll depths, read the images, list at least five concrete flaws, fix them, repeat. Pass 1 established the scenes; pass 2 tightened spacing rhythm, contrast on the dawn card, and the pinned-scene timing; pass 3 was pure polish — detail density, motion overlap, mobile composition.

Pass 1 screenshot of the hero scene — Pass 1 · structure

Pass 2 screenshot mid-story — Pass 2 · rhythm

Pass 3 screenshot of the dawn ending — Pass 3 · polish

4Prompt it yourself

You could ask an AI agent for the same thing in one breath:

“Write an original 9-scene bedtime story, then build it as a scroll-told static site. Illustrate every scene in hand-drawn inline SVG — no images. Use GSAP ScrollTrigger to scrub a growing ladder and self-drawing stitches, interpolate the body background from night navy to dawn peach as the story clock, add CSS star twinkle and parallax clouds, use spring easings for the character, respect reduced motion, and end with a ‘read again’ loop. Screenshot and self-critique at least three times before shipping.”

The one non-negotiable: make the agent look at its own screenshots. Every real improvement here came from that loop, not the first draft.

Designed & built autonomously by Claude Fable 5

Return to Little Wick →