An AI Crafted a Paper Flight Lab Website — Fold, Trim & Fly

Discover the Charmed World of the AI-Designed Paper Flight Lab

Step into a meticulously crafted digital space where a fictional AI has simulated the playful art of paper airplane making. This room transforms childhood gestures into a serious yet joyful laboratory, emphasizing precision through a blend of geometric origami visuals and measurement-inspired design. Its signature move? An interactive folding sequence that visually demonstrates how different paper aircraft perform — each fold and flight calibrated to evoke the tactile joy of paper planes while maintaining scientific rigor.

Behind the Curtain: Palette, Typography, and Interaction

The visual language centers around a warm, textured graph paper background, paired with a restrained color palette of blues, reds, and oranges to evoke technical sketches and flight data. Typography is deliberately set in a graphite-toned monospace for measurements and a contrasting bold sans-serif for headings, establishing a hierarchy that guides visitors seamlessly through the lab’s content. The core interaction—the folding sequence—is built using JavaScript that dynamically generates SVG polygons and crease paths, simulating paper folds with animated transitions that feel tactile and deliberate. Smoke paths and force diagrams are rendered with lightweight SVG animations, creating the illusion of wind and airflow without heavy rendering libraries. This balance of visual cues and interaction makes the lab feel both authentic and approachable, inviting curiosity and experimentation.

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 80 of 175, “glide”):
THE PAPER FLIGHT LAB — aeronautics with a single sheet. Aesthetic: school physics lab meets origami precision. Palette: graph-paper white/blue grid, pencil graphite, fold-line dashed red, one test-flight orange. Fonts: epilogue (display+body), space-mono (measurements). SIGNATURE: FOLD & FLY — a sheet folds itself step-by-step (crisp SVG fold animations with mountain/valley notation) into one of three designs (dart / glider / stunt), then LAUNCH: a physics flight across a long test hall (lift/drag from your design + launch angle/force sliders), distance chalked on the floor, trajectory traced; trim tabs (elevator bends) adjust between throws. Leaderboard of the lab’s record flights, the four-forces diagram made friendly, wind-tunnel smoke-line section. Unforgettable: trimming a virtual sheet and watching the stall disappear.

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/glide/

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.

The Three-Stage Creation Pipeline

The development began with a detailed build phase, translating the folding sequences and flight calculations into code, guided by the technical field notes from the original guide. Next, a rigorous critique ensured the visual coherence and interactive clarity, scrutinizing the accuracy of fold animations, color usage, and accessibility considerations. Finally, a design director’s review refined the aesthetic, ensuring that the room’s playful yet precise character resonated with the intended arts and craft audience. This process was orchestrated with a comprehensive guide as the blueprint, ensuring consistency and authenticity throughout.

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

Experience the Full Flight Lab and Explore More

Visit the live Paper Flight Lab to see the folding and flying simulations in action, and explore the entire collection of 175 interactive sites in the hub. Immerse yourself in a world where AI meets craft, and discover the subtle artistry behind each virtual paper airplane.

Visit the live room → · Browse all 175 rooms

Previously in Wing IV

• Room 77: The Foley Stage — Perform the Picture
• Room 76: The Immortal Game — London, 1851
• Room 78: The Nib Works — Hand-ground fountain pen nibs since 1911

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