Prime made for students and young adults
- Fast, free delivery for dorm and study essentials
- Prime Video and Amazon Music included
- Member-only deals
A page that flies as you read
GYRO — The Aerobatic Box is an AI-built exhibition piece: a fictional aerobatic-flight brand expressed as an interactive editorial site, not a real aviation company. Its central idea is unusually direct: make the browser perform the subject. Rather than place flight-themed decoration around a conventional article, GYRO treats the viewport as a competition box. As readers scroll, the interface changes attitude, gathers a drawn smoke trail, and reports simulated forces.
The signature move is turning reading progress into a continuous aerobatic sequence. The story moves from the invisible boundary of the box through a fictional routine and its pilots, then into the mechanics of an inverted fuel system and the judges’ score sheet. Labels and section markers give the journey the clipped, technical character of a flight manual. The result is part explainer, part instrument panel, and part kinetic diagram.
interactive flight simulation kit
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Inside the flight mechanics
One dominant field, used with intent
Ultramarine blue (#123FC7) establishes the sky and supplies the room’s dominant visual field. Smoke white (#F7F4EA) draws a crisp contrast against it, while paper cream (#EFE6CF) offers a quieter surface for the scoring moments. Wingtip red (#EF3B32) is deliberately scarce: it marks warnings and flight-critical events instead of becoming a second general-purpose accent. That imbalance helps each red interruption read as consequential.
Typography reinforces the split between spectacle and instruction. Syne in a heavy display weight gives headlines the wide, assertive presence of lettering on an aircraft. JetBrains Mono handles technical values, section identifiers, and judging details, keeping the supporting information legible and instrument-like. Tight headline spacing adds energy without asking the body copy to shout.
Notation doubles as navigation
The fixed navigation borrows the visual language of aerobatic notation. Inline SVG marks represent upright and inverted lines, rolls, arrows, and other maneuver shapes. As the active section changes, a red progress mark advances through the relevant diagram. This does more than decorate the menu: it connects the reader’s position in the article to a simplified account of the flight.
Section data supplies the performance cues. Each passage provides values for roll, pitch, and simulated G-force; scroll progress interpolates those values into CSS properties. The flight stage, attitude orbit, pressure rail, and G-meter respond together, so the page’s changing orientation feels like part of one system rather than a collection of unrelated animations. At the inverted-systems passage, the aircraft plan rotates through a 540-degree turn, with brief arrest beats to suggest the change in load.
A trail made from code
The smoke is also generated in the browser. A JavaScript function describes a continuous maneuver path, then samples it onto a fixed canvas. Several rounded strokes build up the trail, from a soft bloom to a sharper center line, ending in a red aircraft tip. Its length follows page progress, linking the visual trace to the reader’s movement without requiring image files.
The boundary scene gives that motion a consequence. When local scroll progress enters a narrow threshold, the frame shifts to wingtip red and a skewed warning sweeps across the composition, paired with a fictional judging deduction. The scorecard then turns evaluation into a real interaction: a semantic range input lets visitors adjust a deduction and see the total update. Native meter elements retain meaning for assistive technology, while custom styling makes the results resemble marks on paper.
The aircraft, competition cube, pilot symbols, score sheet, and grain are drawn with CSS or inline SVG. Animation work is throttled through requestAnimationFrame and pauses when the document is hidden. Reduced-motion settings remove the attitude changes and impact beats but retain a static smoke trace and the full narrative. That keeps the concept available without insisting that every reader experience the same motion.
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 149 of 175, “gyro”):
GYRO — THE AEROBATIC BOX: unlimited-category competition flying (fictional pilots). Aesthetic: smoke-oil calligraphy on ultramarine; precision violence. Palette: smoke white, sky ultramarine, wingtip red, judge-paper cream. Fonts: syne (display), jetbrains-mono (K-factors). SIGNATURE: THE ARESTI LINE — the nav is an Aresti sequence diagram (the real aerobatic notation); scrolling FLIES it: the viewport subtly rolls through hesitation rolls, pitches over the humpty-bump, snaps at the vertical line’s end (CSS 3D on a flight-path spline, smoke trail drawing behind you the whole way). Every section carries its K-factor difficulty score; a g-meter swings +8/−6 with the maneuvers. The judges’-sheet section grades THE SITE ITSELF (line, radius, energy — a meta scorecard). Box-boundary rules (the invisible cube), inverted-fuel-system note, the wing-rock salute. Unforgettable: scrolling a snap roll.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/gyro/
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.
From prompt to flight manual
The work followed a three-pass pipeline: build the code-drawn editorial room and its scroll mechanics; critique it mercilessly across full-page screenshots, identifying specific visual defects rather than settling for a first impression; then have an art director certify the result after those issues are corrected. The accompanying guide explains the design tokens and motion system and offers instructions for reproducing the approach.
The full build notes live in the room’s design guide.
Enter the box
Visit the live GYRO exhibition piece to follow the sequence and test the scorecard. It is an AI-built fictional concept, created with code-drawn visuals rather than image assets. To see how it sits alongside the wider collection, browse all 175 rooms at the hub.
Visit the live room → · Browse all 175 rooms
Previously in Wing VI
- Room 138: APEXWERK — The Grip Curriculum
- Room 127: Meridian 843 | The Measured Mile
- Room 136: Courier — Spoke & Signal
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.
Columbus Day / Indigenous Peoples' Day Picks
long weekend sales
As an affiliate, we earn on qualifying purchases.
