Concept
The Paper Fox is a bedtime page-turner disguised as a scroll interaction. One sticky viewport becomes a toy theater, and the reader advances seven scenes by moving down the page. The story stays warm and spare: a small fox notices the moon is missing, follows clues through pines, river, fireflies, and mountain, then pulls the moon back home. The visual rule is that nothing may feel printed flat. Every hill, cloud, star, scrap, and character piece should look cut by hand, slightly imperfect, and lifted from the table by a shadow.
Visual Techniques
All scenery is generated in main.js. buildSkyBits() makes the floating clouds and punched stars. buildScenery() calls seven scene builders for the valley, road, pinewood, river, firefly hollow, tallest peak, and homecoming. Those builders use polygon helpers such as poly(), path(), addHill(), addPine(), addSpark(), and addPatch(), so the shapes keep chunky scissor edges rather than smooth illustration curves.
The stage is a sticky element inside a long scroll track. render() converts scroll progress into a floating scene number from 0 to 7. updateLayers() crossfades SVG groups while nudging depth layers at different speeds; the parallax is all transform attributes, so it avoids layout thrashing. updateSky() interpolates CSS variables from kraft afternoon through rose and lavender into deep night.
The fox and moon live outside the scenery so they can travel continuously. updateFoxAndMoon() moves the fox along percentage keyframes, raises the tangled moon over the peak, then makes the moon enormous as the pull ribbon appears in the full-screen ribbonline SVG. The final moon gains a drowsy face from spans created in buildMoon(), while the end card’s moon-pull button is wired in init() and styled with CSS transforms. The fox idle motion is CSS in styles.css: tail sway, ear twitch, and body breathing on SVG groups with transform origins. Scene five uses drawFireflies(), a capped canvas particle pass that only animates near the lantern scene and pauses when the document is hidden.
The page scraps are ordinary HTML, not images. They are clipped into irregular polygons, taped with pseudo-elements, and animated with opacity and transform only. The grain and vignette layers are CSS backgrounds; they add fiber without extra requests.
Reproduce This
Prompt an AI agent to build a pure HTML/CSS/JS bedtime story with one sticky full-viewport stage, seven scroll-driven SVG cut-paper scenes, a moving character, a changing sky palette, and one small canvas effect reserved for the magical beat. Require self-hosted fonts, no external assets, semantic landmarks, reduced-motion handling, hidden-tab animation pausing, and screenshot iteration at 390px, 834px, and 1440px until the composition is clean.