Steal This: The Signature Technique Behind "LZ-42 Werft — Cyanotype Airship Works"

AIThis post was created with the assistance of artificial intelligence (AI).

LZ-42 Werft — Cyanotype Airship Works — Scroll-Driven Animation — Room 42 of 175: “LZ-42 Werft — Cyanotype Airship Works” — visit the live site.

Enter the Archive of an Imaginary 1934 Airship Workshop

Imagine stepping into a meticulously crafted digital replica of a vintage aircraft factory, built entirely by an AI. This virtual space isn’t a typical showcase; it’s a carefully curated, scroll-driven technical narrative that mimics archival documentation from the era of early aviation innovation. The standout feature here is the site’s ability to animate complex assembly processes and aerodynamic flows through subtle motion cues, all while maintaining a restrained, cyanotype-inspired palette. This signature move transforms a static history into an engaging, living blueprint, revealing the inner workings of a fictional airship with each scroll.

Palette, Typography, and Diagram — Crafting the Visual Language

The site’s visual tone is anchored in a triadic palette reminiscent of vintage cyanotype prints: deep Prussian blue dominates, contrasted by warm white and accented with faded red for authoritative touches. The choice of locally hosted, characterful typefaces—such as a monospaced font for measurements and a slab serif for narrative—evokes the era’s technical manuals, lending authenticity and tactile warmth. The signature diagram—a detailed, layered SVG of the airship—is designed to evolve as viewers scroll, with the geometry subtly transforming to reveal different assembly stages and aerodynamic insights. This dynamic diagram becomes a visual narrative device, shifting its meaning in sync with user interaction, reinforcing the site’s core theme of construction and flow.

Live view of LZ-42 Werft — Cyanotype Airship Works — The room as it renders live — open it in your browser.

From Blueprint to Interactive Exhibition

The project follows a straightforward three-phase pipeline: first, a rigorous build process that leverages AI-powered drafting to create precise SVG geometries and layered illustrations; next, a merciless critique phase where the design is refined for clarity, cohesion, and atmospheric integrity; finally, a certification step where an art director ensures that each line, motion, and interaction serves the storytelling purpose. The entire workflow is guided by an AI-developed architecture, ensuring that every element—be it technical annotations or animated wind flows—contributes meaningfully to the overarching narrative of aviation craftsmanship.

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 42 of 175, “zeppelin”):
LZ-42 WERFT — an airship works, documented in cyanotype. Aesthetic: blueprint room; Prussian blue, white ink, linen edges. Palette: cyanotype blue #16324f (paper), line white, faded stamp red. Fonts: archivo (technical headings), zilla-slab (body), jetbrains-mono (dimensions). SIGNATURE: SELF-DRAWING BLUEPRINTS — large inline-SVG technical drawings of the airship (profile, plan, hull section) whose strokes draw themselves on scroll with dimension lines and callouts snapping in; the assembly sequence builds ring frames → gas cells → outer skin → gondola as you descend; an exploded-view toggle; a wind-tunnel figure with animated canvas streamlines bending around the hull. Revision table, inspection stamps. Unforgettable: plans that draft themselves.

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

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 Archive in Motion

Visit the live simulation to explore the detailed assembly of the fictional LZ-42 airship, observing how each layer unfolds and interacts through scroll-driven motion. Dive into the full collection of 175 AI-generated exhibition sites at the central hub, and witness how restraint and subtlety elevate the storytelling of technical history.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

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.

1DFAUL 16.9oz Cyanotype Solution Kit, Premixed & No Water Needed

Sunlight-based Image Development: Creates vintage blue images with sunlight or UV lamp
Premixed Cyanotype Solution: No mixing or water needed, ready to use
High Contrast, Vibrant Blue: Produces rich, detailed blue images

View Latest Price

As an affiliate, we earn on qualifying purchases.