How “ECHELON 8 — Bodies Become Geometry” Turns Scroll into Formation Flight With Zero Image Assets

Before you orderOffer from Amazon

Get art and craft supplies delivered free with Prime

• Fast, free delivery on millions of items
• Prime Video, Amazon Music and more included
• Member-only deals all year

Start your free Prime trial →Free trial for eligible customers · Cancel anytime

As an affiliate, we earn on qualifying purchases.Hide

A room made of air, lines and motion

“ECHELON 8 — Bodies Become Geometry” is an AI-built exhibition piece: a fictional skydiving team’s flight manual turned into a long, animated browser journey. Its defining move is to make altitude the page’s clock. As visitors scroll, eight simple SVG figures travel through changing formations, making the choreography—not a gallery of cards—the central event.

The room’s story shifts with that movement. It begins in the precision and pressure of formation flight, then opens into the slower, softer image of a parachute. The fictional Echelon 8 gives the experience a sense of human routine, but it is not a real company or team, and the site does not claim to depict an actual competition.

From prompt to flight manual

The room was built through a three-pass pipeline: first, an AI agent built the code-only experience around scroll-driven formations; next came a merciless critique of the interaction, visual hierarchy and pacing; finally, an art director certified the result. The accompanying flight manual documents the construction, from SVG formation states and scroll-linked transitions to the canopy animation, typography and opt-in audio.

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

Reading the visual system

The palette carries the emotional arc: deep indigo and royal blue establish the aircraft-door mood, cyan and cloud white lighten the descent, and vivid magenta punctuates moments of change. Typography reinforces the split between spectacle and instrumentation. Heavy, tightly spaced display lettering gives the headlines a physical presence, while monospaced labels make altitude and formation details feel like flight data.

One scroll, four formations

The signature interaction is a coordinated transformation of eight SVG bodies across four named shapes. Their positions interpolate as the page advances, while lines between them redraw the connections that make each formation legible. The figures also drift slightly apart during transitions, so the change reads as movement through air rather than a simple swap of diagrams.

Scroll position drives the animation, including a staged regroup: bodies separate, old grip lines fade, and the next arrangement settles into place. An altitude indicator descends toward the deployment point. Later, the bodies release outward and a canopy expands, turning a technical sequence into a visual exhale. The atmosphere is also code-made: CSS gradients, translucent cloud shapes and an inline SVG texture provide depth without imported imagery. The room uses no external media assets.

Sound with a clear boundary

There is an audible layer, but it is opt-in. Web Audio synthesizes brief height cues only after the visitor activates the sound control. That choice fits the work’s attention to detail without making sound an unexpected demand.

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 145 of 175, “freefall”):
FREEFALL — ECHELON 8, a formation-skydiving team (fictional). Aesthetic: dawn altitude light; bodies as geometry. Palette: jumpsuit royal, altitude-sky gradient (indigo→cyan by height), canopy magenta, cloud white. Fonts: outfit (display), ibm-plex-mono (dive flow). SIGNATURE: THE FORMATION — 8 jumper dots exit the plane at page top and BUILD formations as you scroll (star → open accordion → donut → bipole; SVG choreography using real relative-work grip notation), regrouping between points with tracked separation. An altitude bar descends 4000m→800m across the whole page; at 800m the deployment section BLOSSOMS (canopy bloom, pace goes soft and swinging). Headings arrive at terminal velocity (198 km/h easing, braked by air). Exit-order physics, the dirt-dive rehearsal ritual (creeping on boards), audible-altimeter culture, packing-mat superstitions. Unforgettable: the canopy bloom easing.

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

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.

Enter the room

Visit the live Echelon 8 room and follow its formations from the aircraft door to canopy. Then browse the hub’s collection of all 175 rooms for more AI-built exhibition experiments.

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.

Powered by Thorsten Meyer AI