How the Vortex Field Unit Archive Renders Signature Storm Data with Zero Image Assets

Discover the Vortex Field Unit — Plains Intercept Archive

This AI-crafted exhibition showcases a digital storm chase, where a dynamic, scroll-driven visualization captures a supercell’s lifecycle without using any external media. Its key innovation lies in synchronizing multiple visual layers—simulating a funnel cloud and radar hook—through a unified scroll interaction, all built from scratch with HTML, CSS, and JavaScript. This approach demonstrates how complex weather phenomena can be portrayed with procedural graphics, emphasizing data agreement and disciplined visualization over conventional imagery.

Design Mechanics: Palette, Type, and Signature Interaction

The interface employs a restrained color palette—deep greens, dark grays, and subtle amber accents—to evoke a stormy atmosphere while maintaining clarity. Typography combines a condensed, blunt typeface reminiscent of vehicle signage for headlines, with monospaced fonts for telemetry and data readouts, ensuring legibility in a condensed space. All visual elements are generated procedurally via JavaScript functions that animate cloud paths, rain curtains, and reflectivity cells, driven by a normalized scroll value that acts as a master controller. The layered approach allows the storm’s funnel and radar hook to evolve in harmony, reaching full maturity precisely at key scroll positions, creating a disciplined and synchronized narrative without relying on static images. The CSS manages responsive layout, safety zones, and interactive controls, while inline SVGs depict the intercept map, pressure traces, and route lines, maintaining a zero external request profile.

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 65 of 175, “vortex”):
VORTEX FIELD UNIT — storm chasers on the Great Plains. Aesthetic: dashboard HUD meets supercell sky. Palette: storm green-black #1a231e, radar green #35d15f, warning amber, wall-cloud slate, one blood-orange sunset band. Fonts: big-shoulders-display (condensed display), jetbrains-mono (radar/data). SIGNATURE: a SUPERCELL that organizes — layered canvas cloud deck where rotation visibly develops (curl noise accelerating), a wall cloud lowers, and a funnel touches down in the hero’s distance as you scroll the chase timeline (17:42 initiation → 19:06 rope-out); alongside, a RADAR SWEEP paints reflectivity with a hook echo forming in sync. Chase log entries, probe deployment cards, safety protocol strip. Unforgettable: watching the hook echo and the funnel agree.

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

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 Concept to Certification

The development follows a three-stage pipeline: first, building a responsive, scroll-driven canvas sequence that visualizes storm evolution; second, a rigorous critique phase to refine visual cues, interaction points, and data accuracy; and finally, an art-director review to ensure the visual language communicates agreement and clarity. This process, guided by the AI-crafted manual, ensures the visualization remains both precise and engaging, balancing technical rigor with visual storytelling.

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

Experience the Archive and Explore More

Visit the live Vortex Field Unit — Plains Intercept Archive to witness this data-driven storm visualization in action. Browse the full collection of 175 AI-built sites at the dedicated hub to explore innovative approaches to digital storytelling and weather simulation.

Visit the live room → · Browse all 175 rooms

Previously in Wing III

• Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
• Room 58: The Atlantic Cable Company — Race the Signal
• Room 64: Caldera Watch — Night Observatory 04

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