ATHEMA — LANDING VARIANTS

Twelve fundamentally different directions for the same product truths — each a complete, self-contained static landing page. Open any card; weigh them side by side. Each variant's README documents its design direction and iteration passes.

internal design exploration · twelve directions, one product · not the shipping landing page
Eidolon hero — the Athema seal formed of particles on black
01 · EIDOLON

A Museum of Entropy

The seal held in suspension by 45,000 WebGL particles that disperse into ember dust through six dark museum rooms — then re-form: what fell apart can hold.

webgl point-clouddark monumentalscroll narrativeember on umber
Control Room hero — amber-on-graphite run board console
02 · CONTROL-ROOM

The Engineer That Never Leaves

The landing page as a live operations surface: a mission-control console replaying a 2:47 AM run event by event — mechanism as the hero.

industrial terminalswiss brutalistphosphor ambermonospace-forward
Schematic hero — drafted title sheet with exploded axonometric
03 · SCHEMATIC

Retrofit of a Vibe-Coded Structure

A professionally drafted drawing set — eight vellum sheets from survey to certification — that makes the mechanism literal, inspectable, and stamped.

technical drawingexploded axonometricvellum & graphiteplotter motion
Day-Two hero — serif editorial front page on warm paper
04 · DAY-TWO

The Day-Two Files

A persuasion-journalism magazine feature on the vibe-coding reckoning, built from real linked quotes — with product surfaces as captioned print exhibits.

print editorialink on paper15 linked citationsfigures & footnotes
Ascent hero — dawn sky with ladder rail and serif headline
05 · ASCENT

The Luminous Climb

One continuous scroll-driven dawn climbing the Ladder of Autonomy L0→L5 — pre-dawn fear into full-morning light, with living product surfaces along the rail.

volumetric dawnscroll-driven skyladder-rail spineglass frames
Signal Engine hero — machined 3D seal with converging signal streams beside a PR panel
07 · SIGNAL-ENGINE

It Hears Everything. It Acts. You Approve.

Precision-studio light: six labeled signal streams (telemetry, App Store, Reddit, HN, PR reviews, run vitals) converge into a machined WebGL seal and emerge as one ordered PR — signals→action, minimal copy.

live 3D PBRsignals → actionproduct-beside-3Dflagship minimal
Flow hero — deep-ink cinematic light streams converging, signals in, pull requests out
08 · FLOW

Signals In, Pull Requests Out

Deep-ink cinematic motion: a generated hero loop of converging signals, an animated Signal-Bus diagram ending at a PR that waits for you, and three real recorded product loops — ~178 words total.

cinematic videosignals → actionproduct-motion loopsice-cyan on ink
Approve hero — playable simulation with a PR waiting for one green click
09 · APPROVE

The Playable One

A live simulation of the owner's whole job: signals arrive, sandboxed runs timelapse, a PR with proof waits — and the visitor clicks Approve & merge. If they never click, it just waits.

interactive simulationmerge-green on whitehonesty as mechanicone-idea page
Diorama hero — warm-ink WebGL cutaway of an app under care
10 · DIORAMA

Agent Speed, Human Outcomes

A living warm-ink pipeline in WebGL — signals flow into the Athema works, changes ride through agent- and human-review gantries to ship, and the visible harness adapts a notch on every review.

webgl ink pipelineagent + human reviewself-adapting harnesswarm ivory & clay
Linework hero — drafted signal-flow diagram drawing itself on warm paper
11 · LINEWORK

Diagrams as the Design Language

A warm flagship page where every illustration is a drafted line diagram that draws itself on — signals → bus → run → one PR — with clay ink reserved for the human's moments.

animated line diagramswarm close shadesplotter choreographyannotated product
Overnight hero — warm umber night with serif headline over a time rail
12 · OVERNIGHT

One Night with Athema

The story on a horizontal time axis — 8:00 PM to 7:00 AM along a drafted rail, signals clustering into a proposal, a run, an honest gate, and dawn breaking over two waiting PRs.

horizontal timelineumber → boneproduct frames as storytimestamps as headers
Three-Things hero — giant kinetic type on ultramarine
06 · THREE-THINGS

The Loop, Broken

Opens inside “you fix one thing, three things break” — kinetic type compounding toward chaos until the regression gate snaps the loop and the page locks to order.

kinetic variable typeultramarine × acid × creamchaos → orderreceipts marquee