pbakaus_impeccable/skill/scripts/composition-ingredients.json

{
 "schemaVersion": 1,
 "catalogVersion": "2026-07-20.3",
 "qualityBar": {
  "principle": "Catalog stagings, not styles: every composition must name a structural idea for a surface, a way a surface stages attention, sequence, or manipulation, that stays powerful when dressed in any committed visual identity and could be sketched as a wireframe without losing what makes it thrilling.",
  "rejectIf": [
   "The idea depends on a particular palette, typeface, material, or era to work; strip the skin and nothing structural remains.",
   "The idea is ordinary section scaffolding: a standard hero-features-testimonials flow, tabbed content, or a card grid with no staging thesis.",
   "The idea is a single decorative effect (a hover glow, a parallax layer) rather than a composition that organizes a whole surface or moment.",
   "The staging cannot carry real product content: navigation, a value proposition, and at least one committed action.",
   "The same information and actions cannot survive keyboard use and small screens through an honest structural adaptation.",
   "The idea differs from its nearest catalog neighbor only by subject or metaphor wording rather than by a distinct structural mechanism."
  ],
  "reviewAxes": [
   "staging clarity",
   "any-identity survival",
   "first-viewport power",
   "product legibility",
   "interaction yield",
   "sequence coherence",
   "adaptability",
   "nearest-neighbor distance"
  ]
 },
 "families": [
  {
   "id": "first-viewport",
   "label": "First Viewport",
   "description": "First-viewport dramaturgy: how the opening screen composes attention, scale, and the first action before any scrolling happens."
  },
  {
   "id": "narrative-scroll",
   "label": "Narrative Scroll",
   "description": "Scroll and sequence as storytelling: structures where travel through the page is the narrative mechanism."
  },
  {
   "id": "spatial-navigation",
   "label": "Spatial Navigation",
   "description": "Space as information architecture: surfaces navigated as places, axes, depths, and thresholds rather than lists."
  },
  {
   "id": "reveal-transform",
   "label": "Reveal & Transform",
   "description": "State change as theater: stagings built on concealment, unveiling, inversion, and one surface becoming another."
  },
  {
   "id": "data-dramaturgy",
   "label": "Data Dramaturgy",
   "description": "Information staged as experience: teardowns, counting, reconstruction, annotation, and evidence made spatial."
  },
  {
   "id": "interaction-physics",
   "label": "Interaction Physics",
   "description": "Direct manipulation with body: mass, tension, snap, and consequence as the organizing logic of a surface."
  },
  {
   "id": "collective-fields",
   "label": "Collective Fields",
   "description": "Many-agent compositions: surfaces organized by flocks, cascades, accumulations, and emergent group behavior."
  },
  {
   "id": "working-surfaces",
   "label": "Working Surfaces",
   "description": "How a tool stages work itself: workspace topology, command surfaces, focus management, and the dramaturgy of task, edit, and review."
  },
  {
   "id": "reading-rhythm",
   "label": "Reading Rhythm",
   "description": "How explanation stages comprehension: disclosure pacing, worked examples anchored to prose, marginalia, and the choreography of understanding."
  }
 ],
 "compositions": [
  {
   "id": "collective-fields-addressable-cell-wall",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a landing page staged as a wall of thousands of individually addressable cells acting as one instrument, where small per-cell rotations aggregate into openings, patterns, and sweeping paths across the whole surface",
   "lineage": "Kinetic architecture, brise-soleil facades, flip-dot displays, and serial light sculpture",
   "tags": [
    "addressable-cells",
    "aggregate-pattern",
    "sweeping-paths"
   ],
   "grammar": [
    "Staging/hierarchy: The full wall owns the viewport as one continuous instrument; the strict cell grid rules alignment, active regions lead, labels sit flush to seams.",
    "Sequence/attention: Attention reads the wall at three scales in turn: the whole pattern, the sweeping path crossing it, and the single cell answering under the pointer.",
    "Controls/state: The visitor paints regions, masks areas, and schedules sweeps; cells carry open, shaded, private, and transitioning states.",
    "Adaptation: Small screens recompose the wall into fewer semantic bands; simultaneous movement caps by device capacity"
   ],
   "spark": "The visitor drags a diagonal across the wall and each cell along the stroke turns a few degrees in sequence; the aggregate becomes a moving opening that crosses the whole surface and closes behind itself.",
   "webLeverage": "Instanced rendering animates thousands of meaningful cells while an adaptive tier lowers density.",
   "sourceConceptId": "kinetic-sculpture-automata-louvered-light-wall",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "collective-fields-cascade-trigger",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a landing page staged as a primed chain reaction, where elements are arranged as a visible causal run and the visitor's first click propagates consequence through every section, ending at the signup, with a replay to watch the causality again",
   "lineage": "Rube Goldberg machines, domino runs, circuit simulations",
   "tags": [
    "chain-reaction",
    "single-trigger",
    "replayable-causality"
   ],
   "grammar": [
    "Staging/hierarchy: The primed chain owns the page and threads through every section; the trigger and the terminal action are its two anchored ends.",
    "Sequence/attention: One click starts propagation; attention is towed link by link as each element knocks the next, following authored reading order.",
    "Controls/state: States are primed, propagating, and spent; the visitor can trigger, scrub the propagation, and replay, and spent sections stay fully readable.",
    "Adaptation: Small screens run the chain down a single column"
   ],
   "spark": "You press the single button at the top and watch a toggle tip a counter that spills into the pricing table, each section activating as the impulse passes through it, until the signup field pops open at the far end and sits there blinking.",
   "webLeverage": "A scrubbed timeline of chained CSS and SVG animations makes the propagation replayable at any speed."
  },
  {
   "id": "collective-fields-entrained-flash-field",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a landing page staged as a field of independent pulses finding a shared beat, where scattered units entrain neighbor by neighbor into synchronized waves, a disturbance scatters the rhythm, and the field visibly recovers phase",
   "lineage": "Firefly synchronization science, coupled-oscillator models, crowd clapping studies, and nocturnal light installation",
   "tags": [
    "entrainment",
    "phase-waves",
    "recovery"
   ],
   "grammar": [
    "Staging/hierarchy: The whole field owns the viewport as a dark ground of pulsing points; the traveling phase wave leads once it forms, and a beat score supports along one edge.",
    "Sequence/attention: Attention watches randomness organize: local clusters agree first, agreement spreads as waves, and the shared dark interval between waves becomes the rest.",
    "Controls/state: The visitor taps a tempo, disturbs a region, and watches recovery; the field carries random, entraining, synchronized, and recovering states.",
    "Adaptation: Small screens show the same field as a phase score with fewer agents; luminance stays within safe flash limits"
   ],
   "spark": "The visitor taps four beats into one corner of the field and nearby points adopt the rhythm; the agreement spreads outward in visible waves until the entire page flashes once, together, then rests dark.",
   "webLeverage": "Canvas agent simulation on a shared clock exposes synchronization as an inspectable state.",
   "sourceConceptId": "swarms-flocks-migration-firefly-phase-choir"
  },
  {
   "id": "collective-fields-generative-tile-family",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a landing page staged as a uniform tile field, where every item is drawn from one shared construction kit on one angular grid, family resemblance does the wayfinding, and the active tile inverts figure and ground",
   "lineage": "Olympic pictogram programs, modular sign systems, constructed-figure grids",
   "tags": [
    "shared-kit",
    "uniform-tiles",
    "figure-ground-invert"
   ],
   "grammar": [
    "Staging/hierarchy: strict uniform rows of same-size tiles own the viewport; no tile outranks another until selection inverts one",
    "Sequence/attention: attention scans by resemblance and difference; because every figure obeys the same construction rules, the one variation you seek pops from the field",
    "Controls/state: select, filter, and compose; new items are assembled from the same part kit on the same angles, and active tiles invert while others rest",
    "Adaptation: tiles regrid from sheet to strip without redrawing; figures hinge between poses only on grid angles"
   ],
   "spark": "You scan forty identical-format tiles, and the one whose figure bends differently is the one you came for; you tap it and it inverts against the field.",
   "webLeverage": "SVG part segments animate between grid-snapped poses, one construction system generating the entire family",
   "sourceConceptId": "notation-diagram-systems-aicher-pictograms"
  },
  {
   "id": "collective-fields-particle-consensus",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a landing page staged as one flock of marks, where thousands of independent particles converge to form each section's key figure or word as it enters, disperse on exit, and drift toward the cursor between duties",
   "lineage": "starling murmurations, particle typography, halftime card stunts",
   "tags": [
    "swarm-typography",
    "converge-disperse",
    "shared-medium"
   ],
   "grammar": [
    "Staging/hierarchy: The particle field is the one persistent medium; whatever it currently spells owns the viewport, and static copy supports beneath it.",
    "Sequence/attention: Scroll hands the flock its next target: disperse, travel, re-form; the travel itself carries the eye to the incoming section.",
    "Controls/state: The cursor perturbs idle particles and they recover on their own; states are formed, dispersing, in transit, and idle-orbit between sections.",
    "Adaptation: Small screens run fewer particles forming the same targets"
   ],
   "spark": "As the metrics section arrives, the cloud you have been idly stirring abandons your cursor, streams across the viewport, and tightens into the key figure, and you scroll again mostly to feel it dissolve and re-form into the next claim.",
   "webLeverage": "Canvas particle instancing with per-frame target seeking renders one continuous flock across all sections."
  },
  {
   "id": "collective-fields-presence-field",
   "familyId": "collective-fields",
   "surface": "operate",
   "form": "an app screen staged as inhabited terrain, where other users appear as anonymous cursors, recent trails, and dwell heat over the shared surface, so activity and popularity read as geography instead of counters",
   "lineage": "multiplayer cursors, Figma presence, dwell heatmaps, footpath desire lines",
   "tags": [
    "ambient-presence",
    "activity-as-terrain",
    "shared-surface"
   ],
   "grammar": [
    "Staging/hierarchy: The working surface stays primary; presence renders as a field beneath the content layer, never as chrome or badges above it.",
    "Sequence/attention: Warm regions and fresh trails pull attention toward where others are working; quiet zones read as open ground worth claiming.",
    "Controls/state: Presence has off, ambient, and focused states; hovering a trail shows its recency, and your own trail previews to you before it publishes.",
    "Adaptation: Small screens render heat and trails only for the visible region"
   ],
   "spark": "You open the document and see three cursors clustered at section four with the ground still warm behind them, so you scroll straight there, drop your own cursor into the huddle, and watch a faint trail begin to follow you.",
   "webLeverage": "WebSocket presence streams drive a canvas heat layer composited beneath live DOM content."
  },
  {
   "id": "collective-fields-roving-sweep",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a page lit by one rotating sweep, where traveling highlights scatter from a single center and every section takes its turn being the lit element in rhythm",
   "lineage": "Discotheque lighting, mirror-ball optics, lighthouse beam rotation, dance-floor culture",
   "tags": [
    "single-center",
    "traveling-highlight",
    "rhythmic-turns"
   ],
   "grammar": [
    "Staging/hierarchy: One rotating center owns the composition; sections ring it as a field of cells, and the currently swept cell leads while the rest hold a calm base state.",
    "Sequence/attention: Attention travels with the sweep at a set tempo; every section gets its interval of emphasis, so reading order is rhythmic rather than positional.",
    "Controls/state: The visitor sets tempo and energy, pins the sweep on a section, or lets it run; cells are at rest, approaching, lit, and just-passed.",
    "Adaptation: Phones use fewer, larger cells so each sweep interval stays legible"
   ],
   "spark": "The visitor slows the tempo one notch; the sweep lingers two seconds on the pricing section, its figures brighten in turn, and the whole page keeps time as the light hands emphasis to the next cell.",
   "webLeverage": "A computed CSS highlight sweep driven by one animation clock, synchronized to audio tempo when available and pinnable via state.",
   "sourceConceptId": "music-rhythm-sound-resonance-mirror-ball-midnight"
  },
  {
   "id": "collective-fields-shared-formation",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "many small controlled elements sharing one field, where each participant keeps a single line alive and the group locks into one figure larger than any of them",
   "lineage": "Communal kite festivals, formation flying, flocking behavior, crowd choreography",
   "tags": [
    "shared-field",
    "one-line-each",
    "locked-formation"
   ],
   "grammar": [
    "Staging/hierarchy: The shared field owns the viewport banded by condition zones; the emerging group figure leads while each participant's own element stays marked.",
    "Sequence/attention: Attention alternates between one's own element and the forming figure; signals ripple through neighbors before a formation change commits.",
    "Controls/state: Each participant steers one element, signals a transition, and recovers from slack or crossings; elements are solo, neighboring, locked, and recovering.",
    "Adaptation: Phones show the full formation beside the participant's immediate cues"
   ],
   "spark": "Nine visitors each hold one element; a signal ripples across the field, positions trade in sequence, and the scattered marks lock into a single figure whose edge is the sum of every kept line.",
   "webLeverage": "Realtime multiplayer state over a shared field model, with per-participant drag input and latency-tolerant role cues rendered on canvas.",
   "sourceConceptId": "games-toys-physics-play-cooperative-kite-swarm"
  },
  {
   "id": "collective-fields-synchronized-array",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a landing page staged as a synchronized multi-frame argument, where one idea is proven across many unequal frames firing at once, juxtaposition does the persuading, and any single frame can be pinned to solo while the rest dim to evidence",
   "lineage": "Multiscreen exhibition films, synchronized montage, world's-fair pavilion presentations",
   "tags": [
    "unequal-frames",
    "synchronized-cuts",
    "pin-to-solo"
   ],
   "grammar": [
    "Staging/hierarchy: an array of unequal frames owns the dark field, ranked by size not position; brief caption cards cut between them carry the through-line",
    "Sequence/attention: the whole array advances on one beat; attention traverses by shifting between frames while the sequence moves as a single argument",
    "Controls/state: pin any frame to solo and it brightens to full while the rest dim to peripheral evidence; release and the array resumes as one",
    "Adaptation: small screens collapse the array into a quick-cut single frame keeping the shared beat"
   ],
   "spark": "Seven frames cut on the same beat, each showing a different proof of the same claim; you pin the third, the rest dim, and the argument keeps running around your focus.",
   "webLeverage": "The Web Animations API keeps synchronized video playback across a grid cutting on one shared beat",
   "sourceConceptId": "design-canon-eames-multiscreen-think",
   "provenanceNote": "i think desktop ui needs regen"
  },
  {
   "id": "collective-fields-three-rule-flock",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a field staged as thousands of agents obeying three local rules, where separation, alignment, and cohesion produce one legible collective body, and no single agent knows the shape it is part of",
   "lineage": "Boids simulation, starling murmurations, agent-based modeling practice",
   "tags": [
    "local-rules",
    "emergent-body",
    "tracked-agent"
   ],
   "grammar": [
    "Staging/hierarchy: the flock owns the open field as sole subject; annotations anchor to frame corners, and one tracked agent with its neighborhood can be ringed.",
    "Sequence/attention: attention follows the collective centroid as it tightens, tears, and reforms; perturbations redirect the eye by redirecting the flock.",
    "Controls/state: the three rule weights are the only dials; named perturbations like predators and attractors enter the field, and the pointer joins as one of them.",
    "Adaptation: agent count scales honestly to the device's frame budget"
   ],
   "spark": "You slide cohesion up a notch and the loose cloud snaps into one ribbon; then you drive the pointer through its middle and it tears cleanly around your cursor and heals behind it, and no dot ever knew about the shape.",
   "webLeverage": "GPU instancing renders thousands of live agents while the pointer participates in the simulation itself.",
   "sourceConceptId": "medium-native-boids-murmuration-field",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "collective-fields-worn-paths",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a landing page staged as a worn-path field, where accumulated traces of repeated use gradually wear visible routes into a shared ground, emergent shortcuts run beside official paths, and a route is confirmed only by crossings piling up",
   "lineage": "Desire paths, aggregate footfall mapping, wayfinding and cartography traditions",
   "tags": [
    "accumulated-traces",
    "emergent-routes",
    "wear-as-signal"
   ],
   "grammar": [
    "Staging/hierarchy: the ground plane owns the viewport; formal routes read as drawn lines while emergent traces deepen with use, the confirmed route ranked brightest",
    "Sequence/attention: attention follows wear: faint traces invite inspection, deepening ones show consensus forming, and forks record avoidance and unmet access",
    "Controls/state: compare time periods, filter aggregate patterns, and test a proposed permanent route; traces hold faint, worn, forked, and confirmed states",
    "Adaptation: small screens use cumulative still states stepped through time, and only aggregates ever render, never an identifiable individual trail"
   ],
   "spark": "A faint diagonal brightens with every crossing you replay, forks around an obstacle, and by the last period it reads as the ground's own vote for the shorter way.",
   "webLeverage": "Canvas accumulation layers draw wear from aggregate data while temporal controls step the field through periods",
   "sourceConceptId": "wayfinding-cartography-signage-desire-path-bloom",
   "provenanceNote": "i thought this would be interesting, but the layout didn't really visualize paths blooming well"
  },
  {
   "id": "data-dramaturgy-braided-year",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a record kept as one braided band, where each phase of a cycle thickens the strand with observations and the whole year reads as a single woven circle",
   "lineage": "Harvest-wreath making, agrarian calendars, seed-saving festivals, phenology records",
   "tags": [
    "cyclical-band",
    "accumulating-strand",
    "phase-segments"
   ],
   "grammar": [
    "Staging/hierarchy: The circular band owns the viewport with phases as woven segments; the current segment leads strongest while past cycles ring it for comparison.",
    "Sequence/attention: Attention travels the braid clockwise: entries thicken the strand phase by phase, and the drama is a thin start becoming a heavy completed circle.",
    "Controls/state: The visitor adds an observation, compares two cycles, and traces one item from first entry to closing return; segments are open, thickening, and closed.",
    "Adaptation: Phones unwind the circle into a vertical braid with uncertainty explicit"
   ],
   "spark": "The visitor adds this week's entry and the current segment visibly thickens; laying last year's ring beside it shows the late phase arriving early, and one traced item runs the whole braid from start to return.",
   "webLeverage": "SVG band geometry bound to community records and local data feeds, with per-segment deep links and additive entry state.",
   "sourceConceptId": "ritual-ceremony-festival-harvest-garland-calendar",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "data-dramaturgy-cast-indicator-calendar",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a landing page staged as a monument that writes time with a cast indicator, where one fixed edge sweeps an engraved field daily, reaches different seasonal limits across the year, and reads differently for every chosen place",
   "lineage": "Sundial geometry, land-scale time sculpture, astronomical almanacs, and civic plaza instruments",
   "tags": [
    "cast-indicator",
    "daily-sweep",
    "seasonal-limits"
   ],
   "grammar": [
    "Staging/hierarchy: The engraved field owns the viewport with the fixed edge at its origin; the cast indicator leads as the single reading hand, two seasonal limit bands frame it.",
    "Sequence/attention: Attention follows the indicator's daily sweep across the marks, then its slower seasonal drift between the limit bands, then events pinned where it once stood.",
    "Controls/state: The visitor scrubs date and hour and chooses a place; the field carries dawn, midday, dusk, and night states.",
    "Adaptation: Small screens present the sweep as a banded calendar strip"
   ],
   "spark": "The visitor scrubs the date forward a season and the indicator's midday reach shortens band by band toward its limit; switching place redraws every mark, and yesterday's pinned event no longer lines up with today's line.",
   "webLeverage": "Computed solar geometry per date and location drives one continuously accurate cast angle.",
   "sourceConceptId": "light-shadow-caustics-sundial-shadow-year",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "data-dramaturgy-commitment-lattice",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "a schedule staged as an unbroken time lattice, where time runs across and options run down, an item spans exactly its duration, a live now-line crawls the grid, and circling a cell is a commitment that exposes conflicts instantly",
   "lineage": "TV listings grids, newspaper broadcast pages, calendar day views",
   "tags": [
    "time-lattice",
    "duration-span",
    "conflict-by-overlap"
   ],
   "grammar": [
    "Staging/hierarchy: the lattice owns the screen edge to edge; a sticky option rail leads on one axis, time tracks on the other, and user marks sit above everything.",
    "Sequence/attention: attention enters at the now-line, then scans along the current time column; span width states duration before any label is read.",
    "Controls/state: circling a cell commits to it; two commitments cannot share a time column, so conflicts surface as visible overlap, and marks persist.",
    "Adaptation: the lattice never breaks, it pans with a sticky rail; small screens crop to the next few hours"
   ],
   "spark": "You circle the 8:00 item and immediately see your earlier pick sharing the same column; the overlap is the argument, and you drag one circle to a later slot until the lattice reads clean.",
   "webLeverage": "CSS grid with named time tracks lets a live now-line and sticky rails travel through real markup.",
   "sourceConceptId": "vernacular-ephemera-tv-listings-grid",
   "provenanceNote": "doesn't translate well into a visual world"
  },
  {
   "id": "data-dramaturgy-continuous-trace",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "a monitoring strip staged as one unbroken trace, where time converts to distance along the surface, quiet draws a flat line, events write themselves as amplitude, and the pen never lifts so absence of drama is itself recorded",
   "lineage": "Seismograph drum recorders, EKG strip charts, chart-recorder instrumentation",
   "tags": [
    "time-as-length",
    "never-lifts",
    "amplitude-events"
   ],
   "grammar": [
    "Staging/hierarchy: the live pen point owns the newest edge of the strip; the trace trails from it as the whole record, hour ticks banding the length.",
    "Sequence/attention: attention parks at the pen and is yanked backward only by spikes; scanning history is winding back along the strip, newest ink first.",
    "Controls/state: the feed writes continuously; visitors scrub, zoom, and mark the strip, and a flat line is positive evidence of quiet, not missing data.",
    "Adaptation: the strip wraps like text to any width; a jump control returns to the live pen."
   ],
   "spark": "Six hours of ruled-straight line scroll past under your thumb, and then the trace goes jagged at 4:12; you drop a marker on the first spike and zoom until the single event resolves into three distinct shudders.",
   "webLeverage": "Server-sent events feed the pen live on canvas while the full strip stays scrubbable from local history.",
   "sourceConceptId": "signals-instruments-seismograph-ink-drum",
   "provenanceNote": "doesn't translate well into visual system"
  },
  {
   "id": "data-dramaturgy-counted-units",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a landing page staged as a counted-unit argument, where every quantity is a row of identical repeated symbols instead of a scaled bar, one symbol equals one fixed amount, and comparison happens by eye-counting rows from a shared baseline",
   "lineage": "Vienna Method statistical charts, pictogram statistics, unit-repetition infographics",
   "tags": [
    "unit-repetition",
    "count-not-scale",
    "ranked-rows"
   ],
   "grammar": [
    "Staging/hierarchy: ranked rows of repeated units own the field, flush from a common baseline; the row under comparison carries the emphasis mark",
    "Sequence/attention: the eye counts rather than reads axes; rows arrive in ranked order and the difference between two rows is literally countable",
    "Controls/state: change adds or removes whole units and never stretches one; a partial quantity is honestly cut mid-unit, and each category keeps one symbol forever",
    "Adaptation: rows wrap their units like text while the unit value never changes; units arrive one by one in count order"
   ],
   "spark": "A row of thirty units stands above a row of twelve, and before reading a single label you already know exactly what changed and by how much.",
   "webLeverage": "SVG symbol reuse stamps identical units cheaply and animates each increment as a countable arrival",
   "sourceConceptId": "notation-diagram-systems-isotype",
   "provenanceNote": "doesn't translate well into a visual world"
  },
  {
   "id": "data-dramaturgy-counting-chorus",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a landing page staged as a chorus of identical marks, where every unit of a claim is rendered as one mark, ten thousand users is ten thousand marks, and grouping, highlighting, and one mark singled out as the visitor carry the argument",
   "lineage": "Isotype pictorial statistics, data physicalization, memorial fields of markers",
   "tags": [
    "unit-marks",
    "quantity-as-field",
    "one-is-you"
   ],
   "grammar": [
    "Staging/hierarchy: The mark field owns the viewport; the claim caption and the single highlighted visitor mark outrank the undifferentiated mass.",
    "Sequence/attention: Each scrolled claim regroups the same field: marks cluster, split, and re-sort so every quantity is counted, never summarized.",
    "Controls/state: Hover or tap isolates one mark and its record; states are massed, grouped, and singled, and the visitor's mark persists through every regrouping.",
    "Adaptation: Small screens keep true counts and pack marks tighter behind a touch magnifier"
   ],
   "spark": "The claim says ten thousand teams and you watch the field regroup to prove it, then one mark near the edge lights up labeled as you, and you scroll the next claim mostly to see where your mark ends up in the new grouping.",
   "webLeverage": "Canvas instancing renders tens of thousands of hit-testable marks and regroups them per scroll section."
  },
  {
   "id": "data-dramaturgy-diagnostic-plate",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a landing page staged as a comparison plate, where near-identical alternatives sit in matched poses along one shared ground line, pointer arrows aim straight at the single mark that tells each apart, and every item carries a small inset context map",
   "lineage": "Naturalist field guide plates, identification-arrow systems, side-by-side specimen pages",
   "tags": [
    "matched-poses",
    "diagnostic-arrows",
    "inset-context"
   ],
   "grammar": [
    "Staging/hierarchy: the plate of ranked lookalikes owns the field; names and terse captions sit with each item, and inset context thumbnails ride the corners",
    "Sequence/attention: attention compares across the shared pose first, then follows arrows to the deciding marks in ranked order",
    "Controls/state: selecting an item thickens its arrows and captions while rivals stay pinned beside it; marks light one by one in diagnostic order",
    "Adaptation: the plate narrows before items ever change relative scale; arrows draw one by one"
   ],
   "spark": "Two alternatives look identical until the small arrow lands on one edge detail; the argument your comparison started is settled by a mark the matched pose made visible.",
   "webLeverage": "Hover and focus states drive SVG pointer arrows to each mark while responsive images swap the inset maps",
   "sourceConceptId": "notation-diagram-systems-field-guide-plate"
  },
  {
   "id": "data-dramaturgy-evidence-board",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "an app screen staged as an evidence board, where claims pin to a spatial field with visible threads running to their sources, pulling one thread taut traces a conclusion back through its chain, and unsupported claims visibly dangle",
   "lineage": "investigation walls, argument mapping, citation graphs",
   "tags": [
    "thread-tracing",
    "spatial-claims",
    "visible-provenance"
   ],
   "grammar": [
    "Staging/hierarchy: The board owns the viewport; conclusions pin largest, sources smaller, and threads are drawn objects with their own hit targets.",
    "Sequence/attention: Attention follows thread: selecting a claim pulls its chain taut and dims unrelated pins, so reading order becomes provenance order.",
    "Controls/state: Pan and zoom the board, pin and link items, pull a thread to trace; states are overview, traced-chain, and dangling for orphaned claims.",
    "Adaptation: Small screens trade the free board for a traced-chain list opened per claim"
   ],
   "spark": "You drag a conclusion pin an inch and every thread behind it tightens in sequence, three sources lifting off the board in order, while the one claim with no thread swings loose and you know exactly what to fix before the meeting.",
   "webLeverage": "SVG threads over a pannable surface re-render live as pins drag, with hit areas on the thread paths themselves."
  },
  {
   "id": "data-dramaturgy-evidence-transect",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "an app screen staged as a surveyed evidence transect, where claims about hidden exchange stay pinned to samples, treatments, and controls, disputed pathways stay visibly dashed, and inference is never promoted to observation",
   "lineage": "Isotope-tracer field experiments, transect survey craft, lab notebooks, and evidence-centered interpretation",
   "tags": [
    "provenance-ranked",
    "competing-hypotheses",
    "visible-uncertainty"
   ],
   "grammar": [
    "Staging/hierarchy: The transect field owns the screen with samples in surveyed position; the active sample leads, controls sit with treatments, confidence ranks by every mark.",
    "Sequence/attention: Attention moves along evidence chains from subject to sample to inference; unresolved alternatives interrupt the chain rather than hiding behind it.",
    "Controls/state: The user compares treatments, reveals provenance, and challenges a pathway; marks carry observed, inferred, disputed, absent, and unknown states.",
    "Adaptation: Small screens linearize one evidence chain at a time with its confidence attached"
   ],
   "spark": "The user taps a bright traced mark and the panel shows exactly which sample produced it, which control failed, and two rival explanations still open; nothing on the field claims more than its provenance can carry.",
   "webLeverage": "Deep links to individual evidence chains make any contested reading shareable in its exact state.",
   "sourceConceptId": "forests-canopies-mycelium-mycelial-resource-web",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "data-dramaturgy-light-table-triage",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "an app screen staged as a reviewer's light table, where every candidate item sits in one uniform grid and review is annotation in place: circling picks, cropping, captioning, and stamping each one toward release",
   "lineage": "Photo-agency picture desks, contact sheet editing, light-table and loupe craft",
   "tags": [
    "annotation-triage",
    "uniform-grid",
    "sequence-strip"
   ],
   "grammar": [
    "Staging/hierarchy: the full candidate grid owns the viewport as one lit field; annotations ride on top of items; a strip of picked sequences docks along one edge",
    "Sequence/attention: attention alternates between wide grid scan and close inspection of one item, while marked picks accumulate into an ordered strip for comparison",
    "Controls/state: circle, crop, caption, and stamp directly on items; each carries select, alternate, embargoed, cleared, or shipped state visible in place",
    "Adaptation: the grid collapses to a single linear strip with the inspection view riding the active item"
   ],
   "spark": "You sweep the magnifier across row three, circle one frame, type a one-line caption beneath it, and the pick jumps into the sequence strip already stamped cleared.",
   "webLeverage": "Canvas pan and zoom over a large item grid, drag to reorder the sequence strip, deep links to every marked item",
   "sourceConceptId": "editorial-news-serial-photo-agency-light-table"
  },
  {
   "id": "data-dramaturgy-live-ledger",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a landing page staged as a running ledger, where entries append in real time with timestamps and running totals, the visitor's own arrival becomes a line item, and the balance line doubles as the call to action",
   "lineage": "transaction registers, terminal tail logs, activity feeds made monumental",
   "tags": [
    "append-only",
    "running-total",
    "visitor-as-entry"
   ],
   "grammar": [
    "Staging/hierarchy: The ledger column owns the page; the pinned balance line outranks individual entries, and explanatory sections interleave as annotated rows.",
    "Sequence/attention: New entries append at the tail and nudge the totals; attention cycles between arriving rows and the pinned balance they move.",
    "Controls/state: Visitors pause, filter, and expand any row to its detail; states are live, paused, and filtered, and the action row stays pinned throughout.",
    "Adaptation: Small screens keep one ledger column with condensed rows"
   ],
   "spark": "A row appends carrying your city and a timestamp, the running total ticks up by one, and you realize the pinned balance line asking you to sign is simply the next entry in the ledger, waiting for your name.",
   "webLeverage": "Server-sent events append real DOM rows while a sticky footer recomputes running totals in place."
  },
  {
   "id": "data-dramaturgy-opening-and-race",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a landing page staged as a sudden opening and the race to fill it, where one gap in a dense field admits a moving column of opportunity and tracked contenders grow toward it across scrubbed years until the gap closes overhead",
   "lineage": "Forest-gap succession ecology, growth-race charts, tracked longitudinal studies, and spotlight staging",
   "tags": [
    "resource-spotlight",
    "tracked-race",
    "closing-window"
   ],
   "grammar": [
    "Staging/hierarchy: The single opening owns the viewport as a bright vertical well; contenders rank inside its footprint, and the surrounding dense field frames the stakes.",
    "Sequence/attention: Attention follows the opening's moving footprint, then per-contender growth as years advance, ending at the moment the field closes overhead.",
    "Controls/state: The visitor scrubs years, shifts the source angle, and selects contenders; states are shaded, released, competing, and overtopped.",
    "Adaptation: Small screens show a sectional race chart with the moving footprint as a band"
   ],
   "spark": "The visitor drags the year forward and the tracked contenders inch upward inside the bright footprint; one pulls ahead, its label overtakes the rest, and at the final scrub the window seals above the losers.",
   "webLeverage": "Scrubbed time state driving measured element heights turns competition into inspectable layout.",
   "sourceConceptId": "forests-canopies-mycelium-canopy-gap-sunwell",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "data-dramaturgy-periodic-sweep-score",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a landing page staged as a periodic sweep instrument, where a rotating beam illuminates the field on a strict beat and every rotation writes one new row into a stacked timing score below",
   "lineage": "Radio-astronomy pulse timing, lighthouse sweep rhythm, strip-chart recorders, and kinetic light environments",
   "tags": [
    "periodic-beat",
    "sweep-reveal",
    "timing-rows"
   ],
   "grammar": [
    "Staging/hierarchy: One rotating source owns the center; the dark field around it holds content lit only in passing, and a stacked score of past rotations supports below.",
    "Sequence/attention: Attention follows the sweep and reads content in beat order; the score accumulates one row per cycle so history reads downward.",
    "Controls/state: The visitor scrubs phase and tunes cycle rate; states are silent, aligned, detected, and drifting.",
    "Adaptation: Small screens flatten rotation into a linear pulse score"
   ],
   "spark": "The beam passes and one claim lights for a moment; the visitor drags the phase back to hold it in the light, and below, the score shows every rotation since arrival as its own ruled row.",
   "webLeverage": "A shared requestAnimationFrame clock locks sweep position, pulse sound, and score rows to one strict beat.",
   "sourceConceptId": "galaxies-nebulae-deep-time-pulsar-lighthouse",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "data-dramaturgy-product-teardown",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a landing page staged as a numbered teardown, where the subject hangs exploded into labeled parts with leader lines into a linked ledger, selecting any part isolates it, and reassembly is the path to the committed action",
   "lineage": "anatomical plates, iFixit teardowns, patent drawings, parts catalogs",
   "tags": [
    "exploded-view",
    "linked-ledger",
    "part-isolation"
   ],
   "grammar": [
    "Staging/hierarchy: The exploded subject owns the center; the numbered ledger runs alongside, and leader lines bind each part to its entry.",
    "Sequence/attention: Scroll walks the numbering: each step pulls one part forward, dims the rest, and brings its ledger entry level with it.",
    "Controls/state: Selecting a part or its entry isolates the pair; states are exploded, part-isolated, and reassembled, and reassembly ends at the action.",
    "Adaptation: Narrow screens stack ledger entries beneath the diagram with the current part pinned above"
   ],
   "spark": "You tap part 07 and the rest of the assembly recedes, its ledger row slides level with it to explain what it does, and when you finish the list the parts glide home into one whole object with the commit button seated on top.",
   "webLeverage": "SVG leader lines and part outlines stay bound to their ledger rows through scroll-linked positioning."
  },
  {
   "id": "data-dramaturgy-routed-triplicate",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "a working form staged as one request routed through visible officialdom, where numbered fields set the reading order, completion lands as a stamp, and duplicate copies show who holds the request at every step",
   "lineage": "Triplicate carbon forms, rubber date stamps, bureaucratic routing slips",
   "tags": [
    "numbered-route",
    "completion-stamps",
    "copy-custody"
   ],
   "grammar": [
    "Staging/hierarchy: the form document owns the screen; its numbered fields are the structure, and the copies fan behind it showing custody.",
    "Sequence/attention: progress follows the form's own numbering; attention moves box to box, and the next open field is always the loudest thing on screen.",
    "Controls/state: filling a field is entry, completing a step lands a stamp; each copy mirrors state live and shows which party holds it now.",
    "Adaptation: the sheet linearizes field by field on small screens"
   ],
   "spark": "You complete field 14 and a stamp lands on it; across the fanned copies the same field darkens at once, and the copy held by the approving party moves to the front of the stack, now waiting on them, not you.",
   "webLeverage": "Synchronized form state across copies, with each numbered field a deep-linkable, validated input.",
   "sourceConceptId": "vernacular-ephemera-triplicate-counter-forms",
   "provenanceNote": "rejected, but the paper cutout thing is interesting for future concepts"
  },
  {
   "id": "data-dramaturgy-ruled-timeline",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a landing page staged as a ruled score, where events sit on fixed horizontal lines with vertical position as value and horizontal distance as time, measures bar the timeline into countable units, and a playhead sweeps it live",
   "lineage": "Musical staff notation, engraved score conventions, timeline notation systems",
   "tags": [
    "value-time-grid",
    "barred-measures",
    "sweeping-playhead"
   ],
   "grammar": [
    "Staging/hierarchy: the ruled system owns the width like set lines of verse; named waypoint marks rank above the bars as the timeline's addresses",
    "Sequence/attention: attention rides the playhead left to right in tempo; the sounding measure carries a highlight while past and future bars rest plain",
    "Controls/state: play, pause, jump to a waypoint, and inspect any event; modifier marks change state for exactly one measure before reverting",
    "Adaptation: systems break at bar lines and rewrap like lines of text"
   ],
   "spark": "You tap waypoint D and the playhead lands there; every element on the ruled lines finds the same instant, and the current bar takes the highlight as it sounds.",
   "webLeverage": "Web Audio scheduling synchronizes a sweeping playhead with SVG-rendered ruling that stays crisp at any zoom",
   "sourceConceptId": "notation-diagram-systems-staff-notation"
  },
  {
   "id": "data-dramaturgy-scrubbed-datum",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "one fixed plan re-zoned by a scrubbed variable, where a rising and falling datum decides which bands are usable and past extremes stay marked on the geometry",
   "lineage": "Tide tables, amphibious coastal architecture, flood-mapping sections, stepped waterfront design",
   "tags": [
    "time-scrub",
    "elevation-bands",
    "datum-line"
   ],
   "grammar": [
    "Staging/hierarchy: The plan and its section share the viewport, banded by horizontal datum lines; the current level leads and past extremes persist as marked bands.",
    "Sequence/attention: Attention follows the scrub: advancing time claims some bands and exposes others, and the moment a band changes role is the dramatic beat.",
    "Controls/state: The visitor scrubs time and conditions, compares usable zones, and marks thresholds; bands are clear, transitioning, claimed, and newly exposed.",
    "Adaptation: Phones pair plan and section as stacked plates with discrete key states"
   ],
   "spark": "The visitor scrubs six hours forward; the middle bands of the plan flip from path to pool, a marked line records the new extreme, and the section shows exactly which ledge remains usable.",
   "webLeverage": "A range scrub bound to live data drives SVG band states in plan and section, with each level configuration addressable as shareable state.",
   "sourceConceptId": "architecture-inhabitable-space-tidal-courtyard",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "data-dramaturgy-specimen-waterfall",
   "familyId": "data-dramaturgy",
   "surface": "persuade",
   "form": "a landing page staged as a specimen waterfall, where one subject repeats down a ramp of parameter steps from enormous to minute, margin labels index every step, and a single live input swaps the sample in all steps at once",
   "lineage": "Foundry type specimen books, size waterfalls, trade catalog showings",
   "tags": [
    "parameter-ramp",
    "margin-index",
    "live-sample"
   ],
   "grammar": [
    "Staging/hierarchy: the waterfall owns the page top to bottom; the step in focus reads full strength while margin labels rank the ramp like depth marks",
    "Sequence/attention: attention runs down the ramp from loudest to smallest; scroll position and the margin index always agree on where you are",
    "Controls/state: type a trial line and it replaces the sample in every step simultaneously; the live step is marked while the rest hold neutral",
    "Adaptation: the ramp narrows to fewer steps as the viewport shrinks with labels pinned"
   ],
   "spark": "You type your own line into the ramp and watch it thunder at the top and whisper at the bottom in the same instant, the margin counting the steps between.",
   "webLeverage": "Variable parameters animate the whole ramp live, and one text input re-renders every showing at once",
   "sourceConceptId": "typography-calligraphy-writing-foundry-specimen-book"
  },
  {
   "id": "data-dramaturgy-sweep-and-decay",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "a monitoring screen staged as a circular sweep, where the viewer sits at center, a radial arm refreshes each bearing once per pass, and every contact's age is legible as its fade from fresh bloom toward ambient dark",
   "lineage": "Radar plan-position indicators, sonar rooms, air-traffic scopes",
   "tags": [
    "egocentric-polar",
    "sweep-refresh",
    "age-as-fade"
   ],
   "grammar": [
    "Staging/hierarchy: one circle owns the screen with self at center; range rings and bearing marks structure it, and fresh contacts outrank fading ones.",
    "Sequence/attention: the sweeping arm paces attention around the field; each pass repaints one bearing at a time, so the eye rides the arm to whatever just bloomed.",
    "Controls/state: nothing updates until the sweep crosses it; contacts hold bearing and range, and their brightness is an honest clock of how stale they are.",
    "Adaptation: the scope stays a circle at any size while rings rescale"
   ],
   "spark": "The arm crosses the upper quadrant and a new contact blooms where nothing was last pass; you check its distance against the rings while it is still bright, because in three more sweeps it will have faded into the maybe.",
   "webLeverage": "Canvas afterglow renders persistence honestly; live events surface only when the animated sweep reaches their bearing.",
   "sourceConceptId": "signals-instruments-radar-ppi-sweep"
  },
  {
   "id": "data-dramaturgy-visible-transit",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "an operations screen staged as a visible transit network, where stations connect by drawn routes, every in-flight request is physically somewhere along one, and arrival, queue, and jam are events you watch happen at stations",
   "lineage": "Pneumatic tube systems, package-tracking maps, air-traffic strip boards",
   "tags": [
    "station-network",
    "in-transit-position",
    "watchable-async"
   ],
   "grammar": [
    "Staging/hierarchy: the route network owns the upper field; stations anchor its edges and corners, and traveling items are the brightest moving layer.",
    "Sequence/attention: attention follows whatever is in flight; a send launches the eye along its route, and arrivals pull focus to the receiving station.",
    "Controls/state: sending is choosing a destination on the network; items hold exactly one position at a time, and queue, arrival, and jam are station-side states.",
    "Adaptation: the map simplifies to origin and destination on small screens"
   ],
   "spark": "You dispatch a request and watch it commit to the long route, pass two stations without stopping, and stall behind a jam; the problem is not a spinner, it is a place, and you can see exactly which station owns it.",
   "webLeverage": "Server-sent progress animates along SVG route paths, so async state has a literal position.",
   "sourceConceptId": "signals-instruments-pneumatic-tube-atrium",
   "provenanceNote": "cheap fake brass ui"
  },
  {
   "id": "first-viewport-aperture-projection-room",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged as a dark chamber with one aperture, where the live subject outside enters only as a projection cast across the interior, and narrowing the opening trades brightness for focus under the visitor's control",
   "lineage": "Camera-obscura craft, site-specific optical installation, pinhole photography, and darkened exhibit rooms",
   "tags": [
    "single-aperture",
    "indirect-projection",
    "focus-tradeoff"
   ],
   "grammar": [
    "Staging/hierarchy: The dark interior owns the viewport; the projected image leads across its largest surface, the aperture is the single bright origin, their axis rules the layout.",
    "Sequence/attention: Attention enters at the aperture, follows the beam to the projection, and reads the subject indirectly; changes outside register as movement inside.",
    "Controls/state: The visitor resizes the aperture and repositions the receiving surface; the image carries dim, focused, inverted, and blurred states.",
    "Adaptation: Small screens split exterior source and interior projection into paired views; projection movement mirrors the real source and pauses under"
   ],
   "spark": "The visitor pinches the aperture smaller and the sprawling dim image contracts into a sharp inverted scene on the far wall; opening it floods the room soft and bright again, and the tradeoff is theirs to hold.",
   "webLeverage": "Live video or simulated feeds mapped through CSS filters make aperture size a real optical control.",
   "sourceConceptId": "light-shadow-caustics-camera-obscura-world"
  },
  {
   "id": "first-viewport-constant-silhouette",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged around one fixed silhouette, where the outline never moves from center while entire scenes swap inside it, and a two-word title beneath keeps its first word constant and lets the second name the current variant",
   "lineage": "Long-running silhouette ad franchises, variant-format campaign systems",
   "tags": [
    "fixed-silhouette",
    "interior-scene-swap",
    "two-word-state"
   ],
   "grammar": [
    "Staging/hierarchy: the silhouette owns the exact center of every screen; the scene inside it carries all variation, and the two-word title beneath is the only fixed text",
    "Sequence/attention: browsing means swapping the scene inside the outline; the format never changes, so attention goes entirely to what fills it",
    "Controls/state: hover previews a variant scene inside the outline; selection commits it and retitles the second word, which is the whole state display",
    "Adaptation: the silhouette scales but never leaves center with the title holding beneath; scene swaps dissolve slowly"
   ],
   "spark": "You hover a variant and a new scene pours into the unchanged outline; you commit, the second word of the title flips, and the format has said everything again.",
   "webLeverage": "SVG clip-path holds one constant silhouette while canvas paints each variant scene inside it",
   "sourceConceptId": "brand-identity-canon-absolut-silhouette-campaign",
   "provenanceNote": "doesn't really create a visual world"
  },
  {
   "id": "first-viewport-converging-pair",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a hero staged as two subjects on approach, where mirrored columns tell parallel stories on one shared baseline, a bridge forms between them as they near, and at contact the two texts merge into a single centered block",
   "lineage": "Galaxy-collision visualizations, split-screen convergence narratives, before-and-after diptychs",
   "tags": [
    "mirrored-columns",
    "connecting-bridge",
    "staged-merger"
   ],
   "grammar": [
    "Staging/hierarchy: the two subjects own opposite halves in mirror symmetry; the bridge between them ranks above either once it forms, the merged state above all.",
    "Sequence/attention: attention alternates between the parallel columns, then locks onto the bridge; scrubbing encounter time walks the pair through named stages.",
    "Controls/state: the visitor scrubs a reversible timeline and isolates either subject; separate, interacting, and merged are explicit, addressable stages.",
    "Adaptation: the two histories stack before their convergence point on small screens"
   ],
   "spark": "You drag the encounter slider forward and the two columns lean toward each other; a thin bridge of shared material connects them, and one more notch fuses their captions into a single block naming what they become together.",
   "webLeverage": "A scrubbed timeline binds both halves to one state, so every encounter stage is a shareable position.",
   "sourceConceptId": "galaxies-nebulae-deep-time-colliding-galaxy-pair",
   "provenanceNote": "great concept, but the visual world is not complete"
  },
  {
   "id": "first-viewport-conversational-form",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged as a live intake, where one oversized question with an input is the hero and each answer rewrites the page around the visitor, so no brochure precedes participation",
   "lineage": "typeform-era conversational UI, mad-libs interfaces, intake interviews",
   "tags": [
    "input-first",
    "page-rewrites",
    "question-sequence"
   ],
   "grammar": [
    "Staging/hierarchy: the current question and its input own the viewport; prior answers stack as a compressed transcript; proof appears only as answers earn it",
    "Sequence/attention: attention holds on one question at a time; each submission moves the answered line into the transcript and rewrites the surrounding content",
    "Controls/state: typed, tapped, or keyboard-selected answers advance the sequence; any answer is editable from the transcript; the final state is a configured offer with one action",
    "Adaptation: the one-question-per-screen rhythm is already small-screen native"
   ],
   "spark": "The page asks one question in type the size of your hand; you type three words, the inventory behind the input reshuffles to match, and the next question already knows what you meant.",
   "webLeverage": "form state driving live DOM rewrites, with input events, managed autofocus, and view transitions between question states"
  },
  {
   "id": "first-viewport-corner-block-crop",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged as one hard-cropped image with a single dense corner block, where the subject owns nearly the entire field and every claim, credit, and navigation item is ranked line by line in that one corner",
   "lineage": "Jazz LP sleeve design, hard-crop editorial photography, ranked credit blocks",
   "tags": [
    "hard-crop",
    "corner-block",
    "single-image-field"
   ],
   "grammar": [
    "Staging/hierarchy: the cropped subject owns the field edge to edge; one corner block holds title, ranked supporting lines, and all wayfinding in strict order",
    "Sequence/attention: the eye enters through the crop, travels the subject's strongest line, and lands on the corner block where every action waits",
    "Controls/state: the item in play takes the emphasis state while the rest sit muted, and the block's ranked lines double as the entire menu",
    "Adaptation: as the frame narrows the crop tightens and the corner block slides along the edge to stay clear of the subject; motion reduces to still cuts between crops"
   ],
   "spark": "The subject's shoulder becomes architecture at this crop; your eye slides down its edge straight into the corner block, where the third ranked line is the one action to take.",
   "webLeverage": "CSS object-position and container queries steer the crop per viewport while the corner block repositions along the frame edge",
   "sourceConceptId": "posters-covers-sleeves-blue-note-sleeve"
  },
  {
   "id": "first-viewport-cropped-giant",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged as an extreme close-up, where the product fills the first screen at ten times scale and is cropped hard at the viewport edges, and scroll pulls the camera back until the whole subject is framed",
   "lineage": "macro product photography, museum object pages, cinematic detail-first openings",
   "tags": [
    "extreme-crop",
    "zoom-out-reveal",
    "hotspot-annotation"
   ],
   "grammar": [
    "Staging/hierarchy: the cropped detail owns the entire viewport; hotspot annotations support it; the headline and primary action wait until the pull-back completes",
    "Sequence/attention: attention starts on the detail at the crop, follows hotspots outward, then scroll drives a continuous zoom-out that reveals context in stages",
    "Controls/state: scroll scrubs the zoom level; tapping a hotspot pins its caption; the resting state frames the full subject with the primary action beside it",
    "Adaptation: small screens crop tighter and step the zoom in discrete stops"
   ],
   "spark": "You are standing too close: one seam fills the screen, a marker names it, and each notch of scroll steps the camera back until the whole object lands in frame next to the one button.",
   "webLeverage": "scroll-linked transform scale on a single oversized element, with position sticky holding the frame steady while the crop resolves"
  },
  {
   "id": "first-viewport-crossing-seam",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a hero divided by one vertical threshold band, where the two sides hold different states of the same offer and anything crossing the band changes in visible steps",
   "lineage": "Practical stage weather, water-curtain scenography, threshold choreography, split-stage drama",
   "tags": [
    "vertical-seam",
    "stepwise-crossing",
    "dual-state"
   ],
   "grammar": [
    "Staging/hierarchy: The seam leads; near side and far side share the viewport as contrasting states of one subject, and the element mid-crossing is the focal point.",
    "Sequence/attention: Attention starts on the near side, follows a crossing through the band step by step, and lands on the far side's changed reading of the same content.",
    "Controls/state: The visitor starts a crossing, holds mid-band, and compares sides; elements are near-side, entering, immersed, emerging, and changed.",
    "Adaptation: Phones rotate the seam to a horizontal band between stacked halves"
   ],
   "spark": "The visitor sends the product card across the band; it changes in three visible steps, the headline breaks exactly at the seam, and the far side re-captions the same card in its own state.",
   "webLeverage": "A clip-path seam splits the hero into two synchronized renderings while a view transition steps the crossing element between states.",
   "sourceConceptId": "stagecraft-theater-lighting-rain-curtain-threshold",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "first-viewport-declarative-bars",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged as a direct address, where full-bleed found imagery is cut by stacked message bars speaking in the second person, the bars double as the controls, and the sentence tells the visitor exactly where to go next",
   "lineage": "Declarative text-over-photography art, protest poster address, message-bar composition",
   "tags": [
    "second-person-address",
    "bars-as-controls",
    "full-bleed-ground"
   ],
   "grammar": [
    "Staging/hierarchy: one full-bleed image is the ground; stacked bars carrying a broken sentence pin to its strong horizontals and outrank everything else",
    "Sequence/attention: the sentence reads bar by bar down the stack; each screen makes one declaration and points at exactly one continuation",
    "Controls/state: bars are the buttons; press inverts a bar's figure and ground, and the second-person copy tracks state: your draft, your error, your turn",
    "Adaptation: bars restack with fewer words per line as frames narrow while the image crops tighter to its subject; bars slide in once"
   ],
   "spark": "A wall-sized face fills the frame and a bar cuts across it addressing you directly; you press the sentence itself and it inverts under your finger as the page obeys.",
   "webLeverage": "CSS blend modes press any photograph to a unified ground while sticky-positioned bars ride the scroll",
   "sourceConceptId": "brand-identity-canon-kruger-declarative-bars",
   "provenanceNote": "seems hard to construct a full visual world from that"
  },
  {
   "id": "first-viewport-empty-stage-flood",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged as a blackout opening, where the first screen holds one line of type on a bare ground and the first scroll or click triggers a single choreographed entrance that floods the page with all of its content",
   "lineage": "theater blackout openings, curtain reveals, product launch keynotes",
   "tags": [
    "empty-first-screen",
    "triggered-entrance",
    "single-reveal"
   ],
   "grammar": [
    "Staging/hierarchy: before the trigger, one sentence owns the viewport alone; after it, the arriving sections own the page and the sentence shrinks into the header",
    "Sequence/attention: attention pools on the lone line, the visitor acts, and the entrance choreography assigns each arriving block an order that becomes the reading order",
    "Controls/state: two page states, bare and flooded; first scroll, click, or keypress flips them; the flood is one-way and the action arrives with the final block",
    "Adaptation: small screens flood in the same order with shorter travel, keeping both bare and full states reachable"
   ],
   "spark": "One sentence sits alone on the screen and nothing else; you scroll a centimeter and the whole page arrives at once in strict order, nav first, proof last, the button landing under your thumb.",
   "webLeverage": "a one-time state flip driving staggered css transitions across every section, gated behind the first scroll or pointer event"
  },
  {
   "id": "first-viewport-evidenced-absence",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a hero built around a deliberate empty center, where mounts, traces, records, and testimony ring the absence and establish the weight of what is not shown",
   "lineage": "Empty-plinth memorials, evidence displays, restitution museology, reliquary presentation",
   "tags": [
    "empty-center",
    "evidence-ring",
    "maintained-absence"
   ],
   "grammar": [
    "Staging/hierarchy: The empty mount owns the center of the viewport; surrounding evidence supports in ranked captions, and nothing is permitted to fill the void.",
    "Sequence/attention: Attention circles: from the absence to each trace and back, with testimony and records read as witnesses that keep pointing at the center.",
    "Controls/state: The visitor aligns evidence over the void, separates fact from speculation, and hears why the emptiness is maintained; traces are latent, aligned, and cited.",
    "Adaptation: Phones compose the ring as one quiet vertical sequence around a persistent empty frame; no reveal effects are forced and every trace reads as text."
   ],
   "spark": "The visitor drags a recorded outline over the empty mount; four fixing points align with the marks that remain, a document confirms the fit, and the center stays empty on purpose while the claim beneath it goes live.",
   "webLeverage": "Registered SVG overlays align evidence to the empty frame while source-level citations and audio testimony stay in the accessible document.",
   "sourceConceptId": "exhibition-museum-curation-absence-vitrine",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "first-viewport-generated-screening",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a hero staged as a live screening generated entirely from code, where scenes cut on the soundtrack's structure, a resource counter is part of the story, and the constraint being honored on stage is the proof of capability",
   "lineage": "Demoscene size-limited intros, live-coding performances, title-sequence craft",
   "tags": [
    "procedural-proof",
    "authored-sequence",
    "visible-constraint"
   ],
   "grammar": [
    "Staging/hierarchy: the generated performance runs full bleed with no chrome; a thin lower ribbon carries credits and the one action, the counter sits corner-pinned.",
    "Sequence/attention: the sequence is authored and time-based, scenes cutting on the sound's structure; the counter's stillness against the spectacle is the argument.",
    "Controls/state: everything visible generates live from small seeds; quality tiers are declared honestly, and the visitor can pause, skip, or replay scenes.",
    "Adaptation: resolution and effects scale to the real frame budget; a captured fallback preserves the sequence when live generation is unavailable."
   ],
   "spark": "The counter in the corner never moves while a terrain that should not fit in it rolls past; you pause mid-scene, read the one-line claim on the ribbon, and let the rest of the sequence finish making the case.",
   "webLeverage": "WebGL and Web Audio generate the whole audiovisual live from code, proving the medium instead of streaming it.",
   "sourceConceptId": "medium-native-demoscene-size-limit-intro"
  },
  {
   "id": "first-viewport-grid-break-focal",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged as a rule and its violation, where a strict visible grid is established immediately and exactly one element breaks it, crossing columns or rotating out of alignment, and that violation is the primary action",
   "lineage": "Swiss grid discipline, Brockmann-school layout, editorial rule-breaking",
   "tags": [
    "visible-grid",
    "single-violation",
    "focal-by-exception"
   ],
   "grammar": [
    "Staging/hierarchy: the exposed grid owns the ground; obedient modules support; the one element that crosses, rotates, or bleeds is the focal point and the primary action",
    "Sequence/attention: the eye scans the regular columns, catches the violation because everything else obeys, and each later section repeats the rhythm of order then break",
    "Controls/state: hovering the violator previews what it does; activating it is the committed action; every other module stays strictly clickable within its cell",
    "Adaptation: small screens keep fewer ruled columns and one violation per screen; the break is positional, not animated"
   ],
   "spark": "Every module snaps to the ruled columns except one plate jutting across three of them; you scan the tidy rows, land on the trespasser, and the trespasser is the button.",
   "webLeverage": "css grid with its lines drawn as visible borders, and one item spanning tracks or transformed out of alignment while remaining in document flow"
  },
  {
   "id": "first-viewport-inverted-zoom-out",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged in reverse, where the first screen shows the end state, a finished result or closing testimonial, and each scroll zooms out one level of context until the full offer is framed last",
   "lineage": "cold-open cinema, powers-of-ten reversed, mystery-first storytelling",
   "tags": [
    "reverse-order",
    "context-zoom",
    "end-first"
   ],
   "grammar": [
    "Staging/hierarchy: the outcome owns the opening viewport with no explanation; each wider frame owns its own screen; the offer and action own the final, widest frame",
    "Sequence/attention: curiosity runs backward: each scroll answers where the previous screen came from, so attention travels from result to cause to offer",
    "Controls/state: scroll steps outward one context level at a time; a persistent depth indicator shows how far out you are; the action unlocks at the full frame",
    "Adaptation: small screens keep the same outward steps as full-screen frames, preserving the outward order"
   ],
   "spark": "The first thing you see is the finished result with no caption; you scroll and the frame widens to show what made it, then wider again, until the whole system that produced it stands framed above one button.",
   "webLeverage": "scroll-driven scale and counter-scale on nested frames, each context level a layer keyed to a shared scroll timeline"
  },
  {
   "id": "first-viewport-live-mirror",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged as a mirror, where the opening statement is something the page already knows to be true, the visitor's local time, cursor behavior, or the presence of others, so the surface proves it is alive before any pitch",
   "lineage": "net-art mirrors, personalized dynamic sites, ambient data displays",
   "tags": [
    "visitor-reflection",
    "live-data-opening",
    "proof-before-pitch"
   ],
   "grammar": [
    "Staging/hierarchy: the true observed fact owns the viewport as the headline; the mechanism that observed it supports; the pitch and action follow only after the proof",
    "Sequence/attention: attention snags on the accurate personal detail, then transfers to how it was known, and the page converts that transfer into the product argument",
    "Controls/state: the mirror updates live as the visitor moves, waits, or resizes; a visible toggle pauses reflection; the action inherits context from what was observed",
    "Adaptation: small screens mirror touch and orientation instead of cursor"
   ],
   "spark": "The headline names your local time and how long you have hovered without clicking; you move the cursor and the sentence revises itself, and the page has your attention before it has said what it sells.",
   "webLeverage": "client-side signals, pointer events, time, viewport size, and visibility state composed into live text without a server round-trip"
  },
  {
   "id": "first-viewport-monumental-berth",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a hero staged as one monumental subject at rest, where the product dwarfs the frame, a single human-scale reference makes its size legible, and its surface is an addressable strip of marks, history, and openings to inspect",
   "lineage": "Orbital spacecraft photography, dry-dock ship portraits, monumental architecture reveals",
   "tags": [
    "monumental-scale",
    "human-reference",
    "addressable-surface"
   ],
   "grammar": [
    "Staging/hierarchy: the subject's silhouette owns the frame edge to edge, deliberately overflowing it; the tiny reference figure ranks second, labels stay marginal.",
    "Sequence/attention: attention travels the subject's long spine from one registration mark to the next; light moving across the surface paces the reading.",
    "Controls/state: orbit, inspect, illuminate, and annotate are the verbs; dormant, active, serviced, and ready are declared states of the whole subject.",
    "Adaptation: the surface unrolls into an addressable linear strip on small screens"
   ],
   "spark": "You drag along the spine and the frame never fits all of it; a suited figure drifts past an opening large enough to swallow a building, and the coordinate readout tells you that you have inspected four percent of the subject.",
   "webLeverage": "Deep-linked surface coordinates plus streamed level of detail let visitors inspect any point of a subject far larger than the frame.",
   "sourceConceptId": "galaxies-nebulae-deep-time-orbital-starship-berth",
   "provenanceNote": "good idea, bad visual system"
  },
  {
   "id": "first-viewport-pointer-protagonist",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a hero staged as an open plane of items where the pointer is the protagonist, and the selection rectangle, the drag ghost, and the changing cursor shape carry the entire drama of what is possible",
   "lineage": "Early desktop metaphor interfaces, rubber-band selection conventions, cursor-centric net art",
   "tags": [
    "pointer-drama",
    "rubber-band-selection",
    "cursor-narration"
   ],
   "grammar": [
    "Staging/hierarchy: one flat plane of items owns the viewport with a thin fixed bar for navigation; nothing leads until the pointer moves, then its act leads.",
    "Sequence/attention: attention is wherever the cursor is; the stretching selection rectangle gathers items into focus and the drag carries them across the plane.",
    "Controls/state: hover, press, drag, and drop are the whole state machine; the cursor changes shape to narrate what each target affords before commitment.",
    "Adaptation: touch replaces the cursor with a visible halo and the same states; keyboard grows the selection by arrow steps, which also serves"
   ],
   "spark": "The plane sits still until you move; you sweep the dotted rectangle across five items, they light as one hand of cards, and you drag their ghost toward the single action the page has been waiting to offer.",
   "webLeverage": "Pointer events and setPointerCapture make the cursor the instrument, with drag-and-drop as native grammar.",
   "sourceConceptId": "medium-native-cursor-marquee-desk"
  },
  {
   "id": "first-viewport-split-argument",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged as a two-sided argument, where the viewport splits into halves that oppose each other, the divider is draggable, and every scroll advances both sides in counterpoint until they merge at the primary action",
   "lineage": "split-screen cinema, before-and-after comparison sliders, debate formats",
   "tags": [
    "split-viewport",
    "draggable-divider",
    "convergent-resolution"
   ],
   "grammar": [
    "Staging/hierarchy: two half-screen columns share the viewport equally; the divider is the only element crossing both; the merged final panel owns the action",
    "Sequence/attention: attention alternates left and right as paired sections advance together, and the narrowing gap between the halves signals approach to resolution",
    "Controls/state: dragging the divider rebalances the halves; scroll advances both tracks in lockstep; the merged state collapses two columns into one with the action",
    "Adaptation: small screens stack the pair as alternating full-width panels with a persistent side toggle"
   ],
   "spark": "You drag the seam left to give the problem more room, scroll once, and both halves answer each other again, the gap closing a little each turn until the two columns fuse behind a single button.",
   "webLeverage": "a pointer-driven drag on the divider paired with two synchronized scroll-linked tracks, built from css grid and one shared scroll position"
  },
  {
   "id": "first-viewport-type-as-architecture",
   "familyId": "first-viewport",
   "surface": "persuade",
   "form": "a landing page staged as inhabited typography, where the headline is set large enough to become the layout itself and navigation, imagery, and the primary action live inside counters, between letterforms, and along baselines",
   "lineage": "typographic poster tradition, concrete poetry, Awwwards-era type-driven sites",
   "tags": [
    "type-as-structure",
    "inhabited-letterforms",
    "single-headline"
   ],
   "grammar": [
    "Staging/hierarchy: one headline owns the full viewport as structure; nav, imagery, and the primary action occupy counters, apertures, and baseline shelves inside it",
    "Sequence/attention: reading order is the letter order; the eye travels the word first, discovers the embedded elements on a second pass, then lands on the action",
    "Controls/state: hover or focus on a letterform reveals its embedded content; the primary action sits in one counter and stays reachable in keyboard tab order",
    "Adaptation: small screens stack the word into a column of letters, one embedded element per letterform"
   ],
   "spark": "You read the single word filling the screen, notice the whole nav tucked inside one counter, trace the baseline to a photograph shelved on it, and press the button seated on the crossbar.",
   "webLeverage": "css clip-path and shape-outside let live content wrap and sit inside real text set at viewport units, so the letterforms stay selectable structure"
  },
  {
   "id": "interaction-physics-beam-board",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "a ruled board played through projected paths, where placed pieces bend, split, and block traced routes and a move commits only when the projected outcome changes the target",
   "lineage": "Optical strategy games, chess notation, ray-tracing diagrams, laser-puzzle toys",
   "tags": [
    "path-preview",
    "commit-move",
    "ruled-grid"
   ],
   "grammar": [
    "Staging/hierarchy: The ruled grid owns the viewport; live traced paths lead across it, pieces support as path-benders, and the target square holds the win condition.",
    "Sequence/attention: Attention follows the trace: placing or rotating a piece redraws the projected path instantly, and the reveal is where the new path terminates.",
    "Controls/state: The user places or rotates a piece, previews one path, and commits; the board holds current, previewed, blocked, and resolved path states.",
    "Adaptation: Phones keep the active path and legal moves legible with pattern-coded lines"
   ],
   "spark": "The user rotates one piece a quarter turn; the traced path splits at the splitter, bends around the blocker, and terminates on the target square as a combined mark, so the commit control lights.",
   "webLeverage": "Realtime SVG path geometry with drag rotation, deterministic puzzle seeds, and multiplayer turn state.",
   "sourceConceptId": "games-toys-physics-play-light-chess-refraction",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "interaction-physics-counterweighted-branch-balance",
   "familyId": "interaction-physics",
   "surface": "persuade",
   "form": "a landing page staged as a suspended counterweighted mobile of content planes, where related items share a physical branch and every selection redistributes balance through a branching anatomy of pivots until the whole finds a new equilibrium",
   "lineage": "Suspended kinetic sculpture, precision balance engineering, and hanging mobile composition",
   "tags": [
    "equilibrium",
    "branching-pivots",
    "causal-balance"
   ],
   "grammar": [
    "Staging/hierarchy: The central fulcrum anchors the viewport; nested arms carry content planes outward, hierarchy reads by arm length not size, labels hang level with planes.",
    "Sequence/attention: Attention enters at the fulcrum and travels branch by branch; every interaction sends visible rebalancing through neighbors before the system settles.",
    "Controls/state: The visitor pins, releases, and compares weights; branches carry loaded, settling, balanced, and pinned states.",
    "Adaptation: Narrow screens recast the mobile as nested radial bands with the same branch ancestry; all drift stops under"
   ],
   "spark": "The visitor pins one plane and the whole canopy answers: sibling arms dip, the far side rises, and the structure drifts through two slow corrections before holding a new equilibrium that records the choice.",
   "webLeverage": "Constraint-based WebGL physics or CSS spring transitions keep every selection causally balanced.",
   "sourceConceptId": "kinetic-sculpture-automata-counterweighted-brass-mobile"
  },
  {
   "id": "interaction-physics-cursor-spotlight",
   "familyId": "interaction-physics",
   "surface": "persuade",
   "form": "a landing page staged as a darkened house, where the cursor carries the only spotlight, sections wake as the light passes over them, and a visible house-lights switch turns everything on for the impatient",
   "lineage": "flashlight reveals, stage followspots, net-art darkness, haunted-house pacing",
   "tags": [
    "cursor-reveal",
    "dark-stage",
    "escape-hatch"
   ],
   "grammar": [
    "Staging/hierarchy: Darkness owns the viewport; the lit circle is the stage, and the house-lights switch stays visible and reachable at all times.",
    "Sequence/attention: Attention is literal light: content wakes only where the beam passes, and edge glints hint at where unexplored sections wait.",
    "Controls/state: Pointer steers the beam, touch drags it, scroll advances the stage; states are dark, beam-lit, section-awake, and full house lights.",
    "Adaptation: Touch widens the beam and sweeps by drag; keyboard lights whole sections on focus, or flips straight to house lights."
   ],
   "spark": "You sweep the beam across the dark and it catches the corner of a headline, so you steer back and hold the light there while the section wakes inside the circle, then notice a glint lower down telling you where to point next.",
   "webLeverage": "A CSS mask bound to pointer position lights real DOM content, with mask size as the beam control and no canvas repaint."
  },
  {
   "id": "interaction-physics-drop-assembly",
   "familyId": "interaction-physics",
   "surface": "persuade",
   "form": "a landing page staged as a settling pile, where elements fall with mass, land, stack, and come to rest as the layout itself, the visitor can nudge the pieces, and the settled arrangement is the final composition",
   "lineage": "physics-engine toys, matter.js landing pages, block-stacking games",
   "tags": [
    "gravity-layout",
    "settle-to-rest",
    "nudgeable"
   ],
   "grammar": [
    "Staging/hierarchy: The floor line and the falling pieces own the viewport; headline blocks are heaviest and settle first, controls land last on top of the pile.",
    "Sequence/attention: Attention follows gravity: pieces drop in authored order, and each landing directs the eye to where the next piece will fall.",
    "Controls/state: Drag nudges any piece within limits and the pile re-settles; states are falling, settling, settled, and a reset drop that replays the build.",
    "Adaptation: Small screens drop fewer, larger pieces into a single column"
   ],
   "spark": "The pricing card drops last, bounces once off the feature stack, and wedges itself at a two-degree angle against the headline, and you flick it upright with a drag before pressing the button it carries.",
   "webLeverage": "A physics engine writes transforms to real DOM elements, so every settled body remains selectable, focusable content."
  },
  {
   "id": "interaction-physics-live-thread-unravel",
   "familyId": "interaction-physics",
   "surface": "persuade",
   "form": "a landing page staged as a linked surface opened by pulling one live thread, where each released loop frees the next, a traveling run crosses the structure as visible causality, and catching or repairing the run is as literal as starting it",
   "lineage": "Hand knitting, loop topology, textile deconstruction, and chain-reaction demonstration craft",
   "tags": [
    "linked-loops",
    "propagating-run",
    "repairable"
   ],
   "grammar": [
    "Staging/hierarchy: The looped surface owns the viewport with its interlinked texture legible; the live thread leads as the single active path, the run cuts one clean channel.",
    "Sequence/attention: Attention follows causality loop by loop: the pull, the release, the run climbing the structure, and the freed material collecting at the exit.",
    "Controls/state: The visitor pulls, drops, catches, unravels, and repairs; loops carry held, linked, running, released, and restored states.",
    "Adaptation: Small screens present unraveling as a stepped loop sequence with an ordered topology trace"
   ],
   "spark": "The visitor pulls the single live thread and a run begins to climb, each loop letting go of exactly one neighbor; they catch it mid-surface, repair two loops back, and the structure holds as if never opened.",
   "webLeverage": "Graph-based loop geometry lets one local edit propagate causally while staying fully inspectable.",
   "sourceConceptId": "textiles-weave-drape-fashion-unraveling-knit-topology"
  },
  {
   "id": "interaction-physics-mass-and-settle",
   "familyId": "interaction-physics",
   "surface": "persuade",
   "form": "a page staged as a workbench where every element has mass, and content hangs, drops, collides, and settles under gravity, so reading the layout and playing with it are the same act",
   "lineage": "Physics-sandbox culture, spring-creature toys, executable-paper demos",
   "tags": [
    "rigid-body-content",
    "gravity-layout",
    "grab-and-fling"
   ],
   "grammar": [
    "Staging/hierarchy: static anchors along the top edge own the structure; every other element is a body that finds its level below them under gravity.",
    "Sequence/attention: attention follows whatever is falling or swinging; a release at the top cascades through collisions until the page settles and reads.",
    "Controls/state: grab, fling, pin, and freeze are the verbs; asleep, falling, colliding, and settled are visible states of every body on the bench.",
    "Adaptation: gravity re-aims when the viewport rotates; every body's rest pose is the designed layout"
   ],
   "spark": "You cut the rope on the headline and it drops onto the paragraph below, which sags on its springs; the whole page shivers once, finds its footing, and ends up in exactly the layout you were meant to read.",
   "webLeverage": "A constraint solver in a worker gives DOM elements real mass, so motion is simulated, not tweened.",
   "sourceConceptId": "medium-native-spring-ragdoll-workbench",
   "provenanceNote": "desktop ui needs regen, it's not as vibrant as the other"
  },
  {
   "id": "interaction-physics-metered-reserve",
   "familyId": "interaction-physics",
   "surface": "persuade",
   "form": "a system staged as stored energy spent through a visible regulator, where one winding fills a budget, a metering mechanism releases it in fixed beats, and descending by magnification reveals the nested layers doing the work",
   "lineage": "Mechanical watch movements, escapement diagrams, horological cutaways",
   "tags": [
    "stored-budget",
    "regulated-release",
    "zoom-descent"
   ],
   "grammar": [
    "Staging/hierarchy: the regulator's beating heart owns center stage; the reserve indicator ranks second as the visible budget, outer layers frame the descent.",
    "Sequence/attention: attention starts at the surface reading and descends by magnification, layer under layer, until it reaches the mechanism spending the energy.",
    "Controls/state: winding stores everything; the reserve depletes in metered, fixed-rate ticks, and zoom level is a first-class state that deep-links.",
    "Adaptation: layers become a stepped sequence of cutaway stills on small screens"
   ],
   "spark": "You pinch in past the face, through the first bridge, and land on the regulator mid-beat; the reserve gauge in the corner drops one increment while you watch, a week of stored work spent one governed tick at a time.",
   "webLeverage": "Pinch and wheel zoom descend through SVG layers while the beat animates at its true rate, never smoothed.",
   "sourceConceptId": "product-industrial-mechanical-watch-escapement"
  },
  {
   "id": "interaction-physics-mirror-multiplier",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "a workspace pairing a small seed chamber with its multiplied result, where a few placed pieces, one angle, and rotation generate the entire symmetric pattern",
   "lineage": "Kaleidoscope optics, mirror symmetry, paper-pattern craft, tiling mathematics",
   "tags": [
    "seed-and-result",
    "symmetry-rules",
    "angle-parameter"
   ],
   "grammar": [
    "Staging/hierarchy: The multiplied pattern owns the viewport; the seed chamber sits beside it as the working column, and the active wedge reads stronger than its reflections.",
    "Sequence/attention: Attention loops between edit and consequence: every piece added or angle change propagates instantly through all reflections.",
    "Controls/state: The user adds a piece, shifts the angle, rotates, freezes, and collects a result; the workspace is editing, previewing, frozen, or collected.",
    "Adaptation: Phones keep seed and result visible together in a stacked pair; automatic rotation stays off by default and every change applies as a discrete step."
   ],
   "spark": "The user nudges the mirror angle two degrees; the twelve-fold bloom re-tiles into a denser field, the seed chamber still shows only three pieces, and the freeze control pins the surprise before rotation moves on.",
   "webLeverage": "Realtime canvas reflection driven by touch and drag manipulation, with exact symmetry export and frozen results saved as shareable state.",
   "sourceConceptId": "games-toys-physics-play-kaleidoscope-rule-garden",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "interaction-physics-patch-graph-wall",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "a working surface staged as a patchable graph, where modules expose every parameter as a positioned control, connections are first-class visible objects with direction, and live signal presence travels the wires",
   "lineage": "Modular synthesizer patching, node-based editors, patch-cable studio practice",
   "tags": [
    "patch-graph",
    "visible-signal-flow",
    "position-as-state"
   ],
   "grammar": [
    "Staging/hierarchy: racked modules grid the surface; cables arc over them as the loudest layer, and whatever carries live signal outranks everything idle.",
    "Sequence/attention: attention follows signal direction along cables, source to destination; a change anywhere pulls the eye downstream to its consequences.",
    "Controls/state: every parameter is a positioned control whose position is its state; patching, unpatching, and dragging cables are the primary verbs.",
    "Adaptation: dense patches collapse to linear signal-path summaries on small screens; cable animation stops under"
   ],
   "spark": "You drag a wire from the clock output, split it at a junction, and land both ends; two distant modules start pulsing in step, and you trace the shared timing by hand along the arc you just made.",
   "webLeverage": "SVG cables carry live state animation while each connection is a real, inspectable relationship in the DOM.",
   "sourceConceptId": "signals-instruments-modular-patch-wall",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "interaction-physics-pivot-fan",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "an app screen staged as a pivoted fan deck, where hundreds of coded chips share one corner pivot, fanning open spreads neighbors edge to edge for judgment, and every chip's code is an absolute address you can call out loud",
   "lineage": "Printer's color fan decks, swatch books, riveted sample fans",
   "tags": [
    "pivot-fan",
    "edge-to-edge-compare",
    "absolute-address"
   ],
   "grammar": [
    "Staging/hierarchy: the fan owns the viewport from its single pivot; the arc of chips is the whole interface, and the pulled chip outranks the rest",
    "Sequence/attention: you travel a continuous ordered walk by fanning; neighbors sit edge to edge with no gap, so judgment happens by direct adjacency",
    "Controls/state: chips are closed, fanned, or pulled against the working material; a code addresses any chip absolutely, and two pulled chips compare side by side",
    "Adaptation: the fan spreads wide on large screens and stacks into a thumbable column on small ones"
   ],
   "spark": "You drag the deck open from its pivot, walk the arc to the neighborhood you remember, and pull one chip flat against your own work with no gap between them.",
   "webLeverage": "Pointer-driven drag fans the arc while canvas sampling compares a pulled chip against user imagery under the cursor",
   "sourceConceptId": "vernacular-ephemera-pantone-fan-deck",
   "provenanceNote": "doesn't translate well into a visual idea"
  },
  {
   "id": "interaction-physics-staged-cascade",
   "familyId": "interaction-physics",
   "surface": "persuade",
   "form": "a constructed cascade of triggers, where placed pieces, delays, branches, and gates choreograph one committed chain reaction across a built plan",
   "lineage": "Domino-toppling spectacles, chain-reaction machines, kinetic urban models, contraption games",
   "tags": [
    "chain-reaction",
    "timed-gates",
    "inspectable-failure"
   ],
   "grammar": [
    "Staging/hierarchy: The build plan owns the viewport on a ruled grid; armed routes lead in ranked order and gates mark where the cascade will pause.",
    "Sequence/attention: Attention runs with the fall: the chain crosses branches and elevations, pauses at timed gates, and releases downstream districts in staggered order.",
    "Controls/state: The visitor places, spaces, braces, triggers, pauses, and rewinds; every piece is standing, falling, fallen, or the inspectable point of failure.",
    "Adaptation: Phones snap construction to a thumb-sized grid"
   ],
   "spark": "The visitor arms the gate and triggers the first piece; the chain crosses the bridge, waits two beats behind the timer, and releases four branches whose staggered falls land exactly where the plan promised.",
   "webLeverage": "Rigid-body simulation on canvas with deterministic replay state, drag placement, and collaborative build turns.",
   "sourceConceptId": "games-toys-physics-play-domino-city-collapse",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "interaction-physics-tension-commit",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "an app screen staged around a loaded mechanism, where committing an action means dragging against visible tension, a band, a lever arc, a spring, with the release point marked; half pulls snap back harmless, full pulls fire",
   "lineage": "pull-to-refresh mechanics, slot machine arms, launch keys, slingshot games",
   "tags": [
    "tension-gesture",
    "commit-threshold",
    "snap-back"
   ],
   "grammar": [
    "Staging/hierarchy: The mechanism sits beside the thing it will act on; the marked release threshold outranks decoration and stays visible mid-pull.",
    "Sequence/attention: Attention rides the pull: resistance rises, the threshold marker approaches, and the surface previews the consequence before release.",
    "Controls/state: Dragging past the threshold fires, short of it snaps back with nothing done; states are rest, loading, past-threshold, fired, and cooldown.",
    "Adaptation: Touch and keyboard both drive the pull, hold-to-charge as the key equivalent"
   ],
   "spark": "You drag the delete lever through its arc and feel the interface resist, the row you are about to remove dimming in preview, and one pixel past the mark the whole mechanism gives way and the row is gone for good.",
   "webLeverage": "Pointer capture with spring interpolation maps drag distance to rising resistance and a hard release threshold."
  },
  {
   "id": "interaction-physics-trim-and-launch",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "a test bench of adjust, launch, and trace, where small edits to the subject's geometry write visibly different trajectories through a measured field",
   "lineage": "Paper-airplane craft, model aeronautics, wind-tunnel testing, trajectory charting",
   "tags": [
    "parameter-edit",
    "replayable-run",
    "measured-field"
   ],
   "grammar": [
    "Staging/hierarchy: The measured field owns the viewport with the traced run leading through it; the edit panel of adjustments supports as a side column.",
    "Sequence/attention: Attention cycles edit, launch, trace: each geometry change replays as a new visible path, and paths persist for direct comparison.",
    "Controls/state: The user adjusts geometry, shifts weight, launches, and compares distance, stability, and recovery; runs are drafted, live, stalled, recovered, and archived.",
    "Adaptation: Phones use side-view run strips ruled like graph paper; motion offers slow, stepped, and static trajectory modes."
   ],
   "spark": "The user shifts one weight forward and relaunches; the new path noses up where the last one stalled, both trajectories hang in the field for comparison, and the distance figures update side by side.",
   "webLeverage": "A canvas physics model with drag-editable geometry, replayable trajectory state, and user-shaped disturbance input.",
   "sourceConceptId": "games-toys-physics-play-paper-glider-wind-tunnel"
  },
  {
   "id": "interaction-physics-two-key-commit",
   "familyId": "interaction-physics",
   "surface": "persuade",
   "form": "a catalog staged as an addressable mechanism, where every item has a short two-part address, selection is a deliberate two-step commitment, and the machine visibly fetches your pick and enacts it for everyone present",
   "lineage": "Jukebox selector mechanisms, vending machine keypads, library call-number retrieval",
   "tags": [
    "address-selection",
    "staged-commitment",
    "visible-fetch"
   ],
   "grammar": [
    "Staging/hierarchy: the catalog fans out as a paged index of addressed items; the mechanism sits behind it, visible, waiting on a committed address.",
    "Sequence/attention: browsing pages the index; entering the first key narrows, the second commits, then all attention shifts to the mechanism enacting the pick.",
    "Controls/state: selection is a two-key sequence with a visible armed state between keys; once the mechanism moves there is no undo, and the pick plays out publicly.",
    "Adaptation: index cards page as a swipeable stack on small screens"
   ],
   "spark": "You press the second key and the index locks; behind the panel the carrier swings out, pinches exactly one item from the hundred you were just browsing, and seats it front and center while the address you typed stays lit.",
   "webLeverage": "The two-part address lives in the URL for deep-linking any item; the commit animates through real state transitions.",
   "sourceConceptId": "signals-instruments-jukebox-selector"
  },
  {
   "id": "interaction-physics-wound-medium",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "a working transport staged as one linear medium wound between two spools, where any position is reached only by winding through everything between, and the two spool sizes plus a counter are the honest readout of where you are",
   "lineage": "Reel-to-reel tape decks, film editing benches, cassette transports",
   "tags": [
    "linear-medium",
    "transport-inertia",
    "honest-position"
   ],
   "grammar": [
    "Staging/hierarchy: the two spools and the path between them own the screen; the transport keys sit below as heavy, latching commitments, the counter beside them.",
    "Sequence/attention: attention rides the exchange, one side thinning as the other fattens; fast winds blur the spools and the counter becomes the readable truth.",
    "Controls/state: play, stop, and both winds latch; scrubbing drags real position through the medium, and inertia makes starting and stopping cost visible time.",
    "Adaptation: small screens keep the counter and a linear position bar, dropping spool detail"
   ],
   "spark": "You slam rewind and the machine leans into it, spools trading mass in a blur; you release at the counter mark you memorized, overshoot a little because momentum is real here, and nudge forward the last few digits.",
   "webLeverage": "Real playback position binds to the animation frame by frame, so scrubbing the medium drags actual state.",
   "sourceConceptId": "signals-instruments-reel-to-reel-transport",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "narrative-scroll-carved-epoch-descent",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a descent through stacked epochs, where scroll carves downward past horizontal bands of accumulated history and each artifact stays anchored to the exact layer that produced it",
   "lineage": "Stratigraphic field sections, geological column diagrams, core-sample logs, and monumental land-art scale",
   "tags": [
    "stacked-epochs",
    "descent",
    "anchored-evidence"
   ],
   "grammar": [
    "Staging/hierarchy: The exposed wall of bands owns the viewport; one active layer leads at a time, an age scale rules the edge, one continuous thread marks the present at the base.",
    "Sequence/attention: Scroll descends from the newest band to the oldest; attention reads each layer fully before crossing its boundary into deeper time.",
    "Controls/state: The visitor slices to any depth and pins ages; layers carry deposited, eroded, faulted, and uncertain states.",
    "Adaptation: Small screens keep the same vertical time section at full width"
   ],
   "spark": "Each swipe drops the visitor past another boundary line; a pinned marker shows how far down they are, and an artifact opened in one band refuses to leave the stratum it belongs to.",
   "webLeverage": "Sticky positioning and scroll-driven animation hold the age scale fixed while bands pass through the viewport.",
   "sourceConceptId": "geological-strata-crystals-canyon-time-walls",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "narrative-scroll-continuous-thread",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged along one unbroken thread, where a single drawn line or traveling object runs from the first viewport to the footer, passing through every section as narrator and progress indicator at once",
   "lineage": "illustrated journey maps, single-line animation sites, wayfinding strings",
   "tags": [
    "unbroken-connector",
    "progress-as-object",
    "section-threading"
   ],
   "grammar": [
    "Staging/hierarchy: the thread owns continuity across the whole page; each section owns its local viewport; the thread terminates deliberately at the primary action",
    "Sequence/attention: the eye follows the line; its bends, knots, and crossings announce section changes before the content does, and its drawn length reports progress",
    "Controls/state: scroll extends the drawn thread; clicking a knot jumps to that section; the thread's rendered extent distinguishes visited ground from remaining",
    "Adaptation: small screens straighten the thread into a near-vertical spine at one margin"
   ],
   "spark": "The line that started under the headline is still with you four screens later; it dives behind a panel, resurfaces to underline a claim, and you keep scrolling to see where it goes, which is the point.",
   "webLeverage": "an svg path with stroke-dashoffset scrubbed by scroll position, its geometry routed through the document's real section coordinates"
  },
  {
   "id": "narrative-scroll-diffuse-to-stream",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a capture column from diffuse to concentrated, where an ambient drifting input is combed out by many small collectors at the top and descends stage by stage into one gathered stream at the bottom",
   "lineage": "Cloud-forest hydrology, condensation harvesting, funnel diagrams, and watershed section drawings",
   "tags": [
    "capture-column",
    "aggregation",
    "vertical-flow"
   ],
   "grammar": [
    "Staging/hierarchy: A vertical column governs the field from diffuse input at top to gathered output at bottom; the active collector leads, and text sits clear of the drifting band.",
    "Sequence/attention: Scroll descends the capture path: input arrives, collectors comb it out, drops join, and the stream at the base totals everything gathered above.",
    "Controls/state: The visitor changes input density and traces single captures downward; states are dry, condensing, dripping, and saturated.",
    "Adaptation: Small screens keep the same top-to-bottom sequence in one column; drift never obscures reading and pauses entirely under"
   ],
   "spark": "The visitor raises the input slider and edges all across the top section begin to bead; a traced drop hands off from collector to collector down the page until it lands in the running total at the stream.",
   "webLeverage": "Scroll-linked opacity and position transitions carry one traced item down a fixed vertical path.",
   "sourceConceptId": "forests-canopies-mycelium-cloud-forest-condensation",
   "provenanceNote": "desktop needs regen"
  },
  {
   "id": "narrative-scroll-endless-table",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a page laid as one endless table, where each item at a place setting extends the surface into another context and the scroll travels down the shared center line",
   "lineage": "Banquet ritual, communal-table seating plans, long-scroll picture narratives",
   "tags": [
    "single-axis",
    "place-settings",
    "context-extension"
   ],
   "grammar": [
    "Staging/hierarchy: One continuous center rule owns the page; place settings rank along it, each holding one item, one context, and one caption.",
    "Sequence/attention: Scroll moves down the table; opening an item extends the surface with a new stretch of settings, so the sequence grows by the visitor's appetite.",
    "Controls/state: The visitor opens an item, folds a distant setting back beside the current one, and marks a seat; settings are untouched, opened, extended, and folded-back.",
    "Adaptation: Phones show one setting per viewport with a miniature table thread as the map"
   ],
   "spark": "The visitor opens the third setting and the table lengthens by a whole new stretch; a thread map at the edge shows the feast so far, and one empty seat keeps pulling the scroll toward the item not yet revealed.",
   "webLeverage": "Infinite scroll along one axis with a sticky miniature thread map, plus anchored fold-back links that clone a distant section beside the current viewport.",
   "sourceConceptId": "dream-surreal-impossible-worlds-endless-table-feast"
  },
  {
   "id": "narrative-scroll-folded-continuous-route",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a folded continuous route, where one unbroken line runs through every panel, the folds create chapters and reversible return points, and opening further always extends the same journey rather than starting a new one",
   "lineage": "Concertina books, panoramic route maps, strip travel narratives, and fold-out atlas plates",
   "tags": [
    "continuous-route",
    "fold-chapters",
    "reversible-return"
   ],
   "grammar": [
    "Staging/hierarchy: The continuous route line owns the composition across all panels; the open panel leads, fold edges rule the chapter boundaries, captions justify to each crease.",
    "Sequence/attention: Attention follows the single line panel by panel; each fold is both pause and landmark, and refolding returns to any earlier chapter without losing position.",
    "Controls/state: The visitor opens, bookmarks, compares, and refolds; panels carry hidden, partial, continuous, focused, and closed states.",
    "Adaptation: Small screens convert the accordion into a vertical route with persistent fold markers; no scroll animation is forced and position survives every layout change."
   ],
   "spark": "The visitor opens the fourth fold and the line they have followed since the first panel continues across the crease without breaking; a bookmark dropped here survives refolding the whole route back to its cover.",
   "webLeverage": "A continuous coordinate model preserves route position across folded, paged, and linear layouts.",
   "sourceConceptId": "paper-folds-pleats-deployable-accordion-river-map",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "narrative-scroll-gatefold-liner-notes",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a gatefold folder around one playing artifact, where panels unfold into time-aligned notes, images, and diagrams that stay synchronized to the artifact's playhead as it runs",
   "lineage": "Album gatefold sleeves, liner notes, annotated listening editions",
   "tags": [
    "gatefold-unfold",
    "time-aligned-notes",
    "playhead-sync"
   ],
   "grammar": [
    "Staging/hierarchy: the closed folder owns the first viewport; opening it spreads panels around the central playing artifact, which stays the anchor of every spread",
    "Sequence/attention: attention follows the playhead; as the artifact runs, the note, image, or diagram aligned to the current moment comes forward while others recede",
    "Controls/state: play, pause, isolate a passage, and open panels; states are queued, sounding, paused, annotated, and finished, and notes can be cited by timestamp",
    "Adaptation: small screens dock the sounding passage and its aligned note together in one column"
   ],
   "spark": "You press play, the folder spreads open, and as the recording reaches its second passage the matching annotation slides forward under your thumb, timestamped and ready to quote.",
   "webLeverage": "Media element timeupdate events drive which panel is forward, and view transitions animate the unfolding spreads",
   "sourceConceptId": "editorial-sequence-montage-record-sleeve-listening-notes"
  },
  {
   "id": "narrative-scroll-giant-gutter",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a short panel sequence with one enormous gutter, where a handful of framed moments and a vast empty interval between them let the decisive action happen off screen in the reader's mind",
   "lineage": "Wordless comics, sequential-art panel pacing, cinematic ellipsis",
   "tags": [
    "panel-band",
    "ellipsis",
    "gutter-interval"
   ],
   "grammar": [
    "Staging/hierarchy: a few bordered panels sit on a mostly empty field; the blank interval between two of them is deliberately the largest element on the page",
    "Sequence/attention: attention moves panel to panel in fixed order; the long empty stretch forces a pause in which the visitor infers the omitted event",
    "Controls/state: advance, pause, compare, and annotate; content states are shown, implied, simultaneous, repeated, and unresolved",
    "Adaptation: panel rhythm survives as authored breaks in a single column; the interval stays proportionally vast, and each panel and implied gap carries a concise description"
   ],
   "spark": "One panel shows the object intact; you scroll through a long field of nothing, and the next panel shows only its consequences spreading across the floor.",
   "webLeverage": "Grid and spacing control preserve authored pacing and omission without scroll hijacking or automatic transitions",
   "sourceConceptId": "editorial-sequence-montage-silent-comic-gutter"
  },
  {
   "id": "narrative-scroll-horizontal-rail",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged with a sideways interlude, where vertical scroll enters a section, travel turns horizontal through its chapters, then returns to vertical, the direction change itself marking the act boundaries",
   "lineage": "film-strip navigation, gallery walls, side-scrolling stage traversal",
   "tags": [
    "direction-change",
    "horizontal-chapters",
    "act-boundaries"
   ],
   "grammar": [
    "Staging/hierarchy: the vertical page owns arrival and departure; inside the rail the current chapter panel owns the viewport, neighbors cropped at the edges as prompts",
    "Sequence/attention: the turn from down to sideways announces a new act; cropped edges pull attention forward through the chapters; the return to vertical closes the act",
    "Controls/state: continued scroll drives sideways travel; arrow keys and edge clicks step panels; a chapter index shows position; exiting either end resumes vertical flow",
    "Adaptation: small screens make the rail a swipe carousel with the same chapter index"
   ],
   "spark": "You scroll down and the page stops giving you down; the next notch slides the wall sideways instead, a cropped panel edge promising one more chapter, until the rail ends and gravity returns.",
   "webLeverage": "a sticky section translating a horizontal track from vertical scroll progress, with scroll-snap alignment on each panel"
  },
  {
   "id": "narrative-scroll-long-return-arc",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a long-period return arc, where the subject approaches from distant dormancy, peaks in activity at closest approach, departs again, and leaves dated records of every prior passage ranked along the arc",
   "lineage": "Cometary astronomy, orbital ephemeris tables, almanac record-keeping, and long-duration observational storytelling",
   "tags": [
    "cyclical-return",
    "approach-peak",
    "archived-passes"
   ],
   "grammar": [
    "Staging/hierarchy: One long arc spans the page with the subject as a single moving point; the near-approach zone holds the fullest staging, archived returns rank at far reaches.",
    "Sequence/attention: Scroll carries the subject from faint dormancy to full activity and out again; treatment intensity rises and falls with distance from the center.",
    "Controls/state: The visitor scrubs position along the arc and opens archived passages; states are dormant, approaching, active, and departed.",
    "Adaptation: Small screens compress the arc into annotated phase chapters in sequence"
   ],
   "spark": "A faint dot at the top of the page grows as the visitor scrolls, splits into trailing detail at closest approach, then shrinks away while a dated ledger records this pass beside all the earlier ones.",
   "webLeverage": "Scroll-linked position along one SVG path drives size, detail, and state of the traveling subject.",
   "sourceConceptId": "orbits-eclipses-celestial-cycles-comet-return-arc",
   "provenanceNote": "good idea, bad visual system"
  },
  {
   "id": "narrative-scroll-lookback-depth",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a page staged as a tunnel into accumulated time, where scrolling forward moves backward through eras, depth ranks every item by age, and the present stays fixed at the origin as the point you measure everything against",
   "lineage": "Deep-field astronomy imagery, archaeological trench sections, core-sample timelines",
   "tags": [
    "depth-as-age",
    "fixed-origin",
    "era-strata"
   ],
   "grammar": [
    "Staging/hierarchy: the depth axis owns the page; the present anchors the origin, era bands structure the descent, and the selected item outranks its stratum.",
    "Sequence/attention: scrolling deeper is traveling further back; each era's items resolve as they approach, and a depth gauge keeps the distance to now legible.",
    "Controls/state: visitors scrub depth, magnify any item without losing position, and recent, ancient, candidate, and unresolved are explicit item states.",
    "Adaptation: the tunnel becomes a vertical epoch sequence on small screens with era markers preserved; all travel is user-driven, satisfying"
   ],
   "spark": "You scroll three strata down and pinch into a speck that becomes a whole item from an earlier era; the depth gauge still shows exactly how far from the present you are, and the way home is simply scrolling back up.",
   "webLeverage": "Progressive tiling streams extreme-resolution content across depth, loading eras only as the visitor descends.",
   "sourceConceptId": "galaxies-nebulae-deep-time-deep-field-time-tunnel",
   "provenanceNote": "good idea, bad visual system"
  },
  {
   "id": "narrative-scroll-parallel-streams-merge",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as two distinct streams meeting without immediately mixing, where paired columns run side by side along a visible seam and fold into a single combined measure only further downstream",
   "lineage": "Confluence hydrodynamics, parallel-text editions, comparative column layouts, and merger storytelling",
   "tags": [
    "parallel-columns",
    "shear-seam",
    "gradual-merge"
   ],
   "grammar": [
    "Staging/hierarchy: Two source columns share the field equally at the top; the seam between them is the only rule on the page, the merged single measure owns everything downstream.",
    "Sequence/attention: Scroll runs downstream; attention alternates across the seam, watches local folds exchange material, and lands on the combined identity at the end.",
    "Controls/state: The visitor adjusts the ratio between streams and follows a parcel across the seam; states are separate, touching, folding, and mixed.",
    "Adaptation: Small screens stack the two origins before their shared reach; mixing advances only at the visitor's pace with no ambient churn."
   ],
   "spark": "The visitor scrolls and the two columns hold their difference for a long stretch; an eddy folds one item across the seam, then another, until the page admits a single downstream voice carrying both origins.",
   "webLeverage": "CSS grid columns collapsing into one measure on scroll express merging without a canvas.",
   "sourceConceptId": "rivers-tides-ocean-depths-river-confluence-braid",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "narrative-scroll-receipt-unspool",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a printing document, where content arrives line by line as one continuous unspooling strip, the visitor's scroll acting as the platen feed, with totals and a signature closing the transaction at the end",
   "lineage": "receipt printers, teletype output, terminal logs, ticker tape",
   "tags": [
    "line-feed-arrival",
    "single-strip",
    "transactional-close"
   ],
   "grammar": [
    "Staging/hierarchy: one narrow continuous strip owns the page; the freshest printed line leads at the feed point; earlier lines remain above as the growing record",
    "Sequence/attention: attention sits at the print head where new lines appear; scroll feeds the platen, so the pace of revelation equals the pace of reading",
    "Controls/state: scroll advances the feed; scrolling back rereads without unprinting; itemized lines expand for detail; the signature line at the end is the committed action",
    "Adaptation: the narrow strip is already phone-shaped"
   ],
   "spark": "Each notch of scroll feeds three more lines through the print head: item, item, subtotal; you slow down and the page slows with you, and the last line waiting at the bottom is a signature field.",
   "webLeverage": "scroll-triggered incremental rendering down one constrained column, with sticky positioning holding the feed point in view"
  },
  {
   "id": "narrative-scroll-seed-generations",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a page staged as generations unfolding from a seed, where a tiny visible rule produces each row from the one above, everything below the seed is derived rather than authored, and any cell traces back to the exact neighborhood that made it",
   "lineage": "Cellular automata, punched-card weaving, generative textile patterns",
   "tags": [
    "seed-to-rows",
    "local-rule",
    "traceable-provenance"
   ],
   "grammar": [
    "Staging/hierarchy: the seed row leads at top with the rule stated beside it; generations band downward in strict order, the newest row marked as the working edge.",
    "Sequence/attention: reading is strictly top-down, cause above effect; scrolling deeper is watching consequences compound from the same small rule.",
    "Controls/state: visitors edit the seed, swap the rule, and fork runs; tapping any cell highlights the exact parent neighborhood that produced it.",
    "Adaptation: small screens crop to the active generation with the lineage expandable above"
   ],
   "spark": "You flip one cell in the seed row and scroll down; the change stays invisible for a dozen generations, then opens into a wide triangular void, and you tap its edge to walk the chain of parents back up to your single edit.",
   "webLeverage": "Bit-packed computation generates deep histories cheaply while every cell stays addressable in the DOM.",
   "sourceConceptId": "generative-art-computational-cellular-tapestry"
  },
  {
   "id": "narrative-scroll-self-playing-score",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a page staged as a scrolling score that performs itself, where the content strip is both the recording and the instructions, a fixed read line executes whatever crosses it, and position in the piece is position on the strip",
   "lineage": "Player-piano rolls and tracker bars, punched-card programs, autocue scrolls",
   "tags": [
    "score-strip",
    "fixed-read-line",
    "self-performance"
   ],
   "grammar": [
    "Staging/hierarchy: the strip owns the vertical axis with the read line fixed midscreen; the performing surface beside it shows each instruction taking effect.",
    "Sequence/attention: the strip advances on its own or under the visitor's hand; attention holds at the read line where notation becomes action.",
    "Controls/state: play, pause, tempo, and scrubbing act on the strip's motion; editing punches or patches visible marks that change the next performance.",
    "Adaptation: the strip narrows to the active span on small screens"
   ],
   "spark": "You stop scrolling and the strip keeps going without you; a punched mark crosses the read line and a panel beside it assembles itself on cue, and you drag the strip backward to watch the same passage perform again.",
   "webLeverage": "Scroll position doubles as playback position, so the browser's native scroll is the transport control.",
   "sourceConceptId": "signals-instruments-player-piano-parlor",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "narrative-scroll-slow-loop-breakthrough",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a slowly tightening loop that breaks through, where years of gradual migration narrow one neck until a sudden user-triggered cutoff creates a shorter course and leaves the abandoned loop in place as memory",
   "lineage": "River meander morphology, landscape time-lapse, survey map overlays, and before-and-after cartography",
   "tags": [
    "gradual-buildup",
    "threshold-event",
    "retained-remnant"
   ],
   "grammar": [
    "Staging/hierarchy: The active course leads across the field; the narrowing neck is the focal point, and after the break the abandoned loop stays visible as a quieter record.",
    "Sequence/attention: Attention follows dated steps of slow migration toward the neck, waits at the threshold, and jumps to the new shorter course when the visitor fires the break.",
    "Controls/state: The visitor scrubs years and triggers the flood; states are migrating, narrowing, breached, and isolated.",
    "Adaptation: Small screens present a before, break, after sequence in three framed steps; motion stays still until the visitor fires the event."
   ],
   "spark": "The visitor drags the year slider and the loop creeps tighter each decade; one tap at the narrowest moment snaps a new channel through, and the old loop dims into a closed curve that never disappears.",
   "webLeverage": "A scrubbed timeline bound to canvas geometry replays slow change and one user-fired discontinuity.",
   "sourceConceptId": "rivers-tides-ocean-depths-meander-cutoff-memory",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "narrative-scroll-sticky-morph",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as one object's biography, where a single protagonist element pins to the viewport and transforms as sections pass, shape becoming diagram becoming interface becoming the final action",
   "lineage": "scroll-linked morph sites, Apple product pages, match-cut cinema",
   "tags": [
    "pinned-protagonist",
    "scroll-morph",
    "object-biography"
   ],
   "grammar": [
    "Staging/hierarchy: the pinned protagonist owns the viewport center throughout; passing sections supply captions and context around it; nothing else persists",
    "Sequence/attention: each section boundary is a transformation; attention stays on the object and reads the passing text as commentary on what it is becoming",
    "Controls/state: scroll drives the morph timeline in both directions; each stable form is a scroll-snap resting state; the final form is the interactive action itself",
    "Adaptation: small screens shrink the protagonist to a persistent upper band, showing each stable form per section"
   ],
   "spark": "The mark from the first screen refuses to leave; you scroll and it unfolds into the diagram the text is describing, folds again into the product, and by the last section it has become the button you press.",
   "webLeverage": "position sticky pinning one element through a scroll-driven animation timeline that interpolates its geometry between section-keyed states"
  },
  {
   "id": "narrative-scroll-threshold-promenade",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a page descending through nested thresholds, where each layer inward shrinks the voice, raises the intimacy, and renegotiates what the visitor is permitted to see",
   "lineage": "Courtyard-house sequences, stoop culture, layered privacy in vernacular dwellings, processional architecture",
   "tags": [
    "nested-layers",
    "graduated-intimacy",
    "axial-column"
   ],
   "grammar": [
    "Staging/hierarchy: One axial column owns the page; the outermost layer opens at full public scale and each inner layer leads in turn at a smaller, closer register.",
    "Sequence/attention: Attention moves inward by crossing explicit thresholds; each crossing changes scale, density, and tone, so depth is felt as permission earned.",
    "Controls/state: The visitor advances, opens or closes layers, and previews how a newcomer reads each invitation; layers are outside, at-threshold, admitted, and innermost.",
    "Adaptation: Phones present the sequence as a vertical promenade with every layer keyboard reachable"
   ],
   "spark": "The visitor crosses the third threshold and the headline scale drops to a murmur; the outer sections remain visible above, present but unable to enter, and the committed action waits in the innermost alcove.",
   "webLeverage": "Scroll-linked thresholds with sticky datum lines and deep-linked layer states, each crossing restyled via CSS scale and density tokens.",
   "sourceConceptId": "architecture-inhabitable-space-nested-thresholds",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "narrative-scroll-two-speed-parallax-argument",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as claim and proof on separate tracks, where foreground copy and background evidence scroll at different speeds and periodically snap-lock into one composed moment before releasing again",
   "lineage": "multiplane cinema, scrollytelling journalism, layered stage sets",
   "tags": [
    "two-speed-layers",
    "claim-proof-alignment",
    "snap-lock-moments"
   ],
   "grammar": [
    "Staging/hierarchy: the copy track leads in front, the evidence track runs behind at a different rate; the locked compositions are the page's real headline moments",
    "Sequence/attention: attention rides the copy, senses the background drifting out of register, and the periodic snap into alignment is the payoff that lands each claim",
    "Controls/state: scroll drives both tracks; inside a lock zone the layers hold their composed state while copy advances; leaving the zone releases the drift",
    "Adaptation: small screens interleave the tracks as alternating bands, locks becoming full-width composed frames"
   ],
   "spark": "The claim you are reading floats over evidence sliding at half speed; a scroll later the chart behind it arrives exactly under the sentence that cites it, holds while you read, then lets go.",
   "webLeverage": "two scroll timelines advancing at different rates, with scroll-snap and sticky lock zones composing the aligned moments"
  },
  {
   "id": "narrative-scroll-unbroken-route",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a page traveled as one unbroken route, where a single continuous move carries the visitor through spatial chapters and hand-offs replace cuts between sections",
   "lineage": "Long-take cinematography, ensemble blocking, tracking-shot choreography, horizontal scroll narratives",
   "tags": [
    "continuous-route",
    "hand-off",
    "no-cuts"
   ],
   "grammar": [
    "Staging/hierarchy: One continuous band owns the page; the followed subject leads at every moment while offscreen threads wait as recoverable margins.",
    "Sequence/attention: Attention rides the move: each chapter hands the lead to the next carrier at a visible crossing point, and nothing arrives by cut.",
    "Controls/state: The visitor advances, pauses, branches to an offscreen thread, and revisits; passages are approaching, crossing, handed-off, missed, and completed.",
    "Adaptation: Small screens break the route into user-advanced landmarks that preserve order"
   ],
   "spark": "The visitor scrolls and the frame never cuts: the lead passes from one section's subject to a courier element at the curb, and three chapters later the same continuous move arrives at the committed action, lit and waiting.",
   "webLeverage": "Scroll-driven camera paths along one long canvas, with sticky hand-off points and a keyboard-stepped landmark mode preserving continuity.",
   "sourceConceptId": "cinema-cinematography-editing-long-take-crossing"
  },
  {
   "id": "narrative-scroll-vertical-strata-ascent",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as an ascent through inhabited vertical strata, where one continuous spine rises from a foundation floor through structural mid-levels into separate suspended zones at the crown, each stratum a distinct habitat of content",
   "lineage": "Forest structure science, architectural section drawings, elevation charts, and vertical habitat diagrams",
   "tags": [
    "vertical-spine",
    "stacked-habitats",
    "ascent"
   ],
   "grammar": [
    "Staging/hierarchy: One vertical spine rules the page; the active stratum leads at full treatment while neighbors compress above and below, and order labels rank up the axis.",
    "Sequence/attention: Scroll rises stratum by stratum from ground to crown; each layer resolves fully before the next opens, and the crown holds the destination content.",
    "Controls/state: The visitor shifts a global condition and isolates single threads through all layers; items carry emerging, mature, decaying, and recycled states.",
    "Adaptation: Small screens present the same spine as stacked chapter cards in strict order; ascent follows direct scroll with no autonomous flight."
   ],
   "spark": "The visitor scrolls upward and the ground detail gives way to tall structural shafts; at the top, zones that never appeared from below open one by one, each carrying its own resident content.",
   "webLeverage": "Scroll-driven transforms along one fixed vertical axis stage ascent without a 3D engine.",
   "sourceConceptId": "forests-canopies-mycelium-old-growth-strata"
  },
  {
   "id": "narrative-scroll-widening-intervals",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a scored descent, where a repeated element loses parts and gains widening blank intervals down the page, so position, omission, and empty distance carry as much meaning as the content itself",
   "lineage": "Concrete poetry, spatial typography, page-as-score composition",
   "tags": [
    "positional-meaning",
    "widening-intervals",
    "repetition-decay"
   ],
   "grammar": [
    "Staging/hierarchy: the mostly blank field is the ground of meaning; placed elements sit at exact coordinates, and the growing empty intervals rank as content",
    "Sequence/attention: attention falls down the page; each repetition arrives smaller or reduced, and the widening gap before it sets the pacing like timing marks",
    "Controls/state: read, isolate, rearrange, and compare; element states are voiced, silent, repeated, displaced, and omitted",
    "Adaptation: spatial relations recompose proportionally at any width, and an authored linear reading of the same sequence sits alongside the composed page"
   ],
   "spark": "You scroll and the same word returns, one letter poorer each time, until after the longest empty stretch a single fragment waits at the bottom edge.",
   "webLeverage": "CSS grid places elements by coordinate while the DOM keeps an accessible authored reading order",
   "sourceConceptId": "typography-calligraphy-writing-concrete-poem-fall"
  },
  {
   "id": "narrative-scroll-withheld-reveal",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a paged argument, where each spread adds exactly one construction step toward the finished subject, approval accumulates step by step, and the final result is withheld until the visitor already believes in it",
   "lineage": "Identity presentation booklets, staged design rationales, paged persuasion documents",
   "tags": [
    "paged-argument",
    "one-step-spreads",
    "delayed-reveal"
   ],
   "grammar": [
    "Staging/hierarchy: one idea owns each generous spread; the construction in progress leads, a short argument supports, and the finished subject is absent until the end",
    "Sequence/attention: a strict page sequence adds one step per turn; anticipation compounds because the conclusion is visibly being earned, not shown",
    "Controls/state: the page turn is the whole instrument; the active step draws itself in, and approved steps carry a small index mark in the margin",
    "Adaptation: spreads collapse to single pages on narrow screens; the only motion is a page slide"
   ],
   "spark": "Each turn adds one more thin construction line, and by the time the last page finally shows the finished mark you realize you were persuaded three spreads ago.",
   "webLeverage": "View transitions page each step while SVG draws the construction geometry live on arrival",
   "sourceConceptId": "brand-identity-canon-rand-logo-presentation",
   "provenanceNote": "no expansive visual world"
  },
  {
   "id": "narrative-scroll-wordless-steps",
   "familyId": "narrative-scroll",
   "surface": "persuade",
   "form": "a landing page staged as a wordless instruction sequence, where an opening inventory counts every part, numbered frames each show exactly one action, and arrows carry all meaning: curved to rotate, straight to insert, crossed to forbid",
   "lineage": "Wordless assembly manuals, build-book conventions, international instruction pictograms",
   "tags": [
    "inventory-first",
    "one-action-frames",
    "arrow-grammar"
   ],
   "grammar": [
    "Staging/hierarchy: one step frame leads at a time; the inventory board opens the sequence, and the previous result sits faint behind the newly added part",
    "Sequence/attention: attention advances frame by frame in numbered order; a magnified callout floats near any tricky joint before the next step",
    "Controls/state: advance, back, and zoom; steps hold pending, current, and done states, and completed progress persists between visits",
    "Adaptation: one frame per screen at any size with callouts docked near their joints"
   ],
   "spark": "Frame six shows the previous result in ghost, the one new part bold, and a single curved arrow; you rotate the piece exactly as drawn and tap forward to frame seven.",
   "webLeverage": "Animated SVG arrows demonstrate each action without words while step state persists in localStorage",
   "sourceConceptId": "notation-diagram-systems-ikea-instructions",
   "provenanceNote": "not interesting visually enough"
  },
  {
   "id": "reveal-transform-affinity-surface",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as an affinity surface, where regions the visitor marks become receptive and unmarked ground actively refuses, and a final transfer pass prints only the receptive regions into a repeatable result",
   "lineage": "Stone lithography, grease and water chemistry, resist and mask techniques in printmaking",
   "tags": [
    "receptive-regions",
    "resist-mask",
    "transfer-pass"
   ],
   "grammar": [
    "Staging/hierarchy: one large working surface owns the viewport; marked regions read as committed, unmarked ground as resting, and a transfer control waits at the edge",
    "Sequence/attention: attention follows cause and refusal: marking, preparing, wetting, then a pass in which effect settles only where marks were laid",
    "Controls/state: draw, prepare, wet, roll, and print; regions hold receptive, repelling, inked, contaminated, and clean states",
    "Adaptation: small screens stack the process as registered layers stepped in order"
   ],
   "spark": "You drag a mark across the surface, sweep the pass over everything, and the effect takes hold only along your line while the rest of the ground sheds it untouched.",
   "webLeverage": "Canvas or SVG masks demonstrate attraction and refusal live, confining the effect to exactly the marked region",
   "sourceConceptId": "ink-pigment-printmaking-lithographic-water-stone"
  },
  {
   "id": "reveal-transform-aligned-fragments-snap",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as scattered fragments that resolve from one viewpoint, where meaningless suspended pieces cast a single coherent figure only when the visitor moves the view or the source into exact alignment",
   "lineage": "Anamorphic art, shadow sculpture, spatial illusion craft, and perspective-dependent installation",
   "tags": [
    "viewpoint-alignment",
    "scattered-fragments",
    "coherence-snap"
   ],
   "grammar": [
    "Staging/hierarchy: The projection surface owns the viewport with the cast figure as the payoff; the fragment field hangs between source and surface, the alignment axis rules all.",
    "Sequence/attention: Attention begins in disorder, tracks the figure sharpening as alignment improves, and lands on the snap of coherence; leaving the viewpoint breaks it again.",
    "Controls/state: The visitor moves the view or the source; the composition carries scattered, approaching, aligned, and broken states.",
    "Adaptation: Small screens guide a stepped alignment arc with a progress cue; the snap stays subtle"
   ],
   "spark": "The visitor drags the viewpoint a few degrees at a time; the cast figure thickens from noise toward legibility, refuses at first, then locks whole in one small motion that makes every fragment retroactively necessary.",
   "webLeverage": "Perspective transforms tied to pointer position make alignment a continuous browser-native input.",
   "sourceConceptId": "light-shadow-caustics-anamorphic-shadow-sculpture"
  },
  {
   "id": "reveal-transform-before-after-page",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as two complete states, where every section is authored in a before version and an after version and one persistent control sweeps between them at any scroll depth, so the delta itself is the argument",
   "lineage": "comparison sliders generalized to whole documents, restoration reveals, A/B overlays",
   "tags": [
    "dual-state",
    "persistent-sweep",
    "delta-argument"
   ],
   "grammar": [
    "Staging/hierarchy: Two full page states share one layout skeleton; the fixed sweep control outranks everything except the primary action.",
    "Sequence/attention: Scroll moves through sections while the sweep moves through states; each section rewards a sweep by changing its own evidence.",
    "Controls/state: The sweep is draggable and keyboard-steppable at every depth; states are before, after, and any mid-sweep position, held across sections.",
    "Adaptation: Narrow screens keep the sweep as a fixed bottom control"
   ],
   "spark": "Halfway down the pricing section you drag the sweep left and the same table reorganizes into the old way, you drag it right and the saved columns return, and you keep flicking it back and forth just to watch the difference argue for itself.",
   "webLeverage": "CSS clip-path insets over two stacked DOM trees make the sweep a single custom-property update."
  },
  {
   "id": "reveal-transform-carried-motion",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a page staged as scenes that refuse clean cuts, where each transition drags the previous section's motion into the next, edges between sections deliberately bleed, and breakage intensity is authored to spike only at real state changes",
   "lineage": "Glitch video practice, codec keyframe manipulation, motion-vector compositing",
   "tags": [
    "motion-carryover",
    "bleeding-edges",
    "authored-breakage"
   ],
   "grammar": [
    "Staging/hierarchy: the current scene owns the frame and stays structurally stable; the smear layer rides above only during transitions, and titles refuse it.",
    "Sequence/attention: attention crosses sections through the smear itself; the previous scene's motion visibly pulls into the next, so continuity is felt, not cut.",
    "Controls/state: breakage intensity is a parameter tied to meaning; ordinary browsing stays clean, and spikes mark genuine state changes only.",
    "Adaptation: smears shorten on small screens"
   ],
   "spark": "You trigger the section change and the outgoing image refuses to leave; its motion drags across the incoming layout for half a second, then the new scene settles clean, and you understand the two sections shared one gesture.",
   "webLeverage": "Canvas pixel-flow displacement produces true motion-carrying transitions between real DOM states.",
   "sourceConceptId": "medium-native-datamosh-bloom-reel"
  },
  {
   "id": "reveal-transform-concentric-disclosure-cycle",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as a concentric disclosure driven by one input axis, where nested layers unfold outward in ordered sequence to expose a functional center, then close again in reverse when the driving condition falls",
   "lineage": "Botanical time-lapse film, kinetic aperture mechanisms, nested reliquary cases, and radial exploded diagrams",
   "tags": [
    "concentric-layers",
    "input-driven",
    "open-close-cycle"
   ],
   "grammar": [
    "Staging/hierarchy: The nested subject owns the center; outer layers frame it while closed, the exposed core leads while open, and the input axis rules the whole cycle.",
    "Sequence/attention: Attention follows unfolding order from outermost layer inward to the revealed center, then the open window, then the closing sequence in reverse.",
    "Controls/state: The visitor drives the input axis and inspects each layer; states are closed, opening, receptive, and closing.",
    "Adaptation: Small screens disclose layer by layer as stacked panels under the same input; opening speed always belongs to the visitor, never a timer."
   ],
   "spark": "The visitor drags the input up and the outer layers peel back in strict order; the center appears only at full value, holds while the input holds, and folds shut layer by layer the moment it drops.",
   "webLeverage": "CSS transforms staggered along one custom property make the whole cycle a single scrubbed value.",
   "sourceConceptId": "growth-metamorphosis-branching-flower-bloom-mechanics",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "reveal-transform-constraint-collapse",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a page staged as a field deciding itself, where undecided regions visibly hold every option they could still become, each committed choice ripples legality outward through its neighbors, and contradiction rewinds honestly to the last consistent state",
   "lineage": "Wave-function-collapse generators, constraint-based tile solvers, incremental town builders",
   "tags": [
    "superposition-field",
    "commitment-ripple",
    "visible-frontier"
   ],
   "grammar": [
    "Staging/hierarchy: committed regions read as finished content; the undecided frontier shimmers as a distinct layer, and a small strip reports remaining choice.",
    "Sequence/attention: attention rides the collapse wave; each commitment steadies its neighborhood, and the frontier's shrinking edge is the page's progress.",
    "Controls/state: pinning any element commits it and propagates constraints outward; contradiction rewinds visibly to the last consistent block, never silently.",
    "Adaptation: collapse advances region by region at a rate the visitor sets"
   ],
   "spark": "You pin one choice near the center and the shimmer around it steadies; adjacent regions commit in a spreading ring, the remaining-choice count ticks down, and one far corner stays undecided, waiting on you.",
   "webLeverage": "Constraint propagation runs live in a worker, so each pointer placement collapses possibilities in real time.",
   "sourceConceptId": "medium-native-wfc-tile-quarter",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "reveal-transform-dissection-plate",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as a dissection plate, where the subject holds one fixed pose while numbered layers peel away to expose its depths, hairline leaders running from each exposed part to a lettered key in the margin",
   "lineage": "Anatomical atlas engravings, cutaway technical plates, labeled scientific illustration",
   "tags": [
    "layer-peel",
    "lettered-leaders",
    "margin-key"
   ],
   "grammar": [
    "Staging/hierarchy: the posed subject owns the center at constant scale; the margin key ranks every lettered part in a fixed outer column",
    "Sequence/attention: attention steps depth by depth from surface to core; the current layer renders full while deeper layers ghost beneath, the pose never changing",
    "Controls/state: pick a letter in the key or a part on the subject; either lights its leader line, and layers hold surface, exposed, ghosted, and focused states",
    "Adaptation: the key docks beside or below the subject with leaders redrawn to stay uncrossed"
   ],
   "spark": "You tap letter c in the margin, the outer shell ghosts back, and a hairline leader snaps to the newly exposed part while the subject holds exactly the same pose.",
   "webLeverage": "Layered SVG peels via opacity states, with leader lines recomputed by ResizeObserver on every reflow",
   "sourceConceptId": "notation-diagram-systems-anatomical-plate",
   "provenanceNote": "anatomical disection is good, but not literally on humans - wish we could replace with something that anatomically breakdown hardware or a product ui or something.."
  },
  {
   "id": "reveal-transform-exploded-axis",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as an exploded assembly, where the product's parts levitate along one shared axis in install order, leader lines tie each part to a numbered ledger row, and the whole can fly back together on demand",
   "lineage": "Maintenance-manual exploded views, patent drawings, cutaway assembly diagrams",
   "tags": [
    "axis-explosion",
    "parts-ledger",
    "leader-lines"
   ],
   "grammar": [
    "Staging/hierarchy: the exploded drawing owns the field with parts hanging in order along one axis; the ledger runs as a parallel ruled index at the edge",
    "Sequence/attention: distance from center is assembly order; attention travels the axis outward or follows ledger rows inward to their parts",
    "Controls/state: picking a ledger row lights its leader and part; parts hold exploded, highlighted, and seated states, and specs live in the ledger, never on the drawing",
    "Adaptation: the explosion re-aims vertical on narrow frames with leaders rerouted uncrossed"
   ],
   "spark": "You drag the scroll and forty suspended parts drift home along the axis one by one, the ledger row of the last seated piece lighting as it lands.",
   "webLeverage": "Scroll-driven animation collapses the exploded axis while SVG leader lines recompute per viewport",
   "sourceConceptId": "notation-diagram-systems-exploded-assembly"
  },
  {
   "id": "reveal-transform-flat-page-standing-city",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as a flat sheet that stands up into dense structure, where crossing a threshold angle raises streets, bridges, and interiors at once from strategic cuts, and the flat cutting pattern remains inspectable beside its spatial result",
   "lineage": "Pop-up book engineering, architectural paper models, movable books, and cut-and-fold pattern craft",
   "tags": [
    "fold-threshold",
    "cut-pattern",
    "standing-structure"
   ],
   "grammar": [
    "Staging/hierarchy: The page plane owns the ground with the fold hinge as its ruling axis; the standing structure leads once raised, flat-plane captions support beneath the forms.",
    "Sequence/attention: Attention follows the opening angle: flat pattern first, the threshold moment when everything rises at once, then free movement among the standing blocks.",
    "Controls/state: The visitor opens, flattens, isolates blocks, and compares pattern to result; the structure carries nested, rising, standing, obstructed, and closed states.",
    "Adaptation: Small screens present sectional elevations and advance the opening through discrete angles"
   ],
   "spark": "The visitor drags the fold past its threshold and an entire district stands up in one motion; tapping any risen block highlights the exact cuts on the flat pattern that made it possible.",
   "webLeverage": "3D CSS transforms linked to one fold angle connect cutting pattern to spatial result live.",
   "sourceConceptId": "paper-folds-pleats-deployable-pop-up-street-cut",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "reveal-transform-folding-volume",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "one small volume refitted by folding elements, where stowed parts unfold in numbered steps to turn the same footprint into distinct working scenes",
   "lineage": "Transformable interiors, campaign furniture, compact-dwelling joinery, pop-up book engineering",
   "tags": [
    "fold-steps",
    "shared-footprint",
    "scene-swap"
   ],
   "grammar": [
    "Staging/hierarchy: The fixed footprint owns the viewport; the element currently unfolding leads, stowed elements wait as visible edges, and each scene is titled like a plate.",
    "Sequence/attention: Attention follows numbered fold steps; each move clears space for the next, so a scene change reads as a sequence of concrete manipulations.",
    "Controls/state: The visitor drags one element through its safe path per step; the volume shows clearances, conflicts, and stored contents in stowed, moving, and deployed states.",
    "Adaptation: Phones use paired before-and-after frames per fold step"
   ],
   "spark": "The visitor drags the work surface out along its track; a stored panel swings clear, the clearance zone flashes where two paths would collide, and step three retitles the same footprint as a different scene.",
   "webLeverage": "Constraint-aware drag paths with URL state per configuration, so every folded arrangement is shareable and replayable step by step.",
   "sourceConceptId": "architecture-inhabitable-space-folding-room-furniture",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "reveal-transform-lit-veil",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a veil layer that reads as solid until relit, where one lighting change makes the front image transparent and reveals a complete scene already waiting behind it",
   "lineage": "Theatrical scrim, scenic painting, light-controlled reveals, magic-lantern dissolves",
   "tags": [
    "layered-opacity",
    "light-reveal",
    "registered-layers"
   ],
   "grammar": [
    "Staging/hierarchy: The front veil owns the first viewport as a full image; the hidden scene sits registered behind it on a shared alignment grid, present but unlit.",
    "Sequence/attention: Attention holds on the veil until the light shifts; the reveal reads as one continuous change of illumination, not a swap, and mid-states ghost both layers.",
    "Controls/state: The visitor moves the light, holds a ghosted mid-state, and resets; the veil is opaque, ghosted, transparent, exposed, and restored.",
    "Adaptation: Small screens get explicit reveal controls and side-by-side layers, with the hidden scene always reachable in the document."
   ],
   "spark": "The visitor drags the light source from front to back; the cover image thins to a ghost, and a fully set scene appears through it, seated in register with every element of the picture it hid.",
   "webLeverage": "Layered DOM with animated opacity and blend state, where the hidden layer stays in the accessible document and one control drives front-to-back lighting.",
   "sourceConceptId": "stagecraft-theater-lighting-scrim-reveal-banquet",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "reveal-transform-mask-through-letter",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as a mask zoom through a letterform, where the opening viewport is one giant glyph acting as a window onto moving content, and scroll scales the glyph until its counter swallows the frame and becomes the page",
   "lineage": "film title-sequence mask zooms, logo-reveal cinema, keyhole shots",
   "tags": [
    "mask-zoom",
    "scroll-scale",
    "window-frame"
   ],
   "grammar": [
    "Staging/hierarchy: The glyph mask owns the viewport; content lives behind it and is read only through its apertures until the zoom completes.",
    "Sequence/attention: Scroll drives one continuous zoom: glimpse through the glyph, its edges pass offscreen, its counter opens into the full page.",
    "Controls/state: Scroll is the only control through the reveal; past the threshold the page is a normal document with navigation and one committed action.",
    "Adaptation: Small screens run a shorter zoom with the same three beats: glimpse, threshold, page."
   ],
   "spark": "You scroll and the enormous glyph grows past the edges, the scene behind it widening through the opening, until one last tick snaps you inside and the headline you were peeking at is now the page you are standing on.",
   "webLeverage": "SVG clip-path masking with a scroll-driven transform scales the glyph as one compositor-only animation."
  },
  {
   "id": "reveal-transform-masked-stage",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as one fixed-ratio stage, where sections arrive as masked panels sweeping open along authored paths, loading is treated as theatre with a visible count, and a persistent corner strip holds the escape and utility controls",
   "lineage": "Fixed-stage interactive sites, masked scene transitions, the skip-intro convention",
   "tags": [
    "fixed-stage",
    "masked-reveals",
    "loading-theatre"
   ],
   "grammar": [
    "Staging/hierarchy: a letterboxed stage owns the center against a full-bleed surround; scenes compose inside it, and a small persistent corner strip holds skip and utility controls",
    "Sequence/attention: one stage swaps scenes; each section enters as a masked sweep along a motion path, and the arrival itself is part of the message",
    "Controls/state: controls arm with a visible sweep before firing; loading counts to completion in view, and the current scene stays lit while others retract",
    "Adaptation: the stage letterboxes to fit any window rather than reflowing"
   ],
   "spark": "The counter ticks to one hundred, panels sweep the stage open along their paths, and you leave the skip control untouched in the corner because the entrance is the point.",
   "webLeverage": "CSS clip-path masks sweep panels open on a fixed-ratio stage while canvas draws the visible loading count",
   "sourceConceptId": "digital-design-canon-flash-agency-stage",
   "provenanceNote": "too game hud ui, I think"
  },
  {
   "id": "reveal-transform-mutable-anchor",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as a sequence of short-lived worlds, where one anchor mark keeps its corner and silhouette while every surrounding treatment mutates wholly between sections, the constant element making total change legible",
   "lineage": "Broadcast ident programs, station identity sequences, handmade title cards",
   "tags": [
    "constant-anchor",
    "whole-world-swap",
    "material-mutation"
   ],
   "grammar": [
    "Staging/hierarchy: the anchor mark holds one corner at every width; the rest of the frame belongs entirely to the current section's treatment",
    "Sequence/attention: you surf forward through self-contained worlds a few beats long; the fixed anchor is the only continuity while composition changes wholly",
    "Controls/state: the active section repaints the anchor in its own treatment; interaction lands with a deliberate stutter, and each world is addressable",
    "Adaptation: the anchor scales but never leaves its corner"
   ],
   "spark": "You advance a section and the whole frame becomes a different built world in one cut, the corner mark absorbing the new treatment without moving a pixel.",
   "webLeverage": "CSS steps() timing fakes handmade cadence while SVG filters lay per-world texture over each scene",
   "sourceConceptId": "digital-design-canon-mtv-ident-collage"
  },
  {
   "id": "reveal-transform-page-stack-assembly",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as its own exploded stack, where the sections first hover as separated layers in depth and scroll drives them together, each layer seating into the flat document until the final section shows the stack fully bound",
   "lineage": "exploded technical drawings, parallax depth stacks, print signature binding",
   "tags": [
    "exploded-stack",
    "scroll-assembly",
    "self-referential"
   ],
   "grammar": [
    "Staging/hierarchy: The hovering stack owns the opening viewport; each layer is a real section preview, and the assembled document owns everything after.",
    "Sequence/attention: Scroll is assembly: layers travel and settle in reading order, and each one seats exactly when its content is due to be read.",
    "Controls/state: Scroll drives assembly forward and back; clicking a hovering layer fast-forwards assembly to that section; the bound page is the resting state.",
    "Adaptation: Small screens stage assembly as a vertical stack closing its gaps"
   ],
   "spark": "You scroll and the third layer glides down out of the depth, seats flush against the two above it, and its headline becomes readable at the exact moment it locks in, so reading the page and building the page are the same motion.",
   "webLeverage": "3D CSS transforms driven by scroll-linked animation timelines move each layer along its assembly path."
  },
  {
   "id": "reveal-transform-parallel-making",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a page staged as parallel texts, where the finished surface and the record of its making run side by side with aligned seams, the author's commentary lives inside the making itself, and every element links to the exact place it was made",
   "lineage": "View-source culture, annotated scores and manuscripts, workshop tours",
   "tags": [
    "parallel-texts",
    "aligned-seams",
    "author-commentary"
   ],
   "grammar": [
    "Staging/hierarchy: the finished surface leads and its making runs alongside as an equal column; the currently anchored seam lights on both sides at once.",
    "Sequence/attention: reading crosses between the thing and its making at anchored seams; commentary waits at exactly the joints a visitor would question.",
    "Controls/state: toggling exposure reveals the actual construction, not a simulation of it; annotations are real comments living in the artifact itself.",
    "Adaptation: the making pane stacks below the surface on small screens with seams preserved as jump links; typed-out reveals become instant under"
   ],
   "spark": "You tap the seam beside a section you admire and the making column scrolls to the lines that produced it; the author is already waiting there in a comment, explaining the joint you were about to ask about.",
   "webLeverage": "The artifact is both work and document: one semantic source renders as page and as legible construction.",
   "sourceConceptId": "medium-native-view-source-open-workshop",
   "provenanceNote": "good example of a good layout / landing page concept, but a bad visual world..wish we could preserve the concept but strenghten the world"
  },
  {
   "id": "reveal-transform-peeled-strata",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a history surface staged as accumulated overlapping markers, where each new entry lands over older ones at its own angle and peeling one back reveals what it covered, with nothing ever erased and the full order recoverable from the pile",
   "lineage": "Grand-hotel luggage labels, street poster paste-overs, palimpsest manuscripts",
   "tags": [
    "overlap-accretion",
    "peel-reveal",
    "recoverable-order"
   ],
   "grammar": [
    "Staging/hierarchy: one host surface owns the viewport; entries accumulate on it as overlapping markers, the newest on top and partly covering its elders.",
    "Sequence/attention: attention starts at the topmost entry and travels down the stack; reading order is recovered by peeling, newest back to oldest.",
    "Controls/state: drag or tap peels a marker back to expose what it covers; peels are reversible and every layer stays present and addressable.",
    "Adaptation: small screens reflow the stack into era groups while keeping overlap within each group"
   ],
   "spark": "You drag the corner of the newest entry and it folds back, exposing the half of an older one it had buried; three peels down you find the first entry the subject ever earned, still intact under everything since.",
   "webLeverage": "Z-indexed DOM layers with drag-to-peel gestures keep every historical layer real, accessible, and deep-linkable.",
   "sourceConceptId": "vernacular-ephemera-steamer-trunk-labels"
  },
  {
   "id": "reveal-transform-raking-beam",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "an ordered collection lit by one raking beam, where fine details surface only inside the moving shaft of attention and the underlying hierarchy never rearranges",
   "lineage": "Raking-light examination, archival box practice, conservation imaging, guided lantern tours",
   "tags": [
    "raking-light",
    "stable-hierarchy",
    "surfaced-detail"
   ],
   "grammar": [
    "Staging/hierarchy: The ordered shelves own the viewport in a faint catalog hierarchy; the beam leads, and whatever it currently rakes carries the page's full detail.",
    "Sequence/attention: Attention rides the shaft: sweeping it across the collection surfaces marks, textures, and annotations in passing, and details dim again as it moves on.",
    "Controls/state: The visitor sweeps the beam, opens a documented layer, and compares condition before and after handling; items are shelved, raked, opened, and recorded.",
    "Adaptation: Phones present one illuminated detail per viewport with the hierarchy stable beneath"
   ],
   "spark": "The visitor drags the beam across the fourth shelf; a faint handwritten mark surfaces on one container, opening it reveals its documented layers, and the beam moves on leaving the catalog order untouched.",
   "webLeverage": "A pointer-driven CSS mask sweeps illumination over accessible DOM records, with relightable image layers and deep links per item.",
   "sourceConceptId": "memory-palimpsest-ruins-archive-dust-sunbeam-archive",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "reveal-transform-reduction-passes",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as a reduction sequence, where the subject is built in ordered passes from one shared matrix and every new pass permanently destroys part of the working surface, so progress and loss accumulate together",
   "lineage": "Reduction relief printmaking, single-block multicolor woodcut editions",
   "tags": [
    "irreversible-steps",
    "cumulative-layers",
    "destroyed-matrix"
   ],
   "grammar": [
    "Staging/hierarchy: the accumulating result owns the center; a timeline of passes runs alongside it, and the shrinking surviving matrix is shown as its own honest layer",
    "Sequence/attention: attention steps pass by pass; each stage adds to the image while visibly removing options, and the sequence reads forward only",
    "Controls/state: step, toggle any pass layer, and compare before and after; states are available, removed, printed, misregistered, and exhausted",
    "Adaptation: passes stack as toggled layers in one column on small screens"
   ],
   "spark": "You advance to the third pass and watch new depth arrive while the matrix panel loses another region for good, the timeline recording exactly what can never be reprinted.",
   "webLeverage": "Registered image layers with per-pass toggles give exact before and after comparison of cumulative, irreversible change",
   "sourceConceptId": "ink-pigment-printmaking-reduction-woodcut-night-garden"
  },
  {
   "id": "reveal-transform-released-plume-settle",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as a single release blooming into branching structure, where one committed drop descends through a clear field, unfolds into tendrils and fronts, and settles into an irreversible mixed state that records the action",
   "lineage": "High-speed ink photography, flow-tank experiments, fluid-dynamics imaging, and process-based installation art",
   "tags": [
    "single-release",
    "branching-descent",
    "irreversible-mix"
   ],
   "grammar": [
    "Staging/hierarchy: The clear vessel owns the viewport; the release point crowns the composition, the descending plume leads, and the settled mixed volume accumulates at the base.",
    "Sequence/attention: Attention follows the vertical descent from drop to cap to tendril to mixing front; each release replays the same order, the base records every release so far.",
    "Controls/state: The visitor releases drops and changes their density; the volume carries suspended, descending, folding, and mixed states.",
    "Adaptation: Small screens present the vessel as a tall section in one column; motion runs only when the visitor triggers a release, never ambiently."
   ],
   "spark": "The visitor taps once and a single dark point falls, blossoms into branching arms mid-field, and dissolves toward the floor; the vessel is measurably less clear than before, and no control will ever undo it.",
   "webLeverage": "Canvas advection driven by pointer-triggered impulses renders irreversible mixing cheaply.",
   "sourceConceptId": "fluids-vortices-turbulence-ink-water-bloom",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "reveal-transform-rule-grown-spiral",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as an architecture grown by one repeated edge rule, where every visible chamber is the consequence of the same small addition at increasing scale, proportion holds across the whole, and changing the rule regrows everything",
   "lineage": "Mollusk shell morphology, logarithmic-spiral geometry, mathematical natural-history illustration, and generative craft",
   "tags": [
    "generative-rule",
    "proportional-growth",
    "edge-accretion"
   ],
   "grammar": [
    "Staging/hierarchy: The grown form owns the viewport with its live growth edge as the focal point; earlier chambers rank inward by age, and one proportion grid rules all placement.",
    "Sequence/attention: Attention starts at the origin chamber and follows the accretion path outward; section cuts interrupt to show interior memory before returning to the edge.",
    "Controls/state: The visitor changes the growth ratio and cuts sections; the form carries initiating, accreting, chambered, and occupied states.",
    "Adaptation: Small screens unroll the spiral into a proportional strip read start to edge; regrowth animates only on request and otherwise steps."
   ],
   "spark": "The visitor nudges the ratio slider one notch and the entire architecture regrows, every chamber resized yet the proportions between neighbors unchanged, the newest edge landing in a different place for the same reason.",
   "webLeverage": "Procedural SVG generation from a single parameter makes form a live consequence of rule.",
   "sourceConceptId": "growth-metamorphosis-branching-shell-logarithmic-growth",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "reveal-transform-staged-reorganization-chambers",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as connected transformation chambers, where the subject passes through numbered stages along one reading path and the central chamber shows old structure dissolving and reorganizing into a different final form",
   "lineage": "Metamorphosis science, natural-history macro cinematography, staged process diagrams, and exhibit case sequences",
   "tags": [
    "numbered-stages",
    "reorganization",
    "one-path"
   ],
   "grammar": [
    "Staging/hierarchy: The chamber sequence owns the page along one reading path; the reorganization chamber is the centerpiece, and stage numbers rank progress on the spine.",
    "Sequence/attention: Attention moves stage by stage in fixed order; the interior dissolve is entered deliberately, and emergence resolves into the finished form at the end.",
    "Controls/state: The visitor scrubs development and inspects internal detail per stage; states are growing, reorganizing, emerging, and active.",
    "Adaptation: Small screens give each stage its own viewport in sequence; every step is reversible"
   ],
   "spark": "The visitor drags the development slider into the sealed middle chamber, watches the familiar outline dissolve into parts, reorder, and re-emerge with entirely different anatomy, then steps it backward to confirm nothing was hidden.",
   "webLeverage": "Interpolated SVG morphs under one scrubbed input make radical stage change inspectable in both directions.",
   "sourceConceptId": "growth-metamorphosis-branching-butterfly-metamorphic-chambers",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "reveal-transform-stroke-score",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a page staged as an ordered score that draws itself, where every element is a stroke with a queue position, pauses read as rests, one stroke is emphasized above all others, and the whole can be replayed, reordered, or muted",
   "lineage": "Pen-plotter art, musical notation, drafting-table process films",
   "tags": [
    "ordered-strokes",
    "draw-replay",
    "single-emphasis"
   ],
   "grammar": [
    "Staging/hierarchy: the sheet owns the viewport as one composition; the stroke currently drawing leads, and the emphasized stroke outranks everything once it lands.",
    "Sequence/attention: attention follows the drawing head through the authored order; rests between sections give the eye a beat before the next passage.",
    "Controls/state: strokes hold queued, drawing, lifted, and completed states; visitors replay, reorder, mute, and emphasize, and playback is strictly user-started.",
    "Adaptation: the score presents as a scrollable stroke list on small screens"
   ],
   "spark": "You mute the forty background strokes and replay; the sheet stays almost empty until the single emphasized stroke crosses the entire surface alone, and the point of the whole composition lands in one motion.",
   "webLeverage": "A deterministic vector path animates, exports, and exposes every stroke as ordered accessible content.",
   "sourceConceptId": "generative-art-computational-plotter-pen-score"
  },
  {
   "id": "reveal-transform-translation-gate",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a page split into two rule-worlds joined by a gate, where any item passed through the seam is translated by the far side's laws of scale, order, and behavior",
   "lineage": "Portal fiction, stage illusion thresholds, mathematical mapping diagrams, split-screen film grammar",
   "tags": [
    "paired-panes",
    "threshold-translation",
    "rule-worlds"
   ],
   "grammar": [
    "Staging/hierarchy: Two panes share the viewport with mirrored layouts; the gate seam between them leads, and translated items support the comparison.",
    "Sequence/attention: Attention ping-pongs across the seam: send an item, watch its translated twin arrive, then read the paired captions naming the mapping.",
    "Controls/state: The visitor passes items through the gate, alters one side's law, and reverses a crossing; states are stable, mid-crossing, translated, and restored.",
    "Adaptation: Small screens stack the panes with the gate as a horizontal band"
   ],
   "spark": "The visitor drags the product's spec card through the seam; it arrives on the far pane rewritten under the other regime's units, and both captions update to name exactly what the crossing changed.",
   "webLeverage": "Drag-and-drop across two synchronized panes, with a view transition morphing the item as it crosses the seam and state recording each crossing.",
   "sourceConceptId": "dream-surreal-impossible-worlds-dimensional-gates"
  },
  {
   "id": "reveal-transform-turntable-scenes",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a set of scenes carried on one circular turntable, where rotation edits which scene faces the visitor without a blackout and exposes what was happening behind it",
   "lineage": "Revolve stages, theatrical montage, simultaneous scenic composition, turntable set design",
   "tags": [
    "rotation-edit",
    "simultaneity",
    "shared-center"
   ],
   "grammar": [
    "Staging/hierarchy: One turntable owns the viewport; the facing wedge leads at full depth while adjacent wedges show their edges and the far side stays legible in outline.",
    "Sequence/attention: Attention is edited by rotation: a scene turns away mid-action and its back wall becomes the next scene, so reveals arrive as continuations, not cuts.",
    "Controls/state: The visitor rotates, holds, and compares opposite wedges; scenes are visible, approaching, hidden, simultaneous, and returned.",
    "Adaptation: Small screens replace rotation with a labeled circular scene selector"
   ],
   "spark": "The visitor drags the wheel a quarter turn; the feature scene rotates away mid-demonstration and its back face is already another scene where the same data has been listening all along.",
   "webLeverage": "A CSS 3D rotation with view transitions between wedge states, plus a keyboard-operable circular selector addressing every scene directly.",
   "sourceConceptId": "stagecraft-theater-lighting-revolving-house",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "reveal-transform-xray-toggle",
   "familyId": "reveal-transform",
   "surface": "operate",
   "form": "an app screen staged as a finished surface over an x-ray, where one switch strips the interface to its skeleton, data flows, or true costs, and both layers stay spatially registered so they describe the same anatomy",
   "lineage": "cutaway technical drawings, browser dev-tools inspection, architectural section drawings",
   "tags": [
    "layer-toggle",
    "registered-anatomy",
    "structural-reveal"
   ],
   "grammar": [
    "Staging/hierarchy: The finished surface is the default; the x-ray layer sits registered beneath it, and the toggle stays visible in the chrome.",
    "Sequence/attention: Flipping the switch holds every element in place while its skin drops away, so the eye maps each part to its exposed structure.",
    "Controls/state: Two global states, surface and x-ray; hovering the x-ray highlights the matching surface element; deep links can open in either state.",
    "Adaptation: Small screens toggle full-screen between the registered layers"
   ],
   "spark": "You flip the switch and the polished dashboard falls away to its plumbing, the number you were staring at now trailing a drawn line to the query that produced it, and you tap that line to see what it costs.",
   "webLeverage": "Two aligned DOM layers under one grid, swapped with a view transition that keeps shared elements pinned in place."
  },
  {
   "id": "spatial-navigation-angle-dependent-facets",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as an overlapping array whose reading changes with viewing angle, where no single viewpoint tells the whole truth, alternate facets appear as the visitor moves, and a persistent index keeps every facet discoverable",
   "lineage": "Dichroic and lenticular optics, angle-dependent architectural glass, and viewpoint-based installation",
   "tags": [
    "viewpoint-facets",
    "overlapping-layers",
    "persistent-index"
   ],
   "grammar": [
    "Staging/hierarchy: The layered array owns the viewport in an overlapping vertical rhythm; the facet visible from the current angle leads, a fixed index off the array supports.",
    "Sequence/attention: Attention shifts as the viewpoint shifts: passing the array reveals successive facets in order, and the index confirms which readings remain unvisited.",
    "Controls/state: The visitor changes angle, stacks layers, and compares readings; the array carries transmitted, reflected, overlapping, and neutral states.",
    "Adaptation: Small screens offer discrete named viewpoints instead of continuous movement; every angle-dependent change pairs with a label so no reading depends on the effect."
   ],
   "spark": "The visitor drags sideways and the array's message reorganizes into a second reading they could not have predicted from the first; the index marks both as seen and points to a third still waiting at a steeper angle.",
   "webLeverage": "Pointer- or gyroscope-driven view transforms make angle a first-class input with indexed fallbacks.",
   "sourceConceptId": "glass-refraction-transparency-dichroic-laminar-gate",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "spatial-navigation-annotated-margins",
   "familyId": "spatial-navigation",
   "surface": "operate",
   "form": "an app screen staged as an annotated manuscript, where one calm primary column carries the work and every note, citation, counter, and control lives in the margin at an exact anchor point, expanding in place without ever interrupting the main flow",
   "lineage": "medieval manuscript glosses, Tufte sidenotes, code review comment threads",
   "tags": [
    "margin-anchored",
    "primary-column",
    "inline-expansion"
   ],
   "grammar": [
    "Staging/hierarchy: The single reading column owns the center; margins hold anchored annotations that never overlap the column or push its content.",
    "Sequence/attention: Attention stays in the column; annotations surface in the margin exactly level with their anchors as those anchors scroll into view.",
    "Controls/state: Each annotation expands and collapses in place; states are collapsed, expanded, and editing, with one margin item active at a time.",
    "Adaptation: Narrow screens fold margins into inline disclosure rows directly beneath their anchors"
   ],
   "spark": "You select a sentence in the column, a note blooms in the margin exactly level with it, you type a reply and collapse it, and the column you were reading never moved a pixel.",
   "webLeverage": "CSS anchor positioning and sticky margin tracks keep each annotation level with its anchor during scroll."
  },
  {
   "id": "spatial-navigation-branching-fan-routes",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as a single trunk fanning into branching routes, where one entry stream splits into many navigable paths that build their own ground between them and all arrive at the same destination edge",
   "lineage": "Delta geomorphology, braided route maps, decision-tree diagrams, and aerial survey photography",
   "tags": [
    "trunk-to-branches",
    "many-routes",
    "upstream-context"
   ],
   "grammar": [
    "Staging/hierarchy: The single trunk leads at the top; branches fan downward with built-up islands between them, and the shared destination closes the composition as one flat edge.",
    "Sequence/attention: Attention enters at the trunk, follows one chosen branch downstream, and keeps every split point visible so alternate routes stay reachable.",
    "Controls/state: The visitor redirects flow and follows a branch; channels carry active, silting, abandoned, and newly-cut states.",
    "Adaptation: Small screens linearize the selected branch with markers back to each split"
   ],
   "spark": "The visitor picks the second branch at the first split; the chosen thread thickens, its neighbors thin without vanishing, and the path runs island by island until it meets the same edge every other route ends on.",
   "webLeverage": "SVG path networks with stroke animation thicken chosen routes while the full fan stays one map.",
   "sourceConceptId": "rivers-tides-ocean-depths-delta-distributary-fan",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "spatial-navigation-continuous-world",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a page staged as one continuous generated space, where the camera path is the interface, every place is a coordinate rather than a screen, and named states morph the world through smooth parameter changes instead of scene swaps",
   "lineage": "Raymarched shader worlds, procedural terrain flythroughs, single-scene long takes",
   "tags": [
    "one-continuous-space",
    "camera-as-interface",
    "parameter-morph"
   ],
   "grammar": [
    "Staging/hierarchy: the rendered world owns the full frame; text floats sparse on translucent panels above it, and current coordinates anchor one corner.",
    "Sequence/attention: navigation is a continuous camera move, never a cut; destinations are coordinates the camera travels to, so arrival always has a path.",
    "Controls/state: named conditions are continuous dials, not scene swaps; the world morphs smoothly between them and any configuration is addressable.",
    "Adaptation: render resolution scales honestly to the frame budget; reduced capability gets a still render of the same scene with its described state."
   ],
   "spark": "You tap a destination and nothing cuts; the camera swings through the space between here and there, the world morphing one dial's worth along the way, and the coordinates in the corner count through every point you pass.",
   "webLeverage": "A full-screen fragment shader renders the world live with uniforms bound directly to page state.",
   "sourceConceptId": "medium-native-single-shader-pocket-world",
   "provenanceNote": "abstract but produced interesting ui... desktop ui needs regen"
  },
  {
   "id": "spatial-navigation-depth-landscape",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as an information landscape in depth, where content hangs at distances in translucent space, hierarchy is proximity, and flying toward a topic resolves its children out of haze while siblings slide past the frame",
   "lineage": "Early digital typographic landscapes, fly-through information visualization, depth-staged interfaces",
   "tags": [
    "z-axis-hierarchy",
    "proximity-focus",
    "resolve-from-haze"
   ],
   "grammar": [
    "Staging/hierarchy: near items are large and sharp, far items small and soft; distance is the only ranking, and nothing needs a box to declare importance",
    "Sequence/attention: attention is a camera dolly; moving toward a topic sharpens it and resolves its children while everything else recedes into haze",
    "Controls/state: focus pulls an item to the near plane in sharp resolve; selection is proximity rather than highlight, and defocused items dim in place",
    "Adaptation: small screens flatten the fly-through into layered parallax cards"
   ],
   "spark": "You push toward one heading and it swells and sharpens, three child items condensing out of the blur behind it as the neighboring topic banks past the frame edge.",
   "webLeverage": "CSS 3D perspective and filter blur rank the depth planes while scroll drives the dolly through them",
   "sourceConceptId": "digital-design-canon-cooper-information-landscape",
   "provenanceNote": "boring system"
  },
  {
   "id": "spatial-navigation-diagonal-axis",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged on one diagonal, where content descends stair-wise along a single slope so each scroll reveals the next tread, and the perpendicular direction is reserved for asides",
   "lineage": "constructivist diagonals, isometric game maps, staircase sections",
   "tags": [
    "diagonal-spine",
    "stairstep-reveal",
    "perpendicular-asides"
   ],
   "grammar": [
    "Staging/hierarchy: the diagonal spine owns the composition; each tread along it holds one primary block; asides branch perpendicular and never sit on the spine",
    "Sequence/attention: the slope gives scroll a direction to obey; each reveal lands the next tread lower and further across, and departure from the axis signals an aside",
    "Controls/state: scroll descends the stair; selecting an aside steps off-axis and back; a spine marker tracks position; the final tread carries the committed action",
    "Adaptation: small screens compress the slope into an offset zigzag of alternating-edge blocks"
   ],
   "spark": "Every scroll lands you one tread lower and one column across, the same slope every time; when a block sits off the diagonal you know before reading a word that it is an aside.",
   "webLeverage": "css grid placement stepping items across tracks per row, with scroll-driven reveals following the document's real diagonal geometry"
  },
  {
   "id": "spatial-navigation-docked-capsules",
   "familyId": "spatial-navigation",
   "surface": "operate",
   "form": "an app staged as capsules docked to a service core, where every function lives in one self-contained module viewed one at a time, movement runs between capsules rather than down menus, and a failing module is swapped whole instead of repaired",
   "lineage": "Metabolist capsule architecture, plug-in megastructures, modular equipment bays",
   "tags": [
    "module-capsules",
    "service-core",
    "swap-not-repair"
   ],
   "grammar": [
    "Staging/hierarchy: one capsule interior owns the viewport at a time; its functions sit flush in a uniform panel grid, each captioned in place, with the core as the only spine",
    "Sequence/attention: you travel capsule to capsule through the core, never through corridors of nesting; arrival is a dock, departure a release",
    "Controls/state: functions are modules with docked, in-transit, and retired states; a failing module is unbolted and replaced whole, its contents persisting",
    "Adaptation: capsule interiors stay fixed while the stack re-arranges per viewport"
   ],
   "spark": "The billing capsule misbehaves, so you retire it whole and dock a fresh one; the swap is a single move and everything inside arrives already seated in place.",
   "webLeverage": "Whole-capsule swaps animate as single view transitions while each capsule's contents persist in IndexedDB",
   "sourceConceptId": "design-canon-nakagin-capsule-cell",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "spatial-navigation-filament-zoom",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a catalog staged as a web of filaments and voids, where items sit as nodes on connective threads, label weight follows local density, and one continuous zoom descends from the whole network into a single node without a cut",
   "lineage": "Large-scale structure maps, network graph atlases, continuous-zoom map interfaces",
   "tags": [
    "node-filament-network",
    "logarithmic-zoom",
    "density-weighted-labels"
   ],
   "grammar": [
    "Staging/hierarchy: the network owns a gridless field; filaments carry the eye, nodes outrank threads, and empty voids are kept honest as unlabeled space.",
    "Sequence/attention: attention travels along filaments between nodes; zoom is continuous, so scale changes always preserve a visible landmark from the level above.",
    "Controls/state: visitors follow paths, filter by density, and pin nodes; connected, clustering, and isolated are visible states of every node.",
    "Adaptation: a selected filament linearizes into a single scrollable thread on narrow screens"
   ],
   "spark": "You pick a thread at the widest view and follow it inward; the zoom never cuts, neighboring threads slide off frame one by one, and the node you were aiming at resolves from a bright point into a place with its own contents.",
   "webLeverage": "Level-of-detail streaming renders extreme scale ranges without losing local structure at any zoom.",
   "sourceConceptId": "galaxies-nebulae-deep-time-cosmic-web-filaments",
   "provenanceNote": "good concept, bad visual world"
  },
  {
   "id": "spatial-navigation-geared-orbits",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a system staged as concentric orbits around one center, where distance from center encodes each item's period, one time control drives every body through fixed ratios, and any date is a complete configuration of the whole",
   "lineage": "Brass orreries, planetarium projectors, geared astronomical models",
   "tags": [
    "center-and-satellites",
    "coupled-ratios",
    "time-as-position"
   ],
   "grammar": [
    "Staging/hierarchy: the center owns the composition; items ride concentric rings ranked by period, and the one time control sits apart as the only master input.",
    "Sequence/attention: advancing time moves everything at once; attention goes to the fastest ring first, then outward to slower bodies that barely crept.",
    "Controls/state: one crank scrubs the whole system through locked ratios; setting any single body sets all of them, and a moment is a shareable configuration.",
    "Adaptation: orbits compress to a linear strip ordered by period on narrow screens"
   ],
   "spark": "You drag the time control one notch and the inner ring sprints a full lap while the outermost item creeps a single degree; the ratio between them is the fact you came to learn, and you just felt it in your wrist.",
   "webLeverage": "SVG orbits scrub against a timeline bound to searchParams, so any configuration becomes a shareable address.",
   "sourceConceptId": "signals-instruments-orrery-projector",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "spatial-navigation-inverted-depth-stacks",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a collection hung in an inverted depth field, where item clusters drift in slow currents overhead and readable surfaces stay level as the visitor climbs between them",
   "lineage": "Impossible-library fiction, maritime wonder tales, dive-depth charts, underwater stagecraft",
   "tags": [
    "depth-scroll",
    "drifting-clusters",
    "level-anchors"
   ],
   "grammar": [
    "Staging/hierarchy: The depth column owns the viewport; drifting item clusters organize the middle ground while opened items lock level and lead as stable reading planes.",
    "Sequence/attention: Attention descends or rises by depth; currents regroup clusters between visits, and released fragments float upward as trails pointing to related items.",
    "Controls/state: The visitor opens an item, releases a fragment, and tethers related items before the current shifts; items are adrift, opened, tethered, and resurfaced.",
    "Adaptation: Phones map depth to plain scroll depth with clusters as stacked shelves"
   ],
   "spark": "The visitor climbs two depths, opens a drifting item, and the page locks level around it; a loosed fragment rises past three shelves and settles under the item it belongs to.",
   "webLeverage": "Canvas depth parallax layered over accessible DOM text, with scroll depth as the master axis and tether state persisting cluster arrangements.",
   "sourceConceptId": "dream-surreal-impossible-worlds-upside-down-ocean-library"
  },
  {
   "id": "spatial-navigation-magnitude-ladder",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a gallery traversed by powers of scale, where one continuous measure line joins the smallest and largest subjects and familiar references anchor every landing",
   "lineage": "Powers-of-ten films, natural-history display, scientific scale models, map zoom conventions",
   "tags": [
    "semantic-zoom",
    "scale-landings",
    "fixed-reference"
   ],
   "grammar": [
    "Staging/hierarchy: The current magnitude landing owns the viewport; a fixed reference bar holds constant while subjects at that scale lead and neighbors hint the next landing.",
    "Sequence/attention: Attention travels by zoom: each pinch or step lands on a titled magnitude, and the same opening re-reads as a different subject at every scale.",
    "Controls/state: The visitor zooms between landings, anchors two subjects to compare true scale, and reveals uncertainty bounds; landings are distant, active, and anchored.",
    "Adaptation: Phones use stepped scale landings with numeric ratios beside imagery"
   ],
   "spark": "The visitor pinches outward and the same opening becomes a doorway, then a gate, then a gap between two vast bodies; the fixed scale bar holds steady as the exponent header ticks up landing by landing.",
   "webLeverage": "Canvas semantic zoom over image pyramids with keyboard-stepped landings and exact units narrated at every scale.",
   "sourceConceptId": "exhibition-museum-curation-scale-shift-gallery",
   "provenanceNote": "desktop ui needs regen"
  },
  {
   "id": "spatial-navigation-miniature-glide",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as a guided glide over a miniature world, where a slow camera path carries the visitor above a model of the product's territory, slowing at stations where any exhibit can be left, entered, and expanded to detail",
   "lineage": "World's-fair ride-through pavilions, exhibition dioramas, guided model tours",
   "tags": [
    "guided-glide",
    "miniature-model",
    "addressable-stations"
   ],
   "grammar": [
    "Staging/hierarchy: the miniature world owns the viewport below the camera; the route and its stations rank above it as the only chrome, with the next station marked",
    "Sequence/attention: attention rides the authored glide path; the ride slows at stations, and inspected models expand from miniature to full detail",
    "Controls/state: glide, pause, disembark at any station, and expand a model; stations hold upcoming, current, visited, and expanded states, each addressable by URL",
    "Adaptation: the glide becomes stepped stations on small screens, and the model stays explorable as a still, inspectable world"
   ],
   "spark": "The camera drifts over the model territory, slows at the second station, and you step off the route to expand one miniature exhibit into its working detail.",
   "webLeverage": "Scroll-linked camera travel over a layered or 3D scene, with every station of the tour addressable by URL",
   "sourceConceptId": "design-canon-worlds-fair-tomorrow-pavilion",
   "provenanceNote": "so so, i expected more \"new age of space travel\" imagery maybe"
  },
  {
   "id": "spatial-navigation-modular-signs",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as a wayfinding system, where every element is a sign built on one strict module grid, coded discs key the sections, arrows sit at the edge they point from, and decisions arrive one sign at a time along the route",
   "lineage": "Transit signage standards manuals, modular wayfinding programs, coded route systems",
   "tags": [
    "modular-sign-grid",
    "coded-discs",
    "one-decision-signs"
   ],
   "grammar": [
    "Staging/hierarchy: sign bands own the layout on one module grid; message length dictates sign length, and coded discs rank the sections at a glance",
    "Sequence/attention: wayfinding proceeds sign by sign along the route; each band gives exactly one decision, and the arrow sits at the edge it points from",
    "Controls/state: controls are signs; a pressed control fills its disc, disabled routes strike through with a service diagonal, and specs surface on inspection",
    "Adaptation: narrow screens stack full-width sign bands in route order; motion is a steady horizontal slide"
   ],
   "spark": "You follow the discs band by band; each sign gives one decision and one arrow, and the third band's filled disc confirms you are on the route you chose.",
   "webLeverage": "CSS grid enforces the module while SVG discs and arrows scale without redrawing",
   "sourceConceptId": "brand-identity-canon-vignelli-standards-manual",
   "provenanceNote": "a bit too boring"
  },
  {
   "id": "spatial-navigation-nested-shell-descent",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as nested concentric shells around one core subject, where the visitor descends through successive layers and a band filter re-lights each layer to expose structure the default view hides, including an outer extent far larger than the familiar image",
   "lineage": "Planetary-nebula astronomy, emission-line imaging archives, layered scientific plates, and concentric map-and-core diagram traditions",
   "tags": [
    "concentric-layers",
    "filter-reveal",
    "depth-descent"
   ],
   "grammar": [
    "Staging/hierarchy: One core subject anchors the center; concentric layers ring it, outermost faintest, and every caption attaches to the ring it describes.",
    "Sequence/attention: Attention travels inward from faint outer boundary to dense core, or outward when a filter exposes the larger hidden extent.",
    "Controls/state: The visitor switches viewing bands and steps between rings; states are default view, band-isolated, full-extent, and core-exposed.",
    "Adaptation: Small screens stack the rings as registered layer cards around one fixed anchor"
   ],
   "spark": "The visitor lands on a small bright core, moves outward through ring after ring, then flips one band switch and the page dims to reveal a boundary ten times wider than anything the first view admitted.",
   "webLeverage": "Layered canvas or CSS blend-mode compositing re-lights one anchored scene per selected band without reloading.",
   "sourceConceptId": "galaxies-nebulae-deep-time-planetary-nebula-shells",
   "provenanceNote": "good idea, bad visual system"
  },
  {
   "id": "spatial-navigation-orchard-of-moments",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a browsable orchard of items ranked in rows, where each item holds a stored duration and picking one retunes the ambient state of the entire surface",
   "lineage": "Sacred-orchard myth, almanac grids, calendar columns, pick-your-own farm rows",
   "tags": [
    "item-grid",
    "stored-duration",
    "ambient-state"
   ],
   "grammar": [
    "Staging/hierarchy: Rows of items own the viewport like calendar columns; the active pick leads while the surrounding surface reflects whatever duration it releases.",
    "Sequence/attention: Attention alternates between browsing rows and the global shift each pick causes; neighboring items hint at their held durations before selection.",
    "Controls/state: The visitor picks, preserves, shares, or returns an item; the surface cycles through the states those choices release, and ripeness marks what is ready.",
    "Adaptation: Phones arrange the rows as one vertical path"
   ],
   "spark": "The visitor picks one item from the third row and the whole page's ambient state shifts to the duration it held; putting it back restores the previous state, and a neighboring item ripens into pickable range.",
   "webLeverage": "CSS custom properties retheme the entire surface per pick while deterministic state seeds make every released moment replayable and shareable.",
   "sourceConceptId": "dream-surreal-impossible-worlds-time-fruit-orchard"
  },
  {
   "id": "spatial-navigation-pierced-density",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as a dense woven wall of content, where near-uniform texture is pierced by a few bright entry points and orientation comes from nested layers of marks rather than from whitespace",
   "lineage": "Gothic manuscript pages, rubrication, dense broadsheet setting",
   "tags": [
    "dense-field",
    "entry-points",
    "nested-orientation"
   ],
   "grammar": [
    "Staging/hierarchy: the full field reads as one even texture at distance; a small set of marked entry points and openings interrupt it and own the eye",
    "Sequence/attention: attention lands on an entry point, then descends through nested layers: section mark, column, line, item, detail",
    "Controls/state: expand, gloss, compare, and cite; content states are main, marked, abbreviated, corrected, and marginal",
    "Adaptation: small screens widen the measure and openings while keeping a dense overview beside a plain sequential reading of the same content"
   ],
   "spark": "At a glance the page is a solid wall; you move closer, a single marked opening pulls you in, and the paths through the density resolve layer by layer.",
   "webLeverage": "Linked overview and transcription views preserve visual density while keeping the text searchable and legible",
   "sourceConceptId": "typography-calligraphy-writing-blackletter-light-page"
  },
  {
   "id": "spatial-navigation-portal-counterparts",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a page of paired portals, where each item's counterpart detaches from its anchor, travels between portal frames across sections, and returns carrying content gathered elsewhere",
   "lineage": "Mirror folklore, migration mapping, metamorphic stage effects, paired-portal game design",
   "tags": [
    "paired-portals",
    "detached-counterpart",
    "return-carry"
   ],
   "grammar": [
    "Staging/hierarchy: Anchored items and their counterparts share each section; portal frames punctuate the layout, and the traveling counterpart leads wherever it currently is.",
    "Sequence/attention: Attention follows the journey: release at one portal, hand-offs at each frame down the page, and a return that visibly carries new material home.",
    "Controls/state: The visitor angles a portal, invites a counterpart through, and chooses what it may carry back; counterparts are anchored, traveling, laden, and returned.",
    "Adaptation: Phones present portal pairs as swipeable frames with counterparts always visible at rest"
   ],
   "spark": "The visitor tips the second frame; the item's counterpart steps out of its anchor, crosses three sections through the portals, and comes back with a strip of the far section's content moving across its surface.",
   "webLeverage": "View transitions carry a shared element between portal frames while intersection observers schedule hand-offs as each frame scrolls into view.",
   "sourceConceptId": "dream-surreal-impossible-worlds-mirror-animal-migration"
  },
  {
   "id": "spatial-navigation-portal-peepholes",
   "familyId": "spatial-navigation",
   "surface": "operate",
   "form": "an app screen staged as a surface with cut apertures, where each destination is previewed live through a shaped peephole in the current view, and entering expands that aperture until it becomes the full screen",
   "lineage": "masked transitions, Material container transform, keyhole reveals",
   "tags": [
    "aperture-previews",
    "expand-to-enter",
    "live-destinations"
   ],
   "grammar": [
    "Staging/hierarchy: the current surface owns the screen; peepholes puncture it at fixed points, each framing live destination content; the expanded aperture replaces it",
    "Sequence/attention: attention moves peephole to peephole reading live previews; choosing one grows its frame outward, so entry reads as approach rather than replacement",
    "Controls/state: tap expands an aperture to full screen and back shrinks it to its hole; peepholes update live so their state is honest before entry; focus order walks the holes",
    "Adaptation: small screens carry fewer, larger apertures per view"
   ],
   "spark": "Through the round hole you can already see the queue is three items deep before you enter it; you tap, the hole grows to swallow the screen, and the back gesture shrinks the room to a porthole again.",
   "webLeverage": "clip-path apertures animated to full-viewport frames, with view transitions carrying the shared element between the two states"
  },
  {
   "id": "spatial-navigation-relation-drawers",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a collection browsed drawer by drawer through relations, where unlike items meet by shared evidence instead of category and every detour keeps its path home",
   "lineage": "Cabinets of curiosity, associative collection display, object-based inquiry, hypertext trails",
   "tags": [
    "relation-graph",
    "kept-path",
    "unlike-neighbors"
   ],
   "grammar": [
    "Staging/hierarchy: The open drawer owns the viewport with items gridded in compartments; drawn relation lines lead the eye between unlike neighbors.",
    "Sequence/attention: Attention wanders item to item along evidence lines; each opened relation extends a visible trail, so surprise never costs orientation.",
    "Controls/state: The visitor turns an item, opens its evidence, and pins relations into a personal cabinet; items are shelved, examined, pinned, and related.",
    "Adaptation: Phones recast drawers as nested item pairs with provenance beside each surprise; the trail persists as a static list reachable by keyboard."
   ],
   "spark": "The visitor opens a drawer and a ruled line connects three unlike items through one shared piece of evidence; pinning the relation adds it to their own cabinet while the trail back to the first drawer stays drawn.",
   "webLeverage": "A semantic relation graph rendered as SVG lines over DOM grids, with deep-linked trails and pinned state persisting the personal cabinet.",
   "sourceConceptId": "exhibition-museum-curation-cabinet-curious-relations"
  },
  {
   "id": "spatial-navigation-shadow-path-locality",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as an event path crossing a mapped field, where a global track shows everyone's timing at once and choosing a local point restages the whole page around that location's own sequence and contact times",
   "lineage": "Eclipse expedition maps, solar-geometry visualization, transit timetables, and location-aware event pages",
   "tags": [
    "global-track",
    "local-viewpoint",
    "phase-bands"
   ],
   "grammar": [
    "Staging/hierarchy: The global path owns the establishing view; once a location is chosen the local sequence leads, and the page bands itself by phase from first contact to last.",
    "Sequence/attention: Attention moves from path overview to chosen point, then runs phase by phase through the local event; nearby alternatives stay one step away.",
    "Controls/state: The visitor picks a place and scrubs contact phase; states are outside-path, partial, total, and after.",
    "Adaptation: Small screens lead with the local timeline and keep the global path as a summary band; the full-dark moment triggers only on request, never automatically."
   ],
   "spark": "The visitor drops a pin on the track and the page rebuilds: contact times localize, the phase bands reorder, and scrubbing toward totality drains the layout to its darkest state for that exact spot.",
   "webLeverage": "Geolocation plus scrubbed CSS custom properties restage timing and light per chosen point.",
   "sourceConceptId": "orbits-eclipses-celestial-cycles-eclipse-umbra-crossing"
  },
  {
   "id": "spatial-navigation-split-spectrum-corridors",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as one input split into walkable component corridors, where a single undifferentiated source divides at a fixed splitting point into ordered parallel channels the visitor can enter separately and recombine at a marked focus",
   "lineage": "Optical dispersion experiments, immersive corridor environments, exploded-view diagrams, and channel-sorted archives",
   "tags": [
    "source-splitting",
    "parallel-corridors",
    "recombination"
   ],
   "grammar": [
    "Staging/hierarchy: The single source line leads into the splitting point; the fanned corridors own the field in strict order, and the recombination focus closes the far end.",
    "Sequence/attention: Attention follows source to split, chooses one corridor and walks its full content, then returns via the fan or continues to the recombined whole.",
    "Controls/state: The visitor rotates the split angle and isolates single corridors; the field carries unified, separating, resolved, and recombined states.",
    "Adaptation: Small screens run the fan as a horizontal ordered journey one corridor at a time; angle changes animate smoothly or step under"
   ],
   "spark": "The visitor steps into the third corridor and the other channels dim to their edges; its content runs the full depth of the page, and at the far focus it folds back together with everything they skipped.",
   "webLeverage": "CSS scroll-snap along ordered corridor panels keeps split, walk, and recombine one continuous gesture.",
   "sourceConceptId": "light-shadow-caustics-prism-spectrum-room"
  },
  {
   "id": "spatial-navigation-stacked-commons",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a tall section navigated by shared destinations, where communal levels act as streets through one stacked structure and routes are traced person by person",
   "lineage": "Streets-in-the-sky housing, sectional drawing, communal terraces, wayfinding supergraphics",
   "tags": [
    "sectional-column",
    "shared-streets",
    "traced-routes"
   ],
   "grammar": [
    "Staging/hierarchy: One tall stacked column owns the page; communal levels lead as named streets while private units support as the fabric between them.",
    "Sequence/attention: Attention climbs by destination rather than floor number; tracing one occupant's daily route lights the sequence of streets they cross.",
    "Controls/state: The visitor traces a route, compares encounter density between paths, and opens quiet alternatives; levels are idle, traced, compared, and occupied.",
    "Adaptation: Phones unroll the section into a vertical story keeping shared levels in context"
   ],
   "spark": "The visitor picks one resident and their day lights up the column: three shared streets glow in order, a bridge appears between two levels, and the quiet alternate route draws itself beside the busy one.",
   "webLeverage": "A scrollable SVG section with route state overlays, deep links per level, and keyboard traversal of every shared destination.",
   "sourceConceptId": "architecture-inhabitable-space-vertical-neighborhood"
  },
  {
   "id": "spatial-navigation-tide-locked-rooms",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a floor plan governed by one rising and falling level, where a single global dial changes which rooms, passages, and items are reachable and reorders the map",
   "lineage": "Flooded-house dreams, tide tables, metroidvania gating, impossible architecture",
   "tags": [
    "global-dial",
    "gated-topology",
    "level-split"
   ],
   "grammar": [
    "Staging/hierarchy: The plan owns the viewport, split at one horizontal level line; reachable rooms lead in full weight while submerged ones support as dimmed evidence.",
    "Sequence/attention: Attention follows the level: turning the dial drains some passages and floods others, and newly exposed routes announce themselves along the line.",
    "Controls/state: The visitor turns the dial, tethers an item so it will not drift, and opens gated doors; rooms are dry, filling, submerged, and newly exposed.",
    "Adaptation: Phones pair the plan with a section strip and discrete level steps"
   ],
   "spark": "The visitor nudges the dial one notch; a corridor drains on the left of the plan, a staircase surfaces that was not there before, and the room they wanted is suddenly two exposed passages away.",
   "webLeverage": "A single range input drives clip-path level lines across the plan while addressable room states deep-link every configuration.",
   "sourceConceptId": "dream-surreal-impossible-worlds-impossible-house-tides"
  },
  {
   "id": "spatial-navigation-toc-exploded",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as its own table of contents, where every section is visible at once as a spatial index with real relationships, choosing one flies the view into it, and return restores the overview",
   "lineage": "prezi-style zooming UIs, museum gallery maps, exploded technical diagrams",
   "tags": [
    "overview-first",
    "zoom-into-detail",
    "spatial-index"
   ],
   "grammar": [
    "Staging/hierarchy: the full map owns the first screen, every section a placed tile; inside one, that tile's content owns the view; the overview persists as a corner miniature",
    "Sequence/attention: the eye reads the map's layout to learn structure before content; flight into a tile keeps context because neighbors slide off-screen rather than vanish",
    "Controls/state: click or keyboard-select flies into a tile; escape or the miniature returns; two states, overview and detail; visited tiles are marked on the map",
    "Adaptation: small screens shrink the map to a scrollable schematic with the same enter-and-return contract"
   ],
   "spark": "You see all seven sections at once, arranged so the dependencies are legible before a word is read; you pick the third tile and the view dives into it, the other six sliding just out of frame, waiting.",
   "webLeverage": "a single scaled scene using css transforms for the camera flight, or view transitions mapping each tile to its full section"
  },
  {
   "id": "spatial-navigation-traced-pipeline",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a product staged as a pipeline on one axis, where a traced input enters at one end, crosses each swappable module in order, and lands as output, so every component's consequence is visible downstream of it",
   "lineage": "Optical bench ray diagrams, signal-chain schematics, assembly-line cutaways",
   "tags": [
    "axis-pipeline",
    "traced-input",
    "swap-and-compare"
   ],
   "grammar": [
    "Staging/hierarchy: the axis owns the layout end to end; modules sit on it in processing order, the traced input threading all of them, output stage last.",
    "Sequence/attention: reading follows the trace from entry to result; swapping any module pulls attention downstream to everything its change affects.",
    "Controls/state: modules swap in place and parameters adjust live; the output updates with each change, and before-and-after comparison is a first-class view.",
    "Adaptation: the bench stacks into sequential sections on small screens with the trace connecting them; numeric settings persist when the diagram simplifies."
   ],
   "spark": "You swap the second module for a wider one and watch the trace bend differently through every stage after it; the output pane updates, and you flip between the two results with the settings that produced each pinned alongside.",
   "webLeverage": "Live recomputation along an SVG trace makes each swap's downstream consequences render immediately.",
   "sourceConceptId": "product-industrial-mechanical-modular-camera-optical-path"
  },
  {
   "id": "spatial-navigation-tuned-bands",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a catalog staged as continuous bands you tune across, where indexed stops mark the known entries, the space between them is genuinely traversable, and signal strength and drift are honest states of whatever you land on",
   "lineage": "Shortwave band-spread dials, seek-tuning radios, scanning receiver culture",
   "tags": [
    "continuous-dial",
    "between-stations",
    "tuned-discovery"
   ],
   "grammar": [
    "Staging/hierarchy: one long ruled scale owns the layout; the tuned position is the single point of focus, and whatever it lands on fills the stage below.",
    "Sequence/attention: travel is tuning, a continuous sweep past ticks and labels; discovery happens between indexed stops, where something faint resolves.",
    "Controls/state: a coarse drag covers distance and a fine control rewards precision; strength, drift, and interference are visible states, not failures.",
    "Adaptation: the horizontal scale becomes a vertical dial on small screens; drift is slow and pausable"
   ],
   "spark": "You overshoot the indexed stop on purpose and creep back with the fine control; between two labeled positions something unlisted resolves out of the noise, and you hold it there, half-locked, deciding whether to bookmark it.",
   "webLeverage": "A scrubbed dial with URL-encoded position makes any tuning, including unlisted ones, a deep link.",
   "sourceConceptId": "signals-instruments-shortwave-dial-winter"
  },
  {
   "id": "spatial-navigation-zoned-colony-districts",
   "familyId": "spatial-navigation",
   "surface": "persuade",
   "form": "a landing page staged as a living city of built districts, where colonies of small units construct shared structure, territorial edges stay drawn hard, and the exchanges that keep each district alive run as fine annotated interior lines",
   "lineage": "Reef ecology mapping, city zoning plans, symbiosis diagrams, and district-and-annotation cartography",
   "tags": [
    "districts",
    "territorial-edges",
    "hidden-exchange"
   ],
   "grammar": [
    "Staging/hierarchy: The district map owns the viewport; the selected colony leads at full detail, neighbors hold their hard edges, and exchange lines run as fine annotation beneath.",
    "Sequence/attention: Attention moves district to colony to individual unit and down to its hidden partner, then back out; boundary disputes pull the eye to contested edges.",
    "Controls/state: The visitor shifts shared environmental conditions and selects any tier; districts carry thriving, competing, stressed, and failing states.",
    "Adaptation: Small screens present districts as connected chapters with edges and exchanges intact; ambient motion stays gentle and stops under"
   ],
   "spark": "The visitor raises the shared stress condition one step and watches district edges hold while interior exchange lines thin; one colony pales first, and its annotated partners explain exactly why it fell before its neighbors.",
   "webLeverage": "SVG district maps with annotated connection layers toggle between structure and exchange views.",
   "sourceConceptId": "reefs-bioluminescent-nocturnal-coral-city-symbiosis"
  },
  {
   "id": "working-surfaces-rehearsed-command",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as a rehearsal before commitment, where typing a command projects its full consequence onto the live workspace as a held preview state behind the input, so confirming merely keeps what is already visibly true and dismissing strikes it without residue",
   "lineage": "Theater rehearsal practice, command palettes, spreadsheet formula previews, chess hover analysis",
   "tags": [
    "consequence-preview",
    "commit-by-keeping",
    "held-future-state"
   ],
   "grammar": [
    "Staging/hierarchy: The workspace in its previewed future state owns the screen; the command input floats small above it, and a delta strip lists exactly what would change.",
    "Sequence/attention: Attention starts at the typed verb, jumps to the previewed consequence in place, then to the delta strip; each keystroke retunes all three at once.",
    "Controls/state: Every candidate command carries a live preview; confirm promotes preview to truth, dismiss reverts wholly, and arrowing through candidates swaps futures instantly.",
    "Adaptation: Small screens lead with the delta strip and jump-cut to each affected region; keyboard focus walks the changes in order."
   ],
   "spark": "You type the archive command and watch fourteen rows fade toward their future absence behind the palette while a strip counts them; you arrow to the next candidate and the workspace snaps to a different future before you have committed to anything.",
   "webLeverage": "Optimistic state applied to a forked in-memory model renders true previews cheaply, with commit swapping the fork in."
  },
  {
   "id": "working-surfaces-focus-airlock",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as an airlock around deep work, where entering focus is a two-step threshold that visibly docks every interruption at the door, and leaving replays what accumulated as an ordered debrief instead of a scatter of badges",
   "lineage": "Airlocks and cleanroom gowning rooms, do-not-disturb protocols, air traffic handoff briefings",
   "tags": [
    "threshold-entry",
    "interruption-docking",
    "exit-debrief"
   ],
   "grammar": [
    "Staging/hierarchy: Inside the lock, the task owns the entire screen; the door edge stays as a thin seam where docked interruptions accumulate as counted, unread shapes.",
    "Sequence/attention: Attention crosses the threshold once on entry; during the session only the seam's count changes, and the exit debrief deals arrivals one by one in ranked order.",
    "Controls/state: Entry is deliberate and staged; each docked item holds arrival time and source, and one marked class of sender is allowed to knock through the seam.",
    "Adaptation: Small screens make the seam a single edge notch; the debrief becomes a full-screen dealt sequence."
   ],
   "spark": "You step out after ninety minutes and the door deals what it caught: one urgent message first, then eleven grouped mentions, each stamped with when it hit the door, and nothing gets to interrupt the order in which you meet them.",
   "webLeverage": "Notification interception via service worker and page visibility state defers real events into an ordered local store."
  },
  {
   "id": "working-surfaces-object-time-fan",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as objects that carry their own past, where grabbing any element and pulling sideways fans out its previous states beside it in place, any fanned state can be reinstated whole or raided for one fragment, and the fan folds back leaving a single visible truth",
   "lineage": "Card fanning, flip-book edges, per-cell spreadsheet history, museum provenance cards",
   "tags": [
    "in-place-history",
    "state-fan",
    "partial-restore"
   ],
   "grammar": [
    "Staging/hierarchy: The current state stays anchored at full strength; fanned past states rank behind it by recency, each carrying its timestamp and author on its exposed edge.",
    "Sequence/attention: Attention never leaves the object; pulling the fan wider walks further back in time, and differences from current are marked on each exposed state.",
    "Controls/state: Pull to fan, tap a state to compare, reinstate whole or lift one fragment forward; folding commits and the fan leaves no residue on the surface.",
    "Adaptation: Small screens fan vertically beneath the object; keyboard users step the fan state by state from the element itself."
   ],
   "spark": "You pull last week out from behind the paragraph like cards from a deck, spot the sentence that vanished in Tuesday's edit, lift just that sentence forward into today, and let the fan snap shut.",
   "webLeverage": "Per-object patch history in IndexedDB renders fans on demand without ever loading a global timeline view."
  },
  {
   "id": "working-surfaces-sorting-gates",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as a sorting floor with standing gates, where each gate is an action configured once, bulk work is sweeping items through gate mouths rather than checking boxes, every gate shows its running tally, and one final lever fires all gates at once",
   "lineage": "Mail sorting rooms, livestock drafting races, ore sorting chutes, coin counting trays",
   "tags": [
    "gates-as-actions",
    "sweep-routing",
    "deferred-commit"
   ],
   "grammar": [
    "Staging/hierarchy: The unsorted pool owns the center; gates stand at the edges, action named on the lintel, tally growing beneath, and uncommitted work outranks all chrome.",
    "Sequence/attention: Attention alternates between the next item and the gate mouths; each sweep is answered by the tally tick that confirms where the item went.",
    "Controls/state: Items are pooled, gated, or held back; any gated item can be pulled out before the single commit, and the commit empties every gate in one stated act.",
    "Adaptation: Small screens deal items one at a time with gates as edge targets; keyboard users route with one key per gate."
   ],
   "spark": "You fling forty items in ninety seconds, watching the archive gate's tally climb while the escalate gate holds only three; you pull one back out, then throw the single lever that makes all four tallies true at once.",
   "webLeverage": "Pointer-event drag physics and a staged mutation buffer make routing instant while the batch commits atomically."
  },
  {
   "id": "working-surfaces-verdict-run",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as a dealt run of decisions, where exactly one item holds center stage, the remaining run is visible in foreshortened depth behind it, keyboard verdicts drop the item into labeled piles at the edges, and the piles' growing heights are the session's honest shape",
   "lineage": "Card dealing, conveyor inspection stations, photo culling practice, customs desks",
   "tags": [
    "single-item-stage",
    "verdict-keys",
    "pile-accumulation"
   ],
   "grammar": [
    "Staging/hierarchy: The current item owns the center at full detail; the run behind shows only enough to gauge remaining depth, and the piles frame the edges with counts.",
    "Sequence/attention: Attention holds one item at a time; a verdict animates the drop to its pile and the next item steps forward, so rhythm comes from repetition, not scanning.",
    "Controls/state: One key per verdict, one key to skip which visibly sends the item to the back of the run, and any pile opens for re-inspection without losing the run's position.",
    "Adaptation: Touch swipes map to pile directions; small screens shrink the run to a numeric depth gauge."
   ],
   "spark": "Item after item steps up, you tap the same three keys in rhythm, and when the run empties you turn to the piles: two tall, one worryingly short, and the eight you skipped waiting at the back exactly where you watched them go.",
   "webLeverage": "Preloading the next items in the run keeps keyboard rhythm under perceptual latency while piles persist locally."
  },
  {
   "id": "working-surfaces-tethered-bench",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as a bench beside the work, where any fragment of the document can be pulled out and clamped onto the bench at full tooling while a live tether marks its home, distant fragments can be clamped side by side, and edits flow back through the tethers as they land",
   "lineage": "Watchmakers' benches, dissection trays, transclusion experiments, split-window editing",
   "tags": [
    "fragment-extraction",
    "live-tether",
    "side-by-side-clamps"
   ],
   "grammar": [
    "Staging/hierarchy: The document keeps its column; the bench runs alongside with clamped fragments ranked by recency, each tether drawn from clamp to home anchor.",
    "Sequence/attention: Attention moves clamp to clamp on the bench; tethers keep home context one glance away, and edits echo at the home anchor the moment they land.",
    "Controls/state: Pull to clamp, edit in place on the bench, release to send home; a tether whose source moves or dies marks its clamp orphaned rather than silently stale.",
    "Adaptation: Small screens stack the bench beneath the document; tethers collapse to jump links with positional hints."
   ],
   "spark": "You clamp a clause from page two next to its contradiction from page forty, edit both in one view, and watch each correction ripple back along its tether to a place you never had to scroll to.",
   "webLeverage": "Mirrored editable state across two mounted views of one document range keeps both renditions truly one object."
  },
  {
   "id": "working-surfaces-reenacted-diff",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "a review screen staged as a reenactment, where a proposed change plays back as the sequence of edits that produced it in author order, the reviewer scrubs, pauses, and comments mid-performance, and approval is granted on the played history rather than the final still",
   "lineage": "Film dailies, chess game replay, court reenactments, editing session recordings",
   "tags": [
    "replayed-edits",
    "author-order",
    "scrubbed-verdict"
   ],
   "grammar": [
    "Staging/hierarchy: The reenacted work owns the screen at the scrubbed moment; a timeline of edit beats runs beneath it, and comments pin to beats, not to lines.",
    "Sequence/attention: Attention follows the author's actual path through the change; hesitations and rewrites are visible beats, and the reviewer reads intent from order.",
    "Controls/state: Play, scrub, and pause; a comment freezes its beat for the author, and approval carries the exact range the reviewer actually watched.",
    "Adaptation: Small screens play the reenactment full-bleed with beats as a dot strip; a condensed mode collapses runs of minor beats."
   ],
   "spark": "You scrub to the beat where the author deleted a whole approach and started over, pin your question to that exact hesitation, and realize the final still would never have shown you the decision that matters.",
   "webLeverage": "Operation logs replayed against a versioned model render any beat live, with deep links to any beat and range."
  },
  {
   "id": "working-surfaces-shadow-runner",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an operations screen staged as a rehearsing runner ahead of the real one, where every staged process is preceded by a dry pass racing the same course a fixed interval ahead, so failures happen first to the shadow at a visible remove, and the real run inherits a proven path",
   "lineage": "Rally pace notes, canary releases, mine canaries, route reconnaissance",
   "tags": [
    "dry-pass-ahead",
    "failure-at-distance",
    "inherited-path"
   ],
   "grammar": [
    "Staging/hierarchy: One course owns the screen with both runners on it; the shadow leads by a stated interval, and the gap between them is a first-class measured object.",
    "Sequence/attention: Attention rides the shadow, since news breaks there first; the real runner is glanced at only to confirm it keeps to the proven path.",
    "Controls/state: The gap interval is adjustable; a shadow failure halts the real run short of the fault with evidence pinned, and each passed section marks itself proven.",
    "Adaptation: Small screens show the course as a vertical strip with both positions and the gap; the fault view takes over on failure."
   ],
   "spark": "The shadow hits a wall at step six while your real run is still crossing step four; the course marks the fault ahead of you, the real runner rolls to a stop just short of it, and you fix the problem before anything true was harmed.",
   "webLeverage": "Server-sent progress for two synchronized runs animates one shared course, with the dry pass in an isolated sandbox."
  },
  {
   "id": "working-surfaces-passed-baton",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "a shared screen staged as work possessed by exactly one holder, where the right to edit is a visible baton passed hand to hand, requesting it is an open held-out gesture the holder must answer, and the baton's travel history reads along the section it governs",
   "lineage": "Relay batons, talking sticks, single-token editing locks, air traffic handoffs",
   "tags": [
    "possession-object",
    "requested-handoff",
    "custody-trail"
   ],
   "grammar": [
    "Staging/hierarchy: The work owns the screen; the baton sits physically on the section it governs, and the holder's mark plus waiting requests rank directly beneath it.",
    "Sequence/attention: Attention checks the baton before touching anything; a raised request is a persistent visible gesture, and the handoff moment is staged, never silent.",
    "Controls/state: Hold, pass, or release to the room; an idle holder's grip visibly loosens over time until the baton can be taken, and every pass appends to the custody trail.",
    "Adaptation: Small screens pin baton status to the section header; requests arrive as a standing strip, never as toasts."
   ],
   "spark": "You hold your hand out over section three and the baton trembles under its current holder's name; forty seconds later it arcs across the screen into your cursor, and the custody trail under the heading grows by one line: them, then you.",
   "webLeverage": "WebSocket-held single-writer tokens per region make possession real, with lease decay driving the loosening grip."
  },
  {
   "id": "working-surfaces-held-failure",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as an accident frozen mid-air, where a failed operation halts as an inspectable tableau holding every input, partial effect, and the exact breaking step, recovery is editing the frozen scene in place, and releasing it resumes from the held moment",
   "lineage": "Crash-test high-speed photography, freeze-frame debugging, accident reconstruction",
   "tags": [
    "frozen-tableau",
    "edit-in-failure",
    "resume-from-hold"
   ],
   "grammar": [
    "Staging/hierarchy: The tableau owns the screen with the breaking step held largest at center; upstream steps trail behind it completed, downstream steps wait unstarted.",
    "Sequence/attention: Attention lands on the held step, then walks upstream through what already happened; nothing advances or decays while the scene is held.",
    "Controls/state: Any input is editable in place; release resumes from the held step with edits applied, and abandon rolls the completed trail back visibly, step by step.",
    "Adaptation: Small screens walk the tableau step by step with the held step pinned first."
   ],
   "spark": "The import hangs mid-air at row 8,412 with the malformed date held up like the shard that caused the crash; you correct it inside the frozen scene, release, and watch the run continue from the exact heartbeat where it stopped.",
   "webLeverage": "Resumable job state snapshots let the interface render and mutate the held step before continuation."
  },
  {
   "id": "working-surfaces-keyed-overlay",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as a surface that answers its keyboard, where pressing the leader key labels every actionable thing in place with the keys that reach it, each further keystroke prunes the labels live, and commands are learned where they act instead of in menus",
   "lineage": "Hint-mode browser navigation, stage marks, labeled machinery diagrams, chorded shortcuts",
   "tags": [
    "in-place-labels",
    "keystroke-pruning",
    "learn-by-location"
   ],
   "grammar": [
    "Staging/hierarchy: The working surface stays fully visible; labels attach at each target's own position, sized by likelihood, and pruned labels vanish rather than dim.",
    "Sequence/attention: The leader press blooms all labels at once; each keystroke collapses the field toward the survivor, so attention narrows spatially with the typing.",
    "Controls/state: Labels reflect what is actually possible now; unavailable actions never receive labels, and completing a chord fires the action at its own location.",
    "Adaptation: Small screens label only the visible region and page the rest; a long press substitutes for the leader key."
   ],
   "spark": "You tap the leader and the screen sprouts short codes at every place a decision lives; you type two letters, the field collapses to one surviving label on the export button, and your hands never considered leaving the keys.",
   "webLeverage": "A registry of focusable action targets positions labels from live layout, with keyboard capture scoped to hint mode."
  },
  {
   "id": "working-surfaces-depth-row",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as one lit desk before a depth row, where the active task fills the desk at full scale while every other open task recedes behind it in a physically ordered rank, each frozen live at its exact state, and switching is pulling one forward as the current occupant steps back",
   "lineage": "Theater set wagons, card catalogs, painters' canvas racks, studio easel rotation",
   "tags": [
    "one-active-plane",
    "frozen-live-states",
    "pull-forward-switch"
   ],
   "grammar": [
    "Staging/hierarchy: The desk owns nearly the whole screen; the row shows each waiting task's most telling edge, ordered by recency of touch, never by app or type.",
    "Sequence/attention: Attention lives at the desk; the row is consulted peripherally, and the switch carries state continuity so nothing ever appears to reload.",
    "Controls/state: Pull forward, push back, and pin one task so it never drifts deep; each frozen task is genuinely resumable, cursor position and all.",
    "Adaptation: Small screens turn the row into a stacked peek edge; a two-key chord cycles the rank."
   ],
   "spark": "You pull yesterday's half-written reply forward and the desk swaps occupants in one motion, the cursor still blinking where you abandoned it, while the analysis you were just doing slides back to second in the rank, mid-scroll, waiting.",
   "webLeverage": "Serialized per-task view state and scroll positions make frozen tasks resume exactly, rendered as live thumbnails."
  },
  {
   "id": "working-surfaces-twinned-probe",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "a comparison screen staged as two live variants under one probe, where a single pointer exists in both panes at once, whatever it touches is interrogated identically on both sides, and the differences at the probe point are stated in a strip between them",
   "lineage": "Stereo comparators, twin microscope stages, split-cab test driving, side-by-side emulators",
   "tags": [
    "one-input-two-panes",
    "synchronized-interrogation",
    "difference-strip"
   ],
   "grammar": [
    "Staging/hierarchy: The two variants split the screen as equals; the twinned probe outranks both, and the difference strip runs between them as the only verdict surface.",
    "Sequence/attention: Attention follows the probe; equal responses read as calm symmetry, and any asymmetry under the probe pulls the eye to the strip's statement of it.",
    "Controls/state: The probe hovers, clicks, and types into both variants simultaneously; either pane can be soloed briefly, and divergence points can be pinned for the record.",
    "Adaptation: Small screens stack the variants and run the probe by alternation, holding the strip fixed between."
   ],
   "spark": "You drag the probe across the form and both variants fill identically until the ninth field, where the strip between them wakes: one side rejected the same input the other accepted, and you pin that spot before moving on.",
   "webLeverage": "Mirrored synthetic input events across two sandboxed frames keep one gesture driving both variants honestly."
  },
  {
   "id": "working-surfaces-exemplar-proof-sheet",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "a bulk-edit screen staged as one exemplar and its proof sheet, where the edit is composed on a single item at full size while every other affected item renders the same edit live as a sheet of small proofs, and the proofs that would break visibly raise themselves before commit",
   "lineage": "Contact sheets, style specimens, mail-merge previews, print shop proofing",
   "tags": [
    "edit-by-exemplar",
    "live-population-proofs",
    "outlier-surfacing"
   ],
   "grammar": [
    "Staging/hierarchy: The exemplar owns the working half at full scale; the proof sheet fills the rest as a countable population, with raised outliers ranked first in the sheet.",
    "Sequence/attention: Attention composes on the exemplar, then sweeps the sheet after each adjustment; raised proofs interrupt the sweep exactly where trouble is.",
    "Controls/state: Every edit applies to the population live but provisionally; any proof can serve as a temporary exemplar or be excluded, and commit states the final count.",
    "Adaptation: Small screens alternate exemplar and sheet as two full views with a persistent outlier count."
   ],
   "spark": "You tighten the title treatment on the exemplar and, in the sheet, three of two hundred proofs lift themselves out of the grid: the ones whose titles would truncate; you open one, add a fallback, and watch the three settle back into place.",
   "webLeverage": "Virtualized live rendering of the affected set applies provisional state to hundreds of proofs on each input."
  },
  {
   "id": "working-surfaces-splice-strip",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as a session that films itself, where every state the workspace passes through accretes along one strip at the screen's edge, any frame can be reopened beside the present, and a selected region of the past can be spliced forward into now without rewinding everything else",
   "lineage": "Film editing benches, flight data recorders, continuous autosave timelines",
   "tags": [
    "session-strip",
    "frame-reopen",
    "partial-splice"
   ],
   "grammar": [
    "Staging/hierarchy: The present owns the screen; the strip runs along one edge, frames sized by how much changed, and an opened past frame docks beside the present as a peer.",
    "Sequence/attention: Attention works in the present and drops to the strip on regret; frames are scanned visually by the shape of change before any timestamp is read.",
    "Controls/state: Open, compare, splice a selected region forward, or fork the session from a frame; splices append to the strip as their own recorded act.",
    "Adaptation: Small screens present the strip as a pull-up drawer; splice targets are chosen by selection, not drag."
   ],
   "spark": "You spot the version from twenty minutes ago where the layout still breathed, lasso just its structure out of the frame, and splice it into the present without surrendering the hour of content work you did since.",
   "webLeverage": "Structural state snapshots diffed per frame let a region splice merge cleanly rather than overwrite."
  },
  {
   "id": "working-surfaces-command-sentence",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as a spoken order taking shape, where invoking a command opens a sentence with typed slots, the verb comes from the keyboard while objects are filled by pointing at real things in the workspace, and only a sentence that parses can be committed",
   "lineage": "Sentence diagramming, adventure game parsers, waiters' order pads, natural-syntax input fields",
   "tags": [
    "typed-slots",
    "point-to-fill",
    "parse-gate"
   ],
   "grammar": [
    "Staging/hierarchy: The sentence bar holds the top with its open slot marked; the workspace beneath stays fully live, and eligible referents for the open slot are marked in place.",
    "Sequence/attention: Attention alternates between sentence and surface; each filled slot advances the open-slot marking, so the eye is always told what kind of thing is wanted.",
    "Controls/state: Slots accept pointing, typing, or recent referents; an ill-typed filler is refused at the slot with a reason, and a parsed sentence reads back before commit.",
    "Adaptation: Small screens stack the sentence above a filtered picker for each slot in turn."
   ],
   "spark": "You type move, tap the twelve files you mean, tap the destination, and the bar reads back one full sentence naming every one of them; a single slot still shows open, the date, and the surface has already marked every place a date could come from.",
   "webLeverage": "A typed grammar over workspace objects drives slot validation and live marking of eligible referents."
  },
  {
   "id": "data-dramaturgy-record-core",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "an app screen staged as core sampling through records, where pulling a core from any record extracts its full stack of changes, actors, and reasons in depth order, and cores from different records stand side by side aligned on one shared time scale to show correlated change",
   "lineage": "Ice core science, dendrochronology, sediment stratigraphy, audit logs",
   "tags": [
    "vertical-extraction",
    "depth-as-time",
    "aligned-cores"
   ],
   "grammar": [
    "Staging/hierarchy: Standing cores own the screen as ranked columns; the shared time scale runs behind all of them, and each band's thickness is the size of its change.",
    "Sequence/attention: Attention reads one core downward into the past, then across cores along one time line; bands that align across cores are the finding.",
    "Controls/state: Pull, stand, and discard cores; tap a band for the change it records, and drag the shared scale to zoom every core's depth together.",
    "Adaptation: Small screens show one core at full width with others as pinned slivers for alignment."
   ],
   "spark": "You stand three cores side by side and see the same thick band appear in each at the same depth: one afternoon, one actor, three records changed in step, and the story is visible before you have read a single entry.",
   "webLeverage": "Change histories rendered as scalable band columns on canvas align to one zoomable shared time axis."
  },
  {
   "id": "data-dramaturgy-reconciliation-zip",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "an app screen staged as two records closing like a zipper, where entries from both sources travel toward one seam, matched pairs fuse and leave the field, and whatever cannot match accumulates at the seam as the day's true remaining work",
   "lineage": "Bank reconciliation practice, double-entry bookkeeping, zipper mechanics, merge visualizations",
   "tags": [
    "two-source-seam",
    "match-and-clear",
    "residue-as-work"
   ],
   "grammar": [
    "Staging/hierarchy: The seam owns the center line; the two source columns feed it from either side in matching sort order, and the residue shelf outranks the moving flow.",
    "Sequence/attention: Attention rests at the seam where fusions happen; a failed match halts locally and pulls the eye, while the cleared field visibly shrinks the job.",
    "Controls/state: Auto-matching runs until it cannot; residue can be force-matched with a stated reason, split, or carried, and the zip cannot close over unresolved residue.",
    "Adaptation: Small screens run the zipper vertically with sources as alternating rows entering the seam."
   ],
   "spark": "The zipper eats forty pairs in a blink and jams on the forty-first: two entries with the same amount but different days sit refusing each other at the seam, and closing the gap needs a decision only you can sign.",
   "webLeverage": "Streaming matched-pair resolution animates fusion at the seam while unmatched residue persists as addressable state."
  },
  {
   "id": "data-dramaturgy-aging-shelf",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "an app screen staged as a shelf where waiting work ages in place, where horizontal position is nothing but time waited, the far edge is a visible cliff of breached promises, taking an item leaves an honest gap, and nothing can be hidden or resorted out of its age",
   "lineage": "Bakery day shelves, warehouse rotation racks, ticket aging reports, produce rotation",
   "tags": [
    "age-as-position",
    "deadline-cliff",
    "unsortable-truth"
   ],
   "grammar": [
    "Staging/hierarchy: The shelf runs the full width with the cliff edge held on screen at all times; items nearest the cliff rank largest, and the fresh end stays deliberately quiet.",
    "Sequence/attention: Attention enters at the cliff and works backward toward freshness; the slow drift of the whole shelf toward the edge is the ambient pressure.",
    "Controls/state: Items can be taken, handed off, or paused with a reason visible to all that suspends drift; filters dim what they exclude but never remove it from the shelf.",
    "Adaptation: Small screens crop to the oldest span with a strip showing the full shelf's density."
   ],
   "spark": "You watch an item you have been avoiding drift its last width toward the cliff, and because pausing it demands a written reason the whole team can read, you finally just take it down and do it.",
   "webLeverage": "A time-driven layout maps waiting duration to position continuously, with drift animating from timestamps alone."
  },
  {
   "id": "data-dramaturgy-suspect-lineup",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "a judgment screen staged as a lineup, where a flagged item never appears alone but stands among its nearest ordinary neighbors, the reviewer must pick the anomaly out or admit they cannot, and a failed pick is recorded as evidence against the flag itself",
   "lineage": "Police lineup procedure, blind tasting panels, sensory difference tests, inter-rater calibration",
   "tags": [
    "forced-comparison",
    "blind-verdict",
    "detector-on-trial"
   ],
   "grammar": [
    "Staging/hierarchy: The lineup owns the screen as equals in matched framing; nothing marks the flagged item, and the verdict controls sit beneath the whole line, not any member.",
    "Sequence/attention: Attention sweeps the line for difference the way the flag claims to have; only after a verdict does the screen reveal which member was flagged and why.",
    "Controls/state: Pick one, several, or none; agreement and misses accrue to both the reviewer's and the flag rule's running records, and hard cases route to a second reviewer blind.",
    "Adaptation: Small screens page the lineup in pairs while withholding the reveal until a verdict lands."
   ],
   "spark": "Five accounts sit in identical frames and you honestly cannot tell which one the system suspects; you say so, the reveal lands on the third, and somewhere a confidence number on that rule ticks down because of your shrug.",
   "webLeverage": "Randomized matched-neighbor sampling and blinded state keep the reveal server-side until the verdict commits."
  },
  {
   "id": "interaction-physics-paired-interlock",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "an app screen staged as a two-hand press guard, where irreversible actions fire only while two deliberately distant controls are held in the same moment, holding one alone visibly arms and counts down its patience, and the geometry itself makes absent-minded destruction impossible",
   "lineage": "Industrial two-hand safety switches, dual-key lockouts, railway token exchange",
   "tags": [
    "simultaneity-gate",
    "spatial-separation",
    "armed-decay"
   ],
   "grammar": [
    "Staging/hierarchy: The subject of the action stays center and fully readable; the paired controls sit at opposite screen regions, each stating what the pair will do together.",
    "Sequence/attention: Holding the first control shifts attention across the screen to its partner; the traverse is the thinking time, and release anywhere disarms without cost.",
    "Controls/state: States are idle, one-armed with decaying patience, and fired; keyboard operation requires two distinct held keys, and the pair never migrates closer over time.",
    "Adaptation: On touch, the pair maps to two thumbs at opposite edges; single-pointer users get a hold-then-confirm relay with the same stated patience."
   ],
   "spark": "You hold the first control and feel the moment stretch as you carry your other hand across the screen; halfway there you realize the export is not ready, let go, and the armed state drains away having cost you nothing.",
   "webLeverage": "Multi-pointer and concurrent key event handling makes true simultaneity detectable in the browser."
  },
  {
   "id": "interaction-physics-elastic-scope",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "an app screen staged as selection with a grain, where the scope you drag behaves as an elastic band that snaps to the structure's real boundaries, stretching against the grain shows visible strain, and release always commits to the boundary the band settles on",
   "lineage": "Elastic band physics, text object selection, woodworking with and against grain, magnetic lasso tools",
   "tags": [
    "snap-to-structure",
    "strain-feedback",
    "settled-commit"
   ],
   "grammar": [
    "Staging/hierarchy: The content stays primary; the band renders as a live boundary with its candidate snap edges marked faintly ahead of and behind the pointer.",
    "Sequence/attention: Attention rides the band's leading edge; strain building near a boundary telegraphs the coming snap, so the hand learns the structure by feel.",
    "Controls/state: Drag stretches, a modifier lets the band cut against the grain deliberately, and keyboard users grow or shrink scope one structural unit at a time.",
    "Adaptation: On touch the band thickens for the finger; small screens announce each settled boundary by name."
   ],
   "spark": "You drag across the table and feel the band resist mid-cell, then give as it snaps to the row edge; you pull harder with the modifier held and it finally cuts through, and the strain you fought told you exactly what the structure believed.",
   "webLeverage": "Structural boundary maps drive spring-modeled selection rendered per frame from pointer events."
  },
  {
   "id": "interaction-physics-weighted-drag",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "an app screen staged as consequence with mass, where moving any item drags its dependents behind it as a visible tow, heavily referenced things start slow and travel heavy, and the weight in your hand states the size of what you are about to rearrange",
   "lineage": "Towing and rigging practice, dependency graphs, moving-day box labels",
   "tags": [
    "mass-from-references",
    "visible-tow",
    "pre-commit-weight"
   ],
   "grammar": [
    "Staging/hierarchy: The dragged item leads with its tow trailing in dependency order; unaffected content calms while the tow crosses it, and drop targets state what they accept.",
    "Sequence/attention: The first tug is the news: resistance and the fanned tow announce scope before any dialog could; attention follows the tow's tail for surprises.",
    "Controls/state: Drop commits the item and its tow together; a modifier severs named tethers to leave dependents behind, and severed ends stay marked until resolved.",
    "Adaptation: Keyboard moves state the tow as a counted list before commit; touch drags scale mass to shorter distances."
   ],
   "spark": "You grab the module and it leans before it moves, forty-one faint dependents fanning out behind it like cans tied to a bumper; three you did not know existed, and you have learned the true cost of this move before deciding anything.",
   "webLeverage": "Dependency queries resolved at drag start drive an inertial pointer model and instanced tow rendering."
  },
  {
   "id": "spatial-navigation-tooling-by-zoom",
   "familyId": "spatial-navigation",
   "surface": "operate",
   "form": "an app screen staged as ground where altitude is commitment, where zoomed far out the work reads as silent shapes, mid zoom surfaces status and counts, full tooling appears only at close range, and the address of any view is nothing more than coordinates and height",
   "lineage": "Aerial survey flying, semantic zoom research, map levels of detail, model railway viewing heights",
   "tags": [
    "zoom-as-commitment",
    "tool-density-gradient",
    "coordinates-as-address"
   ],
   "grammar": [
    "Staging/hierarchy: The ground plane owns everything; at each altitude exactly one register of information leads, and controls exist only at the altitude where they act.",
    "Sequence/attention: Descent is a narrowing act: shapes, then states, then handles; attention is protected from tooling until the dive declares intent.",
    "Controls/state: Continuous zoom with named landing altitudes; every view is a shareable coordinate-and-height address, and edits are only possible below the tooling threshold.",
    "Adaptation: Small screens keep the same altitudes with stepped zoom; keyboard users dive and climb by named level."
   ],
   "spark": "From high up the project is quiet geography; you dive toward the one district that looks wrong, watch counts resolve into handles as you descend, and land at close range where the fix is a drag away, then climb until it is all silent shapes again.",
   "webLeverage": "A zoomable scene graph swaps information registers by scale threshold, with viewport state carried in the URL."
  },
  {
   "id": "spatial-navigation-carried-object",
   "familyId": "spatial-navigation",
   "surface": "operate",
   "form": "an app screen staged as one object carried between rooms, where the work in hand stays constant and centered while whole toolsets change around it as distinct rooms along a corridor, and walking left or right changes what can be done but never what is held",
   "lineage": "Craft workshop stations, assembly line fixtures, artist studios, mise en place",
   "tags": [
    "constant-object",
    "mode-as-room",
    "corridor-order"
   ],
   "grammar": [
    "Staging/hierarchy: The carried object holds dead center at constant scale; each room's tools furnish the surrounding space, and the corridor strip names adjacent rooms.",
    "Sequence/attention: Room transitions move everything except the object, so attention never re-finds the work; the corridor's fixed order makes process legible as geography.",
    "Controls/state: Walk rooms by key or gesture; each room remembers its own tool state, and the object carries its selection and zoom unchanged across every threshold.",
    "Adaptation: Small screens swap rooms full-screen around the pinned object; the corridor collapses to a labeled dial."
   ],
   "spark": "You carry the diagram from the shaping room into the annotation room and the walls change around your unmoving selection; the tools you need are suddenly within reach, and the thing you are making never flinched.",
   "webLeverage": "A persistent central view container survives route changes while room toolsets mount and unmount around it."
  },
  {
   "id": "spatial-navigation-landmark-horizon",
   "familyId": "spatial-navigation",
   "surface": "operate",
   "form": "an infinite canvas staged with a fixed horizon of landmarks, where user-pinned places render at the screen edge as a distant skyline that never leaves view, each mark holding its true bearing as you pan, and tapping one travels there along a visible line",
   "lineage": "Mariners' landmark piloting, desert navigation by peaks, cairn trails",
   "tags": [
    "persistent-horizon",
    "true-bearing",
    "travel-by-line"
   ],
   "grammar": [
    "Staging/hierarchy: The canvas owns the screen; the horizon runs as a thin band at the edges where each landmark sits at its live bearing, nearer ones rendered larger.",
    "Sequence/attention: Orientation is a glance at the skyline, not a zoom out; as you pan, landmarks slide along the band and their motion itself reports your heading.",
    "Controls/state: Pin, name, and retire landmarks; tap to travel with the route drawn and interruptible, and the current selection can be pinned from anywhere.",
    "Adaptation: Small screens keep only the nearest arc of the horizon with an expandable full ring."
   ],
   "spark": "Deep in an unfamiliar region of the canvas you glance at the edge, find the mark you named contracts sliding slowly leftward, and know without zooming that home is behind your right shoulder, two taps away.",
   "webLeverage": "Viewport-to-landmark bearing math projects pins onto screen edges every frame during canvas pan."
  },
  {
   "id": "reveal-transform-onionskin-diff",
   "familyId": "reveal-transform",
   "surface": "operate",
   "form": "a review screen staged as registered layers, where proposed and current states sit in exact alignment, a held control cross-fades between them, everything unchanged cancels into stillness, and change is the only thing that moves under your thumb",
   "lineage": "Animation onionskinning, surveyors' overlay film, astronomy blink comparators",
   "tags": [
    "registered-overlay",
    "held-crossfade",
    "change-as-motion"
   ],
   "grammar": [
    "Staging/hierarchy: One composition owns the screen; both states occupy it in registration, and a small ledger of detected deltas ranks beside it as an index into the surface.",
    "Sequence/attention: Rocking the held control makes changed regions flicker while sameness holds still; the eye finds every delta by motion alone, in any order it likes.",
    "Controls/state: Hold to cross-fade, rock to blink, tap a ledger row to center its delta; each delta can be accepted or returned individually from the surface.",
    "Adaptation: Small screens keep the blink gesture as the primary reading and walk deltas one by one from the ledger."
   ],
   "spark": "You rock your thumb on the bar and the page breathes: three regions shimmer with change while everything trustworthy stands perfectly still, and the second delta is one you are certain the author never meant to make.",
   "webLeverage": "Layered rendering of two versions with shared scroll registration makes blink comparison a scroll-locked state."
  },
  {
   "id": "reveal-transform-molt-migration",
   "familyId": "reveal-transform",
   "surface": "operate",
   "form": "an upgrade screen staged as a molt, where the next configuration grows beneath the current one which turns gradually translucent above it, cutover is a deliberate peel taken once every part beneath reads ready, and the shed state remains folded nearby, restorable while it lasts",
   "lineage": "Arthropod molting, tracing paper drafting, parallel-run system cutovers",
   "tags": [
    "grow-beneath",
    "deliberate-peel",
    "restorable-husk"
   ],
   "grammar": [
    "Staging/hierarchy: The current state stays on top and operable; the forming state shows through from beneath, part by part, and a readiness ledger tracks what has grown in.",
    "Sequence/attention: Attention watches the under-layer complete itself while work continues above; the peel is a single staged moment taken only when the ledger clears.",
    "Controls/state: Parts of the under-layer can be tested through windows before cutover; peel commits, the husk folds aside dated, and restore is one act while the husk is kept.",
    "Adaptation: Small screens alternate layers with a persistent readiness strip; the peel is a full-screen confirmation."
   ],
   "spark": "For a week you work on the old surface while the new one thickens under it; the ledger finally reads complete, you peel the old skin off in one motion, and it folds itself into the corner, dated and still restorable.",
   "webLeverage": "Two mounted configurations with per-part readiness state allow windowed testing before an atomic swap."
  },
  {
   "id": "collective-fields-staked-claims",
   "familyId": "collective-fields",
   "surface": "operate",
   "form": "a shared surface staged as staked ground, where teammates fence the region they are working as a visible claim, idle fences age and dissolve on their own, and overlapping ambitions render as one shared negotiation seam both parties see",
   "lineage": "Mining claims, allotment gardens, homesteading boundaries, soft-lock editing",
   "tags": [
    "visible-claims",
    "decay-by-idleness",
    "negotiation-seam"
   ],
   "grammar": [
    "Staging/hierarchy: The work owns the surface; claims render as light fences with the claimant named at the gate, and seams where claims overlap outrank both fences.",
    "Sequence/attention: A glance reads the territory: fresh fences are crisp, aging ones thin, and the seam draws the eye only while both parties are actually present.",
    "Controls/state: Stake, extend, and release claims; activity inside a fence renews it, absence thins it to dissolution, and a seam offers split, yield, or join as its three exits.",
    "Adaptation: Small screens list claims as a territorial index with the map summoned per claim."
   ],
   "spark": "You start fencing the pricing section and your boundary meets someone else's fence halfway; the shared seam names you both, offers a split along the middle, and their half of the fence is already thinning because they left an hour ago.",
   "webLeverage": "Presence-scoped claim records with time-decay state broadcast fence geometry to every collaborator live."
  },
  {
   "id": "collective-fields-quorum-ring",
   "familyId": "collective-fields",
   "surface": "operate",
   "form": "an approval screen staged as a ring that needs many hands, where an irreversible act sits at the center of an open circle of named slots, each approver drops their mark into their own slot in view of all, any mark can be withdrawn until the last lands, and the ring turns only when full",
   "lineage": "Multisignature custody, dual-key procedures, barn raising, round-table assent",
   "tags": [
    "quorum-slots",
    "public-marks",
    "withdraw-until-complete"
   ],
   "grammar": [
    "Staging/hierarchy: The act's full description holds the center; the ring of slots surrounds it with names and states, and the count of remaining slots is the loudest number.",
    "Sequence/attention: Each mark landing is a public event that redraws the odds; attention gathers as the ring nears completion, and the final mark is staged as the turning itself.",
    "Controls/state: Drop, withdraw, or abstain with a note; a withdrawal visibly re-opens the ring, and the completed turn archives the ring with every mark and note intact.",
    "Adaptation: Small screens stack slots beneath the act with the remaining count pinned; marks land with the same public sequencing."
   ],
   "spark": "Four marks sit in the ring and yours would be the fifth of five; you hover, drop it, and watch the whole ring shudder and turn, the act at the center committing in front of every name that made it possible.",
   "webLeverage": "Realtime shared approval state renders every mark, withdrawal, and the turning as one synchronized broadcast."
  },
  {
   "id": "reading-rhythm-cumulative-live-example",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as prose orbiting one persistent live example, where every section applies its lesson to the same running instance, state accumulates across the entire document without ever resetting, and scrolling back rewinds the example to what it was when that passage was read",
   "lineage": "Explorable explanations, laboratory bench demonstrations, cooking instruction built around one dish, literate programming",
   "tags": [
    "persistent-example",
    "accumulated-state",
    "scroll-rewind"
   ],
   "grammar": [
    "Staging/hierarchy: The prose column leads reading while the single live example pins beside it; the example's current state outranks any illustration because it is the only one.",
    "Sequence/attention: Each passage entering focus applies its change to the instance; attention bounces between the sentence and the visible consequence it just caused.",
    "Controls/state: The reader can poke the instance at any point and diverge; a return control restores the canonical state for the current scroll position.",
    "Adaptation: Narrow screens dock the example as a collapsible band that announces each applied change; state logic is identical at every width."
   ],
   "spark": "You scroll back three sections to reread a definition and the example quietly unwinds with you, shedding its last three changes; when you return, it rebuilds them in order, and you realize the page has been performing the whole document on one specimen.",
   "webLeverage": "IntersectionObserver drives an append-only operation log against one DOM instance, replayable in either direction from any scroll position."
  },
  {
   "id": "reading-rhythm-claim-evidence-binding",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as testimony under cross-examination, where every claim sentence is hard-bound to the exact lines of the adjacent example that prove it, focus on either side lights its counterpart, and any sentence without anchored evidence is visibly flagged as unproven",
   "lineage": "Literate programming, annotated critical editions, legal pinpoint citation practice, mathematical proof cross-referencing",
   "tags": [
    "sentence-line-binding",
    "bidirectional-focus",
    "unproven-flags"
   ],
   "grammar": [
    "Staging/hierarchy: Prose and example share the surface as equals in registered columns; the currently bound pair leads while unbound material rests plain.",
    "Sequence/attention: Reading either column drives the other; following prose walks the example line by line, and reading the example surfaces its claims in prose order.",
    "Controls/state: Sentences and lines carry bound, active, and unproven states; the reader can filter to show only unproven claims or only unclaimed lines.",
    "Adaptation: Narrow screens interleave each claim directly above its bound lines, preserving the pairing when the columns cannot sit side by side."
   ],
   "spark": "You hover a sentence promising the operation is safe to repeat and exactly two lines of the example answer it; the next sentence lights nothing, carries the unproven mark, and you now know precisely which promise to distrust.",
   "webLeverage": "Shared anchor ids with CSS anchor positioning keep claim and evidence visually tethered in both reading directions."
  },
  {
   "id": "reading-rhythm-prediction-checkpoint",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as a wager before each reveal, where the setup is shown, the outcome is withheld until the reader commits a prediction, and the explanation that follows is aimed at the exact gap between what they expected and what actually happened",
   "lineage": "Peer-instruction physics teaching, textbook self-check problems, the magician's pledge staged before the reveal",
   "tags": [
    "committed-prediction",
    "withheld-outcome",
    "gap-targeted-explanation"
   ],
   "grammar": [
    "Staging/hierarchy: The setup owns the viewport at each checkpoint with the prediction control seated inside it; the outcome stays physically absent until commitment.",
    "Sequence/attention: Attention runs setup, commitment, reveal, reconciliation; the reveal renders the reader's prediction beside the true outcome so the gap is the focal object.",
    "Controls/state: Predictions are chosen or typed and latch on commit; checkpoints carry unanswered, committed, revealed, and reconciled states, and skipping is allowed but recorded.",
    "Adaptation: Checkpoints are self-contained blocks that stack at any width; keyboard commitment and reveal work identically to pointer use."
   ],
   "spark": "You confidently pick the second option, the reveal slides in showing the first, and the paragraph that follows opens by naming exactly the assumption your wrong answer betrayed; you read it harder than anything else on the page.",
   "webLeverage": "Form state gates content revelation per checkpoint, and the explanation branch renders from the committed answer, shareable through URL state."
  },
  {
   "id": "reading-rhythm-telescoping-depth",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as a telescoping text, where every section exists at three committed depths from survey to internals, one persistent dial re-renders the whole document at the chosen depth, and the section skeleton never moves so the reader's place survives every switch",
   "lineage": "Telescoping hypertext experiments, graded reader series, the same law issued as headnote, statute, and commentary editions",
   "tags": [
    "three-depths",
    "stable-skeleton",
    "whole-document-dial"
   ],
   "grammar": [
    "Staging/hierarchy: Headings form a fixed skeleton that outranks depth; body material inflates or contracts beneath them while the depth dial stays persistently reachable.",
    "Sequence/attention: Switching depth re-renders in place; attention stays on the current section because its heading holds position while everything around it breathes.",
    "Controls/state: The dial sets document depth, and any single section can be locked deeper or shallower than the global setting; the margin marks sections that diverge.",
    "Adaptation: On small screens the dial docks to a fixed edge; depth changes play as vertical growth so the reader sees where added material came from."
   ],
   "spark": "Mid-paragraph you realize you need the internals, flip the dial one notch, and the paragraph you were reading grows a worked derivation directly beneath the sentence you stopped at, with the heading exactly where you left it.",
   "webLeverage": "Layered content rendered per depth with CSS grid row animation, scroll anchoring keeping the active heading fixed through re-render."
  },
  {
   "id": "reading-rhythm-fading-scaffold",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as a run of worked examples that progressively hand over, where the first example shows every step, each later one blanks more steps for the reader to supply into waiting slots, and the final example is a bare problem checked against the canonical solution",
   "lineage": "Faded worked examples from cognitive load research, mathematics problem-set progressions, apprenticeship handover practice",
   "tags": [
    "progressive-fading",
    "waiting-slots",
    "handover-sequence"
   ],
   "grammar": [
    "Staging/hierarchy: The example sequence owns the page in ranked order of independence; within each example, blanked slots outrank completed steps as the live work.",
    "Sequence/attention: Attention shifts across the sequence from reading to doing; each example opens by marking which steps are now the reader's responsibility.",
    "Controls/state: Slots accept the reader's step and check it against the canonical one; steps carry shown, blanked, attempted, and confirmed states, with a reveal always available.",
    "Adaptation: Examples stack one per screen on small widths; slot entry works by selecting among step fragments where typing is impractical."
   ],
   "spark": "By the fourth example only the first line is printed; you supply the middle steps into the waiting slots, one snaps confirmed and one pushes back, and the difference between those two is the entire lesson.",
   "webLeverage": "Per-slot validation against canonical step data, with progress persisted in localStorage so the handover survives a return visit."
  },
  {
   "id": "reading-rhythm-invertible-commentary",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as two voices sharing one text, where the canonical column carries the ruling text and a practitioner's commentary runs in the margin at exact anchors, and one control inverts the page so commentary becomes the primary column with canon compressed to the margin",
   "lineage": "Talmudic page architecture, glossed medieval manuscripts, annotated statute editions, field notes kept inside service manuals",
   "tags": [
    "two-voices",
    "anchored-commentary",
    "primary-inversion"
   ],
   "grammar": [
    "Staging/hierarchy: The primary voice owns the wide column and the secondary rides the margin at anchor points; rank is a choice the reader makes, not a fixed property.",
    "Sequence/attention: Reading follows the primary voice; margin entries surface at their anchors as passing signals and expand only when summoned.",
    "Controls/state: The inversion control swaps which voice is primary while every anchor pairing holds; entries carry collapsed, expanded, and inverted states.",
    "Adaptation: Narrow screens run the primary voice full width with the secondary folded inline at its anchors, and inversion still swaps the fold direction."
   ],
   "spark": "The canon says the field is optional; you invert the page and the practitioner's voice takes the main column, telling you every place that option has burned someone, while the official line whispers from the margin.",
   "webLeverage": "CSS anchor positioning ties margin entries to inline anchors, and a container-level swap re-flows both voices without losing scroll position."
  },
  {
   "id": "reading-rhythm-summoned-definitions",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as a text that never sends the reader away, where any defined term pressed anywhere pulls its definition to the reading position instead of jumping to a glossary, and the glossary page assembles itself as the trail of terms in the order this reader actually summoned them",
   "lineage": "Stretchtext hypertext proposals, defined-terms sections of contracts, medical glossary practice, footnote craft",
   "tags": [
    "definition-summoning",
    "no-jump-reading",
    "reader-built-glossary"
   ],
   "grammar": [
    "Staging/hierarchy: The running text always leads; a summoned definition opens as an indented insertion directly beneath the term, pushing the text down rather than covering it.",
    "Sequence/attention: First uses carry their definition inline; later uses compress to the bare term, and summoning re-opens the definition exactly where the reader stands.",
    "Controls/state: Terms carry defined-here, compressed, and summoned states; the personal glossary lists every summoned term in summoning order with its home passage.",
    "Adaptation: Insertions work identically at any width because they occupy the text column itself; the personal glossary docks as a drawer on small screens."
   ],
   "spark": "Forty minutes in, you tap the same term a third time and its definition drops in beneath the sentence again; later the glossary shows your seven summoned terms in order, and it reads as a confession of exactly what you never quite absorbed.",
   "webLeverage": "Inline expansion via the details element plus a summon log in localStorage that generates the per-reader glossary page."
  },
  {
   "id": "reading-rhythm-failure-first-repair",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as diagnosis before doctrine, where every section opens on the failing state itself, the wrong output, the raised error, the rejected filing, and the prose is the repair that transforms the visible failure into the working result step by step",
   "lineage": "Case-method teaching, morbidity and mortality rounds, debugging postmortems, troubleshooting sections of shop manuals",
   "tags": [
    "failure-opening",
    "staged-repair",
    "visible-passing-state"
   ],
   "grammar": [
    "Staging/hierarchy: The failing artifact owns each section's opening viewport with its symptom loud; the prose ranks as commentary on the repair happening in place.",
    "Sequence/attention: Attention starts at the symptom, follows each prose step as it visibly edits the artifact, and ends on the artifact passing; the pass is the section boundary.",
    "Controls/state: The artifact carries failing, mid-repair, and passing states; the reader can re-break it to the opening state and replay any step in isolation.",
    "Adaptation: Small screens alternate symptom and step full width; the current artifact state stays one gesture away at every step."
   ],
   "spark": "The section opens with the exact error you came searching for, spelled out in full; four steps later you watch the same artifact accept the change it rejected at the top, and you never had to translate someone's clean example back to your broken one.",
   "webLeverage": "Each section boots its failing state from a snapshot and applies scripted DOM edits per step, replayable and deep-linkable by symptom."
  },
  {
   "id": "reading-rhythm-latched-checkpoints",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as a route of latching checkpoints, where progress is measured by small demonstrations passed rather than distance scrolled, later sections visibly declare which latched checkpoints they assume, and unmet assumptions mute those sections until earned",
   "lineage": "Mastery-learning course design, martial-arts grading, flight-training sign-offs, laboratory practical checklists",
   "tags": [
    "latched-progress",
    "declared-assumptions",
    "earned-sections"
   ],
   "grammar": [
    "Staging/hierarchy: The current unlatched checkpoint is the loudest object on the page; latched ones compress to marks on the route rail, and muted sections hold visible but quiet.",
    "Sequence/attention: Attention moves checkpoint to checkpoint; each later section opens by naming its assumed latches, sending the reader back only when one is genuinely missing.",
    "Controls/state: A checkpoint latches when its demonstration is performed; sections carry open, assumed-met, and muted states, and an override reads any section regardless.",
    "Adaptation: The route rail folds to a compact strip on small screens; every demonstration has a keyboard path and latches persist across visits."
   ],
   "spark": "You scroll ahead into a muted section and its first line names the two checkpoints it assumes, one already latched, one not; you jump back, pass the missing demonstration in a minute, and the section wakes as you return.",
   "webLeverage": "Checkpoint latches persist in localStorage and gate section presentation through data attributes, with every checkpoint addressable by URL fragment."
  },
  {
   "id": "data-dramaturgy-correction-record",
   "familyId": "data-dramaturgy",
   "surface": "read",
   "form": "a documentation page staged as a text that owns its mistakes, where corrections are layered events rather than silent edits, each amended passage carries its date, its superseded reading, and its reason one press away, and old deep links land on the outdated text first so the correction plays as a scene",
   "lineage": "Newspaper corrections columns, scientific errata and retraction notices, legal redline amendment practice, critical apparatus",
   "tags": [
    "layered-corrections",
    "superseded-readings",
    "link-time-travel"
   ],
   "grammar": [
    "Staging/hierarchy: The current text reads clean and leads; correction marks sit at the passage edge, and an opened correction outranks the flow with date, old reading, and reason.",
    "Sequence/attention: Normal reading ignores the layer; opening a mark replays the passage's history oldest to newest, and arriving by stale link runs the same replay unprompted.",
    "Controls/state: Passages carry clean, corrected, and disputed states; a corrections index lists every amendment in time order and links into its exact position.",
    "Adaptation: Corrections open as full-width inserts on small screens; the replay works as stepped states rather than overlays at any width."
   ],
   "spark": "You follow a two-year-old link and the page shows you the sentence as it was then, struck through in place, then walks forward through the dated correction to today's reading; you arrive at the current text already knowing why it changed.",
   "webLeverage": "Text fragment links resolve against a passage history model, and the View Transitions API steps superseded readings into the current one."
  },
  {
   "id": "reading-rhythm-version-seams",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as one text with visible seams, where the reader declares their version once and every passage that differs across versions carries a seam mark, pressing a seam splays that passage into side-by-side variants with the change dated, and unmarked prose is guaranteed identical everywhere",
   "lineage": "Critical editions with variant apparatus, statute compilations with amendment history, multi-release technical manuals",
   "tags": [
    "declared-version",
    "passage-seams",
    "variant-splay"
   ],
   "grammar": [
    "Staging/hierarchy: The version declaration sits at the document head as a standing contract; seam marks rank as quiet edge signals until one is opened into a splay.",
    "Sequence/attention: Reading flows in the declared version; seams register peripherally, and a splay pulls attention sideways across variants before folding back into the flow.",
    "Controls/state: Passages are shared, seamed, or splayed; switching the declared version re-renders only seamed passages and holds scroll position through the swap.",
    "Adaptation: Splays stack variants vertically in release order on narrow screens with the reader's own version pinned first."
   ],
   "spark": "The paragraph you need carries a seam; you press it and three variants fan out side by side, and the middle one, dated two releases back, explains the behavior your system still shows because you never upgraded.",
   "webLeverage": "A version parameter in the URL selects seamed passage variants at render, and CSS grid splays the alternatives without leaving the page."
  },
  {
   "id": "reading-rhythm-two-door-corpus",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a body of documentation staged as one set of canonical blocks behind two doors, where the tutorial door strings blocks in learning order with connective narration and the reference door sorts the same blocks for lookup, and a reader can step through the wall between a moment in one and its home in the other without losing either place",
   "lineage": "The Diataxis documentation framework, textbook and handbook editions of shared material, cookbook narrative and index",
   "tags": [
    "shared-blocks",
    "dual-spines",
    "wall-stepping"
   ],
   "grammar": [
    "Staging/hierarchy: The active door's spine owns the page; each block shows a small emblem of its other life, and a standing indicator names which door the reader entered by.",
    "Sequence/attention: The tutorial spine paces blocks with narration between them; the reference spine presents the same blocks dense and sorted; attention crosses at block emblems.",
    "Controls/state: Stepping through the wall opens the same block in the other spine, both positions preserved; blocks carry tutorial-context, reference-context, and visited states.",
    "Adaptation: Small screens keep one spine on stage and make the wall-step a swap gesture; positions in both spines persist across the session."
   ],
   "spark": "Mid-tutorial you need the full option list, step through the wall, and land on the same block standing in its reference row with every sibling around it; one step back and the narration resumes at the sentence you left.",
   "webLeverage": "One content store rendered down two route trees, with paired scroll positions held in history state for instant wall-stepping."
  },
  {
   "id": "narrative-scroll-accumulating-precis",
   "familyId": "narrative-scroll",
   "surface": "read",
   "form": "a documentation page staged as a text that compresses itself as it goes, where each section ends by folding its takeaway into a traveling spine of one-line summaries, the spine at any moment is the whole document so far at a glance, and pressing any line reopens its section",
   "lineage": "Chapter summary conventions, precis composition training, legal headnote practice, running lecture recaps kept for review",
   "tags": [
    "traveling-spine",
    "one-line-per-section",
    "self-compression"
   ],
   "grammar": [
    "Staging/hierarchy: The full prose owns the reading column; the spine travels alongside as a compressed twin that grows one line per completed section and never scrolls away.",
    "Sequence/attention: Each section closes with a fold beat where its takeaway visibly leaves the prose and docks onto the spine, marking the boundary better than any rule line.",
    "Controls/state: Spine lines link back to their sections and re-fold after edits; the spine can be expanded alone as the short version of the entire document.",
    "Adaptation: Small screens dock the spine as a pull strip; the fold beat still plays so section boundaries stay felt."
   ],
   "spark": "At section six you stop trusting your memory, glance across, and the document so far is six lines you watched fold down one by one; the third looks unfamiliar, you press it, and the section reopens exactly at its takeaway.",
   "webLeverage": "Scroll-driven animations play the fold beat as each section completes, and the spine is real anchored markup rather than generated imagery."
  },
  {
   "id": "data-dramaturgy-full-state-trace",
   "familyId": "data-dramaturgy",
   "surface": "read",
   "form": "a worked example staged as a trace with nothing off stage, where one input is walked through the system step by step and a persistent state panel shows every variable, total, and intermediate artifact after each step, diffed against the step before, so any change the prose causes is visibly accounted for",
   "lineage": "Algorithm trace tables, double-entry bookkeeping, annotated chess scores with positions, patient charts kept per intervention",
   "tags": [
    "stepped-state-panel",
    "per-step-diff",
    "nothing-hidden"
   ],
   "grammar": [
    "Staging/hierarchy: The prose step and the state panel share rank as question and answer; within the panel, values changed by the current step lead and untouched values recede.",
    "Sequence/attention: Each step reads as claim then consequence; attention drops from the sentence to the diff it produced, and an unexplained change reads as a bug in the prose.",
    "Controls/state: The reader scrubs the step sequence in both directions and pins any two steps for direct comparison; values carry changed, carried, and derived markings.",
    "Adaptation: Small screens interleave each step with only its changed values, with the full panel one gesture away."
   ],
   "spark": "Step nine claims only one field changes, but the panel shows two values moving; you scrub back, watch it again, and the second change turns out to be derived from the first, marked so, and suddenly the whole system's wiring is legible.",
   "webLeverage": "A state snapshot per step drives a diffed table render, scrubbable via range input and addressable per step in the URL hash."
  },
  {
   "id": "reading-rhythm-transcluded-crossrefs",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as a text that quotes instead of jumping, where following any cross-reference opens the cited passage in place as an attributed excerpt, excerpts can nest with a visible depth stack, and the reader unwinds the stack to surface instead of retracing browser history",
   "lineage": "Transclusion in hypertext theory, Talmudic cross-reference craft, legal pinpoint citation, scholarly block quotation",
   "tags": [
    "in-place-transclusion",
    "nested-excerpts",
    "unwind-stack"
   ],
   "grammar": [
    "Staging/hierarchy: The host text keeps the column; excerpts open indented beneath their reference with source and extent declared, and the depth stack rides one edge.",
    "Sequence/attention: Reading never leaves the page; each opened excerpt pushes one level, the stack shows the chain of citations, and closing pops back to the exact sentence.",
    "Controls/state: Excerpts carry closed, opened, and pinned states; a pinned excerpt persists while the reader continues, and the full source is one step from any excerpt.",
    "Adaptation: Depth is capped by viewport with older levels compressing to labeled bars; unwinding restores them in order."
   ],
   "spark": "Three references deep, the stack reads like a chain of custody: the guide cites the specification, which cites the underlying rule; you unwind twice and land back on your sentence, having never lost the thread or opened a second tab.",
   "webLeverage": "Fetched fragments render as attributed excerpts inline, with the citation stack kept in history state so back gestures pop levels."
  },
  {
   "id": "reading-rhythm-goal-compiled-route",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a guide staged as a route compiled from the reader's declared goal, where naming what you are trying to accomplish up front assembles the shortest path of sections that produce it, skipped material stays visible as labeled detours off the route, and changing the goal recompiles the path in place",
   "lineage": "Turn-by-turn route guidance applied to manuals, recipe scaling practice, intake-driven legal self-help guides, triage protocols",
   "tags": [
    "declared-goal",
    "compiled-path",
    "visible-detours"
   ],
   "grammar": [
    "Staging/hierarchy: The goal declaration heads the page as a standing contract; the compiled route owns the flow, and detour mouths sit at junctions sized by what they contain.",
    "Sequence/attention: The route reads as one continuous line of only what is needed; each detour mouth names what it covers and who needs it, so skipping is an informed act.",
    "Controls/state: Goals are chosen from a small set or configured; sections carry on-route, detour, and completed states, and recompiling preserves completed work.",
    "Adaptation: Detours fold flush into the route on small screens; the goal contract stays reachable from any depth."
   ],
   "spark": "You declare the simplest goal and the guide contracts to nine sections; at a junction, a detour mouth says its material only matters past a scale you have not reached, and for once skipping feels like a decision made with full information.",
   "webLeverage": "Route compilation renders from a section dependency manifest, with the declared goal carried in the URL so a compiled path is shareable."
  },
  {
   "id": "reading-rhythm-spaced-returns",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a long guide staged as a spiral of scheduled returns, where key ideas deliberately come back at expanding reading distances, each return replays the earlier example with one piece missing for the reader to recall before the restatement, and a return map shows which ideas are due to resurface",
   "lineage": "Spaced-repetition research, catechism and recitation traditions, music practice schedules, language textbook review cycles",
   "tags": [
    "scheduled-returns",
    "recall-before-restate",
    "expanding-spacing"
   ],
   "grammar": [
    "Staging/hierarchy: The forward prose leads; a return interrupts as a bounded block that names where the idea first appeared and holds the missing piece as the focal blank.",
    "Sequence/attention: The reader attempts the recall, then the restatement lands as confirmation or correction; the return closes by pointing forward to its next scheduled surfacing.",
    "Controls/state: Returns carry due, attempted, and settled states; a struggling recall shortens the next interval and a clean one lengthens it, visibly on the return map.",
    "Adaptation: Returns are self-contained blocks at any width; recall works by selection where typing is impractical, and the map folds to a compact strip."
   ],
   "spark": "Twenty minutes after the concept first appeared, it returns with the crucial argument blanked; you reach for it and half-have it, the restatement lands, and the map shows the idea due again near the end, further out because you nearly knew it.",
   "webLeverage": "Return scheduling runs on reading-distance thresholds via IntersectionObserver, with per-idea intervals adjusted and stored client-side."
  },
  {
   "id": "narrative-scroll-zoom-anchored-chapters",
   "familyId": "narrative-scroll",
   "surface": "read",
   "form": "a documentation page staged as one continuous zoom into a single system picture, where each chapter is a committed camera position on the same diagram, prose is anchored to zoom depths so document position and system position are the same fact, and the traveled path persists as a trail of miniatures",
   "lineage": "Powers-of-ten films, anatomical atlas plates descending from body to tissue, map series drawn at nested scales",
   "tags": [
    "one-diagram",
    "camera-chapters",
    "zoom-trail"
   ],
   "grammar": [
    "Staging/hierarchy: The diagram owns the surface at every depth; the current chapter's region fills the frame while neighboring structures stay cropped at the edges as context.",
    "Sequence/attention: Scroll travels the camera between committed positions; prose for each chapter arrives only when its zoom settles, so reading rhythm is dive, settle, read.",
    "Controls/state: The miniature trail records every visited depth and jumps the camera directly; regions carry unvisited, current, and read states on the diagram itself.",
    "Adaptation: Small screens alternate settled diagram frames with their prose instead of moving continuously, keeping every committed position intact."
   ],
   "spark": "You scroll and the assembly you just read about swells until one of its parts becomes the whole frame; the prose that arrives speaks only at this depth, and the trail below shows the three levels you passed through to get here.",
   "webLeverage": "Scroll-driven animations interpolate one SVG viewBox between committed camera positions, each position addressable as a deep link."
  },
  {
   "id": "spatial-navigation-elimination-key",
   "familyId": "spatial-navigation",
   "surface": "read",
   "form": "a reference corpus staged as a dichotomous key, where the reader answers observable either-or questions in sequence and the body of pages visibly prunes with each answer until one remains, every eliminated branch staying listed with the answer that removed it so backtracking is one honest step",
   "lineage": "Botanical and entomological identification keys, differential diagnosis practice, fault-isolation trees in service manuals",
   "tags": [
    "either-or-descent",
    "visible-pruning",
    "answer-audit-trail"
   ],
   "grammar": [
    "Staging/hierarchy: The current question leads with its two observable choices; the surviving corpus stands behind it as a countable field, eliminated branches stacked aside.",
    "Sequence/attention: Each answer plays as a visible cut, the field thinning in one beat; attention alternates between the next question and the shrinking count of what remains.",
    "Controls/state: Answers can be revised at any level and the key replays downstream cuts; candidates carry alive, eliminated, and final states, and unsure keeps both branches.",
    "Adaptation: Small screens show the count and the last cut instead of the whole field; the audit trail of answers stays a single list at any width."
   ],
   "spark": "Four questions in, the field of two hundred entries has thinned to three; you glance at the eliminated stack, see the answer that removed the one you expected, realize you misjudged it, flip that single answer, and watch the cuts replay.",
   "webLeverage": "The key runs as filter state over a loaded corpus index, with the full answer path encoded in the URL for shareable diagnoses."
  },
  {
   "id": "spatial-navigation-prerequisite-terrain",
   "familyId": "spatial-navigation",
   "surface": "read",
   "form": "a body of knowledge staged as reachable terrain, where every page declares what it assumes and what it establishes, opening any page draws its assumption chain backward and everything it unlocks forward, and the reader's own established set marks each page as within reach or beyond it",
   "lineage": "Mathematics textbook dependency charts, curriculum prerequisite maps, skill trees, apprenticeship progression ladders",
   "tags": [
    "assumes-establishes",
    "reachability-marking",
    "chain-drawing"
   ],
   "grammar": [
    "Staging/hierarchy: The corpus map ranks pages by distance from the reader's established set; within-reach pages lead, distant ones recede, the opened page's chains outrank all.",
    "Sequence/attention: Opening a page pulls its backward chain taut first, so the cost of reading it is visible before its content; the forward chain answers why it is worth paying.",
    "Controls/state: Reading a page adds what it establishes to the reader's set and re-marks the terrain; pages carry beyond-reach, within-reach, read, and assumed-known states.",
    "Adaptation: Small screens replace the map with per-page chain lists; the established set and reachability logic stay identical."
   ],
   "spark": "The page you want sits two assumptions beyond your reach; its backward chain names both, each a twenty-minute read, and when you finish the second, the terrain re-marks and three pages you never planned to read announce themselves as newly reachable.",
   "webLeverage": "Assumes and establishes declared as page metadata drive a client-side reachability graph, persisted per reader and rendered as live map state."
  },
  {
   "id": "first-viewport-cold-open-arrival",
   "familyId": "first-viewport",
   "surface": "experience",
   "form": "a portfolio staged as a cold open, where the visitor lands already inside the first work at full bleed with no name, menu, or introduction, and the maker's identity, index, and credits surface only after that first piece has finished making its case",
   "lineage": "Cold-open television and film convention, pre-title sequences, gallery shows entered mid-installation",
   "tags": [
    "identity-withheld",
    "work-first-entry",
    "deferred-chrome"
   ],
   "grammar": [
    "Staging/hierarchy: The first work owns the entire viewport with zero chrome; nothing outranks it until it releases, when name and index enter as a second scene.",
    "Sequence/attention: Attention is captured before it is addressed; only after the opening piece resolves does the surface introduce who made it and what else exists.",
    "Controls/state: A quiet skip is available from the first moment; states are inside-the-open, introduced, and browsing, and returning visitors can land introduced.",
    "Adaptation: Small screens run the same order with the opening work trimmed to its strongest passage"
   ],
   "spark": "You arrive and something is already happening at full scale with no one explaining it; forty seconds later a name finally appears, and by then you already hold an opinion worth the introduction.",
   "webLeverage": "Session state and the History API let the introduction insert itself as a real navigable step after the opening work."
  },
  {
   "id": "first-viewport-overture-flicker",
   "familyId": "first-viewport",
   "surface": "experience",
   "form": "a portfolio staged as an overture, where the entire body of work passes full bleed in a few seconds of rapid measured succession before settling into the first piece, and anything the eye catches mid-rush can be hunted down later through a step-through of the same sequence",
   "lineage": "Film title sequences and trailers, flip-books, slide-carousel previews, concert overtures",
   "tags": [
    "corpus-overture",
    "rapid-precis",
    "recall-index"
   ],
   "grammar": [
    "Staging/hierarchy: During the overture the passing works own everything; once settled, the first work leads and a quiet recall strip holds whatever the rush imprinted.",
    "Sequence/attention: The rush plays too fast to read and exactly fast enough to remember; the slow visit that follows keeps paying off glimpses from the opening seconds.",
    "Controls/state: The visitor can replay the overture, slow it into a step-through, or skip it entirely; states are rushing, settled, and recalling.",
    "Adaptation: Small screens shorten the overture to fewer beats while keeping every work in the step-through"
   ],
   "spark": "Forty works pass in five seconds and two of them snag you; an hour of browsing later you finally hunt both down through the step-through, and finding them feels like remembering a face.",
   "webLeverage": "Ahead-of-time image decoding and one animation clock hold the rush to an exact authored cadence, with a keyboard step-through for recall."
  },
  {
   "id": "spatial-navigation-enfilade-sightline",
   "familyId": "spatial-navigation",
   "surface": "experience",
   "form": "a portfolio staged as an enfilade of aligned doorways, where from any room the next several works stay visible ahead, each framed smaller through the succeeding openings, so anticipation is built from real sightlines rather than from a menu of what comes next",
   "lineage": "Enfilade palace and museum planning, aligned gallery doorways, telescoping stage flats",
   "tags": [
    "aligned-thresholds",
    "forward-sightline",
    "diminishing-frames"
   ],
   "grammar": [
    "Staging/hierarchy: The current room's work leads at full scale; through the doorway behind it, coming works rank by depth, each one visible, framed, and smaller.",
    "Sequence/attention: The eye keeps drifting through the opening toward what is coming; walking forward promotes the next framed glimpse to the room you stand in.",
    "Controls/state: Step forward or back along the axis, or leap to any framed glimpse; rooms hold occupied, ahead, and passed states, and the axis never branches.",
    "Adaptation: Narrow screens keep one doorway of lookahead so the next work always shows through the current one"
   ],
   "spark": "Standing with one work, you can see three more waiting in a shrinking telescope of doorways, and the small far one keeps pulling at you until you cross two thresholds just to face it.",
   "webLeverage": "CSS 3d perspective nests real DOM rooms along one axis, so every framed lookahead is the live next page rather than a thumbnail."
  },
  {
   "id": "spatial-navigation-verso-return",
   "familyId": "spatial-navigation",
   "surface": "experience",
   "form": "a portfolio staged as a one-way circuit with a return passage, where the outbound walk shows each work clean and unexplained, and walking back passes the versos of the same works, their process, credits, and dates hung facing the other direction",
   "lineage": "One-way exhibition circulation, verso inscriptions on framed works, studio walk-throughs",
   "tags": [
    "directional-content",
    "verso-context",
    "circuit-return"
   ],
   "grammar": [
    "Staging/hierarchy: Facing forward, the work owns the room with nothing attached; facing back, its verso leads with process and credits, and the work itself becomes the frame.",
    "Sequence/attention: The outbound pass is for encounter and the return is for understanding; turning around is the act that requests context, and nothing volunteers it earlier.",
    "Controls/state: Direction is the only mode switch; each work holds a recto and a verso state, and either passage can be entered at any room along the circuit.",
    "Adaptation: Small screens turn the about-face into a flip of the current room rather than a separate passage"
   ],
   "spark": "You reach the end of the show, turn around, and the way back is a different exhibition: the same works showing their working notes and dates, and the piece that stopped you outbound now explains itself.",
   "webLeverage": "Scroll direction detection and the History API make the return leg a real second route over the same DOM rooms."
  },
  {
   "id": "spatial-navigation-express-aisle",
   "familyId": "spatial-navigation",
   "surface": "experience",
   "form": "a portfolio staged as one topology with two drawn routes, where a highlights route crosses the full circuit in a handful of held beats and the long route enters every room, the two paths visibly sharing junctions where the visitor can change pace mid-visit",
   "lineage": "Museum highlights tours, gallery floor-plan routes, guidebook one-hour itineraries",
   "tags": [
    "dual-routes",
    "shared-junctions",
    "pace-switching"
   ],
   "grammar": [
    "Staging/hierarchy: The rooms and works are one fixed structure; the chosen route leads the presentation while the other stays drawn and available at every junction.",
    "Sequence/attention: On the express route each stop is one held beat; on the long route the same stops open into full rooms, and junction markers keep both futures visible.",
    "Controls/state: Pick a route at the entrance and switch at any junction; the visit records which rooms each pass actually entered, so nothing skipped gets lost.",
    "Adaptation: Small screens default to the express route with every junction offering the deep turn"
   ],
   "spark": "You take the short route and it holds you five beats at five works; at the fourth junction one piece will not let go, so you step off the express and the room opens around it.",
   "webLeverage": "URL searchparams encode route and position, so either visit is shareable and resumable at its exact junction."
  },
  {
   "id": "spatial-navigation-open-storage-annex",
   "familyId": "spatial-navigation",
   "surface": "experience",
   "form": "a portfolio staged as a sparse hang beside open storage, where the authored route shows a handful of works generously spaced, a visible annex of dense sliding racks holds everything else, and each hung work cites its rack so the full archive stays one pull away",
   "lineage": "Visible-storage museum wings, compact shelving archives, salon hangs versus study collections",
   "tags": [
    "curated-versus-complete",
    "sliding-racks",
    "cited-archive"
   ],
   "grammar": [
    "Staging/hierarchy: The sparse hang owns the main route with one work per room; the annex racks read as dense edge-on mass until one is pulled and its contents face front.",
    "Sequence/attention: The hang paces slowly and the annex invites rummaging; each hung work points to its rack, so depth is always one deliberate pull from the surface.",
    "Controls/state: Pull a rack to turn edge-on works face-front, pin finds, and follow citations in both directions; racks are stowed, pulled, and browsed.",
    "Adaptation: Small screens dock the annex as a bottom drawer beneath the current room"
   ],
   "spark": "The hang gives you nine works, but behind the ninth you notice the rack it came from; you pull the handle and thirty siblings slide out edge-on, and suddenly you are the curator.",
   "webLeverage": "Drag gestures slide real DOM shelving while lazy loading keeps the dense racks cheap until pulled."
  },
  {
   "id": "narrative-scroll-measured-hang",
   "familyId": "narrative-scroll",
   "surface": "experience",
   "form": "a portfolio staged as a measured hang, where the empty interval between works is authored per transition, tight pairs read as one thought, wide voids mark chapter breaks, and the scroll distance itself carries the curator's phrasing",
   "lineage": "Exhibition hanging craft, salon versus modernist spacing, poetry lineation and caesura",
   "tags": [
    "authored-intervals",
    "spacing-as-grouping",
    "chaptered-voids"
   ],
   "grammar": [
    "Staging/hierarchy: Works hang on one continuous line of travel; nothing but distance separates them, and the width of each gap ranks the break it marks.",
    "Sequence/attention: Two works a breath apart get compared; two works a long void apart get remembered separately, and traversing a wide gap becomes the rest between chapters.",
    "Controls/state: A rhythm map shows the whole hang as its spacing pattern; gaps hold breath, break, and chapter-void states, and jumping lands at the near edge of a gap.",
    "Adaptation: Small screens compress absolute distances while preserving the ratios between gaps"
   ],
   "spark": "Two works sit almost touching and you read them as an argument; then the page runs empty long enough that you wonder if the show is over, and the next piece lands like a new chapter because of it.",
   "webLeverage": "Authored spacing is honest layout, with an IntersectionObserver rhythm map rendering the whole hang as its interval pattern."
  },
  {
   "id": "narrative-scroll-interstitial-labels",
   "familyId": "narrative-scroll",
   "surface": "experience",
   "form": "a portfolio staged as clean rooms with talking thresholds, where captions, credits, and process notes live only in the passages between works, readable in transit and holdable by pausing there, so no text ever shares a room with the work it describes",
   "lineage": "Wall labels beside gallery doorways, intertitles in silent film, program notes read between movements",
   "tags": [
    "threshold-text",
    "clean-rooms",
    "transit-reading"
   ],
   "grammar": [
    "Staging/hierarchy: Inside a room the work is alone and unlabeled; the threshold band carries all context for what was just seen and what comes next, ranked by proximity.",
    "Sequence/attention: Reading happens between encounters; travel speed sets the dose, a fast pass yields titles only, and pausing mid-threshold opens the full note.",
    "Controls/state: Pause in a threshold to hold and expand its text; thresholds are passed, held, and expanded, and any room can be re-entered without its label following.",
    "Adaptation: Small screens keep the alternation strict, one clean work screen, one threshold screen, never merged"
   ],
   "spark": "The piece fills the room with not a word attached; on the way out a line of text meets you in the passage, names what you just felt, and steps aside before the next work begins.",
   "webLeverage": "Scroll position maps text presence and dwell inside the threshold bands, with each note deep-linkable on its own."
  },
  {
   "id": "narrative-scroll-end-credit-roll",
   "familyId": "narrative-scroll",
   "surface": "experience",
   "form": "a portfolio staged as a feature with end titles, where every work runs clean and uncredited in sequence, and all captions, collaborators, tools, and dates are withheld until a final rolling credit sequence that doubles as the index for the second visit",
   "lineage": "Film end-credit rolls, exhibition checklists at the gallery exit, colophons at the back of books",
   "tags": [
    "deferred-credits",
    "terminal-index",
    "clean-sequence"
   ],
   "grammar": [
    "Staging/hierarchy: During the run each work owns its full screen with nothing attached; at the end the credit roll owns the surface, every line tied to the work it credits.",
    "Sequence/attention: The first pass is pure encounter; the roll replays the whole show as text, and recognizing works by their credits becomes the second reading.",
    "Controls/state: Any credit line jumps back to its work with context now attached; the roll can be paused, searched, and left running, and it marks what was skipped.",
    "Adaptation: Small screens keep the roll as the one place where text and works share the surface"
   ],
   "spark": "Twelve works pass without a single caption, and then the roll starts: names, dates, collaborators sliding by in order, and you catch yourself waiting for the credit of the one that got you.",
   "webLeverage": "A searchable credit roll built from structured metadata deep-links every line back to its work's exact state."
  },
  {
   "id": "reveal-transform-resumable-index",
   "familyId": "reveal-transform",
   "surface": "experience",
   "form": "a portfolio staged as paused rooms under a summonable index, where lifting the overlay shows every work frozen at the exact state you left it, nothing ever resets, and the index becomes a live record of your visit rather than a menu of thumbnails",
   "lineage": "Contact sheets marked mid-edit, bookmarks left in open books, paused monitors in a video installation",
   "tags": [
    "visit-memory",
    "paused-not-reset",
    "summonable-overlay"
   ],
   "grammar": [
    "Staging/hierarchy: The current work owns the surface until the index is summoned; then the frozen leave-states rank the overlay, with your most recent rooms nearest.",
    "Sequence/attention: Every glance at the index replays your visit; half-watched pieces show their held frame, untouched ones show their openings, and the difference invites.",
    "Controls/state: Summon, leap, and resume; each work holds untouched, in-progress, and finished states, and leaping never loses the position left behind.",
    "Adaptation: Small screens summon the index as a full screen of held frames in visit order"
   ],
   "spark": "You lift the index an hour in and it looks nothing like a menu: the film is held mid-frame where you left it, the essay is parked at its third section, and one untouched opening sits there quietly accusing you.",
   "webLeverage": "Per-work state persisted in IndexedDB restores playback positions, scroll depths, and settings across the whole visit."
  },
  {
   "id": "reveal-transform-entered-through-process",
   "familyId": "reveal-transform",
   "surface": "experience",
   "form": "a portfolio staged as arrivals through making, where each work enters by rapidly replaying its own construction stages, first marks to final state in a few seconds, so process is the entrance choreography rather than a sidebar, and re-entering replays the becoming",
   "lineage": "Time-lapse studio films, draft-to-final manuscript comparisons, printmaking progressive proofs",
   "tags": [
    "process-as-entrance",
    "construction-replay",
    "staged-arrival"
   ],
   "grammar": [
    "Staging/hierarchy: The finished work is the destination and owns the room once arrived; during entry, its earlier stages hold the surface in strict making order.",
    "Sequence/attention: Every arrival is a few seconds of becoming; attention learns to read the leap between stages, and the final state lands with its history still fresh.",
    "Controls/state: Entries can be replayed, stepped stage by stage, or held at any draft; works are arriving, arrived, and held-at-stage.",
    "Adaptation: Small screens shorten each arrival to three decisive stages"
   ],
   "spark": "The image enters as its contact sheet, snaps to the chosen frame, then to the final crop, all in two seconds; you drag the entrance back one step and sit with the version that almost shipped.",
   "webLeverage": "Layered assets and a scrubbed timeline make every entrance replayable and holdable at any construction stage."
  },
  {
   "id": "reveal-transform-room-before-work",
   "familyId": "reveal-transform",
   "surface": "experience",
   "form": "a portfolio staged as vessels that arrive before their contents, where between pieces the empty container visibly reshapes to the next work's proportions, a long corridor for a sequence, a tall shaft for a single image, so the visitor reads what kind of work is coming from the space forming around them",
   "lineage": "Purpose-built exhibition architecture, stage sets changed in view, bespoke vitrine making",
   "tags": [
    "container-first",
    "proportional-foreshadow",
    "reshaping-room"
   ],
   "grammar": [
    "Staging/hierarchy: During transitions the reshaping container is the only subject; once the work enters, the room recedes to pure frame and the work owns it entirely.",
    "Sequence/attention: The stretch of a wall or drop of a ceiling is the announcement; the visitor forms an expectation from proportions alone, and the work confirms or betrays it.",
    "Controls/state: Advancing triggers the reshape, and the work enters only when its room is ready; rooms are forming, ready, and inhabited.",
    "Adaptation: Small screens reshape the single column by height and aspect alone"
   ],
   "spark": "The room you are in narrows into a corridor twenty screens long, and you know before anything loads that the next piece is a sequence; the walls stop moving, and its first frame steps in.",
   "webLeverage": "Animated CSS aspect-ratio and grid transitions reshape real layout containers before content mounts."
  },
  {
   "id": "reveal-transform-three-distances",
   "familyId": "reveal-transform",
   "surface": "experience",
   "form": "a portfolio staged at three fixed viewing distances, where every work is authored as an across-the-room reading, an arm's-length reading, and a nose-close reading, and stepping between the three swaps what is actually shown rather than scaling one image",
   "lineage": "Gallery viewing-distance craft, painting conservation examination, print loupe inspection",
   "tags": [
    "discrete-distances",
    "authored-readings",
    "step-not-zoom"
   ],
   "grammar": [
    "Staging/hierarchy: One distance is active at a time and owns the surface; the other two announce themselves only as the step controls, held near the work's edge.",
    "Sequence/attention: Across the room gives the gestalt, arm's length gives the composition, nose-close gives the making; the cut between readings is where the insight lands.",
    "Controls/state: Step in and step back are the only moves; each work holds three authored states, and the current distance persists into the next work.",
    "Adaptation: Small screens keep all three states and map the steps to taps rather than travel"
   ],
   "spark": "From across the room the piece is one calm shape; you step in once and it becomes a composition, then in again and it turns into decisions, and stepping back out you cannot unsee the middle reading.",
   "webLeverage": "Distance states swap sources and layouts entirely, with responsive images serving each authored reading."
  },
  {
   "id": "collective-fields-condensed-outtakes",
   "familyId": "collective-fields",
   "surface": "experience",
   "form": "a portfolio staged as keepers condensed from their outtakes, where each work arrives as its full population of variants massed loosely on the surface, contracts into the single chosen final, and can be scattered again to inspect the drafts, rejects, and near-misses that were not picked",
   "lineage": "Contact sheets and edit tables, sculptors' maquette shelves, writers' cut files",
   "tags": [
    "variant-population",
    "condense-to-keeper",
    "scatterable-rejects"
   ],
   "grammar": [
    "Staging/hierarchy: The condensed keeper owns the room; its variant mass persists as a faint surrounding presence sized honestly to how many attempts it condenses.",
    "Sequence/attention: Each arrival is a contraction from many to one, and the eye reads the count before the work; scattering reverses it and ranks rejects by how close they came.",
    "Controls/state: Scatter, inspect any variant beside the keeper, and re-condense; works hold massed, condensed, and compared states.",
    "Adaptation: Small screens fan the population as a stack behind the keeper instead of a loose field"
   ],
   "spark": "The piece you are admiring pulls apart at a touch into sixty near-misses, and the one that almost won hangs beside the keeper; you see the two-percent difference and finally trust every other choice on the site.",
   "webLeverage": "Canvas instancing carries whole variant populations cheaply while any member promotes to a comparable full view."
  },
  {
   "id": "collective-fields-detail-first-index",
   "familyId": "collective-fields",
   "surface": "experience",
   "form": "a portfolio staged as a field of equal fragments, where the survey is not thumbnails but one same-sized detail crop cut from every work at identical scale, and choosing a fragment grows it outward, revealing surrounding context until the whole work stands framed",
   "lineage": "Detail plates in art monographs, close-up guessing games, core sampling practice",
   "tags": [
    "equal-crops",
    "outward-reveal",
    "fragment-door"
   ],
   "grammar": [
    "Staging/hierarchy: The fragment field owns the survey with every crop the same size and scale, so handling and craft compete on equal terms before any work is named.",
    "Sequence/attention: Scanning reads craft rather than subjects; the chosen fragment holds still while its work grows outward around it, keeping the detail fixed as the anchor.",
    "Controls/state: Choose, grow, and step back to the field; fragments are unvisited, entered, and placed once their work has been seen whole.",
    "Adaptation: Small screens keep crops equal and let the field wrap deeper instead of shrinking them"
   ],
   "spark": "Forty identical squares show forty kinds of handling, and one of them stops your thumb; you tap it and the rest of its work unfolds outward from that exact spot, which turns out to be a corner of something enormous.",
   "webLeverage": "Transform-origin zoom grows the work outward from the crop's true position, with progressive image loading at each scale."
  },
  {
   "id": "reading-rhythm-shared-anchor-crossings",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a documentation page staged as two sovereign texts crossing at shared anchors, where each text keeps its own reading axis and the two meet only at the terms they hold in common, every crossing acting as a junction that lets the reader change texts without losing either position",
   "lineage": "Bilingual poetry broadsides, parallel-text editions, ruby annotation, and multilingual book typography",
   "tags": [
    "dual-axis",
    "shared-anchors",
    "sovereign-texts"
   ],
   "grammar": [
    "Staging/hierarchy: Two complete texts hold the surface as equals on perpendicular axes; shared terms sit at the intersections and outrank either text's ordinary flow.",
    "Sequence/attention: The reader travels one text in its native direction until a crossing appears, pauses at the shared term, and either continues or switches texts through it.",
    "Controls/state: Crossings act as switches between texts; terms carry shared, divergent, glossed, and untranslated states, and each text tracks its own reading position.",
    "Adaptation: Narrow screens split the texts into synchronized panes that keep native direction, with crossings rendered as explicit paired links between corresponding lines."
   ],
   "spark": "A term descends one column until it meets the same word arriving from the left; two separate arguments touch once at the shared name, then continue toward different margins, and the reader steps across at the junction.",
   "webLeverage": "Native writing modes, ruby annotation, and bidirectional deep links keep both texts sovereign while every crossing stays addressable.",
   "sourceConceptId": "typography-calligraphy-writing-crossing-script-dialogue",
   "provenanceNote": "Kept the perpendicular texts meeting only at shared anchors; stripped the scripts, inks, and broadside surface."
  },
  {
   "id": "data-dramaturgy-replayable-ledger",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "an app screen staged as a state view beside its move ledger, where every terse ledger line reconstructs the exact full state at that moment, judgments attach to moves as compact grades, and alternate histories branch as indented variations walkable without losing the mainline",
   "lineage": "Algebraic chess notation, annotated game publishing, and replayable move ledgers",
   "tags": [
    "state-reconstruction",
    "move-ledger",
    "graded-judgments"
   ],
   "grammar": [
    "Staging/hierarchy: The live state view and its ledger share the surface as equals; the mainline leads, variations indent beneath their branch points, and grades ride their moves.",
    "Sequence/attention: Attention alternates between the ledger line being read and the state it rebuilds; stepping the ledger replays history one committed move at a time.",
    "Controls/state: Any ledger line jumps the state view to that exact position; moves carry graded judgments, branches open as explorable variations, and the mainline stays marked.",
    "Adaptation: Small screens stack the state view over the ledger with the current line pinned; every position keeps a shareable address so replay survives any layout."
   ],
   "spark": "Someone selects move forty-one and the entire state snaps to that exact moment; two marks of praise sit beside the line, and everyone replaying the session later gasps at the same instant.",
   "webLeverage": "URL parameters address any step, so every reconstructed position is a shareable, linkable location.",
   "sourceConceptId": "notation-diagram-systems-chess-notation",
   "provenanceNote": "Kept the ledger whose every line rebuilds full state plus graded judgments; stripped the board, pieces, and book page."
  },
  {
   "id": "reading-rhythm-spec-sheet-law",
   "familyId": "reading-rhythm",
   "surface": "read",
   "form": "a standards document staged as numbered spec sheets, where every rule shows correct use beside forbidden use, elements carry their clearances and minimums as visible measurement callouts, and each layout must pass a reduction test proving it survives at its smallest permitted size",
   "lineage": "Graphics standards manuals, engineering spec sheets, and federal identity programs",
   "tags": [
    "correct-beside-forbidden",
    "measurement-callouts",
    "reduction-test"
   ],
   "grammar": [
    "Staging/hierarchy: Each rule owns one numbered sheet; the correct example and its forbidden twin sit side by side at equal size, with measurement callouts ranked in the margins.",
    "Sequence/attention: The reader meets the rule, then the pair; the eye compares correct against forbidden before the callouts name exactly which measurement separates them.",
    "Controls/state: Elements expose live clearance and minimum-size math on demand; violations flag themselves, and every sheet is reachable by its document code.",
    "Adaptation: Sheets reflow to one example per screen with its forbidden twin one step away; callouts collapse to summonable overlays and the numbering never reorders."
   ],
   "spark": "The reader drags the sample down to its minimum permitted size and the sheet passes or fails in front of them; beside it, the forbidden version sits at full size, wrong in exactly one measured way.",
   "webLeverage": "Computed-style measurement overlays drawn in SVG expose live clearance math on any element.",
   "sourceConceptId": "design-canon-nasa-worm-standards-room",
   "provenanceNote": "Kept spec pages, correct-beside-forbidden pairs, callouts, and the reduction test; stripped the logotype, era, and paste-up room."
  },
  {
   "id": "working-surfaces-perimeter-rail",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as an emptied floor ringed by a tool rail, where the center holds nothing but the work in progress, every tool hangs at one ordained station on the perimeter, and a gap on the rail is the honest signal that its tool is somewhere in use",
   "lineage": "Meetinghouse peg rails, workshop shadow boards, and everything-in-its-place tool walls",
   "tags": [
    "emptied-center",
    "perimeter-rail",
    "absence-as-state"
   ],
   "grammar": [
    "Staging/hierarchy: The work floor owns the center at full scale; tools rank along the perimeter rail at fixed stations, and nothing permanent may occupy the middle.",
    "Sequence/attention: The eye rests on the work; reaching for a tool is a trip to the rail, and the gap it leaves keeps tracking the borrowed tool until it returns.",
    "Controls/state: Tools lift off the rail into use and re-hang on release; an occupied station means available, a gap means in use, and each station names its tool.",
    "Adaptation: The rail wraps to whichever edges the viewport allows with station order preserved; on small screens it condenses to one edge and the center stays empty."
   ],
   "spark": "The floor is bare except for the document being worked; along the edge one station stands empty, and that gap alone says the annotation tool is out, exactly where the work is.",
   "webLeverage": "Drag and drop between rail and floor makes taking a tool down and hanging it back the entire interaction model.",
   "sourceConceptId": "design-canon-shaker-meeting-room",
   "provenanceNote": "Kept the emptied center, the perimeter rail, and absence-as-state; stripped the meetinghouse, its furniture, and its finishes."
  },
  {
   "id": "spatial-navigation-transit-stack",
   "familyId": "spatial-navigation",
   "surface": "operate",
   "form": "an app staged as one ranked stack of levels with a single moving indicator, where every destination belongs to exactly one level, travel visibly passes through the levels between here and there, and requested stops stay lit in a queue until each is served in turn",
   "lineage": "Building directories, elevator dispatch, and single-shaft vertical wayfinding",
   "tags": [
    "ranked-stack",
    "visible-transit",
    "call-queue"
   ],
   "grammar": [
    "Staging/hierarchy: The full stack is always visible as the sole map; the current level leads at full detail while every other level holds its fixed rank and one-line summary.",
    "Sequence/attention: Attention follows the indicator; a called destination pulls it through each intermediate level in order, and passing levels announce themselves briefly.",
    "Controls/state: Levels are current, passing, or called; calls queue visibly and stay lit until served, and canceling one removes it without disturbing the rest.",
    "Adaptation: Small screens enlarge the current level mid-stack with neighbors compressed above and below; the full directory stays one gesture away."
   ],
   "spark": "Three requested stops light down the stack; the indicator leaves the top, slides through two levels that briefly wake as it passes, and settles on the first call as its light goes out, served.",
   "webLeverage": "Scroll-snap sections make each level a stop, with the indicator bound to live scroll position.",
   "sourceConceptId": "vernacular-ephemera-elevator-floor-directory",
   "provenanceNote": "Kept the single ranked stack, transiting indicator, and served-call queue; stripped the engraved directory and its building."
  },
  {
   "id": "data-dramaturgy-intersecting-fix",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "an app screen staged as a plotted fix, where each independent reading draws one line across a shared field, the answer is the small area where the lines cross, confidence is literally the size of that area, and doubtful readings are struck through but never removed",
   "lineage": "Celestial navigation plotting, running fixes, and surveyors' triangulation practice",
   "tags": [
    "independent-readings",
    "intersection-area",
    "struck-not-deleted"
   ],
   "grammar": [
    "Staging/hierarchy: The shared field owns the surface; each reading enters as one drawn line carrying its source and time, and the crossing area outranks any single line.",
    "Sequence/attention: Readings arrive one at a time and each new line visibly shrinks or breaks the crossing; attention lives at the intersection as it tightens.",
    "Controls/state: Readings are taken, plotted, weighted, or struck; struck lines stay dimly present, and the fix advances by discrete plotted steps, never by silent sliding.",
    "Adaptation: Small screens stack the reading list above the field with the current crossing centered; every line stays reachable and each fix keeps its history."
   ],
   "spark": "A third line lands across the first two and the triangle between them tightens to a sliver; the operator strikes one doubtful reading, watches the area widen honestly, and trusts the answer exactly as much as it deserves.",
   "webLeverage": "SVG lines plot onto a zoomable field while each reading stays a first-class, inspectable record.",
   "sourceConceptId": "mapping-navigation-celestial-navigation-instrument",
   "provenanceNote": "Kept lines of position, area-as-confidence, and struck-but-kept readings; stripped the chart table, instruments, and night lamp."
  },
  {
   "id": "working-surfaces-drawn-registration",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an app screen staged as a registration console, where drawn stops decide in advance which channels a single action will reach, the same gesture whispers through one channel or fans through forty, and saved combinations recall an entire registration in one press mid-work",
   "lineage": "Pipe organ registration, combination pistons, and multi-rank console practice",
   "tags": [
    "drawn-stops",
    "one-gesture-fanout",
    "saved-combinations"
   ],
   "grammar": [
    "Staging/hierarchy: The working action area holds the center while stop controls flank it in ranked groups; drawn stops stand visibly proud of undrawn ones at all times.",
    "Sequence/attention: The operator sets registration first and acts second; the eye checks the drawn set, then the single action, then the breadth of what answered.",
    "Controls/state: Stops are drawn or retired before any action fires; combinations save the whole drawn set and recall it instantly, and the current registration is always legible.",
    "Adaptation: Narrow screens fold stop groups into a summed rail above the action area; the drawn set stays visible as a persistent count with the full console one step away."
   ],
   "spark": "Three stops slide out and the next keystroke, identical to the last one, lands in forty places at once; one press on a saved combination and the same key would touch only a single quiet channel.",
   "webLeverage": "A declarative registration state maps one input event onto many targets with the fanout inspectable before it fires.",
   "sourceConceptId": "product-industrial-mechanical-pipe-organ-keydesk",
   "provenanceNote": "Kept advance registration, one-gesture fanout, and recallable combinations; stripped the console, pipes, and sound."
  },
  {
   "id": "data-dramaturgy-seeded-tracers",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "an operations screen staged as an invisible field read through released tracers, where the system's hidden dynamics show nothing until a probe is dropped, one tracer draws a single path, hundreds render the whole weather, and aging trails record how the currents have shifted",
   "lineage": "Flow visualization, tracer studies, and wind-tunnel smoke practice",
   "tags": [
    "released-tracers",
    "hidden-field",
    "aging-trails"
   ],
   "grammar": [
    "Staging/hierarchy: The field owns the surface and shows nothing by itself; tracers and their trails are the only figures, and named regions rank by how much traffic reveals them.",
    "Sequence/attention: The operator drops a tracer where they have a question; attention follows the trail it writes, and more seeding shifts single paths into aggregate pattern.",
    "Controls/state: Seed, flood, and clear are the verbs; trails age visibly from fresh to faint, and calm, steady, and turbulent regions carry earned names.",
    "Adaptation: Trail density caps to device budget with aggregate summaries replacing individual trails; a seeded question and its answer stay reviewable as a list."
   ],
   "spark": "One probe drops into a silent screen and writes a long unexpected detour around a region nobody knew was congested; a hundred more turn the blankness into legible weather with a storm in one corner.",
   "webLeverage": "Per-frame trail rendering on canvas turns live telemetry into paths the pointer can interrogate.",
   "sourceConceptId": "medium-native-noise-flow-ink-field",
   "provenanceNote": "Kept seeding tracers to reveal a hidden field and aging trails; stripped the ink, paper, and noise-art dressing."
  },
  {
   "id": "collective-fields-advocacy-quorum",
   "familyId": "collective-fields",
   "surface": "operate",
   "form": "a decision screen staged as competing proposals gathering live advocacy, where each option's support is a visibly growing weight, backers migrate between options as evidence lands, and nothing commits until one option reaches quorum and the whole group moves at once",
   "lineage": "Swarm site selection, quorum sensing, and deliberative voting practice",
   "tags": [
    "competing-proposals",
    "migrating-support",
    "quorum-commit"
   ],
   "grammar": [
    "Staging/hierarchy: Live proposals share the surface as peers sized by current support; the quorum threshold is drawn as a fixed line every option is measured against.",
    "Sequence/attention: Attention follows support as it migrates; a defection visibly shrinks one option and grows another, and convergence gathers the eye toward the leader.",
    "Controls/state: Members advocate, switch, or withdraw openly; options run exploring, advocating, converging, and committed states, and quorum fires the commitment for everyone.",
    "Adaptation: Small screens rank proposals as weighted rows with the threshold line crossing all of them; migration renders as counted moves between rows."
   ],
   "spark": "Two proposals hold even for an hour until three backers cross over in a minute; the leader swells past the drawn threshold and the entire screen commits at once, dissent recorded, decision made.",
   "webLeverage": "Shared realtime state renders every member's advocacy live, and the quorum rule executes in full view.",
   "sourceConceptId": "swarms-flocks-migration-bee-swarm-consensus",
   "provenanceNote": "Kept competing advocacy, migrating support, and quorum-triggered collective commitment; stripped the swarm, dances, and branch."
  },
  {
   "id": "interaction-physics-threshold-relay",
   "familyId": "interaction-physics",
   "surface": "operate",
   "form": "a pipeline screen staged as a relay of filling vessels, where each stage accumulates work until its marked threshold, tips its whole load downstream in one visible transfer, and returns empty, so batching, backlog, and starvation read directly from the levels",
   "lineage": "Water clocks, chain pumps, tipping-bucket mechanisms, and batch process control",
   "tags": [
    "threshold-tip",
    "batch-transfer",
    "visible-levels"
   ],
   "grammar": [
    "Staging/hierarchy: Stages rank in flow order with their fill levels as the primary figures; the stage nearest its threshold leads, and the connections between stages stay drawn.",
    "Sequence/attention: The eye reads levels rising, anticipates the tip, and follows each discrete transfer downstream; upstream cause and downstream effect share one view.",
    "Controls/state: Operators adjust inflow, thresholds, and holds; stages carry empty, filling, tipping, and returning states, and every transfer logs as one countable event.",
    "Adaptation: The relay stacks as a vertical step sequence on small screens, and continuous filling can render as stepped, labeled level changes without losing the thresholds."
   ],
   "spark": "The second vessel creeps toward its mark for twenty minutes, hesitates, then tips two hundred items downstream in one clean transfer; the third stage surges while the second starts again from empty.",
   "webLeverage": "Threshold-based state transitions animate honestly from live queue depths with minimal simulation.",
   "sourceConceptId": "kinetic-sculpture-automata-water-cup-chain",
   "provenanceNote": "Kept threshold accumulation, batch tipping, and the visible relay; stripped the cups, water, and fountain setting."
  },
  {
   "id": "narrative-scroll-processional-order",
   "familyId": "narrative-scroll",
   "surface": "experience",
   "form": "a portfolio staged as a procession along one axis, where works enter in authored order, each owning the full frame through its entrance, turn, and exit, any work can be held for inspection without stopping the order, and a finale reprise walks the whole sequence back past the visitor",
   "lineage": "Runway presentation, processional staging, and sequenced salon showings",
   "tags": [
    "authored-order",
    "enter-turn-exit",
    "finale-reprise"
   ],
   "grammar": [
    "Staging/hierarchy: One work owns the frame at a time on one fixed axis; order credits and position markers hold a quiet rail, and nothing shares the stage with the current work.",
    "Sequence/attention: Works approach, turn to show their other faces, and exit along the same line; anticipation comes from the next work already visible entering behind.",
    "Controls/state: Hold keeps a work on stage while the order waits; works carry waiting, entering, full-view, turning, and exited states, and the finale replays all in order.",
    "Adaptation: Small screens keep the single-work frame and replace lateral travel with stepped full-frame succession; the order rail stays reachable throughout."
   ],
   "spark": "The twelfth work exits and the frame goes still for one beat; then the entire sequence returns in order, each work crossing once more, and the visitor realizes the order itself was the argument.",
   "webLeverage": "View transitions choreograph entrances and exits while each work stays an addressable document.",
   "sourceConceptId": "textiles-weave-drape-fashion-runway-color-procession",
   "provenanceNote": "Kept the processional order, full-frame turns, holds, and finale reprise; stripped the garments, hall, and lighting design."
  },
  {
   "id": "collective-fields-private-release-current",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a landing page staged as a slow shared current of released contributions, where each entry is drafted in private, joins the stream only when its maker chooses, drifts among the others as visible presence without exposed content, and can be withdrawn without a trace",
   "lineage": "Lantern release rites, offering walls, and consent-first communal publishing",
   "tags": [
    "private-draft",
    "chosen-release",
    "drifting-presence"
   ],
   "grammar": [
    "Staging/hierarchy: The shared current owns the surface as one slow horizontal drift; the visitor's own draft holds a nearer, brighter plane until they release it.",
    "Sequence/attention: Watching precedes joining; the stream's density argues participation, and the visitor's attention narrows to their own entry at the moment of release.",
    "Controls/state: Draft, release, and withdraw are the verbs; entries run private, released, opened-by-consent, and withdrawn states, and no entry exposes content by default.",
    "Adaptation: One entry fills a small screen while the communal current compresses to a live band; drafting always works before, and without, the spectacle."
   ],
   "spark": "The visitor's entry leaves their hands and slides into the drift among hundreds of others, each present but unread; a week later they withdraw it, and the current closes over the gap as if it had never been there.",
   "webLeverage": "Local drafting keeps content on device until release, and ephemeral shared events carry presence without payload.",
   "sourceConceptId": "ritual-ceremony-festival-lantern-river-vows",
   "provenanceNote": "Kept private drafting, chosen release into a communal current, and withdrawal; stripped the river, lanterns, and ceremony."
  },
  {
   "id": "working-surfaces-finite-tile-inventory",
   "familyId": "working-surfaces",
   "surface": "operate",
   "form": "an editing screen staged as composition from a finite visible inventory, where every unit placed on the board is one unit gone from the tray, writing something new can mean unwriting something old, and an exhausted inventory is a design constraint made public",
   "lineage": "Grooved letter boards, movable type cases, and fixed-stock composition",
   "tags": [
    "finite-inventory",
    "place-and-deplete",
    "visible-tradeoff"
   ],
   "grammar": [
    "Staging/hierarchy: The board leads with the tray of remaining units always in view beneath it; counts per unit rank the tray, and scarce units surface toward the top.",
    "Sequence/attention: Each placement visibly debits the tray; the editor's attention swings between the line being composed and the dwindling stock that constrains it.",
    "Controls/state: Units place, return, and swap between board and tray; the inventory enforces itself, and a request the stock cannot cover proposes what to unwrite.",
    "Adaptation: Small screens split board and tray into paired panels with the running counts pinned; composition edits apply unit by unit, never as silent bulk swaps."
   ],
   "spark": "Halfway through the new line the tray runs out of one unit; the editor stares at the board, lifts a word from an old entry to finish the new one, and the tradeoff sits there for everyone to see.",
   "webLeverage": "DOM diffing animates edits unit by unit while a live inventory model enforces the finite stock.",
   "sourceConceptId": "vernacular-ephemera-letter-tile-menu-board",
   "provenanceNote": "Kept the finite inventory, place-and-deplete economics, and visible tradeoffs; stripped the felt board, tiles, and diner."
  },
  {
   "id": "spatial-navigation-taxonomy-flight",
   "familyId": "spatial-navigation",
   "surface": "operate",
   "form": "an app screen staged as one wall of ordered compartments, where position itself teaches the classification, search answers by flying the viewport across the wall to the matching compartment instead of teleporting, and the compartment opens in place over the view it belongs to",
   "lineage": "Parts cabinets, apothecary drawer walls, and open-stack shelving order",
   "tags": [
    "position-as-taxonomy",
    "search-as-travel",
    "open-in-place"
   ],
   "grammar": [
    "Staging/hierarchy: The full wall is the index and the only map; families cluster into regions, members refine along consistent directions, and no list view replaces the geography.",
    "Sequence/attention: A query launches visible travel across intervening regions; the eye learns neighborhoods in passing, and arrival lands on exactly one compartment.",
    "Controls/state: Compartments are shut, glanced, or pulled open over the view; the label is the contract, and a misfiled item reads as a visible lie against its position.",
    "Adaptation: Small screens show one wall region at a time with travel compressed to brief oriented passes; the journey may shorten but never becomes a cut."
   ],
   "spark": "The query lands and the view sweeps three regions right and one down, past neighborhoods the operator half-registers, then one compartment slides open in place; next time they steer there without searching.",
   "webLeverage": "Scroll-driven viewport travel and in-place expansion keep search results anchored to their true location.",
   "sourceConceptId": "vernacular-ephemera-hardware-bin-wall",
   "provenanceNote": "Kept position-as-taxonomy, search-as-travel, and in-place opening; stripped the drawers' era, store setting, and hardware props."
  },
  {
   "id": "reveal-transform-creased-unfolding",
   "familyId": "reveal-transform",
   "surface": "persuade",
   "form": "a landing page staged as a folded sheet opening in stages, where each unfold doubles the visible field along a crease, close-up insets wait pre-framed at the edges, and the creases remember which panels were opened, so the sheet's wear records what the visitor explored",
   "lineage": "Accordion-fold maps, gatefold printing, and panel-by-panel sheet opening",
   "tags": [
    "fold-as-zoom",
    "panel-doubling",
    "remembered-creases"
   ],
   "grammar": [
    "Staging/hierarchy: The currently open spread owns the viewport; folded panels show their edges as promises, and insets hold the margins as pre-framed detail views.",
    "Sequence/attention: Each unfold is one deliberate step outward in context; attention re-centers on the widened field, then finds the next crease inviting the next opening.",
    "Controls/state: Panels open, close, and refold along fixed creases; opened creases stay softly marked, and the current open state is addressable and shareable.",
    "Adaptation: A small screen holds exactly one panel with crease-edge peeks of its neighbors; unfolding becomes stepped panel travel along the same fixed crease map."
   ],
   "spark": "The visitor pulls the first crease and the field doubles; two unfolds later the whole territory lies open with one corner still folded, and the creases they opened stay faintly marked like a record of the visit.",
   "webLeverage": "Transform-driven fold transitions make each crease a zoom level, with the open state kept in the URL.",
   "sourceConceptId": "vernacular-ephemera-folded-road-map",
   "provenanceNote": "Kept fold-as-zoom, panel doubling, edge insets, and remembered creases; stripped the paper stock, highways, and roadside frame."
  },
  {
   "id": "data-dramaturgy-raking-relief-terrain",
   "familyId": "data-dramaturgy",
   "surface": "operate",
   "form": "a data workspace staged as raised-relief terrain, where every value's magnitude is literal elevation and a movable low-angle light rakes the field so ridges, valleys, and outliers cast their own evidence",
   "lineage": "Raised-relief cartography, terrain shading, survey craft",
   "tags": [
    "elevation",
    "raking-light",
    "terrain"
   ],
   "grammar": [
    "Staging/hierarchy: the whole dataset is one continuous relief field; height ranks magnitude and the tallest forms dominate at a glance",
    "Sequence/attention: the eye reads the skyline first, then follows valleys between peaks; moving the light sweeps attention across the field deliberately",
    "Controls/state: dragging the light angle re-shadows the terrain to expose different structure; pressing a peak pins its profile and exact values",
    "Adaptation: narrow screens rotate the field to a side-profile skyline; coarse pointers step the light through fixed angles"
   ],
   "spark": "You drag the light low across the quarter's numbers and a ridge you never noticed throws a long shadow: three weeks of quiet growth standing in relief behind the obvious peak.",
   "webLeverage": "WebGL heightfield rendering with layered CSS fallback bars and a keyboard-steppable light angle",
   "sourceConceptId": "wayfinding-cartography-signage-karakoram-raised-relief-map",
   "provenanceNote": "Kept relief-as-ranking and raking shadow; stripped the Karakoram, winter palette, and map materials."
  },
  {
   "id": "interaction-physics-bellows-breath",
   "familyId": "interaction-physics",
   "surface": "persuade",
   "form": "a page staged as a bellows-driven instrument, where one focal element breathes between its faintest and fullest state under a visible pressure action the visitor controls, and every exhale re-ranks the page around it",
   "lineage": "Bellows instruments, letterpress platens, variable-axis interpolation",
   "tags": [
    "breathing",
    "pressure",
    "amplitude"
   ],
   "grammar": [
    "Staging/hierarchy: one focal element owns the page and its current amplitude ranks everything else; supporting content holds fixed quiet positions",
    "Sequence/attention: attention rides the breath: each inflation pulls focus to the focal element, each release lets the supporting ranks resurface",
    "Controls/state: a single visible pressure control drives amplitude continuously; committed states latch at full inflation and collect in a visible row",
    "Adaptation: without a fine pointer the breath runs on scroll position; small screens shrink supporting ranks to a single edge column"
   ],
   "spark": "You press the lever and the page inhales: the focal form swells to its fullest while everything else kneels; ease off and it exhales back as your pinned states hold their row.",
   "webLeverage": "Variable font axes or transform interpolation driven by pointer pressure, scroll, or keyboard steps",
   "sourceConceptId": "medium-native-variable-font-bellows-press",
   "provenanceNote": "Kept the bellows-driven continuous amplitude and latched states; stripped letterpress materials and the type-specimen dressing."
  },
  {
   "id": "collective-fields-folded-curtain",
   "familyId": "collective-fields",
   "surface": "persuade",
   "form": "a page staged as a hanging curtain of many vertical bands, where an invisible field folds the ensemble in slow travelling waves, and sudden substorms reorganize every band at once before the calm ripple resumes",
   "lineage": "Auroral substorm physics, curtain arrays, field-driven choreography",
   "tags": [
    "bands",
    "folding",
    "substorm"
   ],
   "grammar": [
    "Staging/hierarchy: the full-height band ensemble is the page; each band carries one item and the current fold brings a few bands forward at a time",
    "Sequence/attention: slow travelling folds walk attention along the curtain; a substorm snaps the ensemble into a new order around the item that fired it",
    "Controls/state: hovering bends nearby bands toward the cursor; selecting an item fires a substorm that reorders the curtain with that item at the crest",
    "Adaptation: narrow screens hang the curtain horizontally in rows; without hover the folds advance on scroll and selection alone fires substorms"
   ],
   "spark": "The curtain sways in its slow wave until you pick one band; the whole field convulses once, reorders itself around your choice, and settles back into rhythm.",
   "webLeverage": "Canvas or WebGL band simulation with DOM band fallbacks and scroll-driven fold progression",
   "sourceConceptId": "clouds-storms-auroras-auroral-curtain",
   "provenanceNote": "Kept the field-folded band ensemble and substorm reorganization; stripped auroral color and sky material."
  }
 ]
}