Claude Skill · arch-motion-pagev0.1 · October 2026

Architecture Motion Page Blueprint

How one YAML spec becomes an animated A4 blueprint — and how this page was made by the skill it explains.

Fig. 1. The amp pipeline. A Director reads the brief and dispatches six specialists; each hands its work to a shared substrate — spec, themes, layout compilers, one GSAP timeline — that emits the page, a poster and an MP4. The dashed edge is the review loop: critique the HTML, edit the spec, rebuild.

Abstract—amp turns a product or technology brief into a single A4 architecture page that builds itself in under three seconds, then keeps breathing with small, meaningful motion. A language model writes a compact spec.yaml; deterministic compilers own every coordinate, colour and keyframe. One source yields a live HTML page, a still poster and a HyperFrames MP4 — and this page was produced by amp from amp's own spec.

I. Introduction

Architecture diagrams tend to fail in one of two ways: static and dense, or animated and vague. The explainers people actually share sit in between — one page that builds in reading order, then loops a short story while every frame stays readable.

amp packages that style as a reusable skill. The model decides what the system is: its tiers, its nodes, the one story worth telling. Code decides where and when.

The Review Loop

A. The Spec Is the Product

Everything on this page comes from spec.yaml: a header, a brand column, an archetype for the figure, three columns of blocks and an optional story. Nothing in it is a pixel; text budgets are checked at build time, so overflow is a build error, not a surprise.

B. Compilers, Not Prompts

Each archetype is a pure function from tiers to boxes, edges and packet routes. Themes are CSS tokens plus a hue palette. The motion compiler turns the layout into one paused GSAP timeline — the only clock the page has — so any frame can be seeked, screenshotted or rendered exactly.

spec.yaml (excerpt)

figure:
  archetype: tiered
  tiers:
    - [director]
    - [researcher, writer, layout,
       motion, artist, reviewer]
    - [spec, themes, archetypes,
       timeline, outputs]
  feedback: { from: outputs }

II. The Motion Grammar

Motion has two phases. The build draws the page in data-flow order: header, root, buses, workers, substrate, results, then the feedback edge. The ambient phase is a heartbeat — the Director pulses, each worker swells as its packet lands, hand-offs flow into the substrate and results travel back up the dashed loop.

Idle effects stay small and seeded: edges march, mascots bob, highlights redraw. Body text never moves.

Table I. Motion inventory of this page

Effect	Phase	Timing
Build-in	build	0 → 3.0 s, reading order
Signal packets	story	560 px/s along edges
Heartbeat	story	1.2 s, two workers a beat
Card breathing	story	+3.5% scale on arrival
Neon wordmark	idle	glow breathes, seeded
Mascot bob	idle	1.9–2.8 s, seeded

If a frame isn't a good poster, the motion is lying.
amp design rule #1

III. The Review Loop

amp screenshots the page at named moments, tiles them into a contact sheet and emits a fit report: column fill, clipped titles, collisions. Critique is written against a rubric, applied to the spec, and the page rebuilds in about a second. Because every rubric item maps to a spec field, fixes stay declarative and the next pass is reproducible.

Fig. 2. This page's own build-in, captured by the review loop.

IV. One Source, Three Outputs

The page is already a HyperFrames composition: a fixed duration, one registered timeline, local fonts and no wall-clock reads. Rendering the MP4 is a single container run, done only after the HTML is approved. Published as one HTML file, the page centres and scales to any window.

Key Takeaways

One spec, three outputs — page, poster and MP4.
Layout and motion are compiled, never improvised.
After the build, every frame is a valid poster.
Review at the HTML stage; render video last.