An AI Built the Paper Fox — a bedtime story in seven scenes Website — Here’s the Design Trick That Makes It Work

Discover the Magic of the Paper Fox

This enchanting digital storybook is a handcrafted-inspired scroll that transforms a simple page into a whimsical theater, guiding children through a gentle bedtime adventure. Its signature move? A single sticky viewport that acts like a toy stage, revealing seven delicately crafted scenes as you scroll down, blending interaction with storytelling in a seamless flow.

Unveiling the Visual Strategy

The site employs a warm, minimalist color palette inspired by traditional paper crafts, pairing creamy, rose, lavender, and deep night tones to evoke a cozy evening atmosphere. All scenery is generated dynamically via JavaScript functions that produce chunky, cut-paper shapes—think jagged edges and layered polygons—that resemble hand-cut elements. These shapes are then animated with CSS and SVG techniques, avoiding smooth curves to maintain that tactile, handcrafted feel. The site’s signature interaction hinges on a sticky stage that remains fixed while the story unfolds through scroll-linked SVG layers, which crossfade and parallax for depth. The fox and moon characters are animated separately from the scenery, moving smoothly along predefined paths, while subtle CSS animations breathe life into the fox’s tail sway and ear twitch. A small, custom canvas effect illustrates fireflies twinkling near scene five, adding a magical touch without heavy assets. This cohesive approach creates a tactile, warm experience that feels both handmade and alive, achieved entirely through code—no external images or assets—making the storytelling immersive and intimate.

The Creative Pipeline

This site was developed through a three-stage process: initial build where the scenery and interactions were coded, followed by a rigorous critique focusing on visual coherence and performance, and finalized with art-director approval to ensure the handcrafted feel was consistent. The entire workflow was guided by the Fable’s comprehensive design guide, emphasizing organic shapes, subtle animations, and accessibility considerations such as reduced motion and tab visibility handling, ensuring the story remains welcoming and engaging for all viewers.

The full build notes live in the room’s design guide.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 24 of 175, “paperfox”):
THE PAPER FOX — a bedtime story. Fiction: an illustrated storybook in seven scenes: a paper fox searches for the moon. Aesthetic: paper-cutout craft: kraft #d9c4a3, cream, dusk pastels (rose #e8a0a0, lavender #b9a8d8, deep night #2b3050); every shape looks scissor-cut (slightly irregular polygon edges, layered drop shadows for lift). Fonts: young-serif (story display), baloo-2 (UI/captions). SIGNATURE: seven full-viewport layered SVG cutout scenes advanced by scroll (scroll-snap or driven transitions): hills, trees, clouds, and the fox — all cut-paper layers with distinct parallax depths; the fox has a subtle idle animation (ear twitch, tail sway via SMIL/CSS on grouped paths) and MOVES across scenes; the sky runs day -> dusk -> deep night across the story; fireflies (glowing dots) in scene five; the found moon is a giant cut circle that the fox pulls down gently in the finale. Story text (write it — warm, spare, 2-3 sentences per scene) on floating paper scraps with tape. A “read again” ribbon at the end rewinds with a page-flip flourish. Unforgettable: it feels handmade — parents will send it to each other.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/paperfox/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Experience the Full Bedtime Journey

Visit the live demonstration to step into this handcrafted digital story, and explore all 175 imaginative sites in the Fable collection at the hub—each crafted with the same AI-driven ingenuity and attention to detail.

Visit the live room → · Browse all 175 rooms

Previously in Wing I

• Room 6: Abyssal Station — a 3,800 m descent
• Room 15: Apothecarium — Bitters & Botanical Remedies, est. 1783
• Room 16: BRUTA — Raw Concrete Architecture Collective

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI