diff --git a/functions/api/_data/composition-ingredients.json b/functions/api/_data/composition-ingredients.json new file mode 100644 index 000000000..4bc81a805 --- /dev/null +++ b/functions/api/_data/composition-ingredients.json @@ -0,0 +1,4742 @@ +{ + "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." + } + ] +} diff --git a/functions/api/_data/composition-reviews.json b/functions/api/_data/composition-reviews.json new file mode 100644 index 000000000..b8da44211 --- /dev/null +++ b/functions/api/_data/composition-reviews.json @@ -0,0 +1,1365 @@ +{ + "schemaVersion": 1, + "comment": "Human review decisions for the composition catalog, keyed by stable composition ID. Missing entries are pending and ineligible for challenger sampling. formHash fingerprints the reviewed content.", + "reviews": { + "collective-fields-addressable-cell-wall": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:46:19.679Z", + "formHash": "5b0e286a6052" + }, + "collective-fields-advocacy-quorum": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:14:37.908Z", + "formHash": "f27d9c965262" + }, + "collective-fields-cascade-trigger": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:40:02.311Z", + "formHash": "1591d65943ab" + }, + "collective-fields-condensed-outtakes": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:12:55.090Z", + "formHash": "f9cb980879c9" + }, + "collective-fields-detail-first-index": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:12:59.703Z", + "formHash": "4480abc01a0b" + }, + "collective-fields-entrained-flash-field": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:44:02.531Z", + "formHash": "06750f762736" + }, + "collective-fields-folded-curtain": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:15:31.564Z", + "formHash": "e0d0f0d138dc" + }, + "collective-fields-generative-tile-family": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:44:13.566Z", + "formHash": "208fda774b11" + }, + "collective-fields-particle-consensus": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T23:39:57.160Z", + "formHash": "60076164a878" + }, + "collective-fields-presence-field": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:44:31.436Z", + "formHash": "314eeafdd4bf" + }, + "collective-fields-private-release-current": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:14:56.095Z", + "formHash": "5bf65b4fcd51" + }, + "collective-fields-quorum-ring": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:07:17.985Z", + "formHash": "33ebcc5e4225" + }, + "collective-fields-roving-sweep": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:44:39.710Z", + "formHash": "1ea9676cbae4" + }, + "collective-fields-shared-formation": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:44:49.601Z", + "formHash": "d762a3b1cd7f" + }, + "collective-fields-staked-claims": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:07:11.864Z", + "formHash": "f4cbad4cdbb5" + }, + "collective-fields-synchronized-array": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:45:08.862Z", + "formHash": "fb853922fd28" + }, + "collective-fields-three-rule-flock": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:45:29.651Z", + "formHash": "b05c20fa7fed" + }, + "collective-fields-worn-paths": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:48:47.188Z", + "formHash": "49f1b61c6ba4" + }, + "data-dramaturgy-aging-shelf": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:04:57.277Z", + "formHash": "0442f48e5a91" + }, + "data-dramaturgy-braided-year": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:47:55.348Z", + "formHash": "277953633e55" + }, + "data-dramaturgy-cast-indicator-calendar": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:49:04.333Z", + "formHash": "bf228fa7f8bd" + }, + "data-dramaturgy-commitment-lattice": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:49:14.173Z", + "formHash": "3e8671283bbc" + }, + "data-dramaturgy-continuous-trace": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:49:22.500Z", + "formHash": "69ac0c6b1eb0" + }, + "data-dramaturgy-correction-record": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:09:11.198Z", + "formHash": "7024549254d0" + }, + "data-dramaturgy-counted-units": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:56:03.324Z", + "formHash": "8bf62014f6dd" + }, + "data-dramaturgy-counting-chorus": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:58:47.455Z", + "formHash": "9e352a998230", + "note": "the visualization didn't really work here i think?" + }, + "data-dramaturgy-diagnostic-plate": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:56:34.335Z", + "formHash": "cab317188afb" + }, + "data-dramaturgy-evidence-board": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:48:51.278Z", + "formHash": "a0b30bf4bfdf", + "note": "a bit basic" + }, + "data-dramaturgy-evidence-transect": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:56:57.706Z", + "formHash": "e95ba1e76680" + }, + "data-dramaturgy-full-state-trace": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:10:02.505Z", + "formHash": "9d3075ff6713" + }, + "data-dramaturgy-intersecting-fix": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:14:16.100Z", + "formHash": "fafeb91f7815" + }, + "data-dramaturgy-light-table-triage": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:57:10.425Z", + "formHash": "d51b92959cf2" + }, + "data-dramaturgy-live-ledger": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:57:33.377Z", + "formHash": "9460a27ff21c", + "note": "too basic" + }, + "data-dramaturgy-opening-and-race": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:57:46.553Z", + "formHash": "4819d3e495f5" + }, + "data-dramaturgy-periodic-sweep-score": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:57:55.381Z", + "formHash": "3116152f6c13" + }, + "data-dramaturgy-product-teardown": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:58:08.356Z", + "formHash": "3760ddccee10" + }, + "data-dramaturgy-raking-relief-terrain": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:15:15.499Z", + "formHash": "0a0bd938e1cd" + }, + "data-dramaturgy-reconciliation-zip": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:04:29.202Z", + "formHash": "e104c49c5524" + }, + "data-dramaturgy-record-core": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:04:15.770Z", + "formHash": "6cb33b26844c" + }, + "data-dramaturgy-replayable-ledger": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:13:15.738Z", + "formHash": "0b07b7b47ffd" + }, + "data-dramaturgy-routed-triplicate": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:58:33.144Z", + "formHash": "1c13280e050d", + "note": "too basic" + }, + "data-dramaturgy-ruled-timeline": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:49:00.993Z", + "formHash": "e99b23f0f608", + "note": "ok" + }, + "data-dramaturgy-scrubbed-datum": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T00:59:09.968Z", + "formHash": "57d9adf1c124" + }, + "data-dramaturgy-seeded-tracers": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:14:33.146Z", + "formHash": "5adc309f421c" + }, + "data-dramaturgy-specimen-waterfall": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:00:14.107Z", + "formHash": "af4d40a45112", + "note": "a bit strange, can't really imagine how it would translate to many niches" + }, + "data-dramaturgy-suspect-lineup": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:05:09.824Z", + "formHash": "42dc3e4eaa6d" + }, + "data-dramaturgy-sweep-and-decay": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:00:38.008Z", + "formHash": "d78b848c80cc", + "note": "good, but we have a lot of circular sweeps?" + }, + "data-dramaturgy-visible-transit": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:49:14.335Z", + "formHash": "a5c36df6fe11", + "note": "needs image regen I think" + }, + "first-viewport-aperture-projection-room": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:01:00.820Z", + "formHash": "2106885b8fc9" + }, + "first-viewport-cold-open-arrival": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:11:24.357Z", + "formHash": "3f80def8d524" + }, + "first-viewport-constant-silhouette": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:01:06.744Z", + "formHash": "f1f232b4a044" + }, + "first-viewport-converging-pair": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:01:13.779Z", + "formHash": "66b54f754181" + }, + "first-viewport-conversational-form": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:01:39.715Z", + "formHash": "bd2837e37689" + }, + "first-viewport-corner-block-crop": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:49:30.685Z", + "formHash": "123d79a03cf1" + }, + "first-viewport-cropped-giant": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:05:37.106Z", + "formHash": "c75f9a0c98d9" + }, + "first-viewport-crossing-seam": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:05:47.485Z", + "formHash": "0afb20074f99" + }, + "first-viewport-declarative-bars": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:49:40.300Z", + "formHash": "5dd5e31c3b88", + "note": "too basic" + }, + "first-viewport-empty-stage-flood": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:46:44.192Z", + "formHash": "eca7b157e6e4" + }, + "first-viewport-evidenced-absence": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:47:21.093Z", + "formHash": "5402058a1d1d" + }, + "first-viewport-generated-screening": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:47:38.569Z", + "formHash": "5f1f70dd2aaf" + }, + "first-viewport-grid-break-focal": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:48:03.511Z", + "formHash": "7596a5dacc89" + }, + "first-viewport-inverted-zoom-out": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:48:31.908Z", + "formHash": "826872eb4e37", + "note": "good but the image is non-sensical" + }, + "first-viewport-live-mirror": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:49:59.516Z", + "formHash": "ef3ce0e65ce3" + }, + "first-viewport-monumental-berth": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:50:09.751Z", + "formHash": "1de7c681ae07" + }, + "first-viewport-overture-flicker": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:11:33.900Z", + "formHash": "1b1f7cdf4959" + }, + "first-viewport-pointer-protagonist": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:50:20.717Z", + "formHash": "b7cdfc5942b6" + }, + "first-viewport-split-argument": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:50:25.584Z", + "formHash": "8cc1b8b29221" + }, + "first-viewport-type-as-architecture": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:50:31.390Z", + "formHash": "5f3962aabc51" + }, + "interaction-physics-beam-board": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:50:45.287Z", + "formHash": "859b4bb34f8a" + }, + "interaction-physics-bellows-breath": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:15:22.422Z", + "formHash": "d1c989aa5231" + }, + "interaction-physics-counterweighted-branch-balance": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:50:54.805Z", + "formHash": "af5e25b8a831" + }, + "interaction-physics-cursor-spotlight": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:51:02.605Z", + "formHash": "5b1f70ee67ab" + }, + "interaction-physics-drop-assembly": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:51:08.710Z", + "formHash": "acd9398dd438" + }, + "interaction-physics-elastic-scope": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:05:59.106Z", + "formHash": "8053e74c69b1" + }, + "interaction-physics-live-thread-unravel": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:51:13.878Z", + "formHash": "75e477e127c8" + }, + "interaction-physics-mass-and-settle": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:51:32.853Z", + "formHash": "dd971cd46c1a", + "note": "this seems to be a dupe, or close to it" + }, + "interaction-physics-metered-reserve": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:51:43.060Z", + "formHash": "5d5e8ceb027a" + }, + "interaction-physics-mirror-multiplier": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:51:56.538Z", + "formHash": "00e7c1d950f8" + }, + "interaction-physics-paired-interlock": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:05:46.551Z", + "formHash": "c7db711f0d07", + "note": "very niche" + }, + "interaction-physics-patch-graph-wall": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:52:04.833Z", + "formHash": "f023146507e5" + }, + "interaction-physics-pivot-fan": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:52:24.159Z", + "formHash": "82d6564c91f2" + }, + "interaction-physics-staged-cascade": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:52:35.695Z", + "formHash": "3db7b7df4a27" + }, + "interaction-physics-tension-commit": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:34:03.489Z", + "formHash": "bf865a7cc538" + }, + "interaction-physics-threshold-relay": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:14:43.114Z", + "formHash": "ed672ae5b3ed" + }, + "interaction-physics-trim-and-launch": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:34:17.582Z", + "formHash": "25147120e4fd" + }, + "interaction-physics-two-key-commit": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:34:27.518Z", + "formHash": "5fb91acea6cf" + }, + "interaction-physics-weighted-drag": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:06:09.975Z", + "formHash": "7e8f3276dfdd" + }, + "interaction-physics-wound-medium": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:34:35.896Z", + "formHash": "e6ef0ca4b88d" + }, + "narrative-scroll-accumulating-precis": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:09:52.403Z", + "formHash": "04a641fcbcca" + }, + "narrative-scroll-carved-epoch-descent": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:34:41.663Z", + "formHash": "84146c6e70fe" + }, + "narrative-scroll-continuous-thread": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:35:07.770Z", + "formHash": "b188aba4a6be" + }, + "narrative-scroll-diffuse-to-stream": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:38:03.161Z", + "formHash": "6953235878e9" + }, + "narrative-scroll-end-credit-roll": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:12:16.593Z", + "formHash": "24d6af3a2ec2" + }, + "narrative-scroll-endless-table": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:38:26.462Z", + "formHash": "c0a966308388", + "note": "too abstract" + }, + "narrative-scroll-folded-continuous-route": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:38:43.906Z", + "formHash": "7a18b8124234" + }, + "narrative-scroll-gatefold-liner-notes": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:38:58.937Z", + "formHash": "8d509e22e5ba" + }, + "narrative-scroll-giant-gutter": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:40:29.274Z", + "formHash": "57c6c8af4517", + "note": "a little strange variant, otherwise i like comic strips" + }, + "narrative-scroll-horizontal-rail": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:40:43.037Z", + "formHash": "3bb1a893d0ff" + }, + "narrative-scroll-interstitial-labels": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:12:04.675Z", + "formHash": "c600840f9111" + }, + "narrative-scroll-long-return-arc": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:40:58.284Z", + "formHash": "56828e077a30" + }, + "narrative-scroll-lookback-depth": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:44:05.313Z", + "formHash": "9c94163cce3f" + }, + "narrative-scroll-measured-hang": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:12:00.084Z", + "formHash": "aacd135ea695" + }, + "narrative-scroll-parallel-streams-merge": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:44:21.558Z", + "formHash": "7951ddfa41f2" + }, + "narrative-scroll-processional-order": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:14:48.355Z", + "formHash": "fe772d1d17d2" + }, + "narrative-scroll-receipt-unspool": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:44:46.563Z", + "formHash": "c91693646d27" + }, + "narrative-scroll-seed-generations": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:45:00.476Z", + "formHash": "96a979980edb", + "note": "too niche" + }, + "narrative-scroll-self-playing-score": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:45:41.561Z", + "formHash": "d4ad05cc1cfd", + "note": "too niche, music doesn't often apply" + }, + "narrative-scroll-slow-loop-breakthrough": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:46:01.571Z", + "formHash": "252419af2510", + "note": "too niche" + }, + "narrative-scroll-sticky-morph": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:46:13.907Z", + "formHash": "8564fb01b8f9" + }, + "narrative-scroll-threshold-promenade": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:46:24.707Z", + "formHash": "78ee5275b5d0" + }, + "narrative-scroll-two-speed-parallax-argument": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:47:06.701Z", + "formHash": "a23a0cbe3b46" + }, + "narrative-scroll-unbroken-route": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:47:16.353Z", + "formHash": "09e658a284b2" + }, + "narrative-scroll-vertical-strata-ascent": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:47:26.357Z", + "formHash": "bc401f87427e" + }, + "narrative-scroll-widening-intervals": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:47:42.250Z", + "formHash": "3e5fe9bdafe1" + }, + "narrative-scroll-withheld-reveal": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:48:01.480Z", + "formHash": "46113a1efa4b" + }, + "narrative-scroll-wordless-steps": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:48:13.646Z", + "formHash": "5a2ccebcec34" + }, + "narrative-scroll-zoom-anchored-chapters": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:10:57.072Z", + "formHash": "238a44c82011" + }, + "reading-rhythm-claim-evidence-binding": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:07:44.586Z", + "formHash": "e6acd25a1112" + }, + "reading-rhythm-cumulative-live-example": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:07:32.376Z", + "formHash": "dacdc4dc2fee" + }, + "reading-rhythm-fading-scaffold": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:08:21.518Z", + "formHash": "990cb9d09e52" + }, + "reading-rhythm-failure-first-repair": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:08:44.130Z", + "formHash": "3ccb4f8a3af1" + }, + "reading-rhythm-goal-compiled-route": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:10:39.203Z", + "formHash": "bb2a0526c2ca" + }, + "reading-rhythm-invertible-commentary": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:08:29.679Z", + "formHash": "c663f47b9454" + }, + "reading-rhythm-latched-checkpoints": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:08:50.198Z", + "formHash": "ac5121be1924" + }, + "reading-rhythm-prediction-checkpoint": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:07:59.445Z", + "formHash": "05b2884599b2" + }, + "reading-rhythm-shared-anchor-crossings": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:13:07.369Z", + "formHash": "77a1030bc5f8" + }, + "reading-rhythm-spaced-returns": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:10:50.791Z", + "formHash": "94500ead668b" + }, + "reading-rhythm-spec-sheet-law": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:13:27.258Z", + "formHash": "112231aea30b" + }, + "reading-rhythm-summoned-definitions": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:08:35.760Z", + "formHash": "33ee7fcb0ddf" + }, + "reading-rhythm-telescoping-depth": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:08:09.547Z", + "formHash": "e1a3c7730435" + }, + "reading-rhythm-transcluded-crossrefs": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:10:22.665Z", + "formHash": "bf6e290fbabf" + }, + "reading-rhythm-two-door-corpus": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:09:40.598Z", + "formHash": "4abf6a107ec6" + }, + "reading-rhythm-version-seams": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:09:27.856Z", + "formHash": "6657d9e6ce1c" + }, + "reveal-transform-affinity-surface": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:48:51.179Z", + "formHash": "8278034dee9d", + "note": "too niche" + }, + "reveal-transform-aligned-fragments-snap": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:49:07.039Z", + "formHash": "3e0ac2e40826" + }, + "reveal-transform-before-after-page": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:49:18.836Z", + "formHash": "1e73a444ca8f" + }, + "reveal-transform-carried-motion": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:49:27.235Z", + "formHash": "749d72d9472e" + }, + "reveal-transform-concentric-disclosure-cycle": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:49:35.209Z", + "formHash": "21557e658016" + }, + "reveal-transform-constraint-collapse": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:49:53.261Z", + "formHash": "5bd61bc48dc5" + }, + "reveal-transform-creased-unfolding": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:15:09.221Z", + "formHash": "92997f97f0c7" + }, + "reveal-transform-dissection-plate": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:50:01.303Z", + "formHash": "2caf72206b56" + }, + "reveal-transform-entered-through-process": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:12:29.890Z", + "formHash": "5bb58d21c769" + }, + "reveal-transform-exploded-axis": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:50:07.496Z", + "formHash": "dc6ae287bfec" + }, + "reveal-transform-flat-page-standing-city": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:50:24.544Z", + "formHash": "899d673f6afe" + }, + "reveal-transform-folding-volume": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:50:37.631Z", + "formHash": "44cfb4faa2c6" + }, + "reveal-transform-lit-veil": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:50:47.553Z", + "formHash": "76130f5f72f7" + }, + "reveal-transform-mask-through-letter": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:50:51.184Z", + "formHash": "6a63b9b1e93b" + }, + "reveal-transform-masked-stage": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:51:01.668Z", + "formHash": "c76936529b30" + }, + "reveal-transform-molt-migration": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:06:56.309Z", + "formHash": "9bf7528f1f3e" + }, + "reveal-transform-mutable-anchor": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:51:11.585Z", + "formHash": "e0a697659d92" + }, + "reveal-transform-onionskin-diff": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:06:46.027Z", + "formHash": "1182ef6953c3" + }, + "reveal-transform-page-stack-assembly": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:51:31.210Z", + "formHash": "a1a7f1a631ae" + }, + "reveal-transform-parallel-making": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:51:45.783Z", + "formHash": "9fd58c757c57" + }, + "reveal-transform-peeled-strata": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:51:58.271Z", + "formHash": "724fc224989a" + }, + "reveal-transform-raking-beam": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:52:05.688Z", + "formHash": "10fb5dbd9c86" + }, + "reveal-transform-reduction-passes": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:52:18.199Z", + "formHash": "fa8737b0665b" + }, + "reveal-transform-released-plume-settle": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:52:25.834Z", + "formHash": "d00353d4aac1" + }, + "reveal-transform-resumable-index": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:12:20.988Z", + "formHash": "520ceb2a19ea" + }, + "reveal-transform-room-before-work": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:12:35.096Z", + "formHash": "8bc689d05183" + }, + "reveal-transform-rule-grown-spiral": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:52:40.825Z", + "formHash": "7ef59161f211" + }, + "reveal-transform-staged-reorganization-chambers": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:52:49.311Z", + "formHash": "4620bb08e2ea" + }, + "reveal-transform-stroke-score": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:53:13.886Z", + "formHash": "bfd5e5066c21" + }, + "reveal-transform-three-distances": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:12:48.580Z", + "formHash": "bf4b8cf688f6" + }, + "reveal-transform-translation-gate": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:53:25.833Z", + "formHash": "459cafc60ac9" + }, + "reveal-transform-turntable-scenes": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:53:40.534Z", + "formHash": "d9858e1faa4a" + }, + "reveal-transform-xray-toggle": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:53:56.179Z", + "formHash": "a7cd90159b63" + }, + "spatial-navigation-angle-dependent-facets": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:54:12.761Z", + "formHash": "a1996644cbd3" + }, + "spatial-navigation-annotated-margins": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:54:30.320Z", + "formHash": "ec68fbcb134f", + "note": "too basic, llm will already do this" + }, + "spatial-navigation-branching-fan-routes": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:54:40.474Z", + "formHash": "0ce1c87f7fd5" + }, + "spatial-navigation-carried-object": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:06:31.251Z", + "formHash": "d29fa5822284" + }, + "spatial-navigation-continuous-world": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:54:49.564Z", + "formHash": "514a5675b2ba" + }, + "spatial-navigation-depth-landscape": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:54:59.434Z", + "formHash": "717937cac746" + }, + "spatial-navigation-diagonal-axis": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:55:08.602Z", + "formHash": "fe79d35e4f80" + }, + "spatial-navigation-docked-capsules": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:55:24.918Z", + "formHash": "b374be091598" + }, + "spatial-navigation-elimination-key": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:11:03.646Z", + "formHash": "865b2172620d" + }, + "spatial-navigation-enfilade-sightline": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:11:39.316Z", + "formHash": "92ad411992d3" + }, + "spatial-navigation-express-aisle": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:11:48.241Z", + "formHash": "140b262a2201" + }, + "spatial-navigation-filament-zoom": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:55:39.957Z", + "formHash": "6de7694e7ede" + }, + "spatial-navigation-geared-orbits": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:56:01.617Z", + "formHash": "3eb6162f0610" + }, + "spatial-navigation-inverted-depth-stacks": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:56:11.554Z", + "formHash": "7d9401bf6000" + }, + "spatial-navigation-landmark-horizon": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:06:39.674Z", + "formHash": "0060e99a4a92" + }, + "spatial-navigation-magnitude-ladder": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:56:19.136Z", + "formHash": "b7a2ada6bfcd" + }, + "spatial-navigation-miniature-glide": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:56:45.681Z", + "formHash": "ece888175514" + }, + "spatial-navigation-modular-signs": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:57:02.539Z", + "formHash": "ce6b36f7416f" + }, + "spatial-navigation-nested-shell-descent": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:57:09.492Z", + "formHash": "e0964c223223" + }, + "spatial-navigation-open-storage-annex": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:11:52.532Z", + "formHash": "02fe8546ffff" + }, + "spatial-navigation-orchard-of-moments": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:57:16.815Z", + "formHash": "06ad1a8bd60f" + }, + "spatial-navigation-pierced-density": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:57:31.932Z", + "formHash": "ecb2652359d0" + }, + "spatial-navigation-portal-counterparts": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:57:47.101Z", + "formHash": "1ad7a8700306" + }, + "spatial-navigation-portal-peepholes": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:57:53.386Z", + "formHash": "cd4e20da1bbc" + }, + "spatial-navigation-prerequisite-terrain": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:11:07.562Z", + "formHash": "8d831a049ad8" + }, + "spatial-navigation-relation-drawers": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:58:20.427Z", + "formHash": "7b47dd913d1a" + }, + "spatial-navigation-shadow-path-locality": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:58:33.393Z", + "formHash": "6a1d6139d6a1" + }, + "spatial-navigation-split-spectrum-corridors": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:58:38.223Z", + "formHash": "6001a3cb782d" + }, + "spatial-navigation-stacked-commons": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:58:51.519Z", + "formHash": "ee9a3f7e52c8" + }, + "spatial-navigation-taxonomy-flight": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:15:04.767Z", + "formHash": "86d233cf3c16" + }, + "spatial-navigation-tide-locked-rooms": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:59:05.455Z", + "formHash": "8fa83cd58b53" + }, + "spatial-navigation-toc-exploded": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:59:24.940Z", + "formHash": "199e032fffec" + }, + "spatial-navigation-tooling-by-zoom": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:06:16.530Z", + "formHash": "2266cbf8ca00" + }, + "spatial-navigation-traced-pipeline": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:59:44.621Z", + "formHash": "28dba8e6b4d3" + }, + "spatial-navigation-transit-stack": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:13:41.785Z", + "formHash": "947efa710711" + }, + "spatial-navigation-tuned-bands": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:59:56.470Z", + "formHash": "ae767b38cef0" + }, + "spatial-navigation-verso-return": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:11:44.783Z", + "formHash": "d68ba1493edb" + }, + "spatial-navigation-zoned-colony-districts": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:00:01.758Z", + "formHash": "ad2cfb6b11a1" + }, + "working-surfaces-command-sentence": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:04:05.180Z", + "formHash": "ec4b5099fc8a" + }, + "working-surfaces-depth-row": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:03:22.339Z", + "formHash": "5b072f9c78fe" + }, + "working-surfaces-drawn-registration": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:14:21.738Z", + "formHash": "396a2bdbcdea" + }, + "working-surfaces-exemplar-proof-sheet": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:03:44.539Z", + "formHash": "edf374b03b96" + }, + "working-surfaces-finite-tile-inventory": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:15:00.566Z", + "formHash": "74404540fb66" + }, + "working-surfaces-focus-airlock": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:00:42.874Z", + "formHash": "b38c8a527688", + "note": "too specific" + }, + "working-surfaces-held-failure": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:02:30.754Z", + "formHash": "d725615c14b6", + "note": "good idea but bad image" + }, + "working-surfaces-keyed-overlay": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:03:10.347Z", + "formHash": "93b676c13e52" + }, + "working-surfaces-object-time-fan": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:00:56.703Z", + "formHash": "e6e08a802973" + }, + "working-surfaces-passed-baton": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:02:03.184Z", + "formHash": "06c975439887" + }, + "working-surfaces-perimeter-rail": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:13:35.815Z", + "formHash": "9475f78ebd27" + }, + "working-surfaces-reenacted-diff": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:01:37.324Z", + "formHash": "e92791213577" + }, + "working-surfaces-rehearsed-command": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:00:18.903Z", + "formHash": "66331559cdbf" + }, + "working-surfaces-shadow-runner": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:01:48.530Z", + "formHash": "c02594677efd" + }, + "working-surfaces-sorting-gates": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:01:06.446Z", + "formHash": "62965e1f63f4" + }, + "working-surfaces-splice-strip": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:03:55.370Z", + "formHash": "6e74a3d80fba" + }, + "working-surfaces-tethered-bench": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:01:22.039Z", + "formHash": "1a0989c5a26c" + }, + "working-surfaces-twinned-probe": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:03:33.387Z", + "formHash": "7c1a7bfeb465" + }, + "working-surfaces-verdict-run": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:01:15.259Z", + "formHash": "40148b81e1bd" + } + } +} diff --git a/functions/api/_data/concept-ingredients.json b/functions/api/_data/concept-ingredients.json new file mode 100644 index 000000000..80a996e05 --- /dev/null +++ b/functions/api/_data/concept-ingredients.json @@ -0,0 +1,7065 @@ +{ + "schemaVersion": 7, + "catalogVersion": "2026-07-21T03:23:26.063Z", + "comment": "Human-reviewed creative worlds for concept-seed.mjs, organized into seven inspiration wells: the distinct places designers actually mine for award-level work. Every entry must create an immediate mental image, inherit concrete material, spatial, or compositional laws, translate those laws into reusable interface grammar, and exploit the web medium. Literal software archetypes, style names without inherited laws, and tacked-on spectacle are rejected before review.", + "qualityBar": { + "principle": "Catalog visual worlds a designer could mine on sight: every concept must name a magnetic world, artifact, or graphic tradition whose look immediately yields a palette and material vocabulary, a type voice, at least three distinct interface component roles, and one signature state change, then stay structurally generative, product-legible, and responsibly executable across a whole product rather than one opening page. Prefer worlds people already recognize and love: built-in cultural resonance beats equal lawfulness in obscurity.", + "rejectIf": [ + "The form starts from a generic software or operations container (a dashboard, control room, workflow, planner, tracker, queue, or management console) or mistakes ordinary product chrome for a visual world. Craft tools, scientific instruments, media systems, and working environments are welcome when their materials, gestures, and traditions are specific and generative, and so are culturally tested graphic artifacts and display languages (tickets, labels, stamps, forms, signage, notation, instrument displays) when their information structure becomes the interface's.", + "The concept names a design movement, era, or style as a label instead of inheriting its laws through a canonical two-dimensional artifact (a poster, page, sleeve, specimen, standards manual) or a place whose surfaces, not furniture, carry the grammar; geometry, ornament logic, materials, and information structure must become reusable interface language.", + "The world's organizing medium is sound, scent, taste, or unaided touch and it owns no canonical visual notation or artifact: a world may sound or smell like something, but its laws must arrive through the eyes as color, form, and composition.", + "The world is a single prop, specimen, or instant rather than an expansive system: if it cannot supply at least three distinct component roles plus a hierarchy of display and body voices, it is a detail inside a larger world that should be cataloged instead.", + "The idea survives only as styling over cards, sidebars, or ordinary application chrome.", + "Spectacle is unrelated to product meaning or disappears when the core task is explained.", + "The source world lacks its own topology, states, motion, material behavior, or memorable human experience. Mythic, speculative, and impossible worlds are welcome when their laws are vivid and coherent rather than borrowed franchise decoration.", + "The same information and decisions cannot remain available through semantic structure.", + "The concept differs from its nearest catalog neighbor only by subject matter, specimen, industry, lineage wording, or visual styling rather than by memorable experience and at least two reusable system laws.", + "The source is merely respectable or technically interesting, not magnetic enough that a person would choose to experience it.", + "The concept is an atmosphere or material world whose material carries no intrinsic two-dimensional pattern or graphic system; mood, light, or texture alone never yields component grammar.", + "The concept is an abstract notation or symbol lineage with no produced-artifact tradition behind it; notation qualifies only as a designed, printed, or displayed artifact." + ], + "reviewAxes": [ + "source-world specificity", + "human magnetism", + "cultural resonance", + "imaginative voltage", + "internal laws", + "palette and material extraction", + "type and component vocabulary", + "structural yield", + "visual inevitability", + "signature interaction", + "product legibility", + "cross-state elasticity", + "nearest-neighbor distance", + "responsible execution", + "well diversity" + ], + "authoringStrategy": { + "provenSeams": [ + "broadcast graphics: weather boards, election-night graphics, scorebugs, channel and network idents", + "packaging and collectible cultures, including non-Western print: matchbox labels, ekiben wrappers, lucha libre, hand-painted film posters", + "title-card and credits traditions across film, TV, and anime eras", + "sports identity: liveries, kits, crests, race graphics", + "computing and instrument display eras with era-specific screen language" + ], + "tierWeighting": "Overweight interaction-tier display languages: highest flagship share, smallest pool. Graphic tier stays the core. Atmosphere qualifies only through the intrinsic-pattern rule.", + "exemplars": "Author against the reviewer three-star approvals as positive exemplars; rejection and rating notes are the negative space.", + "renderSafety": "No brass or metal interface chrome, no non-Latin interface copy, no AI-cliche motifs (glyph rain, recording dots). Board and hero must read as one system.", + "retiredFamilies": [ + "machines-contraptions", + "food-potioncraft", + "memory-ruins", + "festivals-public-life" + ], + "guide": "docs/WORLD-CATALOG-AUTHORING.md", + "territoryStrategy": "Proven seams saturate: hunt the canonical peak of territories the catalog has never touched, and gate every candidate on system-level distinctness (palette plus type voice) from approved entries, not name-level.", + "culturalCare": "Skip living sacred, ceremonial, or community-owned traditions without an established commercial graphic lineage; skip highly religious material outright. Prefer traditions with commercial or civic design history." + } + }, + "researchAnchors": [ + "https://awards.ixda.org/about.html", + "https://segd.org/awards/the-segd-global-design-awards/", + "https://goldenpin.org.tw/goldenpin/en/participate/golden-pin-design-award", + "https://www.cooperhewitt.org/national-design-awards/award-categories-2/", + "https://www.moma.org/magazine/articles/813", + "https://www.computerhistory.org/tdih/January/7/", + "https://www.g-mark.org/en/apply/gda/guide/categories", + "https://www.wipo.int/en/web/traditional-knowledge/traditional-cultural-expressions/index" + ], + "wells": [ + { + "id": "graphic-systems", + "label": "Human Graphic Systems", + "description": "Human graphic languages: print, editorial sequence, typography, notation, and cartography, whose two-dimensional compositional laws transfer to interface almost directly.", + "tier": "graphic" + }, + { + "id": "canon-movements", + "label": "The Graphic Canon", + "description": "Design movements and schools entered as concrete worlds and artifacts that carry each movement's laws: grid, geometry, ornament logic, palette, and conviction, never a style name alone.", + "tier": "graphic" + }, + { + "id": "vernacular-ephemera", + "label": "Vernacular & Ephemera", + "description": "Anonymous designed artifacts proven by decades of real use, from tickets and labels to forms and scoreboards, dense with graphic law and latent interaction structure.", + "tier": "graphic" + }, + { + "id": "instruments-signals", + "label": "Instruments & Signals", + "description": "Machines, instruments, and display hardware that already solved showing state and inviting manipulation under hard constraints, supplying interaction physics as well as looks.", + "tier": "interaction" + }, + { + "id": "medium-native", + "label": "The Medium Itself", + "description": "The browser and computation as the material itself: scroll, cursor, shaders, generative systems, and web-native culture whose work can exist nowhere else.", + "tier": "interaction" + }, + { + "id": "material-worlds", + "label": "Material & Imagined Worlds", + "description": "Natural, material, and imagined worlds with their own physics and topology: space, terrain, life, light, craft matter, food, and impossible geographies.", + "tier": "atmosphere" + }, + { + "id": "performed-time", + "label": "Performance, Place & Time", + "description": "Sequence and choreography of attention through time and space: cinema, stage, music, ritual, play, inhabited places, and remembered time.", + "tier": "atmosphere" + } + ], + "families": [ + { + "id": "graphic-worlds-publishing", + "label": "Graphic Worlds & Publishing", + "well": "graphic-systems", + "description": "Print, pigment, typography, photography, editorial sequence, broadcast graphics, and worlds composed through marks and pages.", + "concepts": [ + { + "id": "editorial-sequence-montage-botanical-folio-season", + "form": "a botanical folio following one plant through seed, leaf, flower, fruit, and winter husk, where each plate keeps the same exact scale and ground", + "lineage": "Botanical illustration, herbarium folios, and phenological observation", + "tags": [ + "botanical-folio", + "season", + "fixed-scale" + ], + "spark": "Five cream plates align on the same stem: a tight green bud opens scarlet, swells into black fruit, then remains as a dry silver cage.", + "system": [ + "Palette/material: warm cream plate ground with hairline sepia rules, botanical greens and scarlet-to-black fruit as the only saturation, graphite gray for labels at rest", + "Type/composition: engraved italic species names over small-caps stage labels, five fixed-scale plates banded on one shared baseline with captions ranked beneath", + "Topology/navigation: Move by life stage, date, plant part, plate detail, and recurring fixed landmark.", + "Controls/state: Align, overlay, compare, and annotate with dormant, emerging, flowering, fruiting, and senescent states.", + "Responsive/motion: Use registered overlays or a stage strip and provide descriptive change summaries." + ], + "webLeverage": "Image registration can make subtle seasonal transformation directly comparable without automatic morphing.", + "strength": "world" + }, + { + "id": "ink-pigment-printmaking-cyanotype-shadow-herbarium", + "form": "a cyanotype herbarium exposed beneath leaves and lace, where sunlight records direct contact as white silhouettes inside Prussian blue", + "lineage": "Cyanotype photography, botanical specimen recording, and contact printing", + "tags": [ + "cyanotype", + "contact", + "sunlight" + ], + "spark": "After rinsing, a fern appears as a white branching ghost in saturated blue, with every curled tip edged by a faint halo of sun.", + "system": [ + "Palette/material: saturated Prussian blue ground with white contact silhouettes as figures, pale sun-halo cyan edging the active specimen, wash-gray for unexposed margins", + "Type/composition: handwritten specimen labels in white pencil on blue, plates ranked in an even herbarium grid, one Latin name anchoring each sheet's lower edge", + "Topology/navigation: Connect placed object, contact edge, exposure region, wash, and final print.", + "Controls/state: Arrange, expose, mask, rinse, and compare with coated, latent, exposed, developing, and fixed states.", + "Responsive/motion: Use discrete exposure proofs and pair silhouettes with specimen names and tactile descriptions." + ], + "webLeverage": "Time-based exposure masks can demonstrate contact, occlusion, and overexposure from a lightweight image model.", + "strength": "world" + }, + { + "id": "ink-pigment-printmaking-drybrush-reed-storm", + "form": "a six-panel paper screen carrying a storm over black pines and white surf, where a split reed brush drags dry pine-soot ink across gold-flecked fibers so untouched paper flashes as rain", + "lineage": "Japanese suibokuga ink landscape, byobu screen composition, split-brush dry-ink technique, and pine-soot ink craft", + "tags": [ + "folding-screen", + "negative-rain", + "dry-ink" + ], + "spark": "Across six gold-flecked panels, one broken black stroke bends a pine toward the sea; the paper left between its fibers becomes a sheet of hard white rain.", + "system": [ + "Palette/material: pine-soot black in dry broken strokes over gold-flecked paper ground, untouched fiber white reading as rain, the wet saturated stroke marking the active passage", + "Type/composition: a single vertical seal and brushed signature as the only lettering, six hinged panels composing one horizon with weight massed low against empty sky", + "Topology/navigation: Read the storm across hinged panels, then trace each wave, pine, rain gap, and brush passage back to its gesture.", + "Controls/state: Load, split, drag, hinge, and compare with saturated, broken, skipping, pooled, dry, and folded states.", + "Responsive/motion: Preserve the full horizon as an accordion sequence and expose brush direction and untouched negative space without simulated painting." + ], + "webLeverage": "Registered stroke, fiber, and panel layers let users connect scenic weather to the exact physical gesture, then fold or flatten the panorama without losing place.", + "strength": "world" + }, + { + "id": "ink-pigment-printmaking-mezzotint-velvet-night", + "form": "a mezzotint plate rocked entirely to black and polished back toward light, where images emerge by removing darkness rather than drawing shadow", + "lineage": "Mezzotint engraving and tonal print traditions", + "tags": [ + "mezzotint", + "tone", + "burnish" + ], + "spark": "The first proof is absolute velvet black; after hours of burnishing, a pale face and one silver sleeve surface from the darkness.", + "system": [ + "Palette/material: total rocked velvet black as the ground, burnished silver-white as the only light, warm plate-tone brown at half-scraped passages, nothing ever drawn on white", + "Type/composition: engraved roman captions confined to the lower margin, the plate itself untitled and dark, tonal masses composed from the black downward toward light", + "Topology/navigation: Navigate tonal regions from fully rocked ground through scraped and burnished highlights.", + "Controls/state: Rock, scrape, burnish, proof, and compare with black, opening, luminous, flattened, and worn states.", + "Responsive/motion: Use stepped tonal proofs and include a high-contrast contour reading for low-vision access." + ], + "webLeverage": "A reversible tonal mask can reveal subtractive image formation while retaining every proof state.", + "strength": "dual" + }, + { + "id": "ink-pigment-printmaking-screenprint-transparent-overlap", + "form": "a moonlit brass-band procession screenprinted across translucent mulberry-paper curtains, where cyan instruments, amber lanterns, and scarlet figures cohere at exact overlap while deliberate drift releases rhythmic ghost companions", + "lineage": "Serigraph poster workshops, procession graphics, translucent paper installation, and transparent spot-color overprinting", + "tags": [ + "procession", + "registration", + "ghost-overlap" + ], + "spark": "Amber lanterns cross the scarlet dancers and ignite orange faces; one cyan horn slips half an inch out of register, sending a blue echo ahead of the marching player.", + "system": [ + "Palette/material: translucent cyan, amber, and scarlet inks over mulberry-paper white, overlaps mixing to orange and violet, the drifting ghost pass marking live motion", + "Type/composition: stencil-cut poster caps in one procession banner line, registration crosses in the margins, figures massed as flat spot-color shapes on open paper", + "Topology/navigation: Move between complete procession, paper curtain, color pass, overlap event, registration mark, and drifting ghost figure.", + "Controls/state: Expose, pull, align, offset, and compare passes with separate, registered, overprinted, drifting, veiled, and complete states.", + "Responsive/motion: Stack the translucent curtains as explicit layers and pair every color mixture or offset with names, values, and patterns." + ], + "webLeverage": "Direct manipulation of registered spot-color layers reveals how pass order and offset change both image and narrative, with every separation selectable and shareable.", + "strength": "dual" + }, + { + "id": "typography-calligraphy-writing-copperplate-pressure-ribbon", + "form": "a copperplate sentence written with one pointed nib, where hairlines and swelling shades make pressure visible as a continuous ribbon", + "lineage": "English roundhand, pointed-pen calligraphy, and engraved copybooks", + "tags": [ + "copperplate", + "pressure", + "shade" + ], + "spark": "The nib climbs in a silver hairline, turns, and descends under pressure into a black stroke broad enough to reflect the window.", + "system": [ + "Palette/material: iron-gall black on laid cream paper, hairlines thinning to silver gray at rest, the swelled full-pressure shade carrying the active stroke's weight", + "Type/composition: english roundhand at a constant steep slant, ascender and descender loops ruled to shared guidelines, one continuous joined line composing the page", + "Topology/navigation: Follow letter, stroke, word, line, and sentence while entry and exit joins preserve continuity.", + "Controls/state: Write, swell, lift, revise, and compare with hairline, shaded, joined, blotted, and corrected states.", + "Responsive/motion: Reflow by phrase without breaking stroke evidence and provide pressure curves beside the rendered hand." + ], + "webLeverage": "Pointer pressure can drive variable stroke geometry while editable text and stroke data remain fully accessible.", + "strength": "dual" + }, + { + "id": "typography-calligraphy-writing-crossing-script-dialogue", + "form": "a bilingual poetry broadside where vertical Japanese tategaki and horizontal English lines cross only at shared names of rivers, birds, and stations, making each anchor a typographic bridge without forcing either language from its reading direction", + "lineage": "Japanese tategaki composition, bilingual poetry publishing, ruby annotation, and modern multilingual book typography", + "tags": [ + "tategaki", + "shared-anchor", + "bilingual-poetry" + ], + "spark": "A vertical river name descends in black characters until its final glyph meets the same English word crossing in blue; two separate poems touch once, then continue toward different margins.", + "system": [ + "Palette/material: warm broadside white ground, sumi black for the vertical tategaki poem, indigo blue for the horizontal english line, shared anchor names carrying both inks", + "Type/composition: vertical mincho columns crossing horizontal humanist serif lines, each script keeping its native direction, ruby glosses set small beside the anchors", + "Topology/navigation: Preserve each poem's native direction while shared names create reachable crossings between source, translation, note, and echo.", + "Controls/state: Read, align, annotate, and compare with source, translation, shared, divergent, glossed, and untranslated states.", + "Responsive/motion: Separate scripts into synchronized native-direction panes on narrow screens and retain explicit anchors between corresponding lines." + ], + "webLeverage": "Native writing modes, ruby, selectable text, and bidirectional deep links let either poem remain sovereign while shared anchors coordinate reading and translation.", + "strength": "composition" + }, + { + "id": "typography-calligraphy-writing-illuminated-initial-vine", + "form": "a single illuminated initial growing into a margin of gold leaf, blue vine, beasts, and tiny narrative scenes, an inhabited threshold compressed into one letter", + "lineage": "Medieval manuscript illumination, gilding, and historiated initials", + "tags": [ + "initial", + "illumination", + "margin" + ], + "spark": "A red letter opens into a gold chamber; a blue vine escapes its stem, circles three lines of text, and ends in a fox playing a lute.", + "system": [ + "Palette/material: burnished gold leaf chambers on vellum cream, lapis blue vine as the wayfinding line, minium red initials marking every entry point into the text", + "Type/composition: one giant historiated initial outranking three lines of compact gothic bookhand, the margin composed as an inhabited frame around the measured text block", + "Topology/navigation: Enter through initial, branch, marginal figure, text passage, and referenced story while return remains obvious.", + "Controls/state: Open, trace, gloss, and compare with letter, ornament, scene, annotation, and restored states.", + "Responsive/motion: Turn the margin into a linked companion rail on phones and keep ornament optional to the reading path." + ], + "webLeverage": "Deep vector zoom can connect minute marginal scenes to semantic text without loading separate pages.", + "strength": "world" + }, + { + "id": "typography-calligraphy-writing-palimpsest-scraped-letter", + "form": "a scraped parchment palimpsest carrying three generations of writing, where erased words return under angled light and spectral color", + "lineage": "Manuscript palimpsests, conservation imaging, and layered textual scholarship", + "tags": [ + "palimpsest", + "erasure", + "spectral" + ], + "spark": "A prayer lies clear in brown ink; beneath it, violet spectral light raises an older diagram and a final line running the opposite direction.", + "system": [ + "Palette/material: scraped parchment tan as the ground, brown iron-gall ink for the visible prayer, violet spectral fluorescence raising the erased layer as the active reading", + "Type/composition: three script generations superimposed, an upright bookhand under a later cursive at a crossing angle, each hand kept distinct by weight and direction", + "Topology/navigation: Move by physical region, writing layer, date, script direction, and scholarly reading.", + "Controls/state: Reveal, suppress, align, cite, and compare with visible, erased, recovered, uncertain, and damaged states.", + "Responsive/motion: Use synchronized registered layers on small screens and expose every reading as semantic text." + ], + "webLeverage": "Multispectral image layers can be aligned and blended locally while transcriptions and confidence remain first-class.", + "strength": "composition" + }, + { + "id": "ink-pigment-printmaking-persian-miniature-page", + "form": "a persian miniature page, interior and exterior held on one plane in stacked registers, figures at symbolic scale inside gold-ruled margins dense with ornament, text floating in calligraphic cartouches", + "lineage": "Safavid and Mughal miniature ateliers, Herat school, Shahnameh manuscripts, Kamal ud-Din Behzad", + "tags": [ + "stacked-registers", + "ruled-margins", + "floating-cartouches" + ], + "system": [ + "Palette/material: lapis lazuli blue and vermilion over cream burnished paper, gold leaf ruling the margins, malachite green for the active pane, ink black for body text", + "Type/composition: nastaliq-voiced script held in bordered cartouches, headings as illuminated panels, the page split into simultaneous registers on one flat plane", + "Topology/navigation: interior and exterior views share one plane; sections stack as architectural registers and you step between rooms without perspective or depth", + "Controls/state: the selected register takes the gold-ruled border and full pigment saturation, resting panes fade toward the cream ground, actions sit in cartouches", + "Responsive/motion: registers restack into a single column with margins intact at narrow widths; motion is a slow gold shimmer on rule lines" + ], + "spark": "You lean over a Shahnameh page under lamplight, a battle filling the lower register and a palace garden above it on the same plane, gold margins glinting, a cartouche of nastaliq floating over the lapis sky.", + "webLeverage": "css grid stacks simultaneous registers on one plane while svg draws the gold rule work and cartouche borders at any scale", + "strength": "dual" + }, + { + "id": "typography-calligraphy-writing-zoomorphic-calligram", + "form": "a zoomorphic calligram, arabic script bent into a lion or a bird where the sentence is the image, diacritics turned to plumage, meaning discovered by tracing the line", + "lineage": "Ottoman tughra composition, Persian and Sufi zoomorphic calligraphy, Bismillah lion and bird calligrams", + "tags": [ + "figure-from-text", + "traced-reading", + "single-stroke-mass" + ], + "system": [ + "Palette/material: dense black ink mass on aged cream paper, gold illumination dots as secondary marks, one deep saffron highlight tracing the phrase currently read", + "Type/composition: thuluth-weight strokes compose the figure itself, letterforms stretch to fill the animal silhouette, small annotations sit clear of the beast", + "Topology/navigation: the figure is the map; you navigate by following the baseline of the sentence through the body, entry at the first letter, exit at the tail", + "Controls/state: hovering a passage inks its stroke to full black while the rest of the figure thins to outline, the read path stays saffron behind you", + "Responsive/motion: the calligram scales as one object, annotations tuck below on narrow screens; motion draws the stroke along the reading path" + ], + "spark": "You trace a lion made entirely of a prayer, your finger following the baseline through the haunch and up the mane, diacritics scattering like feathers, and the sentence resolves only when you reach the tail.", + "webLeverage": "svg path stroke-dashoffset animation draws the sentence through the figure, and pointer events on each segment expose the reading order", + "strength": "world" + }, + { + "id": "ink-pigment-printmaking-handscroll-and-seal", + "form": "a chinese handscroll, painting and poem unrolling right to left through time, vermilion collector seals accumulating across centuries, colophons extending the work at its tail", + "lineage": "Song and Ming handscroll painting, literati colophon culture, seal carving, Dong Qichang provenance chains", + "tags": [ + "lateral-unroll", + "provenance-marks", + "appended-colophons" + ], + "system": [ + "Palette/material: pale silk and mulberry paper ground, carbon ink washes for content, vermilion seal red reserved as the only accent, marking approvals and ownership", + "Type/composition: vertical columns of running script read right to left, poem and image sharing one horizontal band, colophons appended in later hands at the tail", + "Topology/navigation: one continuous horizontal band unrolls right to left; you see an arm's width at a time and position is felt as how much scroll remains rolled", + "Controls/state: acting on a passage stamps it with a vermilion seal that stays; history reads as accumulated seals and appended colophons, never as deletion", + "Responsive/motion: the band keeps its height and scrolls horizontally at every width; motion is the easing glide of silk unrolling" + ], + "spark": "You unroll a mountain slowly with both hands, mist giving way to a fisherman, then a poem in a collector's hand, then his red seal beside three older ones, each one a century of someone holding this same silk.", + "webLeverage": "horizontal scroll-snap with sticky seal marks, and scroll-driven animation paces the unrolling of the ink washes", + "strength": "dual" + }, + { + "id": "graphic-worlds-publishing-busytown-cross-section", + "form": "a busytown cross-section spread, a cutaway world where every building loses its wall, every vehicle its hull, and every object wears a small printed label, dozens of workers mid-task in one continuous gouache scene", + "lineage": "Richard Scarry's Busytown books, Golden Books production, What Do People Do All Day cutaway spreads", + "tags": [ + "cutaway-reveal", + "label-everything", + "continuous-scene" + ], + "system": [ + "Palette/material: cheerful gouache flats on paper white, brick red, school-bus yellow, and grass green in even midtones, a thin warm brown outline holding every shape", + "Type/composition: small roman labels beside every object with a hairline pointer, one hand-lettered headline per spread, constant scale so no label outranks another", + "Topology/navigation: one continuous scene pans edge to edge; entering a building slices its facade away as a cutaway, and roads carry you between districts", + "Controls/state: hover names anything with its printed label, busy items show a worker mid-task, and an opened building swings its wall aside while neighbors keep working", + "Responsive/motion: small screens frame one building at a time and pan along the road; motion is the facade swinging open like a dollhouse hinge" + ], + "spark": "You lie on the rug tracing a tiny car through a page where the bakery has no front wall, the flour sack says flour, and every fireman, pig, and pickle truck is busy doing exactly what its label promises.", + "webLeverage": "svg cutaway layers toggle facades while css transforms pan one continuous labeled scene under pointer or touch", + "strength": "dual" + } + ] + }, + { + "id": "posters-covers-sleeves", + "label": "Posters, Covers & Sleeves", + "well": "graphic-systems", + "description": "Poster traditions, album and record sleeves, book jackets, and film title design: single-surface compositions engineered to seize attention and organize a whole through type, image, and grid.", + "concepts": [ + { + "id": "posters-covers-sleeves-ecm-sleeve", + "form": "an ecm records sleeve, a cold horizon photograph or near-empty field with a thin line of lowercase type floating in enormous quiet margin", + "lineage": "ECM Records, Barbara Wojirsch and Dieter Rehm sleeve design, Manfred Eicher's Munich catalog", + "tags": [ + "negative-space", + "horizon-field", + "whisper-type" + ], + "system": [ + "Palette/material: fog gray ground shading into sea slate, near-black ink for the single line of type, one cold horizon blue reserved for the active element", + "Type/composition: lowercase sans letterspaced wide, artist above title in two whispered lines, the margin ratio itself the compositional law", + "Topology/navigation: vast fields of emptiness with one small anchor per view; travel is a slow drift between horizons, never a jump", + "Controls/state: a single hairline of small type carries every state, present is dark, latent is fog gray, nothing ever grows louder than the field around it", + "Responsive/motion: margins compress before content ever does, preserving the emptiness ratio; motion is a long fade like weather" + ], + "spark": "A gray sea meets a grayer sky somewhere in the north, and a single line of small lowercase type hangs in the cold air like the last note of a piano left to decay.", + "webLeverage": "IntersectionObserver paces the slow reveal of each horizon field as it enters the viewport.", + "strength": "world" + }, + { + "id": "posters-covers-sleeves-fight-poster", + "form": "a boxing fight poster, two names in slab caps colliding at a versus mark, faces mirrored in confrontation over a stacked undercard in shrinking type", + "lineage": "Madison Square Garden fight bills, Ali-Frazier closed-circuit promotions, letterpress tune-up cards", + "tags": [ + "versus-axis", + "mirrored-pair", + "undercard-stack" + ], + "system": [ + "Palette/material: newsprint cream ground, heavy black slab ink for the two names, one arena gold reserved for the versus mark and the live selection", + "Type/composition: condensed slab caps at collision scale, each name set to fill its half to the edge, date and venue in letterpress smalls beneath the mark", + "Topology/navigation: the sheet splits along a central versus axis, each half belongs to one opponent, everything else stacks beneath in ranked shrinking rows", + "Controls/state: any comparison becomes the two halves, the favored side's slab caps sit heavier, the undercard ranks the rest by type size alone", + "Responsive/motion: halves stack vertically on narrow frames with the versus mark as hinge; motion is a title-card punch-in" + ], + "spark": "Outside the arena in the rain, two heavyweight profiles glare across a gold VS while the undercard shrinks line by line into names only their mothers came to see.", + "webLeverage": "CSS grid mirrors the two halves for any compare, with a draggable versus divider rebalancing them.", + "strength": "dual" + }, + { + "id": "posters-covers-sleeves-fillmore-handbill", + "form": "a fillmore psychedelic handbill, lettering melted into liquid ornament that fills every contour, vibrating complementary inks at maximum interference", + "lineage": "Wes Wilson and Victor Moscoso, Fillmore and Avalon Ballroom handbills, Family Dog concerts", + "tags": [ + "liquid-lettering", + "vibrating-color", + "horror-vacui" + ], + "system": [ + "Palette/material: electric blue ground under hot orange lettering, the vibrating complementary pair reserved for what is active, calmer wine and moss at rest", + "Type/composition: one hand-drawn face per sheet, strokes swelling until counters nearly close, no straight baseline anywhere, the title the largest liquid mass", + "Topology/navigation: words become shapes that interlock like smoke filling a bottle, you read by tracing contours, and slow reading is designed in", + "Controls/state: the active element vibrates in complementary inks that fight at the boundary, resting elements settle into one calmer pair", + "Responsive/motion: the lettering mass re-melts to fill each new contour rather than reflowing lines; motion is a slow liquid breathe" + ], + "spark": "Outside the ballroom a kid tilts the handbill under a streetlamp, and the orange letters against electric blue seem to hum and crawl until the band name swims into focus.", + "webLeverage": "SVG turbulence filters melt the lettering live, and prefers-reduced-motion freezes the liquid state.", + "strength": "world" + }, + { + "id": "posters-covers-sleeves-hatch-show-print", + "form": "a hatch show print letterpress gig poster, wood-type stacked in full-width bands where every line fills the measure and each ink pass lands a hair off-register", + "lineage": "Hatch Show Print Nashville, 19th-century wood-type broadsides, country and rockabilly show bills", + "tags": [ + "wood-type", + "band-stacking", + "overprint" + ], + "system": [ + "Palette/material: poster-stock cream ground, black wood-type ink beside one barn red and one deep blue run, the red pass reserved for the headline act", + "Type/composition: carved wood type stacked edge to edge, gothic condensed against slab and ornamented faces, every band forced to fill the full measure", + "Topology/navigation: one tall broadside of stacked horizontal bands, each line a full-width slab; the eye travels top to bottom through ranked type sizes", + "Controls/state: states are ink treatments, active is a solid overprint pass, disabled is a dry ghost impression, emphasis is a second color run slightly off-register", + "Responsive/motion: bands rewrap by swapping to condensed wood type at narrow widths; motion is a single press-pull, one clean stamp per change" + ], + "spark": "In a print shop that smells of kerosene and ink, a century of carved wood letters slams onto poster stock one color at a time, each pass a heartbeat off-register from the last.", + "webLeverage": "CSS mix-blend-mode multiplies overprinted ink layers, and container queries swap each band to condensed wood type.", + "strength": "world" + }, + { + "id": "posters-covers-sleeves-ospaaal-poster", + "form": "an ospaaal solidarity silkscreen, flat fearless color fields around one emblematic figure, the slogan repeated in four languages as a typographic border", + "lineage": "OSPAAAL Havana, Cuban silkscreen posters, Tricontinental magazine inserts, Alfredo Rostgaard", + "tags": [ + "flat-color", + "emblem-figure", + "multilingual-border" + ], + "system": [ + "Palette/material: flat silkscreen fields, hot red and sun yellow over a cream sheet, one saturated ink pass reserved for the emblem in focus", + "Type/composition: bold geometric sans set solid, the slogan repeated in spanish, english, french, and arabic, letterforms cut as flat shapes like the figure", + "Topology/navigation: a centered emblem commands the sheet while a running multilingual frame carries the message around all four edges", + "Controls/state: state is a screen pull, each change adds or removes one flat color layer, urgency stacks hot layers, calm strips back to two inks", + "Responsive/motion: the emblem holds center at any ratio and the language border rewraps its four texts; motion is a squeegee wipe per layer" + ], + "spark": "In a Havana workshop a folded poster slips inside a magazine and unfurls across three continents, one raised fist printed in colors bold enough to survive any wall.", + "webLeverage": "Canvas compositing simulates screen-pull layers, adding one flat ink at a time in real-time.", + "strength": "world" + }, + { + "id": "posters-covers-sleeves-pelican-jacket", + "form": "a pelican paperback jacket on the marber grid, color-coded band up top and a witty conceptual image locked into the lower two-thirds", + "lineage": "Romek Marber's Penguin Crime grid, Penguin and Pelican Books, Germano Facetti art direction", + "tags": [ + "fixed-grid", + "series-color", + "concept-image" + ], + "system": [ + "Palette/material: off-white stock and black text ink under penguin crime green and pelican blue bands, the ground stays paper while color lives in the band", + "Type/composition: quiet grotesk locked to the marber grid, horizontal rules dividing publisher, title, and image fields, type never trespassing into the image", + "Topology/navigation: every jacket shares one grid, horizontal rules divide publisher band, title band, and image field, so a shelf of many reads as one system", + "Controls/state: series membership is a color band, states recolor the band while type and rules never move; only the image field is allowed to surprise", + "Responsive/motion: the grid is proportional, bands keep their ratios from thumbnail to full spread; motion is a shelf slide between jackets" + ], + "spark": "On a spinning wire rack, forty crime paperbacks in the same green livery each hide one sly visual joke below the rule line, a whole library disguised as a pattern.", + "webLeverage": "CSS custom properties swap the series band color per category while the grid template stays computed and fixed.", + "strength": "dual" + }, + { + "id": "posters-covers-sleeves-polish-film-poster", + "form": "a polish film poster, one painted surreal metaphor swallowing the whole sheet, hand-lettered title bent to fit the image's anatomy", + "lineage": "Polish School of Posters, Jan Lenica, Franciszek Starowieyski, Wiktor Górka, CYRK prints", + "tags": [ + "painted-metaphor", + "hand-lettering", + "single-image" + ], + "system": [ + "Palette/material: feverish gouache on cheap poster stock, bruise violet and blood crimson over muddy ochre, the hottest red reserved for the element in focus", + "Type/composition: hand-lettered strokes sharing the brush of the painting, the title bent to the figure's anatomy, no grid and no typeface anywhere", + "Topology/navigation: one metaphorical image per sheet is the entire territory, secondary matter rides inside the image's own contours rather than beside it", + "Controls/state: moods change by repainting the metaphor, a warning is a wound in the image, success blooms out of it; lettering flexes to follow the new anatomy", + "Responsive/motion: the image composes around one dominant axis that survives any crop; motion is paint bleeding into paper" + ], + "spark": "Behind the Iron Curtain a cabaret dancer's face dissolves into a wolf's, painted in feverish gouache, because the censor read words but never learned to read pictures.", + "webLeverage": "SVG clip-paths let hand-lettered titles flow along the painted figure's contours at any size.", + "strength": "world" + }, + { + "id": "posters-covers-sleeves-pulp-rack", + "form": "a pulp paperback rack, lurid painted covers jostling spine-out and face-out, each promising doom in three tiers of breathless cover lines", + "lineage": "1940s-50s pulp paperbacks, Popular Library and Dell mapbacks, Robert McGinnis cover painting", + "tags": [ + "face-out-rack", + "cover-lines", + "painted-melodrama" + ], + "system": [ + "Palette/material: night-blue painted scenes under taxi yellow and lipstick red cover lines, cheap ivory pulp stock as ground, red reserved for the chosen cover", + "Type/composition: brush script over condensed gothic caps, cover lines breaking into italics for the promise of doom, the painting always owning the center", + "Topology/navigation: a wire rack of pockets, most items show spines and chosen ones turn face-out, browsing is spinning tiers rather than scanning lists", + "Controls/state: attention promotes a spine to a full painted cover, the three-tier cover-line stack ranks hook, title, and dread in fixed positions", + "Responsive/motion: narrow widths show one face-out and a fan of spines, wide shows the whole carousel; motion is the rack's squeaky spin" + ], + "spark": "In a drugstore corner the wire rack creaks around, and every turn faces out another painted blonde, another smoking gun, another promise that this one ends badly.", + "webLeverage": "3D CSS transforms spin the rack's tiers, with scroll-snap landing each pocket face-out.", + "strength": "world" + }, + { + "id": "posters-covers-sleeves-saul-bass-title", + "form": "a saul bass title sequence, cut-paper shapes and a single jittering line building meaning across timed cards on a flat color field", + "lineage": "Saul Bass, The Man with the Golden Arm, Anatomy of a Murder, Vertigo title work", + "tags": [ + "cut-paper", + "timed-cards", + "symbol-reduction" + ], + "system": [ + "Palette/material: one flat saturated field per card, burnt orange, ink black, and bone white, the field color swapping per act while silhouettes stay black", + "Type/composition: skinny hand-set caps sitting slightly off baseline, one idea per card in hard asymmetry, credits ranked as timed cards rather than columns", + "Topology/navigation: a timed sequence of full-bleed cards, one idea per card; jumping ahead scrubs the sequence rather than abandoning it", + "Controls/state: everything is a cut-paper symbol, states change by swapping the silhouette rather than decorating it; a jittery hand-drawn line marks the live element", + "Responsive/motion: shapes are flat and scale-free so cards recompose at any width; motion is staccato paper-cut jumps" + ], + "spark": "A black cut-paper arm reaches across a burnt-orange field while brass stabs, and in ninety seconds of jittering silhouettes an entire story is told without showing a single face.", + "webLeverage": "SVG shape morphs animate the paper-cut swaps, with scroll-driven animation timelines advancing each card.", + "strength": "dual" + }, + { + "id": "posters-covers-sleeves-stenberg-poster", + "form": "a stenberg brothers film poster, photomontage figures at impossible diagonals, perspective faked by scale jumps and type racing along the tilt", + "lineage": "Vladimir and Georgii Stenberg, Soviet constructivist cinema posters, Sovkino advertising sheets", + "tags": [ + "diagonal-axis", + "scale-jump", + "photomontage" + ], + "system": [ + "Palette/material: sovkino red and coal black over unprinted cream, gray halftone photomontage flesh at rest, flat red serving as both alarm and accent ink", + "Type/composition: constructivist sans caps racing along the tilt, letters wedged into the composition as if built from it, the diagonal is the baseline", + "Topology/navigation: one violent diagonal organizes the sheet, elements gain importance by scale jump rather than position, the tilt is the reading order", + "Controls/state: a state change re-tilts the axis, alarm steepens the diagonal and jumps the key figure two scales up, calm settles toward the horizontal", + "Responsive/motion: the diagonal re-angles to each frame's proportions while scale ratios hold; motion is a lurching montage cut" + ], + "spark": "A cameraman's giant face looms over a sprinting figure a tenth his size while red letterforms tumble down the tilt, the whole cinema screaming from a single silent sheet.", + "webLeverage": "CSS transforms drive the diagonal composition, with view transitions cutting between montage states.", + "strength": "world" + }, + { + "id": "posters-covers-sleeves-wpa-park-poster", + "form": "a wpa national-park travel poster, a landscape flattened into stacked silkscreen planes with a ranger-voiced imperative set in blocky caps below", + "lineage": "WPA Federal Art Project posters, See America series, Ranger Naturalist Service silkscreens", + "tags": [ + "flat-planes", + "depth-stack", + "imperative-caps" + ], + "system": [ + "Palette/material: four flat silkscreen inks, one unbroken teal sky swath over pine green and canyon ochre planes, cream stock showing through as the light", + "Type/composition: blocky geometric caps in a caption bar beneath the scene, one imperative per sheet, the landscape composed above it and never interrupted", + "Topology/navigation: the scene layers into foreground, midground, and sky planes; deeper subjects live on deeper planes and travel is walking into them", + "Controls/state: each state is a season of the same scene, inks reshuffle from summer to snow while plane edges never move, the caption bar states one imperative", + "Responsive/motion: planes crop from the outside in so the summit always survives; motion is gentle plane parallax" + ], + "spark": "From a canvas tent at dawn you see the geyser rendered in four flat inks, the sky one unbroken swath of teal, and beneath it two words in block caps: SEE AMERICA.", + "webLeverage": "Layered SVG planes parallax under pointer and scroll, each plane a separate flat-ink shape.", + "strength": "world" + }, + { + "id": "posters-covers-sleeves-silent-intertitle-card", + "form": "a silent-era intertitle card, hand-lettered dialogue on soft black inside an ornamented frame, the whole print tinted amber for lamplight and blue for night, iris circles opening and closing every scene of the picture", + "lineage": "1920s silent film intertitles, Weimar and Hollywood art title departments, nitrate tinting conventions", + "tags": [ + "framed-card", + "tint-states", + "iris-transition" + ], + "system": [ + "Palette/material: soft black card grounds with cream lettering, scene tints washing the whole frame, amber for interiors, blue for night, rose for romance, grain over everything", + "Type/composition: hand-lettered dialogue centered with generous margins, corner flourishes matched to the picture's mood, quotation dashes for speech and spaced caps for narration", + "Topology/navigation: cards alternate with scenes; narration cards set the chapters, dialogue cards carry the voices, and an iris opens each new place from one point of interest", + "Controls/state: the current mood tints every element at once, emphasis earns a larger lettered card of its own, and a held card lingers exactly as long as it takes to read twice", + "Responsive/motion: cards were made for small frames and simply scale; motion is iris in, iris out, and the faint dance of grain" + ], + "spark": "the piano vamps, the frame irises down to her hand on the doorknob, and the card cuts in on black, fancy letters trembling slightly, telling you what he never had the courage to say aloud", + "webLeverage": "css clip-path irises drive the scene transitions while tint states recolor the whole page through blend modes", + "strength": "world" + }, + { + "id": "posters-covers-sleeves-sonidero-dayglo-poster", + "form": "a sonidero dance poster, fluorescent inks stacked line on line over black, every sound system billed in a different color and size, dates and barrio venues shouting in condensed caps, stapled to the light pole in multiples", + "lineage": "Mexico City sonidero and baile posters, fluorescent-stock offset printing, cumbia sound-system billing culture", + "tags": [ + "dayglo-stack", + "billing-sizes", + "black-ground" + ], + "system": [ + "Palette/material: matte black ground with fluorescent pink, acid green, and blaze orange inks alternating line by line, white held for the small print and fine rules", + "Type/composition: ultra-condensed caps stacked edge to edge, each act sized by billing, the headline name arched or slanted, date and venue locked in a boxed bottom band", + "Topology/navigation: the sheet reads top to bottom as a bill; headliners first, then the stack, then the venue block, and repeat posting turns one message into a wall", + "Controls/state: the featured line burns brightest with a blacklight flicker, past dates take a diagonal overprint strip, and picking any line pulls its full listing forward", + "Responsive/motion: the stack condenses its letterforms to fit before it ever breaks a line; motion is a blacklight pulse on the headline only" + ], + "spark": "On a concrete pole at dusk the same poster repeats five times, fluorescent pink and green stacked to the edges, and the headline name arcs across all five in letters you can read from the moving bus.", + "webLeverage": "variable font width axes condense each line to exact measure while css blend modes make fluorescent inks glow on black", + "strength": "world" + } + ] + }, + { + "id": "notation-diagram-systems", + "label": "Notation & Diagram Systems", + "well": "graphic-systems", + "description": "Systems that encode meaning as marks and diagrams: musical and choreographic notation, pictograms, technical and scientific drawings, and charts whose legends become interface grammar.", + "concepts": [ + { + "id": "notation-diagram-systems-chess-notation", + "form": "a chess diagram with algebraic notation, an eight-by-eight coordinate board beside a move ledger where terse glyphs pass judgment in two characters", + "lineage": "Staunton diagram conventions, algebraic notation, Chess Informant annotation symbols", + "tags": [ + "coordinate-board", + "move-ledger", + "judgment-glyphs" + ], + "system": [ + "Palette/material: buff and umber board squares on cream book paper, jet ink for the ledger, the last move's two squares tinted a soft annotation yellow", + "Type/composition: compact figurine serif in a two-column numbered ledger, bold for the mainline and italic for variations, the diagram ruled as a strict square", + "Topology/navigation: a fixed coordinate grid is the world and a numbered two-column ledger is its history, any ledger line reconstructs the exact board", + "Controls/state: every action is a terse coordinate phrase, annotation glyphs grade it from brilliant to blunder, branches indent as variations", + "Responsive/motion: board and ledger sit side by side then stack, coordinates never abbreviate; pieces glide one move at a time" + ], + "spark": "In a silent hall a grandmaster pencils Rxf7 followed by two exclamation marks, and everyone replaying the game a century later gasps at the same instant.", + "webLeverage": "URL searchParams deep-link any ply, so every position in the ledger has a shareable address.", + "strength": "composition" + }, + { + "id": "notation-diagram-systems-graphic-score", + "form": "an experimental graphic score, cardew's treatise pages where line weight, cluster density, and drift replace notes, interpretation left to the performer", + "lineage": "Cornelius Cardew's Treatise, Ligeti's Artikulation listening score, Cage's indeterminate notations", + "tags": [ + "density-encoding", + "open-interpretation", + "drawn-time" + ], + "system": [ + "Palette/material: absolute black geometry on white stock, silence kept as true white ground, the performer's pencil gray marking the passage in play", + "Type/composition: type nearly absent, small grotesk folios at the corners; the central lifeline rules the page and stroke weight does the ranking type would do", + "Topology/navigation: a long unbroken scroll where thickening lines, swarming dots, and empty stretches pace the journey, no numbered anchors, only visual weather", + "Controls/state: intensity is stroke weight and cluster density, an idea's importance literally thickens its line, silence is honored as empty space", + "Responsive/motion: the scroll compresses like a squeezed accordion with density ratios preserved; motion drifts with reading pace" + ], + "spark": "One hundred ninety-three pages of black geometry unfurl across the music stands, and the ensemble stares at a swelling line, deciding together what a thickening means tonight.", + "webLeverage": "Scroll-driven animation ties playback density to reading position along one continuous canvas scroll.", + "strength": "dual" + }, + { + "id": "notation-diagram-systems-guitar-tab", + "form": "a guitar tablature sheet, six string-lines carrying fret numbers in time order, bends and slides written as arrows and slurs between the digits", + "lineage": "lute tablature ancestry, Guitar World transcriptions, ASCII tab archives of the early web", + "tags": [ + "string-lines", + "fret-digits", + "technique-marks" + ], + "system": [ + "Palette/material: photocopy white under courier black string-lines, the working column pooled in lamp amber, measures already learned faded to gray", + "Type/composition: monospaced fret digits seated on six ruled lines, technique marks as slurs and arrows between them, section labels in plain caps above each riff", + "Topology/navigation: six horizontal lines are the physical strings, numbers sit on the line that sounds them, riffs read left to right in loops and sections", + "Controls/state: technique is punctuation, h for hammer-on, a curved arrow for a bend's reach, the current beat's column highlights across all six lines", + "Responsive/motion: measures wrap like text and a looped riff repeats in place; the beat cursor sweeps at tempo or half-speed" + ], + "spark": "In a bedroom lit by a single lamp, a teenager loops the same four columns of numbers until the bend written as a small arrow finally cries at the right pitch.", + "webLeverage": "Web Audio drives the beat cursor and slows playback while the tab stays synchronized column by column.", + "strength": "composition" + }, + { + "id": "notation-diagram-systems-knitting-chart", + "form": "a knitting chart, a squared grid read right to left then left to right, each cell a stitch symbol and each row a physical pass of the needles", + "lineage": "Japanese stitch dictionaries, Fair Isle motif charts, Barbara Walker treasuries", + "tags": [ + "boustrophedon-rows", + "cell-symbols", + "repeat-brackets" + ], + "system": [ + "Palette/material: graph-paper white ruled in pale blue, stitch symbols in black ink, numbered yarn chips carry the colorway, the working row banded straw yellow", + "Type/composition: small tabular row numerals flanking alternate sides of the grid, the legend as symbol-and-name pairs, the squared chart is the composition", + "Topology/navigation: a numbered grid worked bottom-up in alternating direction, repeat brackets mark the motif you tile sideways to any width", + "Controls/state: each cell holds one stitch symbol from a fixed legend, the working row is highlighted, completed rows dim below the needle line", + "Responsive/motion: the bracketed repeat tiles to fill any width honestly; progress crawls cell by cell along the row" + ], + "spark": "By lamplight a knitter's eye ticks along row forty-one right to left, and the paper grid slowly becomes a snowflake stretched around a sleeve.", + "webLeverage": "CSS grid renders the chart, and local state in IndexedDB keeps your working row when you return offline.", + "strength": "composition" + }, + { + "id": "notation-diagram-systems-labanotation", + "form": "a labanotation dance score, a vertical center staff read upward where symbol shape is direction, shading is level, and length is exact duration", + "lineage": "Rudolf Laban's Kinetographie, Dance Notation Bureau scores, Albrecht Knust's kinetography", + "tags": [ + "body-columns", + "read-upward", + "duration-length" + ], + "system": [ + "Palette/material: white score paper and black symbol blocks, level encoded as solid, hatched, or dotted fill, the beat in progress banded pale gray across the staff", + "Type/composition: type stays marginal, small count numerals beside the staff; the vertical center staff rules the page and bilateral symmetry is the layout law", + "Topology/navigation: columns flank a center line, left column for left limb and right for right, time flows bottom to top so the future is always above", + "Controls/state: each action is a shaped block whose length is its duration, shading sets level, simultaneous acts sit side by side across the columns", + "Responsive/motion: columns thin but never merge, symmetry across the centerline is the invariant; motion rises like a slow elevator" + ], + "spark": "In a mirrored studio a notator watches the leap twice, then draws a shaded rectangle whose exact height is the half-second the dancer hung in the air.", + "webLeverage": "CSS grid columns mirror the body's bilateral layout, and scroll timelines run time upward through the score.", + "strength": "dual" + }, + { + "id": "notation-diagram-systems-orienteering-map", + "form": "an orienteering map and legend, iso-standard colors where white means runnable forest, contours rule the truth, and the course rides in purple over everything", + "lineage": "ISOM mapping standard, Scandinavian orienteering federations, control-description sheets", + "tags": [ + "color-coded-terrain", + "contour-truth", + "course-overlay" + ], + "system": [ + "Palette/material: isom inks, white runnable forest, olive thicket, yellow open land, brown contours, blue marsh, course purple reserved for the active leg", + "Type/composition: condensed sans control numerals in purple beside their circles, the legend a ranked symbol table, contour line texture is the page's ground", + "Topology/navigation: terrain is a fixed color language beneath and the numbered purple course rides above, you travel control to control choosing your own route", + "Controls/state: each control pairs a circle on the map with a coded description row, punched controls check off, the course layer never edits the terrain", + "Responsive/motion: the map keeps metric scale and clips to a window around your current leg; panning follows the compass bearing" + ], + "spark": "Thumb on the map and breath ragged, a runner in wet birch forest gambles on the marsh crossing because two contour lines pinch, and the purple line does not care how.", + "webLeverage": "Geolocation tracks your position over the fixed-scale map with the course as an SVG overlay layer.", + "strength": "dual" + }, + { + "id": "notation-diagram-systems-star-atlas", + "form": "a celestial star atlas chart, magnitudes as ranked dot sizes on a coordinate sphere, constellation lines and mythic figures faint beneath the data", + "lineage": "Norton's Star Atlas, Uranometria, Tirion's Sky Atlas 2000.0 conventions", + "tags": [ + "magnitude-scale", + "dual-layer", + "coordinate-sphere" + ], + "system": [ + "Palette/material: deep navy chart ground with chalk-white stars, red-flashlight amber for annotations, the object under the eye ringed in that same night-vision red", + "Type/composition: light serif italic names the constellations, small tabular figures label coordinates, dot diameter carries the hierarchy the type declines to", + "Topology/navigation: the sky splits into overlapping charts with matched edges, coordinates gridline the field and an index of named objects points into each plate", + "Controls/state: importance is dot diameter on a fixed magnitude ramp, variable objects wear distinct rings, the mythic figure layer fades up only on request", + "Responsive/motion: each plate crops around its brightest anchors at small sizes; panning drifts like slow sidereal motion" + ], + "spark": "Under a red flashlight at two in the morning, a cold thumb traces from the chart's inked dots up to the actual sky, and Orion's belt agrees with the paper exactly.", + "webLeverage": "Canvas plots thousands of magnitude-scaled points with smooth zoom between chart plates.", + "strength": "world" + }, + { + "id": "notation-diagram-systems-synoptic-map", + "form": "a synoptic weather chart of station models, each observation a compact glyph cluster around a circle, isobars threading the stations into weather", + "lineage": "WMO station-model code, NOAA surface analysis charts, shipping forecast synoptics", + "tags": [ + "glyph-cluster", + "isobar-threading", + "fixed-seats" + ], + "system": [ + "Palette/material: pale chart-gray coastlines under jet station ink, cold-front blue and warm-front red toothed lines, the watched low circled in grease-pencil red", + "Type/composition: tabular figures at fixed seats around each station circle, isobar labels set into their gaps, highs and lows named in large sans capitals", + "Topology/navigation: stations pin to true geography, each a dense glyph rosette; isobar contours are the connective tissue you read between them", + "Controls/state: every value has a fixed seat around the station circle, wind barbs add feathers per ten knots, fronts declare themselves in toothed lines", + "Responsive/motion: zooming sheds outer glyphs before ever moving one from its seat; successive charts animate as an advancing system" + ], + "spark": "In the forecast office at dawn a hundred inked rosettes bloom across the map of the ocean, and where the isobars squeeze closest together the forecaster circles tomorrow's gale.", + "webLeverage": "SVG glyph rosettes stay legible at fixed seats while canvas interpolates animated isobar fields.", + "strength": "dual" + }, + { + "id": "notation-diagram-systems-heraldic-roll-of-arms", + "form": "an illuminated roll of arms, ranked shields on vellum built by blazon grammar under the tincture law that metal never sits on metal nor colour on colour, each bearer named in gothic script", + "lineage": "medieval English rolls of arms, the Zurich armorial, heralds' blazon grammar", + "tags": [ + "tincture-law", + "blazon-grammar", + "ranked-shields" + ], + "system": [ + "Palette/material: the seven tinctures, or and argent metals against gules, azure, sable, vert, purpure, vellum cream as ground, sable as ink, gold leaf on the arms in focus", + "Type/composition: gothic textura minuscule names each bearer beneath his shield, shields ranked in even rows down the roll, blazon captions held to one ruled line", + "Topology/navigation: one continuous vellum roll read downward, shields ranked by precedence in even rows, kinship traced through quartered and differenced arms", + "Controls/state: every mark is blazonable, variants add cadency labels and differenced charges, the tincture law forbids color on color so every state keeps contrast", + "Responsive/motion: the roll narrows to a single shield column with names below, motion is the slow unrolling of the vellum" + ], + "spark": "In a candlelit chancery a herald lays gold leaf onto a shield's field, recites the blazon aloud, azure a bend or, and inks the bearer's name in gothic minuscule beneath the drying arms.", + "webLeverage": "SVG paths and patterns generate ordinaries and charges from blazon parameters, tincture contrast enforced in code.", + "strength": "dual" + }, + { + "id": "notation-diagram-systems-thangka-mandala-cosmogram", + "form": "a tibetan mandala cosmogram, nested rings and four gates mapping a cosmology onto one square, each quadrant color-coded, every position meaningful, read inward toward the center", + "lineage": "Tibetan thangka painting, sand mandala construction, Vajrayana cosmological diagrams, Kalachakra mandala tradition", + "tags": [ + "concentric-rings", + "four-gates", + "inward-reading" + ], + "system": [ + "Palette/material: mineral pigment quadrants of white, yellow, red, and green on indigo ground, gold line work for structure, the center reserved for the present focus", + "Type/composition: labels ride the rings on radial baselines, counts and names sized by ring depth, strict fourfold symmetry with one square palace inside the circles", + "Topology/navigation: concentric rings run from outer fire to inner palace; you enter by a cardinal gate and each ring inward is a narrower, more important scope", + "Controls/state: the active ring brightens to full pigment while outer rings dim toward indigo, quadrant color declares category, the center holds the chosen thing", + "Responsive/motion: rings collapse to stacked arcs on narrow screens with the center always visible; motion is slow rotation of the outer ring" + ], + "spark": "You kneel at the edge of a sand mandala as monks tap colored grains through brass funnels, the four gates aligned to the doors of the room, and the whole cosmos tightens ring by ring toward a center you cannot yet enter.", + "webLeverage": "svg concentric geometry with radial text paths, and css transforms rotate ring groups without rebuilding the layout", + "strength": "dual" + }, + { + "id": "notation-diagram-systems-kamon-crest-system", + "form": "the kamon family crest grammar, thousands of identities generated from circles, plants, and geometry, each one a single monochrome mark that survives any size, cloth, or lantern", + "lineage": "Japanese kamon heraldry, Edo-era crest catalogs and pattern books, mon-kiri paper cutting", + "tags": [ + "generative-grammar", + "monochrome-mark", + "circle-bound" + ], + "system": [ + "Palette/material: sumi ink black on undyed linen white, one indigo field for the active identity, no gradients; every mark reads in positive or reversed-out form", + "Type/composition: marks sit centered in a circle module on a strict grid of same-size cells, names in small quiet gothic caps below, the mark always outranks the label", + "Topology/navigation: a catalog grid of equal circular cells grouped by motif family, plants with plants, tools with tools; drilling in enlarges one mark to full frame", + "Controls/state: selection reverses the mark, white on indigo instead of ink on white; disabled marks thin to outline, and every state survives at 16 pixels", + "Responsive/motion: the grid drops columns but never scales marks below legibility; motion is a paper-cut reveal of the mark's construction lines" + ], + "spark": "You flip through an Edo crest catalog, hundreds of circles in rows, a crane folded into pure geometry beside three ginger leaves, and you find your own family's mark stamped small and sharp on the corner of a lantern.", + "webLeverage": "inline svg marks stay crisp from favicon to hero size, and css custom properties flip positive and reversed states in one rule", + "strength": "world" + }, + { + "id": "notation-diagram-systems-quipu-knot-ledger", + "form": "an andean quipu, a primary cord hung with knotted pendant strings where position, knot type, and cord color encode quantity and category, a ledger read by hand along threads", + "lineage": "Inka khipu administration, khipukamayuq record keepers, Andean cord and fiber accounting", + "tags": [ + "hanging-cords", + "positional-encoding", + "tactile-ledger" + ], + "system": [ + "Palette/material: undyed camelid fiber in cream and brown as ground, madder red and indigo cords for categories, a twisted two-color cord marking the active record", + "Type/composition: numerals rendered as knot clusters ranked by height on each cord, decimal position read top to bottom, labels small and horizontal at the primary cord", + "Topology/navigation: one horizontal primary cord with pendant cords hanging in groups; you move laterally across categories and downward into a single cord's digits", + "Controls/state: touching a cord lifts it forward and unspins its value into plain digits, edits tie a new knot rather than erasing, totals live on summary cords", + "Responsive/motion: pendant groups wrap into rows while cords keep their hang; motion is a slight sway settling after touch" + ], + "spark": "You run a knotted cord through your fingers in cold highland light, counting a long knot of seven near the tip, red threads for llamas and blue for cloth, an entire province's tribute hanging across your knees.", + "webLeverage": "svg cords with drag interaction, pointer events lift a cord while css transforms animate its settling sway", + "strength": "world" + }, + { + "id": "notation-diagram-systems-adinkra-symbol-cloth", + "form": "adinkra symbol cloth, a stamped lexicon of proverbs printed in gridded fields, each geometric mark carrying a named meaning, comb-drawn lines dividing the cloth into panels", + "lineage": "Akan adinkra printing of Ghana, Ntonso stamp carvers, calabash stamps and badie ink, Asante proverb iconography", + "tags": [ + "stamped-lexicon", + "panel-grid", + "named-marks" + ], + "system": [ + "Palette/material: badie ink black stamped on russet, brick, or indigo cloth grounds, comb-drawn dividing lines in the same ink, one pale panel for the item in focus", + "Type/composition: symbols repeat in ranked rows inside comb-ruled panels, each panel one meaning family, names set small beneath in wide-tracked caps like woven labels", + "Topology/navigation: the cloth divides into a grid of ruled panels, one proverb family per panel; you read panel by panel and zoom to one stamp for its meaning", + "Controls/state: pressing an action stamps it, slightly rotated with inked edges, never twice identical; the chosen symbol prints darker while neighbors sit half-inked", + "Responsive/motion: panels reflow to a single column with rules intact; motion is the press and lift of a stamp landing" + ], + "spark": "You hold a carved calabash stamp over stretched cloth in a Ntonso courtyard, press it into thick black badie ink, and rock it onto the russet field, one more sankofa bird joining the ranked rows drying in the sun.", + "webLeverage": "svg stamp marks tiled with css grid, and a filter roughens edges so each printed instance lands slightly different", + "strength": "world" + }, + { + "id": "notation-diagram-systems-haeckel-radiolarian-plate", + "form": "a kunstformen der natur lithographic plate, radiolarians and medusae arrayed in mirror-symmetric constellations on a dark ground, each specimen numbered to a legend page, drawn past the limit of the microscope", + "lineage": "Ernst Haeckel's Kunstformen der Natur, Adolf Giltsch lithography, Leipzig chromolithograph plates, 1899 to 1904", + "tags": [ + "symmetric-plate", + "numbered-legend", + "dark-ground" + ], + "system": [ + "Palette/material: near-black ground with specimens in pearl, amber, and sea-glass green, lithographic crayon grain in every shade, one accent hue per plate binding its figures", + "Type/composition: italic latin binomials in a ruled legend block beneath the plate, small index numerals beside each specimen, the plate title in spaced serif caps", + "Topology/navigation: each section is a plate composed in bilateral symmetry around a dominant central figure; the legend maps numerals to entries and zoom dives into one specimen", + "Controls/state: choosing a numeral lifts its specimen brighter while siblings sink into the ground, comparison sets two figures on one plate at matched scale", + "Responsive/motion: plates reflow to a centered single column keeping symmetry pairs together; motion is a slow brightening, as if the ground were deep water" + ], + "spark": "Under the lamp fifty glass skeletons hang in perfect mirror order on a ground like deep water, and numeral seven leads your eye down to a legend line naming a creature no one has ever seen alive.", + "webLeverage": "svg filters lay lithographic grain over vector specimens and a magnifier zooms one numbered figure without leaving the plate", + "strength": "world" + }, + { + "id": "notation-diagram-systems-patent-drawing-sheet", + "form": "a utility patent drawing sheet, an invention exploded into numbered figures in ruled ink line, reference numerals tied to parts by curved leader lines, hatching standing in for every material, witnessed and dated in the margin", + "lineage": "USPTO utility patent drawings, nineteenth and early twentieth century draftsman conventions, Official Gazette engravings", + "tags": [ + "leader-lines", + "figure-numbers", + "ruled-sheet" + ], + "system": [ + "Palette/material: india ink line on white bond inside a single ruled border, section hatching as the only fill, one carmine annotation ink reserved for what is under examination", + "Type/composition: Fig. numerals in open serif caps head each view, reference numerals hang at leader-line ends, the invention title runs along the sheet head in spaced caps", + "Topology/navigation: figures are views of one invention; you move between elevation, section, and detail, and every part numeral links to its line in the specification", + "Controls/state: selecting a numeral pulls its leader taut and thickens that part's outline, assembled and exploded are two states of one figure, granted sheets carry the dated seal", + "Responsive/motion: sheets stack figure by figure on small screens with leaders redrawn to fit; motion is the explode and reassemble along dashed axis lines" + ], + "spark": "You unroll the sheet and Fig. 2 blooms into an exploded view, forty parts hanging on invisible threads, numeral 23 arcing on a curved leader to the one washer the whole claim depends on.", + "webLeverage": "svg leader lines and hatch patterns redraw responsively while an animated transform explodes assemblies along their axes", + "strength": "dual" + } + ] + }, + { + "id": "maps-journeys", + "label": "Maps & Journeys", + "well": "graphic-systems", + "description": "Maps, routes, signs, transit, trails, landmarks, orientation, and the visual drama of finding a way through a world.", + "concepts": [ + { + "id": "wayfinding-cartography-signage-emergency-light-braid", + "form": "an emergency light braid, photoluminescent floor strips, handrail light pulses, iso green exit pictograms, and door-frame edge glow braided into redundant visual paths to safety", + "lineage": "Photoluminescent egress marking, ISO 7010 safety signage, aircraft floor-path lighting, high-rise evacuation systems", + "tags": [ + "photoluminescent", + "egress-braid", + "redundant-paths" + ], + "system": [ + "Palette/material: phosphor green glow on matte black ground, iso safety green panels with white pictogram figures, amber pulse reserved for the live direction", + "Type/composition: white iso pictograms and arrows inside solid green panels, almost no prose, hierarchy spoken by glow intensity and panel size", + "Topology/navigation: floor strip, handrail pulse, and door glyph braid as redundant paths to each exit, agreeing at every junction so losing one never strands you", + "Controls/state: a closed passage's floor strip goes dark and the braid rethreads around it, the live route pulses toward safety, refuges hold a steady green frame", + "Responsive/motion: small screens show one glowing next instruction with the braid as a thin strip above; pulses travel exit-ward at safe rates" + ], + "spark": "Smoke swallows the ceiling signs, but a cool green line wakes along the floor edge, a pulse of light runs the handrail toward the stair, and a white running figure glows in its green door frame.", + "webLeverage": "CSS keyframe pulses travel exit-ward along SVG path strips, and prefers-reduced-motion swaps travel for steady glow.", + "strength": "world" + }, + { + "id": "wayfinding-cartography-signage-karakoram-raised-relief-map", + "form": "a wall-sized raised-relief map of the Karakoram at winter dawn, where knife-edged ridges cast true shadows, glacier tongues pool pale blue, river gorges cut toward the viewer, and a few high passes stitch isolated valleys together", + "lineage": "Karakoram topographic survey, raised-relief cartography, alpine route mapping, shaded terrain rendering, and glacier field observation", + "tags": [ + "raised-relief", + "watershed-spine", + "high-pass" + ], + "system": [ + "Palette/material: winter dawn palette, slate rock and snow-white relief as ground, glacier tongues in pale blue, one climbing-rope red reserved for the traced route", + "Type/composition: engraved-map capitals letterspaced along ridgelines, small italic for valleys and glaciers, labels bending to terrain rather than to a grid", + "Topology/navigation: Move through range, watershed spine, basin, glacier, approach valley, pass, summit, and the route connections hidden by relief.", + "Controls/state: Tilt light, trace route, section terrain, and compare with open, exposed, glaciated, shadowed, blocked, and alternate states.", + "Responsive/motion: Synchronize plan, ridge profile, and horizon view on small screens instead of flattening the mountain into one scrolling image." + ], + "spark": "Light skims from the east and K2 throws a long blue shadow across the model; one red route disappears behind a ridge, returns at a pass, and drops toward a glacier far below.", + "webLeverage": "Linked plan, section, and horizon views keep the same route position synchronized; live weather and snow conditions update only affected crossings and remain available offline.", + "strength": "composition" + }, + { + "id": "wayfinding-cartography-signage-midnight-transit-diagram", + "form": "a metropolitan rail map fired as a midnight-blue enamel mural, where scarlet, cobalt, amber, and green lines bend at disciplined angles, interchange circles bloom at crossings, and the entire city becomes a legible promise of movement", + "lineage": "Harry Beck's diagrammatic Underground map, Tokyo Metro wayfinding, Mexico City Metro iconography, and international transit information design", + "tags": [ + "transit-lines", + "interchange", + "diagrammatic-city" + ], + "system": [ + "Palette/material: midnight-blue enamel ground with porcelain white station ticks, scarlet, cobalt, amber, and green line inks, the chosen line burning brightest", + "Type/composition: humanist transit sans in fixed-size station labels, lines bending only at 45 and 90 degrees, the diagram's discipline is the composition", + "Topology/navigation: Organize movement by line, station order, branch, interchange, fare boundary, and destination rather than literal geographic distance.", + "Controls/state: Trace, transfer, reverse, reroute, and compare journeys with open, arriving, delayed, suspended, crowded, and accessible states.", + "Responsive/motion: Focus the chosen corridor while preserving transfer context; never shrink the whole network into an unreadable miniature." + ], + "spark": "Under the station's white light, four colored lines meet in one porcelain interchange; a fingertip follows the scarlet route outward until the dense center opens toward the river.", + "webLeverage": "Live service state can recompute only affected routes and transfer promises, while deep-linked itineraries, native search, and offline caching preserve a usable journey beyond the mural.", + "strength": "dual" + }, + { + "id": "wayfinding-cartography-signage-night-market-sign-river", + "form": "a night-market sign river, where lantern color, stall awnings, steam, handwritten boards, and sound lead visitors through a temporary street", + "lineage": "Night-market lantern codes, hand-painted shop signs, and temporary street wayfinding.", + "tags": [ + "night-market", + "lantern", + "temporary-city" + ], + "system": [ + "Palette/material: saffron lantern glow over wet asphalt black, blue awning and red banner inks, steam white as soft divider, lantern gold marking the open stall", + "Type/composition: hand-painted brush characters beside marker-on-cardboard prices, each stall's sign its own voice, the river of lanterns the only shared order", + "Topology/navigation: Follow temporary sign families through food, craft, performance, rest, and exit districts.", + "Controls/state: Choose interests, reveal crowd-friendly alternatives, and save a stall by its visual landmark.", + "Responsive/motion: Keep the nearest sign and district edge dominant on phones while retaining a simple escape route." + ], + "spark": "A river of saffron lanterns bends past blue fish awnings, disappears in dumpling steam, and resurfaces as hand-painted arrows toward a midnight music court.", + "webLeverage": "Live vendor openings, short-range location, and offline visual landmark cards adapt to a market that changes nightly.", + "strength": "world" + }, + { + "id": "wayfinding-cartography-signage-salt-stiffened-treasure-map", + "form": "an old treasure map on salt-stiffened vellum, where a compass rose, missing corner, tide marks, coded marginalia, false trails, and a hand-drawn coastline turn navigation into inference", + "lineage": "Portolan charts, manuscript cartography, maritime wayfinding, engraved adventure maps, material archives, and puzzle-box clue design", + "tags": [ + "treasure-map", + "material-clues", + "uncertain-route" + ], + "system": [ + "Palette/material: salt-stiffened vellum tan with iron-gall sepia ink, tide-stain gray blooms, one faded red route rising under oblique light as the active trail", + "Type/composition: cramped manuscript hand with a flourished compass rose, coded marginalia crowding the edges, the coastline drawn first and words fit after", + "Topology/navigation: Move from map edge to landmark, bearing, marginal clue, damaged gap, candidate route, hidden harbor, and final cache hypothesis.", + "Controls/state: Rotate, measure, reveal, annotate, combine clues, and compare sealed, weathered, suspected, disproved, aligned, and solved states.", + "Responsive/motion: Center one clue chain on phones while preserving the whole parchment as context" + ], + "spark": "Oblique light raises a nearly erased red route beneath the ink; the torn corner aligns with a crescent island, and a tide stain suddenly becomes the boundary of a hidden harbor.", + "webLeverage": "Deep image zoom, oblique-light layers, URL-addressable annotations, collaborative hypothesis history, and accessible transcription let groups solve the artifact while every inference retains provenance.", + "strength": "dual" + }, + { + "id": "wayfinding-cartography-signage-tidal-harbor-compass", + "form": "a tidal harbor compass, where routes appear through depth, current, wind, and the changing reach of shore", + "lineage": "Pilot charts, tide tables, harbor buoyage, and coastal wayfinding.", + "tags": [ + "harbor", + "tide", + "orientation" + ], + "system": [ + "Palette/material: chart-paper bone ground, navigable depth in banded blues shading to mudflat khaki, buoy red and green reserved for the live channel edges", + "Type/composition: chart capitals letterspaced along the coast, italic place names, soundings as scattered small numerals in the shallows, north held by the rose", + "Topology/navigation: Orient by navigable depth bands, moving shoreline, landmarks, and time-to-tide.", + "Controls/state: Set vessel or walking limits, scrub the tide, and compare alternate passages.", + "Responsive/motion: Center the next tidal decision on phones and preserve a north-up overview one gesture away." + ], + "spark": "At dawn a safe blue channel threads between mudflats; by afternoon it widens around a red buoy while an island footpath vanishes beneath mirrored water.", + "webLeverage": "Tide and weather feeds combine with offline vector charts and device heading for time-aware routes with explicit uncertainty.", + "strength": "composition" + }, + { + "id": "wayfinding-cartography-signage-terminal-yellow-wayfinding", + "form": "an international airport sign system, saturated yellow panels hung as framed overhead bands, black humanist sans beside white pictograms, arrows placed by strict edge rules, gate numbers at monumental scale down the concourse", + "lineage": "Paul Mijksenaar's Schiphol signage, Adrian Frutiger at Roissy, AIGA DOT pictograms", + "tags": [ + "sign-bands", + "decision-points", + "pictogram" + ], + "system": [ + "Palette/material: saturated schiphol yellow panel ground with black type, white pictograms on black inset squares, yellow reserved for wayfinding and nothing else", + "Type/composition: frutiger-cut humanist sans in sentence case, one message per band line, arrows locked to the panel edge they point past, gate numbers monumental", + "Topology/navigation: a chain of decision points, each junction shows only the choices ahead with distances in minutes, and every path re-signs itself after each turn", + "Controls/state: the followed destination stays highlighted band to band, a gate change repaints the arrow instantly, closed routes drop off the panel entirely", + "Responsive/motion: small screens collapse to the single next decision with the gate number monumental; motion is a split-flap band update" + ], + "spark": "Off the jet bridge with nine minutes to make the connection, one yellow band hangs at the corridor junction, black letters and a running-figure pictogram agreeing: gates D1-D57, left, twelve minutes' walk.", + "webLeverage": "Sticky positioned sign bands persist while corridors scroll past, and view transitions swap panel messages at each decision point.", + "strength": "dual" + }, + { + "id": "maps-journeys-sanborn-insurance-plat", + "form": "a sanborn fire insurance plat, city blocks footprinted in construction-coded color, pink for brick and yellow for frame, street names in spaced caps along their rights of way, numbered sheets keyed to an index, corrections pasted over the past", + "lineage": "Sanborn Map Company fire insurance atlases, 1880s to 1950s survey drafting and paste-slip revision practice", + "tags": [ + "coded-footprints", + "indexed-sheets", + "paste-revisions" + ], + "system": [ + "Palette/material: rose-pink brick, straw-yellow frame, and slate-blue stone footprints on plat cream, olive detail inks, carmine circled numerals as the working accent", + "Type/composition: street names in spaced caps run along their streets, sheet and block numerals sit in circles, tiny upright gothic notes annotate each footprint", + "Topology/navigation: an index sheet keys the territory; each numbered sheet holds a few blocks, edge arrows hand off to adjacent sheets, and footprints open into their records", + "Controls/state: a revised parcel wears a pasted correction slip one shade brighter than its sheet, hazard codes letter the risky, and the chosen footprint saturates alone", + "Responsive/motion: small screens serve one block per view with the index a tap away; motion is the paste slip settling over the old footprint" + ], + "spark": "In the atlas the whole burned district survives as pink and yellow footprints, and where the opera house came down someone has pasted a fresh slip, one shade brighter, over the building the fire took.", + "webLeverage": "svg footprint layers color by data attribute and a searchparams-addressed index deep-links any sheet and block", + "strength": "dual" + } + ] + }, + { + "id": "design-canon", + "label": "The Graphic Canon", + "well": "canon-movements", + "description": "Design movements inhabited as worlds: métro entrances, workshops, showrooms, and lobbies that carry a movement's geometry, ornament logic, palette, and conviction.", + "concepts": [ + { + "id": "design-canon-art-nouveau-metro-threshold", + "form": "a cast-iron Art Nouveau métro entrance at dusk, where whiplash tendrils, amber glass, and organic lettering grow a threshold out of the street", + "lineage": "Hector Guimard's Paris Métro édicules, Horta interiors, and the 1900 Art Nouveau movement's botanical structural ornament", + "tags": [ + "whiplash-curve", + "threshold", + "ornament-as-structure" + ], + "system": [ + "Palette/material: guimard-green cast iron on wet asphalt gray ground, cream enamel plaques carrying body ink, amber opaline glass as the active glow", + "Type/composition: hand-drawn whiplash letterforms whose strokes bud into tendrils, headlines arched over each threshold, body copy held in narrow botanical frames", + "Topology/navigation: descend through a single ornamented threshold into branching stem-and-tendril routes.", + "Controls/state: controls bud from structural stems; hover swells a tendril, selection blooms it into an amber lamp.", + "Responsive/motion: tendrils simplify to a single stem on phones; growth eases organically and settles without looping." + ], + "spark": "Iron stems rise from the pavement, curl into amber lamps, and spell the entrance name in letters that grew rather than were set.", + "webLeverage": "SVG path-drawn tendrils animate growth along vectors while remaining crisp, addressable DOM at every zoom.", + "strength": "world" + }, + { + "id": "design-canon-bauhaus-foundation-workshop", + "form": "a Bauhaus foundation-course workshop, where primary circles, squares, and triangles in red, yellow, and blue are tested as material exercises on white tables", + "lineage": "Weimar and Dessau Bauhaus Vorkurs pedagogy, Itten and Moholy-Nagy material studies, Kandinsky's point-line-plane", + "tags": [ + "primary-geometry", + "material-exercise", + "balance" + ], + "system": [ + "Palette/material: worktable-white ground with near-black ink, primaries rationed by role, red circle for the active state, blue square for structure, yellow triangle for alerts", + "Type/composition: bayer-style single-case geometric sans, lowercase headlines, composition ruled by point, line, and plane against a visible baseline grid", + "Topology/navigation: navigate by exercise; each section is one compositional problem solved with primary forms.", + "Controls/state: drag geometric elements against a visible baseline grid; state reads as balance, tension, or rest.", + "Responsive/motion: compositions rebalance rather than shrink; motion is a straight-line translation with honest easing." + ], + "spark": "On a white worktable, a red circle, yellow triangle, and blue square wait like instruments; every arrangement is an argument about balance.", + "webLeverage": "CSS grid and transforms make the composition itself the interactive canvas, with drag-and-drop arrangement.", + "strength": "world" + }, + { + "id": "design-canon-braun-calibration-bench", + "form": "an ulm school test bench for braun radios, where the sk4's clear acrylic hood, ordered dials, and gray-white housing are checked against ruled tolerances", + "lineage": "Hochschule für Gestaltung Ulm, Dieter Rams and Hans Gugelot's Braun SK4, Otl Aicher's grid systems", + "tags": [ + "tolerance-grid", + "instrument-restraint", + "one-accent-rule" + ], + "system": [ + "Palette/material: sk4 gray-white housing as ground, graphite dial markings as body ink, the single green control lamp reserved for the live setting", + "Type/composition: small lowercase akzidenz-grotesk labels set flush to hairline rules, spacing stepped in millimeter increments, numerals the only emphasis allowed", + "Topology/navigation: every function sits in one ruled fascia row; nothing hides, and hierarchy comes from spacing intervals measured in millimeters", + "Controls/state: dials and sliders show their value by physical position alone; the single permitted accent color marks only the live setting", + "Responsive/motion: the fascia re-spaces on a strict modular scale per viewport; motion is damped mechanical settling" + ], + "spark": "Under a clear acrylic hood a pale gray radio waits on the ruled bench while a hand in a cotton glove nudges one green dial exactly the width of a hair.", + "webLeverage": "CSS custom properties drive a millimeter-true spacing scale while pointer events give every dial damped direct manipulation", + "strength": "dual" + }, + { + "id": "design-canon-brutalist-conservatory-terrace", + "form": "a brutalist conservatory terrace, where raw board-marked concrete holds tropical greenery, ribbed towers, and lake light in one massive calm", + "lineage": "The Barbican Estate and conservatory, Chamberlin Powell and Bon, béton brut and megastructure planning", + "tags": [ + "mass", + "board-marked-texture", + "green-against-gray" + ], + "system": [ + "Palette/material: board-marked concrete gray as ground, lake-light off-white as body ink, fern and monstera green reserved for live and growing content", + "Type/composition: heavy cast-in sans capitals like formwork signage, letters inset flush into the mass, layout in wide structural bays divided by rib-thick rules", + "Topology/navigation: heavy fixed masses frame the routes; wayfinding is cast into the structure as inset signage.", + "Controls/state: controls are recessed into surfaces like switch plates; states change light within the recess, never float.", + "Responsive/motion: masses never animate; only light, plants, and people move, and small screens get deeper single columns." + ], + "spark": "Concrete ribs vault overhead, ferns spill through the grid, and the weight of the place makes the quiet feel earned.", + "webLeverage": "Texture-true concrete surfaces from generative noise, with layout masses that resist scroll like real weight.", + "strength": "world" + }, + { + "id": "design-canon-constructivist-agit-train", + "form": "a Constructivist agit-train stopped at a village platform, where diagonal red wedges, stencil type, and photomontage turn railcars into moving broadsides", + "lineage": "Soviet agit-prop trains, El Lissitzky wedge posters, Rodchenko photomontage and diagonal composition", + "tags": [ + "diagonal-drive", + "photomontage", + "broadside" + ], + "system": [ + "Palette/material: unbleached newsprint cream ground, soot-black stencil ink for body, revolutionary red rationed to the wedge that drives the action", + "Type/composition: stenciled wood-type caps and heavy numerals angled with the line of travel, photomontage fragments locked into the wedge's thrust, slogans banding each car", + "Topology/navigation: content advances car by car along one strong diagonal axis of travel.", + "Controls/state: calls to action are wedges that physically enter the composition; pressed states drive deeper.", + "Responsive/motion: diagonals steepen on tall screens and relax on wide; scroll advances the train" + ], + "spark": "A red wedge drives across a railcar; stenciled slogans and pasted photographs angle forward as if the train were still moving.", + "webLeverage": "Scroll-driven horizontal travel with clip-path wedges keeps the diagonal grammar live in the browser.", + "strength": "world" + }, + { + "id": "design-canon-deco-cinema-lobby", + "form": "an Art Deco cinema lobby at premiere hour, where stepped brass zigzags, sunburst marquees, and lacquered geometry frame velvet-roped anticipation", + "lineage": "1920s-30s picture palaces, Chrysler Building metalwork, streamline moderne signage and fan motifs", + "tags": [ + "stepped-form", + "sunburst", + "gilded-frame" + ], + "system": [ + "Palette/material: lacquered ebony ground, champagne and brass gold for frames and body accents, velvet-rope crimson marking the primary action", + "Type/composition: high-waisted deco capitals with inline strokes climbing stepped marquee tiers, layouts mirrored about a center axis, sunburst rules fanning the headings", + "Topology/navigation: arrival is staged as marquee, lobby, corridor, house; each threshold steps the geometry tighter.", + "Controls/state: primary actions get the sunburst frame; secondary actions recede into fluted panels.", + "Responsive/motion: stepped forms collapse tier by tier on small screens; light sweeps travel metal only on capable devices." + ], + "spark": "Brass sunbursts fan over the doors, letters climb in stepped tiers, and every surface promises the feature has not started yet.", + "webLeverage": "Gradient-mapped metallic surfaces and staged route transitions give each threshold a real arrival state.", + "strength": "world" + }, + { + "id": "design-canon-factory-silkscreen-loft", + "form": "a silver-foiled loft where celebrity portraits are silkscreened in off-register repeats, drying racks turning one image into thirty deliberate variations", + "lineage": "Andy Warhol's 47th Street Factory, Billy Name's silver foil, silkscreen editioning, Interview magazine", + "tags": [ + "serial-repetition", + "off-register", + "editioned-multiple" + ], + "system": [ + "Palette/material: silver-foil ground, one dense black halftone pass as body ink, fluorescent pink and marigold pulled per edition to mark the active print", + "Type/composition: headline caps silkscreened slightly off register, halftone dots visible at reading distance, the layout a drying rack of equal repeated frames", + "Topology/navigation: content presents as editioned repeats on a rack grid; you browse variations of one subject rather than single views of many", + "Controls/state: each action pulls a fresh print; states appear as ink shifts, misregistration, and color swaps across otherwise identical frames", + "Responsive/motion: the edition grid reflows from thirty-up sheets to single pulls on small screens; motion is the squeegee wipe" + ], + "spark": "Under tinfoil ceilings and one bare red bulb, the same famous face dries thirty times on a rope line, each copy wrong in a slightly more beautiful way.", + "webLeverage": "canvas filters and CSS blend modes generate off-register color separations procedurally, so every repeat is a genuine variant", + "strength": "dual" + }, + { + "id": "design-canon-futurist-bolted-book", + "form": "a machine-bound futurist book fastened with two aluminum bolts, its pages of diagonal wood type and onomatopoeic blasts meant to be read at engine speed", + "lineage": "Fortunato Depero's Depero Futurista 1927, Marinetti's parole in libertà, Casa d'Arte Futurista Rovereto", + "tags": [ + "kinetic-typography", + "machine-binding", + "diagonal-force" + ], + "system": [ + "Palette/material: unvarnished cream stock as ground, machine-black wood-type ink for body, one mechanical red for the word under pressure, aluminum bolt heads always visible", + "Type/composition: mixed wood-type sizes in one shout, words set 15 to 45 degrees off horizontal, onomatopoeia scaled by loudness, no two spreads composed alike", + "Topology/navigation: pages hinge on two visible bolts; every spread is a fresh typographic collision angled 15 to 45 degrees off horizontal", + "Controls/state: words themselves are the levers, set in wood-type weights; a pressed word slams larger inside a printed shockwave ring", + "Responsive/motion: narrow viewports rotate compositions toward vertical thrust; motion is percussive page-slams" + ], + "spark": "A book fastened with industrial bolts refuses to lie quietly on the table, every page shouting ZANG TUMB in wood type that leans into the turn like a racing chassis.", + "webLeverage": "variable-font weight animation and CSS transforms let letterforms accelerate, tilt, and slam with true kinetic timing", + "strength": "dual" + }, + { + "id": "design-canon-googie-starburst-diner", + "form": "a Googie roadside diner under a starburst sign, where boomerang counters, cantilevered roofs, and atomic orbits sell coffee as the space age", + "lineage": "Southern California Googie architecture, Armet & Davis coffee shops, atomic-age signage and boomerang laminate", + "tags": [ + "starburst", + "cantilever", + "atomic-orbit" + ], + "system": [ + "Palette/material: turquoise and coral counter laminate over chrome trim, charcoal boomerang speckle as texture, neon starburst white saved for the active state", + "Type/composition: exclamatory script for feature names over slab caps for the menu board, baselines allowed to tilt with the cantilever, prices set inside atomic starbursts", + "Topology/navigation: one swooping cantilever line carries the eye from sign to counter to booth; sections hang off it.", + "Controls/state: interactive elements orbit on atomic paths; active states snap into the starburst.", + "Responsive/motion: the swoop becomes a vertical spine on phones; orbits become static constellations under" + ], + "spark": "The roofline launches upward, the sign spins a neon starburst, and even the laminate counter orbits with boomerangs: the future, served all night.", + "webLeverage": "CSS offset-path orbits and animated neon SVG strokes run the sign's physics natively in the browser.", + "strength": "world" + }, + { + "id": "design-canon-hoffmann-gridsmith-showroom", + "form": "a wiener werkstätte metalwork showroom, where hammered silver baskets punched with perfect square holes stack luxury into strict black-and-white lattices", + "lineage": "Josef Hoffmann's Quadratlstil, Wiener Werkstätte metal shop, Ver Sacrum page borders, Palais Stoclet detailing", + "tags": [ + "punched-grid", + "monochrome-luxury", + "ornament-as-structure" + ], + "system": [ + "Palette/material: gallery-white ground ruled in lacquer black, hammered-silver sheen on frames and edges, the active cell filled solid black within its pierced row", + "Type/composition: ver sacrum roman capitals letterspaced inside ruled cartouches, square-unit borders framing every text block, symmetry held strictly to the lattice", + "Topology/navigation: content sits inside square-punched lattice frames; sections are nested caskets that open along strict orthogonal seams", + "Controls/state: every control is one square cell in a hammered border; active fills the cell solid black, idle leaves it pierced open", + "Responsive/motion: the lattice re-counts its squares per viewport but never stretches one; motion is a slow silver glint" + ], + "spark": "In a showroom off the Ringstrasse, silver baskets pierced with rows of perfect square holes catch the gaslight, and the walls themselves look drawn with a ruler dipped in black lacquer.", + "webLeverage": "CSS grid with aspect-ratio-locked square cells and SVG lattice masks keep the punched geometry exact at every viewport", + "strength": "world" + }, + { + "id": "design-canon-liquid-light-ballroom", + "form": "a psychedelic liquid-light show in a ballroom, where oil-and-dye projections breathe behind hand-lettered posters that melt legibility to its edge", + "lineage": "1966-69 Fillmore and Avalon poster art, Wes Wilson lettering, overhead liquid-light projection collectives", + "tags": [ + "liquid-projection", + "melted-letterform", + "pulse" + ], + "system": [ + "Palette/material: magenta, oil-orange, and acid-green dye blooms on a black ballroom ground, the brightest bloom backing the current section's cream-white text", + "Type/composition: wilson-style melted lettering filling every gap of its frame, lines swelling to the poster's edge, hierarchy read as heat rather than size", + "Topology/navigation: content floats on a breathing projection field; the current section holds the brightest bloom.", + "Controls/state: type warps toward the edge of legibility on idle and straightens instantly under pointer or focus.", + "Responsive/motion: blooms slow and shrink on small screens" + ], + "spark": "Colored oil blooms and collapses across the wall in rhythm; the headline bends like heat but you can still read the night's bill.", + "webLeverage": "WebGL fluid simulation drives the projection while real HTML text stays selectable and accessible above it.", + "strength": "dual" + }, + { + "id": "design-canon-memphis-showroom-morning", + "form": "a Memphis Milano showroom morning, where terrazzo speckle, squiggle laminate, and clashing candy geometry make the furniture argue cheerfully", + "lineage": "Ettore Sottsass and the 1981 Memphis group, Bacterio print laminates, postmodern Italian furniture", + "tags": [ + "cheerful-clash", + "speckle", + "toy-geometry" + ], + "system": [ + "Palette/material: pink arguing with mint over bacterio-speckled cream laminate ground, black squiggle print as texture, one candy yellow reserved for the pressed control", + "Type/composition: chunky geometric display faces set at play angles, each block its own shape and pattern fill, alignment loose but every clash choreographed", + "Topology/navigation: sections are objects in a showroom, each with its own playful geometry inside one shared floor.", + "Controls/state: every control is a distinct toy-like shape; states change pattern fill, never just tint.", + "Responsive/motion: objects reflow like rearranged furniture; motion is springy but short, and pattern stays legible at density." + ], + "spark": "A shelf leans like a question, the laminate crawls with black squiggles, and pink argues with mint until the argument becomes the room.", + "webLeverage": "Procedural pattern fills generated per element keep speckle and squiggle unique at every viewport.", + "strength": "world" + }, + { + "id": "design-canon-morris-pattern-drawing-room", + "form": "a William Morris pattern drawing room, where willow boughs and pomegranates repeat across wallpaper, textile, and binding as one hand-drawn ecosystem", + "lineage": "Morris & Co. wallpapers and chintzes, the Arts and Crafts movement, Kelmscott Press ornament", + "tags": [ + "repeat-unit", + "botanical-interlace", + "handcraft" + ], + "system": [ + "Palette/material: indigo and willow-green pattern grounds with madder-red fruit accents, unbleached linen cream panels carrying dark sepia body ink", + "Type/composition: kelmscott-weight blackletter-toned type with drawn initials, text in cleared panels bordered by the repeat, ornament and column cut from one cloth", + "Topology/navigation: one master repeat unit generates borders, dividers, and frames; sections are cuts of the same cloth.", + "Controls/state: interactive elements sit in cleared medallions inside the pattern; hover lets the surrounding vines lean in.", + "Responsive/motion: the repeat rescales by density tier; growth animation traces stems once on entry and rests." + ], + "spark": "The same willow stem returns on wall, curtain, and book edge, each repeat hand-drawn enough that the room feels grown, not printed.", + "webLeverage": "SVG pattern tiles recolor and rescale from computed theme values, keeping ornament crisp and themable in the DOM.", + "strength": "world" + }, + { + "id": "design-canon-nasa-worm-standards-room", + "form": "the paste-up room of a federal graphics standards program, worm logotype spec sheets, futura headline strips, and red one-color decals bound for launch hardware", + "lineage": "Danne and Blackburn's 1976 NASA Graphics Standards Manual, Apollo hardware stenciling, the Federal Design Improvement Program", + "tags": [ + "spec-sheet-law", + "reduction-test", + "stencil-utility" + ], + "system": [ + "Palette/material: spec-sheet white ground, photographic hardware gray for supporting matter, the worm's one-color red pass reserved for identity and flagged violations", + "Type/composition: futura and helvetica headline strips beside the worm logotype on a numbered page grid, dimension callouts in the margins, correct use set beside forbidden", + "Topology/navigation: everything is a numbered spec page reached by document code; each page shows correct use beside forbidden use", + "Controls/state: elements carry clearspace and minimum-size rules as visible measurement callouts; violations flag in the manual's alarm red", + "Responsive/motion: every layout passes a reduction test, legible at decal size before poster size; motion is a drafting slide of dimension lines" + ], + "spark": "Under fluorescent light a technician burnishes a red logotype onto its grid sheet while, pinned above the desk, the same mark rides the white flank of a rocket.", + "webLeverage": "computed-style measurement overlays drawn in SVG expose live clearspace math on every element", + "strength": "composition" + }, + { + "id": "design-canon-piazza-italia-colonnade", + "form": "a postmodern piazza staged as stacked classical orders, stainless-steel columns and scarlet stucco arcs traced at night in blue and red neon", + "lineage": "Charles Moore's Piazza d'Italia New Orleans 1978, Venturi's decorated shed, postmodern classicism", + "tags": [ + "ironic-order", + "neon-classicism", + "stage-set-depth" + ], + "system": [ + "Palette/material: night-sky black ground, scarlet stucco and stainless-steel panels as surfaces, blue and red neon tube light tracing whichever order is active", + "Type/composition: inscribed roman capitals running the entablature with neon-outline serifs, text arcs following the colonnade's curve, classical proportion quoted with a wink", + "Topology/navigation: concentric colonnade arcs frame one central destination; each ring quotes a different classical order at a different pitch of seriousness", + "Controls/state: capitals and arches are the controls; an active element lights its neon outline, quotation marks drawn around every action", + "Responsive/motion: the arcs flatten into a proscenium strip on small screens; motion is theatrical reveal ring by ring" + ], + "spark": "A roman colonnade rises out of a parking lot in stainless steel and scarlet stucco, and when night falls the cornices switch on in blue neon like ruins that learned to wink.", + "webLeverage": "layered CSS 3d transforms give the stage-set arcs real parallax depth as the visitor moves through the rings", + "strength": "world" + }, + { + "id": "design-canon-punk-pasteup-table", + "form": "a photocopied punk zine spread pinned above the paste-up table, ransom-note headlines torn from three newspapers, halftone scraps and biro scrawl columns gone gritty through xerox generations", + "lineage": "Jamie Reid's ransom lettering, Sniffin' Glue and Mark Perry's photocopy runs, 1977 DIY punk press", + "tags": [ + "ransom-collage", + "xerox-degradation", + "torn-edge" + ], + "system": [ + "Palette/material: xerox toner black on cheap white copy paper ground, roller streaks and gray banding as texture, one day-glo flyer pink reserved for the action", + "Type/composition: ransom capitals cut letter by letter from mismatched papers for headlines, typewriter body columns glued down crooked, biro corrections in the margins", + "Topology/navigation: sections are stapled sheets in reading order; hierarchy is whatever got cut out biggest and glued down most crooked", + "Controls/state: controls are torn paper scraps; pressing one re-photocopies it a generation darker, grittier, and more smeared", + "Responsive/motion: columns re-paste at torn-edge breakpoints, never smooth reflow; motion is an abrupt slap-down placement" + ], + "spark": "You pull tonight's flyer off the stack still warm from the copier, the headline cut from three different papers, the band photo two generations past legible, the gig details scrawled in biro down a crooked column.", + "webLeverage": "clip-path torn edges and SVG filter grain reproduce photocopier degradation live in the DOM, one generation per interaction", + "strength": "world" + }, + { + "id": "design-canon-raygun-layout-desk", + "form": "the layout desk of a surf-culture music magazine, columns colliding mid-sentence, an interview set entirely in dingbats, page numbers lost on purpose", + "lineage": "David Carson's Ray Gun 1992-96, Beach Culture, The End of Print, surf-punk photography", + "tags": [ + "legibility-as-choice", + "collision-layout", + "expressive-noise" + ], + "system": [ + "Palette/material: surf-photo bleach tones on uncoated stock ground, dense overprinted black type as body ink, one clashing spot color per spread's loudest fragment", + "Type/composition: template gothic and battered grotesks at colliding sizes, columns crashing mid-sentence, type printed straight through the photograph when it earns it", + "Topology/navigation: reading order is earned, not given; the eye enters through the loudest fragment and assembles the page the way you hear a song", + "Controls/state: emphasis overprints, masks, and shears the type itself; the more urgent the content, the further the grid is allowed to break", + "Responsive/motion: fragments recompose per viewport into fresh collisions, never a tidy fallback; motion is print-registration slippage" + ], + "spark": "Somewhere beneath three overlapping headlines and a photograph printed straight through the text is an article that swears you will feel it before you can read it.", + "webLeverage": "CSS mix-blend-mode overprints and layered grid areas let type collide while staying selectable, real text under the wreckage", + "strength": "dual" + }, + { + "id": "design-canon-rietveld-sliding-house", + "form": "the Rietveld Schröder house at midday, where sliding primary-color planes reconfigure one small room into many, and every joint stays visibly honest", + "lineage": "Gerrit Rietveld's 1924 Schröder House, De Stijl planes and primaries, Mondrian's asymmetric balance", + "tags": [ + "sliding-plane", + "primary-accent", + "reconfigure" + ], + "system": [ + "Palette/material: white and gray planes as ground, black frame lines as structural ink, red, yellow, and blue rationed to the sliding edges that actually move", + "Type/composition: lowercase geometric sans set flush to plane edges, text blocks treated as rectangles in the composition, asymmetric balance ruled by primary-color joints", + "Topology/navigation: one continuous space partitioned by sliding planes; routes are plane positions, not pages.", + "Controls/state: panels physically slide to reveal or combine sections; color marks the moving edge, gray holds the frame.", + "Responsive/motion: planes become stacked sliding sheets on phones; every slide is reversible and announced." + ], + "spark": "A red plane slides, a yellow edge appears, and the living room becomes two bedrooms: the house is a composition you operate.", + "webLeverage": "The View Transitions API and CSS plane slides make layout reconfiguration itself the navigation model.", + "strength": "dual" + }, + { + "id": "design-canon-riley-moire-gallery", + "form": "a white gallery hung with black-and-white wave canvases, flat paint that flexes and strobes as visitors change their viewing distance", + "lineage": "Bridget Riley's Movement in Squares and Current, The Responsive Eye at MoMA 1965", + "tags": [ + "optical-flex", + "distance-dependent", + "monochrome-wave" + ], + "system": [ + "Palette/material: flat matte black and gallery white only, no mixed grays, contrast generated optically by line frequency, the tightest interval acting as the accent", + "Type/composition: a sparse neutral grotesk held clear of the waves in white margins, one caption per canvas, the composition itself a ruled monochrome field", + "Topology/navigation: the room is a sequence of vantage distances; each canvas holds a near, mid, and far reading and rewards deliberate approach", + "Controls/state: state rides the pattern itself; line frequency tightens toward points that want attention and relaxes wherever nothing is asked", + "Responsive/motion: wave frequency recalculates against device pixel density so the shimmer survives every screen" + ], + "spark": "The paintings hold perfectly still and yet the floor seems to tip, black lines swelling like a sea you can hear somewhere behind your own eyes.", + "webLeverage": "SVG patterns modulated by scroll position and IntersectionObserver let a flat page flex as if the retina were being played", + "strength": "dual" + }, + { + "id": "design-canon-shaker-meeting-room", + "form": "a shaker meetinghouse room, plank floor swept bare, a peg rail circling the walls with every chair and tool hung in its ordained place", + "lineage": "Hancock and Pleasant Hill Shaker villages, the Millennial Laws, ladder-back chairs, gift drawings", + "tags": [ + "peg-rail-order", + "emptied-center", + "use-earns-place" + ], + "system": [ + "Palette/material: scrubbed pine plank and whitewashed plaster ground, shaker-blue rail line as structure, deep walnut ink for body, oxblood red on the one tool in use", + "Type/composition: plain-spoken roman labels lettered small and centered, one name per peg, the layout an emptied field ringed by a single ruled rail line", + "Topology/navigation: the center stays empty for the task at hand; everything else hangs on a perimeter rail at one fixed, ordained height", + "Controls/state: tools come off the rail into use and return to their peg; an occupied peg means rest, an empty peg means work in progress", + "Responsive/motion: the rail wraps to as many walls as the viewport allows with order preserved; motion is a quiet lift and re-hang" + ], + "spark": "Morning light crosses a scrubbed plank floor to a wall of wooden pegs where the chairs themselves hang, waiting in a silence that feels built by hand.", + "webLeverage": "drag and drop between rail and floor via the HTML drag API makes taking a tool down and hanging it back the entire interaction model", + "strength": "composition" + }, + { + "id": "design-canon-streamliner-observation-lounge", + "form": "the observation lounge of a 1930s streamlined ocean liner, chrome speed lines wrapping lacquered cork walls, portholes in rhythm, furniture bolted against the swell", + "lineage": "SS Normandie first-class interiors, Raymond Loewy and Norman Bel Geddes streamlining, the Burlington Zephyr observation car", + "tags": [ + "speed-line-wrap", + "rounded-prow", + "bolted-luxury" + ], + "system": [ + "Palette/material: lacquered cork tan and chrome speed lines over deep-hull navy ground, ivory body ink, engine-telegraph amber glowing behind the engaged control", + "Type/composition: streamline sans caps with speed-line extenders, letterspaced headings banding bow to stern, three parallel rules carrying every title forward", + "Topology/navigation: space flows bow to stern along three parallel chrome lines that never break; sections round their corners into each other, no hard stops", + "Controls/state: fittings are bolted and recessed against weather; engaged states glow behind frosted glass like an engine-room telegraph", + "Responsive/motion: the horizontal band compresses but its three speed lines persist at every width; motion is a long ocean ease" + ], + "spark": "Beyond the curved glass the atlantic slides past at thirty knots, and every rail, lamp, and letter in the room leans forward as if the furniture itself were making the crossing.", + "webLeverage": "scroll-driven animation carries the chrome speed lines and horizon through the page on one continuous motion timeline", + "strength": "world" + }, + { + "id": "design-canon-sunken-conversation-pit", + "form": "a late-1960s sunken conversation pit, where teak, wool, and low amber light pull a whole room's attention into one upholstered horizon", + "lineage": "Mid-century modern interiors, Eero Saarinen's Miller House pit, Danish teak furniture and Panton-era color", + "tags": [ + "sunken-focus", + "warm-material", + "horizontal-calm" + ], + "system": [ + "Palette/material: burnt-orange wool and teak brown against off-white plaster ground, espresso body ink, low amber lamplight as the glow on the active center", + "Type/composition: warm mid-century serif headlines over a relaxed sans body, wide horizontal measures held at eye level, generous leading keeping the room low and calm", + "Topology/navigation: the primary task sits in the sunken center; peripheral content stays on the surrounding terrace level.", + "Controls/state: descending into a section is a level change with a visible step; focus literally lowers and warms.", + "Responsive/motion: on phones the pit becomes a full-bleed room; level changes ease like sitting down, never bounce." + ], + "spark": "Three steps down, the room becomes a nest: burnt-orange cushions, a teak rail at eye level, and everything important within arm's reach.", + "webLeverage": "Depth staged with scroll-driven scale and shadow, plus a focus model that keyboard users traverse level by level.", + "strength": "world" + }, + { + "id": "design-canon-suprematist-icon-corner", + "form": "the 0.10 exhibition corner in petrograd, a black square hung high where the icon belongs while tilted painted planes swarm the white walls below it", + "lineage": "Kazimir Malevich's 0.10 exhibition 1915, Suprematist canvases, the Russian icon-corner tradition", + "tags": [ + "floating-geometry", + "white-field", + "corner-hierarchy" + ], + "system": [ + "Palette/material: gallery-white field as ground, the black square as absolute anchor and ink, suprematist red and yellow bars rationed to planes in an active state", + "Type/composition: bare geometric sans fragments tilted with their planes, no ruled grid at all, mass and angle ranking the reading order across the white field", + "Topology/navigation: one element earns the high corner as absolute anchor; everything else drifts on a white field ranked by tilt and mass, never by rows", + "Controls/state: controls are bare geometric planes; selecting one squares its tilt to true, dismissing it lets the plane drift off the field's edge", + "Responsive/motion: the white field extends past every viewport and re-clusters planes by mass; motion is slow orbital drift" + ], + "spark": "In a cold Petrograd room a black square hangs where the icon of Christ should be, and beneath it painted planes float free of gravity on walls crowded to the ceiling.", + "webLeverage": "absolute positioning on a pannable oversize canvas with CSS transforms keeps every plane's tilt and drift mathematically exact", + "strength": "world" + }, + { + "id": "design-canon-swiss-grid-poster-wall", + "form": "a Swiss International Style concert-poster wall, where one modular grid disciplines objective headlines, geometric rhythm, and photographic fragments across a series", + "lineage": "Josef Müller-Brockmann's Zürich Tonhalle posters, Basel school grid systems, 1950s Swiss typography", + "tags": [ + "modular-grid", + "series-rhythm", + "objective-type" + ], + "system": [ + "Palette/material: unprinted poster white ground, objective black akzidenz ink for body, one saturated signal red or blue per piece marking the current selection", + "Type/composition: akzidenz-grotesk set flush left ragged right on the module, sizes stepped in grid units, geometric arcs and bars serving as the only imagery", + "Topology/navigation: one master grid governs every page; sections differ by geometric motif, never by layout anarchy.", + "Controls/state: controls are typographic; active states shift weight and bar position on the grid, not color noise.", + "Responsive/motion: the module count adapts per breakpoint while column rhythm stays; motion is grid-snapped." + ], + "spark": "Twelve posters, one grid: each concert gets its own geometry of arcs and bars, yet the wall reads as a single calm intelligence.", + "webLeverage": "A CSS grid exposed as a visible design surface; filters re-sort the series in real time without breaking the module.", + "strength": "world" + }, + { + "id": "design-canon-vaporwave-mall-atrium", + "form": "a dead shopping mall atrium at closing time, marble fountain still running, plastic palms and teal-pink neon reflected in escalators that go nowhere", + "lineage": "Gruen-era mall architecture, Floral Shoppe cover language, muzak tape loops, early web gradients", + "tags": [ + "liminal-retail", + "gradient-dusk", + "slowed-loop" + ], + "system": [ + "Palette/material: teal-to-pink dusk gradient ground, fountain-marble white for panels, faded palm green as texture, dead-brand neon magenta humming on the active sign", + "Type/composition: chrome-extruded serif display with full-width letterspacing, times italic and katakana glosses in captions, layout mirrored around the fountain axis", + "Topology/navigation: space is concentric rings around a fountain court; you drift by escalator between levels that repeat with small decays", + "Controls/state: signage is dead-brand neon; hover hums a tube up to full glow while idle states flicker with the wiring of a closed store", + "Responsive/motion: the atrium compresses to one reflective corridor on narrow screens; all motion runs thirty percent slow" + ], + "spark": "Somewhere below, a fountain still runs for nobody, pink dusk pours through the skylight grid, and the muzak is a love song slowed down until it aches.", + "webLeverage": "Web Audio time-stretching and CSS gradient animation keep the atrium's dusk loop and slowed soundtrack in one shared tempo", + "strength": "world" + }, + { + "id": "design-canon-wegner-cabinetmaker-bench", + "form": "a copenhagen cabinetmaker's bench where a round chair is shaped from shavings, every joint test-fitted dry before a single drop of glue is allowed", + "lineage": "Hans Wegner and Johannes Hansen's workshop, PP Møbler, Danish cabinetmakers' guild exhibitions, Aalto bentwood", + "tags": [ + "joint-honesty", + "hand-eased-edge", + "dry-fit" + ], + "system": [ + "Palette/material: pale oak and shaving-blond ash as ground, oiled teak brown carrying body ink, a brass ferrule glint marking the one joint under inspection", + "Type/composition: a quiet humanist sans annotated like a workshop drawing, measures and radii lettered along the edges, layout following the grain of the object", + "Topology/navigation: work proceeds joint by joint; each connection stays visible and is inspected before the whole assembles into one quiet object", + "Controls/state: fit states are physical, loose, snug, seated; nothing locks until every joint dry-fits, and every edge is eased before it ships", + "Responsive/motion: components rescale on shared curvature radii so eased edges stay proportional; motion is a slow press-fit" + ], + "spark": "Pale shavings curl to the floor as a spokeshave finds the exact curve where a stranger's hand will come to rest for the next fifty years.", + "webLeverage": "border-radius tokens derived from one CSS curvature scale, with ResizeObserver keeping eased edges proportional at any size", + "strength": "composition" + }, + { + "id": "design-canon-y2k-translucent-lounge", + "form": "a Y2K translucent-tech lounge, where candy-colored polycarbonate shells, chrome blobs, and aqua gloss promise a friendly frictionless millennium", + "lineage": "Late-90s iMac G3 translucency, Aqua-era interface gloss, blobject product design and inflatable furniture", + "tags": [ + "translucency", + "blob-form", + "internal-glow" + ], + "system": [ + "Palette/material: aqua-gloss white ground, bondi blue, tangerine, and lime polycarbonate shells as panels, graphite body ink, internal cyan glow filling the live control", + "Type/composition: a rounded techno sans with wide apertures set in pill lozenges, labels centered under the gloss, stacking ruled by each shell's shallow curve", + "Topology/navigation: panels are translucent shells stacked in shallow depth; what sits behind a surface stays faintly visible.", + "Controls/state: controls are glossy capsules with internal glow states; progress shows as liquid filling the shell.", + "Responsive/motion: shells flatten to frosted layers on low power; gloss highlights track pointer only on fine pointers." + ], + "spark": "Everything glows from inside its candy shell: the hardware shows its organs, the buttons look wet, and the future feels friendly.", + "webLeverage": "Backdrop-filter translucency and pointer-tracked specular highlights render the material honestly in CSS.", + "strength": "world" + }, + { + "id": "design-canon-alhambra-zellige-court", + "form": "an alhambra courtyard lined in hand-cut zellige, cobalt, ochre, green, and white tesserae locking into girih symmetry beneath carved muqarnas and calligraphic friezes, a still pool doubling the ornament", + "lineage": "Nasrid dynasty craft at the Alhambra, girih and zellige traditions, cursive thuluth friezes, Owen Jones's Grammar of Ornament plates", + "tags": [ + "girih-symmetry", + "zellige-tessellation", + "reflected-axis" + ], + "system": [ + "Palette/material: glazed zellige cobalt, ochre, copper green, and bone white over warm stucco cream ground, deep sepia body ink, the cobalt star cell marking the active state", + "Type/composition: cursive calligraphic friezes banding the section heads with geometric kufic accents, content panels framed in tiled borders, layout mirrored on the pool's axis", + "Topology/navigation: rooms open off a central reflecting court; every route is symmetric about the water axis and each threshold is a framed arch", + "Controls/state: controls are single tesserae in the pattern; hover raises the glaze's gleam, selection rotates the star's fill while the girih lattice holds", + "Responsive/motion: the pattern re-tessellates at smaller symmetry orders per viewport, never cropping mid-star; motion is water shimmer over glaze" + ], + "spark": "Water holds perfectly still in the courtyard's center, doubling ten thousand hand-cut tiles; cobalt stars lock into white eight-folds up the wall until the geometry dissolves overhead into carved stucco honeycomb.", + "webLeverage": "SVG pattern tiles built from one girih rule set repeat losslessly at every scale, with CSS transforms rotating star cells in place", + "strength": "world" + }, + { + "id": "design-canon-creator-hardware-bench", + "form": "a creator-hardware desk instrument, bone and putty keycaps with dye-sublimated mono legends gridded into a gunmetal chassis, one safety-orange action key, knurled aluminum knobs, and a small amber status screen", + "lineage": "Teenage Engineering OP-1 and TX-6, Work Louder creator boards, Panic Playdate, mechanical-keycap colorway culture, Braun functionalism inherited", + "tags": [ + "keycap-grid", + "accent-action", + "knurled-control" + ], + "system": [ + "Palette/material: bone and putty keycap grays on gunmetal, charcoal legends as body ink, safety orange reserved for the action that matters, amber screen glow as live state", + "Type/composition: small dye-sub mono legends centered on every key with silkscreened corner icons, the layout a strict keycap grid broken by one satisfying asymmetry", + "Topology/navigation: functions live as physical keys in a grid, families group by row and accent color, and the knob owns anything continuous", + "Controls/state: every control clicks with tactile certainty, active modes light their key, the amber screen reports one value at a time, orange keys commit", + "Responsive/motion: the grid reflows by whole key units, never fractional; motion is key-travel snap and knob detents" + ], + "spark": "Your thumb finds the knurled knob without looking; a quarter-detent turn, the amber screen ticks from 9:00 to 9:15, and the one orange key under your index finger is obviously, satisfyingly, the point.", + "webLeverage": "css grid and layered shadows model keycap physics, :active states give real key travel, and a drag-driven knob scrubs values with full keyboard parity", + "strength": "dual" + }, + { + "id": "design-canon-dancheong-bracket-polychrome", + "form": "korean dancheong bracket work, structural timber wrapped in a codified five-color system, lotus and cloud bands repeating along beams, pigment ranking the building it protects", + "lineage": "Korean dancheong painting guilds, obangsaek five-color cosmology, Joseon temple and palace polychromy", + "tags": [ + "banded-ornament", + "five-color-code", + "structural-wrap" + ], + "system": [ + "Palette/material: the obangsaek set, blue, red, yellow, white, black, laid over deep green beam ground; red heads the hierarchy, white outlines every band edge", + "Type/composition: content bands wrap linear members end to end, headers as bracket-end medallions, repeating lotus and cloud units metered evenly along each beam", + "Topology/navigation: structure is the map; primary beams carry primary sections, brackets branch to sub-items, and rank is read from how ornate the wrap is", + "Controls/state: state shows as ornament grade, plain timber for disabled, single-band for resting, full five-color wrap for active, white edging sharpens on focus", + "Responsive/motion: bands shorten their repeat count but never their unit size on narrow screens; motion is a slow ripple along a band's repeats" + ], + "spark": "You stand under temple eaves at dusk looking up into stacked brackets, five colors stepping through lotus bands along every beam, white outlines holding each shape apart, the timber underneath hidden and ranked.", + "webLeverage": "css border-image and repeating gradients meter the band units, keeping repeats intact instead of stretching them", + "strength": "world" + }, + { + "id": "design-canon-neon-mall-nocturne", + "form": "an eighties shopping mall after close, terrazzo floors and brass rails under disciplined neon script, glass elevators rising through fountain light, retail modernism taken straight", + "lineage": "Gruen-era mall architecture, eighties retail signage craft, neon bending shops, terrazzo and brass interior systems", + "tags": [ + "atrium-levels", + "neon-signage", + "terrazzo-ground" + ], + "strength": "world", + "system": [ + "Palette/material: warm terrazzo gray ground flecked with brass, deep evening teal shadows, one rose neon tube as the accent, its glow pooled only on the active storefront", + "Type/composition: one restrained neon script for names over a quiet geometric sans for everything else, storefronts ranked on a strict level grid, no stacked novelty faces", + "Topology/navigation: the atrium organizes everything; levels ring the fountain, the glass elevator is the vertical axis and the directory map is a lit cross-section", + "Controls/state: the open storefront hums with its neon lit, closed ones sit behind drawn grilles at half light, hover raises the grille a hand's width", + "Responsive/motion: levels stack into one scrolling promenade on phones; motion is the elevator's slow rise and fountain shimmer" + ], + "spark": "you ride the glass elevator alone after close, the fountain below throwing slow light on the brass rails, and one rose neon script hums over a dark storefront while your steps echo off terrazzo", + "webLeverage": "css text-shadow layers do the neon tube glow, scroll-driven animation rides the elevator between levels, blend modes pool light on terrazzo" + }, + { + "id": "design-canon-after-hours-galleria", + "form": "an upscale galleria at midnight, brass rails and terrazzo floors lit only by each shop's hand-bent neon signature, every logotype reflected once in glass and once in polished stone", + "lineage": "Postwar shopping arcades, Milan and Osaka galleria interiors, neon sign craft, department-store wayfinding", + "tags": [ + "neon-signatures", + "terrazzo-night", + "directory-board" + ], + "strength": "world", + "system": [ + "Palette/material: espresso-dark ground, terrazzo gray and brushed brass structure, each section owning a single jewel neon hue, ruby, emerald or sapphire, never mixed in one view", + "Type/composition: every destination gets a hand-bent neon logotype in script or thin caps, while body copy sits in a quiet grotesque on dark directory boards with brass rules", + "Topology/navigation: the illuminated floor directory is the map, storefronts are sections along a corridor, and the escalator between floors is the level change", + "Controls/state: idle signs rest at half glow, hover hums the tube to full brightness, the open section spills warm light on the terrazzo, closed ones read CLOSED in small brass", + "Responsive/motion: the galleria compresses to one storefront corridor on phones, and motion is only the neon warm-up and a slow escalator glide" + ], + "spark": "Your footsteps echo on terrazzo as one emerald script hums awake over the milliner's glass, its reflection pooling at your feet, the rest of the corridor waiting in half-lit brass.", + "webLeverage": "svg filters render tube glow and its doubled reflection, and view transitions carry the escalator glide between floors." + } + ] + }, + { + "id": "digital-design-canon", + "label": "The Digital Canon", + "well": "canon-movements", + "concepts": [ + { + "id": "digital-design-canon-antialiased-racing-league", + "form": "an anti-aliased racing league identity, fictional team marks built from pure geometry, sponsor decals for products that do not exist, chunky pixel-smoothed type over velocity", + "lineage": "The Designers Republic, Psygnosis Wipeout and 2097, Sheffield techno-pop graphics", + "tags": [ + "fictional-branding", + "decal-geometry", + "motion-axis" + ], + "system": [ + "Palette/material: safety orange and acid yellow team marks on matte graphite track gray, white decal fields, the current team's color floods the heads-up readouts", + "Type/composition: chunky extended caps softened by anti-aliasing, angled decal lockups, numerals oversized like hull livery, layouts race left to right along the motion axis", + "Topology/navigation: sections are teams and circuits, you move by picking a liveried craft, wayfinding reads like trackside signage strobing past at speed", + "Controls/state: selection stamps an item with the team decal and floods it with team color, speed and status read as segmented counters, disabled craft sit unpainted in gray", + "Responsive/motion: livery lockups stack vertically on narrow screens like a nose cone, motion is horizontal streak and decal snap" + ], + "spark": "you hover over a craft and its acid-yellow livery floods the readouts, sponsor decals for drinks that were never sold gliding past, the whole screen leaning into the left-to-right pull of a track you cannot see", + "webLeverage": "svg keeps the decal geometry sharp at any scale; css transforms and blur filters carry the horizontal streak", + "strength": "world" + }, + { + "id": "digital-design-canon-aqua-liquid-desktop", + "form": "an aqua desktop of gel and pinstripe, candy-translucent capsule buttons throwing internal highlights, striped panels under floating windows, giant photoreal icons docked in a magnifying row", + "lineage": "Apple Mac OS X 10.0 to 10.4, Aqua Human Interface Guidelines, Steve Jobs's lickable buttons", + "tags": [ + "gel-surfaces", + "pinstripe-panels", + "dock-magnification" + ], + "system": [ + "Palette/material: white pinstripe panels on a deep blue ground, gel capsules in aqua with a top specular highlight, graphite chrome at rest, pulsing aqua marks the default action", + "Type/composition: lucida grande in crisp anti-aliased weights, centered dialog copy, controls ranked in tidy rows on striped panels, titles set with a soft emboss", + "Topology/navigation: windows float over one desktop, the icon row along the bottom edge magnifies under the pointer, sheets slide out of title bars to keep tasks attached", + "Controls/state: three traffic-light dots close, minimize, and zoom every window; buttons depress into a darker gel press state, the default choice pulses like breathing glass", + "Responsive/motion: panels collapse to single-column sheets on small screens, minimize squeezes through the genie curve" + ], + "spark": "you drag a window across the pinstripes and it casts a soft real shadow, the ok button pulsing slowly like something alive, and you minimize it just to watch the whole page pour itself through the genie funnel into the icon row", + "webLeverage": "css gradients and backdrop blur build the gel and pinstripe; hover-driven transforms magnify the icon row along a curve", + "strength": "dual" + }, + { + "id": "digital-design-canon-console-dashboard-atmosphere", + "form": "a sixth-generation system menu in black void, memory towers drifting like monoliths in fog, cubic rooms of ambient particle light standing in for chrome", + "lineage": "PlayStation 2 system browser, GameCube main menu, sixth-generation boot atmospheres", + "tags": [ + "void-atmosphere", + "object-rooms", + "particle-chrome" + ], + "system": [ + "Palette/material: deep black-blue void as ground, milky translucent towers and cubes lit from within, drifting white particle motes, the selected object glows warm amber", + "Type/composition: sparse thin sans labels floating beside objects, no panels or rules, composition is objects arranged in depth with generous void between them", + "Topology/navigation: each area is a room in the dark, you glide the camera between floating objects, entering one swells it to fill the space while the rest recede", + "Controls/state: selection makes an object rise, brighten, and hum, its options orbit it as smaller satellites, empty slots read as dark hollows in the row", + "Responsive/motion: small screens flatten rooms into a single row of glowing objects, motes drift constantly and the camera eases" + ], + "spark": "you turn the camera in the dark and a tower of saved memories drifts past, motes of light rising around it like dust in a projector beam, a low hum as the cube you chose swells forward out of the fog", + "webLeverage": "webgl fog and particles build the void; css 3d perspective glides the camera between the object rooms", + "strength": "world" + }, + { + "id": "digital-design-canon-gameboy-four-shade-field", + "form": "a game boy field of four olive greens, 8 by 8 tiles, chunky dither standing in for every gradient, sprites readable as silhouette at postage-stamp size", + "lineage": "Nintendo Game Boy DMG-01, Gunpei Yokoi, Lateral Thinking with Withered Technology", + "tags": [ + "four-shade", + "tile-grid", + "dither-gradient" + ], + "system": [ + "Palette/material: exactly four greens, pale 9bbc0f ground, 8bac0f midtone, 306230 shade, near-black 0f380f as ink and active state, a dither checker mixes any fifth tone", + "Type/composition: an 8 by 8 pixel cap font locked to the tile grid, one size only, hierarchy by border boxes and inversion, text windows sit flush to tile boundaries", + "Topology/navigation: the world scrolls tile by tile beneath a fixed frame, menus are bordered boxes that stack, a blinking arrow always marks where to go next", + "Controls/state: two buttons and a d-pad drive everything, selection inverts a row to pale-on-dark, confirmation blinks twice, the low-battery lamp is the only red anywhere", + "Responsive/motion: the frame stays 160 by 144 and integer-scales to fit, sprites animate in two or three frames" + ], + "spark": "you tilt the slab toward the window to catch enough light, four greens resolving into a whole country, the blinking cursor waiting on your next press while the battery lamp burns its warning red", + "webLeverage": "canvas with image-rendering pixelated integer-scales the 160 by 144 grid; keyboard maps the d-pad and two buttons", + "strength": "dual" + }, + { + "id": "digital-design-canon-greiman-hybrid-collage", + "form": "an april greiman hybrid poster, coarse bitmap textures blown to wall scale, video stills layered under angled type ramps, the pixel accepted as a print material", + "lineage": "April Greiman, Design Quarterly 133 Does It Make Sense, CalArts new wave, Pacific Wave", + "tags": [ + "layered-collage", + "angled-type", + "bitmap-scale" + ], + "system": [ + "Palette/material: pacific wave teal and hot magenta over newsprint white, coarse bitmap dither texturing every surface, magenta marks the active layer", + "Type/composition: bold sans set on angled ramps across the collage, scale jumping from footnote to billboard, baselines rotate but each layer keeps its own strict axis", + "Topology/navigation: the page is one deep collage, sections are layers at different depths and angles, you travel by lifting a layer to the top of the stack", + "Controls/state: touching a layer raises it to full opacity above the pile, resting layers sit ghosted and overlapped, edits print onto a layer like another ink pass", + "Responsive/motion: narrow screens restack the collage into a single angled column, layers drift on scroll at different rates" + ], + "spark": "you stand before a wall-size print, close enough that a scanned video still breaks into visible teal squares, a line of type ramping past your eye toward the ceiling, your own shadow falling into the collage", + "webLeverage": "blend modes and svg filters composite the bitmap layers; css transforms hold each layer's angled axis while scroll offsets the stack", + "strength": "world" + }, + { + "id": "digital-design-canon-metro-typographic-tiles", + "form": "a metro screen of flat tiles and giant lowercase, headlines cropped off the canvas edge, color fields as content, chrome deleted so the type itself is the interface", + "lineage": "Zune HD, Windows Phone 7 Metro, Segoe UI, Swiss typographic lineage acknowledged by Microsoft", + "tags": [ + "flat-tiles", + "cropped-headlines", + "panoramic-pivot" + ], + "system": [ + "Palette/material: flat cyan, magenta, or lime tiles on a pure black ground, zero gradients or bevels, white segoe as ink, one chosen accent color owns every live state", + "Type/composition: giant light-weight lowercase headlines cropped off the right edge, type ramped from caption to poster size, left-aligned on a strict grid of square tiles", + "Topology/navigation: one wide panorama slides behind the viewport, pivot headers peek in from the next pane to promise more, tiles are the only doors", + "Controls/state: tiles tilt toward the finger on press, live tiles flip to show fresh data, selection floods a tile with the accent color, no borders or button chrome", + "Responsive/motion: the panorama collapses to a single tile column on narrow screens, entrances glide in from the edge with type leading" + ], + "spark": "you drag the panorama and the giant word music slides its cropped tail into view, a tile flips over in your peripheral vision with a new photo, everything black and cyan and nothing on screen that is not a word or a color", + "webLeverage": "scroll-snap drives the panoramic panes; css 3d transforms tilt tiles on press and flip the live ones", + "strength": "dual" + }, + { + "id": "digital-design-canon-skeuomorph-leather-studio", + "form": "a stitched-leather reading shelf, tooled saddle headers with visible thread, linen ground and torn paper edges, digital things rendered as loved physical objects on real wood", + "lineage": "iOS 4 to 6 skeuomorphism, iBooks wooden shelf, Find My Friends stitched leather, Corinthian leather era", + "tags": [ + "material-render", + "stitched-edges", + "shelf-metaphor" + ], + "system": [ + "Palette/material: saddle-tan leather headers with cream stitching over warm gray linen, walnut shelf wood for content, torn paper white for pages, deep leather brown as body ink", + "Type/composition: embossed serif titles pressed into the leather, body copy on paper texture in humanist faces, layouts follow the object, shelves, spines, and page edges", + "Topology/navigation: each section is a rendered object, books on shelves, pages that curl, cases that open, you go places by handling the thing itself", + "Controls/state: switches are machined metal toggles, deletion tears the paper, progress is a stitched seam filling in, the active item sits raised with a true drop shadow", + "Responsive/motion: shelves reflow from grid to a single spine list on phones, pages turn with a curling fold" + ], + "spark": "you thumb the corner of a page and it curls with your finger, the linen behind the shelf catching lamplight, a torn edge where yesterday's note used to be, and the leather header shows its stitches when you look close", + "webLeverage": "css textures, layered box shadows, and 3d page-turn transforms render the materials; drag peels the page corner in real time", + "strength": "world" + }, + { + "id": "digital-design-canon-utilitarian-antiweb", + "form": "an undesigned utility page, system fonts and blue underlined links, dense tables of plain rows, zero decoration worn as a statement of trust and speed", + "lineage": "craigslist, Hacker News, Berkshire Hathaway's homepage, Jakob Nielsen austerity", + "tags": [ + "default-styles", + "dense-tables", + "link-first" + ], + "system": [ + "Palette/material: browser-default white ground and near-black system text, unvisited blue 0000ee links with visited purple, one pale yellow row highlight as the only accent", + "Type/composition: the system font stack at browser default sizes, bold for headers and nothing else, dense left-aligned tables and lists packed with minimal padding", + "Topology/navigation: everything is a link on one long page or a flat list one click deep, visited purple is the map of where you have already been", + "Controls/state: native form controls left untouched, actions are text links, state is underline, visited color, and a plain bold you-are-here, nothing hovers or floats", + "Responsive/motion: fluid text reflows without breakpoints, tables scroll sideways when narrow, there is no motion at all, the page appears whole in one paint" + ], + "spark": "you open the page on hotel wifi and it is simply there, forty blue links in a dense column, half of them purple from your last visit, nothing moving, nothing loading, the cursor already sitting in the search box", + "webLeverage": "unstyled html semantics and the :visited state do the work; the whole page ships as one static document with instant paint", + "strength": "world" + }, + { + "id": "digital-design-canon-vector-phosphor-arcade", + "form": "a vector phosphor field, pure luminous strokes on black glass, additive glow where lines cross, geometric craft and letterforms drawn in a single bright wire", + "lineage": "Atari vector cabinets, Asteroids, Tempest, the Vectrex home machine", + "tags": [ + "stroke-only", + "additive-glow", + "black-void" + ], + "system": [ + "Palette/material: black tube glass as the only ground, phosphor green and white strokes for everything, tempest blue and red for hostile states, crossings bloom additively brighter", + "Type/composition: letterforms drawn as open vector strokes, all caps, no fills anywhere, compositions are sparse geometry centered in the dark with score digits at the top edge", + "Topology/navigation: one dark field holds everything, you steer a bright wire craft between outlined zones, importance reads by stroke brightness rather than size", + "Controls/state: focus doubles a shape's stroke brightness, actions fire as expanding line bursts, destroyed items shatter into scattering segments that fade as afterimage", + "Responsive/motion: strokes rescale losslessly to any screen, trails persist as decaying afterimage" + ], + "spark": "you rotate the wire ship with two buttons and the black glass holds a faint ghost of where it just was, every asteroid an outline, the crossing lines at screen center burning a notch brighter than they should", + "webLeverage": "canvas with additive lighter compositing draws the glowing strokes and decaying afterimage trails", + "strength": "world" + }, + { + "id": "digital-design-canon-winamp-skin-bazaar", + "form": "a winamp chrome rectangle of 275 by 116 pixels, bitmap sliders and beveled buttons reskinned a hundred thousand ways, a tiny green spectrum jumping over the bitrate readout", + "lineage": "Nullsoft Winamp 2, the Winamp Skin Museum, user skin culture, it really whips the llama", + "tags": [ + "fixed-chrome", + "bitmap-skin", + "spectrum-meter" + ], + "system": [ + "Palette/material: charcoal beveled chrome with lime-green led digits and spectrum bars, a gold title strip, every surface a swappable bitmap, green light means playing", + "Type/composition: a 5-pixel bitmap font marqueeing the track title, led-segment digits for time, controls packed into a fixed 275 by 116 grid with no whitespace to spare", + "Topology/navigation: small fixed windows snap edge to edge like bricks, the equalizer and list dock beneath the main brick, double-click the title strip to shade into a slim bar", + "Controls/state: bitmap sliders drag along drawn grooves, buttons depress by one pixel, the jumping spectrum and scrolling title are the proof that anything is happening", + "Responsive/motion: the rectangle never reflows, it shades to a one-line bar when space is short; motion is the marquee and the falling spectrum peaks" + ], + "spark": "you drag a slider one pixel at a time while the green spectrum jumps to the snare, the title marquee looping its third pass, and you swap the whole skin for one shaped like a dragon without a single button moving", + "webLeverage": "canvas renders the spectrum from web audio analyser data; image sprites reskin every control without moving the layout", + "strength": "dual" + }, + { + "id": "digital-design-canon-phosphor-line-atelier", + "form": "a dark glass page drawn by a single phosphor line, hairline light strokes tracing type, rules and diagrams on black, crossings blooming a step brighter while the traveled path lingers as afterglow", + "lineage": "Vector CRT displays, oscilloscope Lissajous art, monoline plotter drawing, light-drawing photography", + "tags": [ + "single-stroke", + "brightness-hierarchy", + "afterglow-trail" + ], + "strength": "dual", + "system": [ + "Palette/material: near-black glass ground, one warm-white phosphor stroke as the only ink, four brightness steps as the entire hierarchy, the active path warming toward ember", + "Type/composition: open monoline capitals at generous editorial scale with wide dark margins, diagrams and type sharing one stroke weight so brightness alone ranks them", + "Topology/navigation: the whole product is one continuous line; moving between sections draws the stroke onward while the traveled path stays as a faint visible breadcrumb", + "Controls/state: focus lifts a stroke one brightness step, confirming closes a drawn circle around the control, dense tables rule in fine light with every fifth line brighter", + "Responsive/motion: strokes are pure vectors and rescale losslessly, and motion is the line drawing itself point to point with a decaying afterimage" + ], + "spark": "In a dark room the line starts moving: it writes the headline in light, drops to rule a table, circles one figure and leaves its whole journey hanging behind it as a fading thread.", + "webLeverage": "svg stroke-dashoffset draws the continuous line while canvas with lighter compositing carries bloom and decaying afterimage" + }, + { + "id": "digital-design-canon-desktop-skin-workshop", + "form": "the desktop skin culture of the early 2000s, a fixed chassis of player, clock and launcher widgets dressed by thousands of user-made themes, brushed steel to wood grain to candy gloss, the anatomy never moving under the paint", + "lineage": "Winamp and XMMS skins, WindowBlinds and Rainmeter theming, DeviantArt skin communities", + "tags": [ + "fixed-chassis", + "swappable-dress", + "snap-dock" + ], + "strength": "dual", + "system": [ + "Palette/material: a graphite chassis until a theme loads, then one material story per skin, brushed steel, tortoiseshell or candy gloss, its LED accent coloring every state light", + "Type/composition: pixel-tight labels seated in fixed slots with digits on an LED strip, the chassis map dictating where any skin's lettering must land, whitespace never guaranteed", + "Topology/navigation: widgets snap edge to edge and remember their docked positions, the skin gallery is the wardrobe, one apply restyling every widget without moving a control", + "Controls/state: sliders ride drawn grooves and buttons depress by one pixel, the playing state pulses the skin's accent, a broken theme falls back to the graphite chassis intact", + "Responsive/motion: widgets shade into slim bars when space runs short, and motion is the magnetic snap dock and a crossfade between skins" + ], + "spark": "You apply a theme called brushed-mahogany and every widget on the desktop changes clothes at once, the clock now wood and brass, the player's grooves exactly where your cursor already was.", + "webLeverage": "css custom properties swap an entire skin in one class change while sprite sheets reskin controls without moving the layout" + }, + { + "id": "digital-design-canon-game-watch-lcd-stage", + "form": "a game and watch lcd stage, every pose the game can ever show pre-molded as a fixed segment over a printed full-color backdrop, dark gray figures blinking between stations, the clock always waiting in the corner", + "lineage": "Nintendo Game & Watch handhelds 1980 to 1991, Gunpei Yokoi's segment lcd over printed backdrop art", + "tags": [ + "fixed-segments", + "printed-backdrop", + "station-hops" + ], + "system": [ + "Palette/material: warm printed backdrop art in flat inks behind the glass, every live element one dark lcd gray, ghost segments faint at rest, a colored case band framing play", + "Type/composition: score and clock in seven-segment digits pinned to one corner, GAME A and GAME B as the entire menu, everything else drawn as a figure, never written", + "Topology/navigation: the whole world is one screen; positions are fixed stations, and moving means vanishing here and appearing at the next molded spot, no travel between", + "Controls/state: two buttons at most, states blink before they resolve, a miss rings the bell and adds a miss mark, and the same screen doubles as the idle clock", + "Responsive/motion: the stage keeps its exact aspect and letterboxes into any screen; motion is stepwise segment hops with no in-betweens" + ], + "spark": "In the waiting room the little screen ticks as a clock until your thumb wakes it, and the gray juggler hops between five molded poses while a helmeted figure blinks twice before the wrench falls.", + "webLeverage": "every pose lives as an svg segment toggled by state, so animation is pure discrete visibility, faithful to lcd physics", + "strength": "dual" + } + ] + }, + { + "id": "brand-identity-canon", + "label": "Brand & Identity Canon", + "well": "canon-movements", + "concepts": [ + { + "id": "brand-identity-canon-brodovitch-bazaar-spread", + "form": "a harper's bazaar spread under brodovitch, didot hairlines floating in white space, photograph and headline choreographed across the gutter like paired dancers", + "lineage": "Alexey Brodovitch, Harper's Bazaar 1934-58, the Ballet photographs, Astonish Me pedagogy", + "tags": [ + "gutter-choreography", + "white-space-luxury", + "mirrored-spreads" + ], + "system": [ + "Palette/material: warm white paper as luxury ground, charcoal photogravure grays, didot ink black, a single lipstick red accent for the live element", + "Type/composition: didot hairline contrast at display size, sparse text set ragged around images, the layout law is mirrored gesture across the gutter", + "Topology/navigation: content moves in two-page spreads, the left page poses and the right page answers, you travel by turning, never by scrolling a column", + "Controls/state: the active element steps over the gutter seam, captions sit as small ranked lines, selection is a hairline rule drawn under the didot", + "Responsive/motion: narrow screens stack pose then answer in sequence keeping the seam as a horizontal rule; motion is a dancer's ease" + ], + "spark": "you open the magazine flat and a dancer's arc on the left page is answered by a didot headline curving down the right, the gutter between them holding the beat like a breath", + "webLeverage": "css scroll snap paginates spreads two panels at a time; the gutter is a fixed grid seam type and image cross", + "strength": "dual" + }, + { + "id": "brand-identity-canon-ddb-think-small-page", + "form": "a ddb volkswagen page, one small honest photograph adrift in enormous white space, a self-deprecating headline with a full stop, three tidy columns of reasoned body copy", + "lineage": "Doyle Dane Bernbach, Helmut Krone, Julian Koenig, Think Small and Lemon, 1959-63", + "tags": [ + "two-thirds-void", + "three-column-copy", + "small-object-scale" + ], + "system": [ + "Palette/material: unprinted page white is the material and takes two thirds of every layout, photograph grays and ink black do the rest, no accent color at all", + "Type/composition: krone's arithmetic, image field to the two-thirds line, headline ending in a period, then exactly three justified columns of reasoned copy", + "Topology/navigation: one page argues one claim, the small photograph is the exhibit, and you move ad to ad through a campaign, never through a menu tree", + "Controls/state: the headline is the control, understatement is the state language, the active page sets its period in ink black while idle pages gray theirs", + "Responsive/motion: three columns become one at phone width but the void keeps its two-thirds share; nothing animates, the honest page simply holds still" + ], + "spark": "you scan a page that is mostly nothing, a small car parked high in the white, and one word with a period under it dares you to read the three neat columns that explain the joke", + "webLeverage": "css grid fixes krone's two-thirds image field over a strict three-column copy block at every width", + "strength": "composition" + }, + { + "id": "brand-identity-canon-fletcher-wit-poster", + "form": "an alan fletcher poster, a visual pun built from scissors-cut paper shapes and hand-scrawled crayon color, the idea so clear the craft is allowed to relax", + "lineage": "Alan Fletcher, Fletcher Forbes Gill, the Pentagram founding, The Art of Looking Sideways", + "tags": [ + "visual-pun", + "cut-paper-shapes", + "hand-scrawl" + ], + "system": [ + "Palette/material: white poster ground, torn and cut paper in cobalt, leaf green, and poppy red, crayon strokes overshooting their shapes, the pun object holds the brightest cut", + "Type/composition: hand-scrawled marker lettering does the headline, small typeset credits stay obedient at the base, one pun image owns the sheet", + "Topology/navigation: every section leads with its own visual pun, the image is the label, and text only confirms what the joke already told you", + "Controls/state: controls are cut shapes placed slightly askew, press nudges the tilt, the active piece gets a fresh crayon outline scrawled around it", + "Responsive/motion: shapes regroup around the pun at phone width like paper reshuffled on a desk; motion is a quick settle of pieces" + ], + "spark": "you get the joke a half second before you can say why, a green cut-paper pear where a lightbulb should be, crayon strokes running past the edges of the shape they color", + "webLeverage": "svg cut-paper shapes recombine per state; css rotation keeps the hand-placed tilt on every piece", + "strength": "world" + }, + { + "id": "brand-identity-canon-girard-color-compendium", + "form": "an alexander girard color compendium, the braniff fleet painted in seven solid hues, folk-art motif drawers of suns doves and hearts, joy administered as a filing system", + "lineage": "Alexander Girard, Braniff International 1965 end of the plain plane, Herman Miller Textiles and Objects, La Fonda del Sol", + "tags": [ + "solid-hue-fleet", + "motif-library", + "swatch-index" + ], + "system": [ + "Palette/material: seven solid fleet hues, ochre turquoise periwinkle lemon orange olive and plum, each section painted nose to tail in one, ink stays warm charcoal", + "Type/composition: rounded geometric sans labels set small like textile tags, motifs do the display work, everything filed on an even swatch-card grid", + "Topology/navigation: sections are planes in the fleet, each wears its own solid hue entirely, and the index is a row of tail swatches you pick from", + "Controls/state: controls are folk motifs, a sun for on and a dove for sent and a heart for saved, state changes repaint the whole panel in its fleet hue", + "Responsive/motion: the fleet row becomes a stacked swatch list on narrow screens; hue swaps are one clean crossfade" + ], + "spark": "you look down a tarmac and seven jets sit in seven solid colors, ochre, turquoise, periwinkle, lemon, and in your lap a drawer of embroidered suns and doves filed by hue", + "webLeverage": "css custom properties swap the seven fleet hues as whole-section themes in one variable flip", + "strength": "world" + }, + { + "id": "brand-identity-canon-kalman-colors-magazine", + "form": "a colors magazine spread, documentary photography run at billboard scale, blunt bilingual captions in paired columns, the juxtaposition of two images doing the whole argument", + "lineage": "Tibor Kalman, Colors magazine issues 1-13, Oliviero Toscani, the Benetton era", + "tags": [ + "full-bleed-photo", + "bilingual-caption", + "paired-juxtaposition" + ], + "system": [ + "Palette/material: the photograph is the palette and runs full bleed, interface chrome is newsprint white and ink black, one benetton green tab flags the live spread", + "Type/composition: heavy grotesk captions set small under enormous images, every caption doubled in two languages in locked twin columns, headlines ask blunt questions", + "Topology/navigation: spreads pair two images as an argument, you navigate by topic, and the contents page is a strip of thumbnails with their blunt questions", + "Controls/state: selection frames a photograph with a thin ink rule, captions swap lead language on toggle, unread spreads carry a folded corner mark", + "Responsive/motion: the pair stacks vertically on phones keeping captions welded to their image; no motion beyond the page cut" + ], + "spark": "you turn the page and two photographs face each other across the fold, a wedding and a war in the same crop, and the caption underneath says it twice, once in english, once in italian", + "webLeverage": "css object-fit runs photos full bleed at any viewport; grid keeps the two caption languages locked in paired columns", + "strength": "composition" + }, + { + "id": "brand-identity-canon-push-pin-poster", + "form": "a push pin studios poster, victorian and nouveau contours revived in flat candy color, an aubergine silhouette crowned with ribboned rainbow hair, illustrated warmth on modern structure", + "lineage": "Milton Glaser, Seymour Chwast, Push Pin Graphic, the Dylan poster, art nouveau and victorian revival", + "tags": [ + "flat-contour-color", + "silhouette-anchor", + "revival-ornament" + ], + "system": [ + "Palette/material: cream poster stock ground, flat candy fills of pink teal marigold and lilac, one jet black silhouette anchoring, the active item takes the warmest fill", + "Type/composition: hand-drawn slab and nouveau display lettering for titles, tidy modern text below, ornament framed inside clear geometric structure", + "Topology/navigation: one emblematic silhouette anchors each section and smaller vignettes orbit it, you move between posters, not pages", + "Controls/state: flat fills swap hue on state with no shading, hover blooms one more ribbon from the silhouette, disabled art drops to single-line contour", + "Responsive/motion: vignettes fold under the anchor silhouette on small screens; ribbons unfurl as drawn paths" + ], + "spark": "you unfold the poster from the record sleeve and a jet black profile blooms into ribbons of pink, teal, and orange hair, each lock a flat cut of candy color with no shadow anywhere", + "webLeverage": "svg paths carry the contour line art; css flat fills recolor per state without gradients", + "strength": "world" + }, + { + "id": "brand-identity-canon-saville-catalog-sleeve", + "form": "a factory records catalog identity, every artifact given a fac number including the nightclub, a pulsar plot in white lines on matte black, industrial color codes standing in for words", + "lineage": "Peter Saville, Factory Records, Joy Division Unknown Pleasures, New Order Power Corruption and Lies color alphabet", + "tags": [ + "catalog-numbering", + "color-code-alphabet", + "withheld-labeling" + ], + "system": [ + "Palette/material: matte black ground, white hairline plot as body ink, names replaced by a coded strip of hue blocks, the active item alone decoded to full color", + "Type/composition: small engraved-feel caps used sparingly, the fac number as the only headline, vast unprinted black, one plot owning the field", + "Topology/navigation: everything is a catalog entry, you navigate by fac number in strict sequence and the index page is the only map", + "Controls/state: state speaks in code, hover translates a color strip to text, selection lifts one white line of the pulse to double weight, nothing is labeled twice", + "Responsive/motion: the plot compresses its line count on narrow screens and the fac index becomes the whole surface; motion is a slow pulse traverse" + ], + "spark": "you hold a matte black sleeve with no band name anywhere, only a stacked pulse of white lines and a small fac number, and a strip of colored blocks you slowly realize spells the title", + "webLeverage": "canvas redraws the pulsar line stack from live data; css color blocks encode labels the legend decodes on hover", + "strength": "world" + }, + { + "id": "brand-identity-canon-scher-street-typography", + "form": "a public theater street poster, wood-type capitals shouting at architectural scale, baselines cut on diagonals, type cropped by the edge like crowd noise made visible", + "lineage": "Paula Scher, Pentagram, The Public Theater identity, Bring in 'da Noise Bring in 'da Funk posters", + "tags": [ + "diagonal-banding", + "wood-type-scale", + "cropped-edges" + ], + "system": [ + "Palette/material: taxi yellow and paper white grounds, dense black wood-type ink, one red-orange band held for the active call to action", + "Type/composition: condensed wood-type caps at architectural scale, baselines rotated on diagonals, words butted and cropped by the frame, no lowercase", + "Topology/navigation: the loudest word is the door, sections stack like postered walls and you move by following the shout that names where you are", + "Controls/state: hover tilts a word onto its diagonal, the selected item flips to reversed type, white out of black, disabled words are half torn away", + "Responsive/motion: on small screens the diagonals relax to steep stacks and the crop gets harder; entrances slam in one beat" + ], + "spark": "you cross the street and the wall yells at you, stacked wood-type capitals leaning on diagonals, a word sliced by the poster edge so your eye finishes the shout for it", + "webLeverage": "variable fonts stretch wood-type weight to viewport; css clip-path crops letters at the frame", + "strength": "world" + }, + { + "id": "brand-identity-canon-channel-junction-ident", + "form": "a 1990s channel junction package, one constant numeral remade in a new material for every ident, a single viridian brand color holding the set together, junction menus and a station clock speaking in the same calm voice between programs", + "lineage": "Martin Lambie-Nairn's BBC Two idents, the 1991-2001 rebrand, channel presentation and junction design", + "tags": [ + "constant-mark", + "material-variations", + "junction-menu" + ], + "system": [ + "Palette/material: one signature viridian on calm putty grounds, the constant mark remade per ident in paint, water, silk, or smoke, caption white kept scrupulously plain", + "Type/composition: a single humanist sans in lowercase for announcements, the mark always at its appointed size and corner, junction menus as ranked lines beside it", + "Topology/navigation: idents are thresholds between sections; the next-and-later menu is the map, and the mark's current material tells you which mood of the channel you are in", + "Controls/state: hover disturbs the mark's material, water ripples or silk folds, and selection settles it still; the clock ident appears only when something is about to begin", + "Responsive/motion: mark and menu stack on narrow screens with the mark never shrinking below its dignity; motion is brief, complete material physics" + ], + "spark": "the continuity announcer reads what comes next while a viridian 2 made entirely of water collapses and reforms beside the menu, and somehow the channel feels like a person you have known for years", + "webLeverage": "canvas and shader passes rematerialize one svg mark per section while the junction menu stays keyboard-navigable", + "strength": "world" + } + ] + }, + { + "id": "vernacular-ephemera", + "label": "Vernacular & Ephemera", + "well": "vernacular-ephemera", + "description": "Anonymous graphic artifacts proven by decades of real use: tickets, labels, stamps, forms, signs, and scoreboards whose information structure becomes interface structure.", + "concepts": [ + { + "id": "vernacular-ephemera-apothecary-tin-wall", + "form": "a night pharmacy's remedy-tin wall, where embossed lids, dosage rules, and cautionary color bands file cures into strict comforting order", + "lineage": "Victorian and early-modern pharmacy packaging, embossed tins and dosage typography, poison-band conventions", + "tags": [ + "labeled-order", + "dose-rule", + "caution-band" + ], + "system": [ + "Palette/material: chemist green and cream labels over pewter tin, black dosage ink for body copy, the poison-band red reserved for destructive and cautionary states", + "Type/composition: condensed apothecary capitals centered in bordered label lozenges, dosage lines ruled beneath in small caps, shelves reading as strict typographic bands", + "Topology/navigation: shelves rank by category and potency; the caution band is a structural color law, not decoration.", + "Controls/state: opening a tin reveals dose, measure, and warnings in fixed order; destructive acts require the red-band step.", + "Responsive/motion: the wall becomes a drawer list on phones; lids open with one restrained hinge motion." + ], + "spark": "Brass scales, ranked tins, and a red band that means careful: the wall itself is the pharmacist's memory, shelf by shelf.", + "webLeverage": "A strict semantic hierarchy with search that filters shelves live while preserving the wall's ranked order.", + "strength": "world" + }, + { + "id": "vernacular-ephemera-banknote-proof-table", + "form": "an engraver's banknote proof table, where guilloché lattices, microtext, and portrait cross-hatching turn trust itself into printed geometry", + "lineage": "Intaglio banknote engraving, guilloché lathe work, security microtext and watermark conventions", + "tags": [ + "guilloche", + "microtext", + "engraved-trust" + ], + "system": [ + "Palette/material: intaglio black and engraver's green on cotton-rag cream, the paper-pale ground left untouched, one denomination hue tinting whichever section is active", + "Type/composition: engraved spurred capitals over lathe-ruled borders, denominations as ornate numerals pinned to fixed corners, microtext serving as the fine print itself", + "Topology/navigation: denominations organize the space; each carries the same trust grammar at a different scale and hue.", + "Controls/state: verification states reveal deeper layers; tilt shows latent images, magnification resolves microtext.", + "Responsive/motion: lattice density adapts to pixel density; tilt effects require a fine sensor and fall back to zoom." + ], + "spark": "Under the loupe, the border resolves into thousands of perfect lathe curves; the note is a machine for being believed.", + "webLeverage": "Procedural guilloché generated in SVG scales infinitely and reveals verification layers without raster loss.", + "strength": "world" + }, + { + "id": "vernacular-ephemera-board-game-deed", + "form": "a monopoly-style property deed and its banded paper money, each card's color bar binding it to a street group, rent tables escalating line by line toward hotels", + "lineage": "Monopoly title deeds by Charles Darrow and Lizzie Magie's Landlord's Game, paper play-money trays", + "tags": [ + "color-group", + "rent-table", + "ownership" + ], + "system": [ + "Palette/material: flat spot-color group bars, marigold, crimson, forest, atop white card stock, black rule ink for the rent table, the red mortgage stamp marking warnings", + "Type/composition: deed titles in white gothic caps on the color bar, rent lines ruled and right-aligned in escalating rows, money denominations set huge in corner ovals", + "Topology/navigation: deeds sort by color band into street groups; a player's holdings read as a fanned hand, and the board position is printed on the card itself", + "Controls/state: ownership is possession of the card; mortgaging flips it face-down to its red-stamped back, and the rent table's active row depends on houses owned", + "Responsive/motion: trades slide cards across the table between hands; phones show one fanned color group at a time" + ], + "spark": "Boardwalk changes hands across the table for a fistful of orange five-hundreds, and the new owner squares the deed into a fan already three colors deep.", + "webLeverage": "multiplayer trades synchronize card ownership over WebSocket, each deed flipping to its mortgaged back in shared state", + "strength": "dual" + }, + { + "id": "vernacular-ephemera-cancellation-stamp-album", + "form": "a windowsill stamp album, where perforated miniatures, postmark rings, and hinged rows compress whole nations into catalogued afternoons", + "lineage": "Philatelic album design, postal cancellation marks, engraved stamp miniatures and perforation gauges", + "tags": [ + "miniature-grid", + "postmark", + "hinged-catalog" + ], + "system": [ + "Palette/material: manila page ground under glassine gray, engraved carmine and ultramarine stamp inks as the accents, black cancellation ink marking every used state", + "Type/composition: letterpress catalog numbers in small caps under each mount, engraved country names inside the miniatures, captions aligned to perforation-snapped columns", + "Topology/navigation: pages hold ranked miniature grids; each item is tiny but complete, with a magnified detail view.", + "Controls/state: acquiring hinges an item in; cancellation rings record when and where each item was used.", + "Responsive/motion: grids reflow by perforation-snapped columns; magnification is a smooth loupe or a tap-open plate." + ], + "spark": "A hinge lifts: under one stamp's perforated edge sit a mountain range, a queen, and the rainy Tuesday it was cancelled.", + "webLeverage": "IntersectionObserver-driven loupe magnification and lazy plates keep hundreds of miniatures fast.", + "strength": "world" + }, + { + "id": "vernacular-ephemera-cassette-j-card", + "form": "a mixtape's hand-lettered j-card, spine title, folded flap, and side a / side b tracklists ruled in ballpoint, timed to fill exactly forty-five minutes a side", + "lineage": "home-dubbed mixtapes, Maxell and TDK inlay grids, fanzine trading culture", + "tags": [ + "two-sided", + "tracklist", + "fold" + ], + "system": [ + "Palette/material: ballpoint blue on white lined inlay stock, pencil gray for tentative tracks, the brand stripe's TDK red or Maxell gold as the only printed accent", + "Type/composition: handwritten block caps ruled by the inlay's printed lines, side a and side b as underlined heads, running times right-aligned tight against the margin", + "Topology/navigation: the spine is the shelf identity, the front flap the cover, the inner fold the full listing; everything lives in one folded sheet you rotate", + "Controls/state: side a and side b are hard halves with a physical flip between them; each track carries a running time, and the sides must not overflow the tape", + "Responsive/motion: the card unfolds flat on wide screens and refolds to spine-only in a list; flipping sides is a y-axis turn, or an instant swap under" + ], + "spark": "Someone timed every song with a wristwatch so side a ends clean at forty-four minutes, then inked the tracklist twice because the first pen smeared.", + "webLeverage": "the audio element drives a real-time position marker down the inked tracklist, flipping sides at the tape's midpoint", + "strength": "world" + }, + { + "id": "vernacular-ephemera-citrus-crate-labels", + "form": "a citrus crate-label packing house, where saturated stone-litho labels sell every orchard's valley, mascot, and typeface pride crate by crate", + "lineage": "California and Florida fruit-crate lithography 1900-1950, packing-house brands, stone-litho color trades", + "tags": [ + "label-frame", + "brand-pride", + "saturated-litho" + ], + "system": [ + "Palette/material: stone-litho orange, cobalt sky, and leaf green at full saturation on coated label stock, black outline ink for body, raw pine crate wood as the ground", + "Type/composition: fat shaded circus letters arced over the painted scene, brand name largest, the valley of origin in a ribbon, every label one framed full-bleed painting", + "Topology/navigation: content ships in crates; each category owns a full label composition with a consistent frame.", + "Controls/state: selecting stamps the crate lid; quantities read as stacked crates, not abstract counters.", + "Responsive/motion: labels crop to their medallion on small screens; the full painting opens on demand." + ], + "spark": "A sunrise valley, a leaping jackrabbit, and letters fat as oranges: every crate leaves the valley wearing a painting.", + "webLeverage": "High-resolution zoom into label art with palette extraction that themes each crate's controls from its litho inks.", + "strength": "world" + }, + { + "id": "vernacular-ephemera-conductor-punch-stubs", + "form": "a conductor's punch-stub collection, where tram and cinema tickets in faded stock colors carry punched constellations of every ride taken", + "lineage": "Transit and cinema ticket stock, conductor punch codes, fare-zone color systems of the tram era", + "tags": [ + "punch-code", + "stock-color", + "collection-grid" + ], + "system": [ + "Palette/material: faded fare-stock pastels, rose, buff, and mint keyed to line and zone, condensed black numeral ink, the fresh punch hole reading as the active mark", + "Type/composition: condensed fare numerals and rubber-stamped serials stacked down each narrow stub, tickets mounted flush in ruled rows so the stock colors band the grid", + "Topology/navigation: items are tickets in a mounted grid, grouped by line color and denomination.", + "Controls/state: acting on an item punches it; the accumulating punch pattern is the visible history of use.", + "Responsive/motion: the grid tightens to a bandolier strip on phones; punches appear with a single crisp perforation." + ], + "spark": "Each thin ticket wears its own punched star pattern; laid in rows, a month of ordinary rides becomes a constellation chart.", + "webLeverage": "Canvas-perforated punch marks persist per item in local storage, making history tactile and inspectable.", + "strength": "composition" + }, + { + "id": "vernacular-ephemera-elevator-floor-directory", + "form": "a department store's brass elevator directory, floors stacked in descending order, each line pairing a number with its trades, notions, millinery, credit office", + "lineage": "grand department store directories, office-lobby letter boards, elevator operators' floor calls", + "tags": [ + "floor-stack", + "vertical-index", + "brass" + ], + "system": [ + "Palette/material: polished brass plate over dark walnut, floor names in black-filled engraving, the called floor's incandescent amber lamp glowing against the metal", + "Type/composition: engraved roman capitals letter-spaced on brass strips, number left and trades right on every line, the directory one ranked column read top to bottom", + "Topology/navigation: the building is a numbered stack read top to bottom; every destination belongs to exactly one floor, and the directory is the sole map", + "Controls/state: a floor is current, passing, or called; the dial's needle sweeps the arc above the doors, and pressed calls glow until served", + "Responsive/motion: arrival is a vertical glide with a floor chime; small screens enlarge the current floor line mid-stack" + ], + "spark": "The operator calls out third floor, ladies' gloves and notions, as the brass needle sweeps its arc and the cage settles with a sigh level to the marble.", + "webLeverage": "scroll-snap sections make each floor a stop, the needle's arc bound to live scroll position via CSS scroll-driven animation", + "strength": "composition" + }, + { + "id": "vernacular-ephemera-folded-road-map", + "form": "a gas-station road map folded into sixteenths, panels opening in sequence from glovebox wad to full-hood spread, insets and mileage tables tucked along the crease lines", + "lineage": "oil-company courtesy maps, Rand McNally accordion folds, AAA TripTik strip maps", + "tags": [ + "fold-panels", + "wayfinding", + "inset" + ], + "system": [ + "Palette/material: highway red and route blue vein work over buff map stock, states filled in pale tints, the penciled graphite route line marking the active path", + "Type/composition: condensed gothic town names sized by population, numbered route shields as badges, mileage tables ruled in agate columns tucked along the crease lines", + "Topology/navigation: unfolding is zooming; each opened panel doubles the visible country, while city insets live at the edges as pre-framed close-ups", + "Controls/state: the map remembers use in its creases; a route traced in pencil persists, and the softened fold marks show where every trip really went", + "Responsive/motion: panels unfold across widening viewports one crease at a time; a phone gets a single panel with crease-edge peeks" + ], + "spark": "The map blooms open across the hood in the smell of gasoline, and a thumb blackened with newsprint traces tonight's road through a country of red and blue veins.", + "webLeverage": "3d fold transitions on CSS transforms make each crease a zoom level, with the open panel state kept in the URL", + "strength": "composition" + }, + { + "id": "vernacular-ephemera-hand-turned-scoreboard", + "form": "a hand-turned ballpark scoreboard, where inning plates, painted numbers, and a runner on a catwalk keep the whole summer legible from the bleachers", + "lineage": "Manual baseball scoreboards, Fenway and Wrigley plate conventions, stadium sign painting", + "tags": [ + "plate-grid", + "inning-sequence", + "operator-hands" + ], + "system": [ + "Palette/material: forest green painted steel as the ground, white sign-painted plate numerals for every figure, the yellow plate reserved for the inning in play", + "Type/composition: block sign-painter numerals on interchangeable plates, team names stenciled in caps at the row heads, the grid ruled by hand-painted white lines", + "Topology/navigation: a fixed grid of innings and totals; time reads left to right and nothing shifts position.", + "Controls/state: updates slide physical plates into place; empty innings show blank plates, never disappear.", + "Responsive/motion: the distant view compresses to a line score on phones; plate slides are single, weighty, and announced." + ], + "spark": "A distant clank, a plate slides, and the eighth inning changes: the score is heavy, painted, and carried by hand.", + "webLeverage": "Live data feeds animate plate changes in real time while the DOM stays a readable line-score table.", + "strength": "composition" + }, + { + "id": "vernacular-ephemera-hardware-bin-wall", + "form": "an old hardware store's wall of little drawers, each brass pull framing a hand-inked label, fasteners sorted by thread, length, and head into a floor-to-ceiling taxonomy", + "lineage": "small-town hardware stores, machinists' parts cabinets, apothecary drawer walls", + "tags": [ + "taxonomy", + "drawer-grid", + "label" + ], + "system": [ + "Palette/material: oak drawer faces and brass pulls floor to ceiling, hand-inked black labels on ivory card, the pulled drawer's felt-green interior as the open state", + "Type/composition: clerk's ink lettering inside ruled brass label frames, thread and length figures abbreviated in fixed order, the wall a strict row-and-column taxonomy", + "Topology/navigation: the wall is the index; drawers cluster by family and refine left to right by size, so a location teaches the classification", + "Controls/state: a drawer is shut, cracked for a glance, or pulled to the counter; the label is the contract and a mis-shelved part is a visible lie", + "Responsive/motion: drawers glide out over the view rather than leaving it; a phone shows one drawer column at a time" + ], + "spark": "The clerk doesn't look up, just says third row, four over, and the drawer slides out heavy with exactly the brass wood screws you couldn't name.", + "webLeverage": "search flies the viewport to the matching drawer with scroll-driven CSS animation, then opens it in place via transforms", + "strength": "composition" + }, + { + "id": "vernacular-ephemera-jet-age-ticket-wallet", + "form": "a jet-age airline ticket wallet, where carbon-copy coupons, route maps, and baggage tags choreograph one journey through crisp official color", + "lineage": "1960s airline ticketing ephemera, IATA coupon conventions, mid-century carrier livery systems", + "tags": [ + "coupon-sequence", + "official-color", + "journey-record" + ], + "system": [ + "Palette/material: carrier navy and red over crisp white coupon stock, carbon purple for every filled figure, the red VOID stamp owning the cancelled state", + "Type/composition: airline grotesk caps on tabbed coupon heads, fare and flight boxes ruled in hairlines, carbon numerals striking fixed fields, one leg per sheet", + "Topology/navigation: the flow is a coupon book; each leg tears off in sequence and the wallet always shows what remains.", + "Controls/state: validated, used, and void states stamp themselves onto the coupon; nothing disappears, it cancels.", + "Responsive/motion: coupons stack into a single stub column on phones; tear-off animates once" + ], + "spark": "Red carbon numerals, a fold-out route arc, a stapled baggage stub: the whole Atlantic crossing fits in a paper wallet.", + "webLeverage": "Printable, deep-linkable coupon states with URL-addressable legs and offline-capable stubs.", + "strength": "dual" + }, + { + "id": "vernacular-ephemera-letter-tile-menu-board", + "form": "a diner's grooved felt menu board, white letter tiles pressed into ruled channels, prices right-aligned and specials respelled each morning from a finite tile box", + "lineage": "grooved-felt letter boards, soda-fountain menu walls, church hymn-number boards", + "tags": [ + "tile-channels", + "letterforms", + "constraint" + ], + "system": [ + "Palette/material: black grooved felt as the ground, molded white letter tiles carrying all copy, the day's special picked out in the box's few red tiles", + "Type/composition: one condensed molded letterform for everything, uppercase only, lines held by the felt channels, prices right-aligned, sections split by blank rows", + "Topology/navigation: the board is ruled channels read top to bottom, sections divided by blank rows; the day's offering is whatever the tiles currently spell", + "Controls/state: editing is pulling and pressing individual tiles; the tile box is finite, so spelling a new special can mean unspelling an old one, and gaps read as sold out", + "Responsive/motion: rows rewrap tile by tile at narrow widths, never mid-tile; changes click in one letter at a time, or appear whole under" + ], + "spark": "Before the doors open a waitress on a step stool presses today's special into the felt one white tile at a time, holding the leftover letters in her apron pocket.", + "webLeverage": "content edits animate tile-by-tile through DOM diffing, with a live character inventory enforcing the finite tile box", + "strength": "composition" + }, + { + "id": "vernacular-ephemera-library-due-date-card", + "form": "a library book's paper pocket and due-date card, rubber-stamped in shifting inks by decades of borrowers, each row a dated loan in a ledger glued inside the back cover", + "lineage": "Newark charging system, mid-century public library circulation desks, Gaylord band daters", + "tags": [ + "provenance", + "stamp-ledger", + "pocket" + ], + "system": [ + "Palette/material: manila pocket and cream card stock, stamp inks drifting purple to red by decade, the newest blue-black impression marking the current loan", + "Type/composition: band-dater dates stacked in one ruled column, DUE and RETURNED as letterpress column heads, the typed title line sitting above the stamped ledger", + "Topology/navigation: every item carries its own history card in a back-cover pocket; you read an object by pulling its card and scanning the stamped column of dates", + "Controls/state: a stamp is the only write, dated and permanent; the card fills top to bottom, and a full card gets a fresh one stapled behind it", + "Responsive/motion: the card slides from its pocket with a paper hiss; narrow viewports show the latest stamps first" + ], + "spark": "You slide the card from its manila pocket and read thirty years of purple date stamps, each one a stranger who held this same spine on a bus, in a bath, past midnight.", + "webLeverage": "each record's stamped history is a shareable deep-link, its rows rendered from real edit provenance kept in local storage", + "strength": "dual" + }, + { + "id": "vernacular-ephemera-matchbook-drawer", + "form": "a drawer of hotel and club matchbooks, where foil scripts, tiny skylines, and phone numbers preserve nights out from vanished addresses", + "lineage": "20th-century matchbook advertising, foil-stamped cover design, hospitality ephemera collecting", + "tags": [ + "pocket-artifact", + "foil-script", + "vanished-place" + ], + "system": [ + "Palette/material: club grounds of oxblood, bottle green, and black, gold foil script catching light as the active pick, striker-strip gray banding every edge", + "Type/composition: foil-stamped scripts and tiny skyline cuts on each front flap, the phone number ranked in caps along the striker edge, one cover one composition", + "Topology/navigation: items are pocketable covers that flip open for detail; the drawer sorts by era, place, and hue.", + "Controls/state: use burns down a visible match count; exhausted items keep their cover as a memorial record.", + "Responsive/motion: covers fan in the hand on desktop and stack as a flip pile on phones; flips are single and complete." + ], + "spark": "Twenty struck matches gone, but the cover keeps the club's gold script, its cartoon skyline, and a number no one answers.", + "webLeverage": "3D CSS flips and foil sheen from pointer light give each small artifact real object presence.", + "strength": "world" + }, + { + "id": "vernacular-ephemera-newspaper-weather-map", + "form": "a morning paper's weather page, the national map hatched with fronts and isobars, a legend of suns and snowflakes, city temperatures ranked in agate type below", + "lineage": "AP wirephoto weather maps, USA Today's color weather page, NOAA surface analysis charts", + "tags": [ + "isoline", + "symbol-legend", + "synoptic" + ], + "system": [ + "Palette/material: newsprint gray ground with process-color temperature bands, isobar work in black line, cold-front blue and warm-front red as the moving accents", + "Type/composition: agate city tables ranked under a display-caps map head, the symbol legend boxed in a corner, hierarchy carried by column rules instead of size", + "Topology/navigation: one synoptic view holds the whole country; you read pressure by line spacing, weather by symbol, and drill down through the city table beneath", + "Controls/state: fronts are the moving parts, cold-front teeth and warm-front bumps aimed along their travel; today is inked, tomorrow is the dashed ghost beside it", + "Responsive/motion: the map holds its aspect while the city table reflows beneath on phones; fronts advance in a slow sweep, frozen to dashed positions under" + ], + "spark": "Over coffee the whole continent's argument is visible at once, a cold front's sawteeth biting into the plains while yesterday's high sits circled in the corner.", + "webLeverage": "isobars and front symbols draw as layered SVG paths that animate along real forecast data streams", + "strength": "composition" + }, + { + "id": "vernacular-ephemera-punch-clock-timecard", + "form": "a factory punch-clock and its rack of manila timecards, each in and out struck in ink by the machine's jaw, rows accumulating into a week no one can edit", + "lineage": "IBM and Simplex time recorders, mill-floor card racks, weekly payroll ledgers", + "tags": [ + "timestamp", + "immutable-rows", + "shift" + ], + "system": [ + "Palette/material: manila card stock in a green steel rack, machine-struck purple ink for every timestamp, red ink flagging the late rows nobody can erase", + "Type/composition: the recorder's fixed-pitch struck numerals filling ruled day rows, the worker's typed name at the head, IN and OUT letterpressed as column heads", + "Topology/navigation: the wall rack is the roster, one slot per worker; a card's week reads top to bottom, morning to night, with no pagination", + "Controls/state: inserting the card is the only input and the machine strikes the time itself; a row exists or it does not, and corrections are initialed beside, never over", + "Responsive/motion: the clock's thunk is the sole event sound; narrow views show today's row large and the week faint behind it" + ], + "spark": "At 6:59 the line at the clock shuffles forward, and the machine bites each card with a thunk that turns a minute of a life into permanent purple ink.", + "webLeverage": "timestamps are struck server-side and rendered as append-only DOM rows, so the visible card is the audit trail itself", + "strength": "composition" + }, + { + "id": "vernacular-ephemera-racing-form-betting-slip", + "form": "a racetrack morning-line program and its carbon betting slip, past performances stacked in agate columns, odds chalked and re-chalked until the gate slams", + "lineage": "Daily Racing Form past-performance charts, pari-mutuel tote boards, hand-marked bookmaker slips", + "tags": [ + "odds", + "agate-columns", + "wager" + ], + "system": [ + "Palette/material: buff newsprint ground under dense black agate ink, the chalkboard-green tote surface above, the shortening favorite re-chalked in fresh white", + "Type/composition: past performances packed eight agate columns deep per runner, odds in bold condensed numerals, hierarchy carried by rules and ink weight, not space", + "Topology/navigation: each runner is a dense row of past performances read right to left; the tote board above re-prices the whole field every flash", + "Controls/state: a slip binds horse, wager type, and stake in one line; once punched it is immutable, and the changing odds can only reprice it, never rewrite it", + "Responsive/motion: odds tick with a chalk wipe as money moves; small screens keep the last three starts per runner" + ], + "spark": "Chalk dust drifts off the odds board as the 7-horse shortens from 12-1 to 9-2, and every folded program in the grandstand suddenly opens to the same page.", + "webLeverage": "WebSocket odds repricing animates the whole field in real time while each punched slip stays an immutable record", + "strength": "dual" + }, + { + "id": "vernacular-ephemera-seed-packet-rack", + "form": "a hardware-store seed packet rack in spring, where painted harvest promises, sowing calendars, and zone maps organize the whole garden year on paper", + "lineage": "Vintage seed packet illustration, almanac sowing tables, hardiness-zone map conventions", + "tags": [ + "promise-front", + "instruction-back", + "season-rack" + ], + "system": [ + "Palette/material: gouache harvest color on every packet front, tomato red and pea green at full ripeness, buff instruction backs in black ink, galvanized rack gray ground", + "Type/composition: seedsman display caps arched over the painted crop, variety names in script beneath, backs set in tiny ruled almanac type with the sowing table boxed", + "Topology/navigation: the rack ranks by season and zone; every item leads with its promise and flips to its instructions.", + "Controls/state: planting an item moves it from rack to calendar; germination progress gradually replaces the painted promise.", + "Responsive/motion: rack rows become swipeable seasons on phones; flips are single half-turns with legible landings." + ], + "spark": "The front is July's fattest tomato in gouache; the back is April's discipline in tiny type. The rack sells both at once.", + "webLeverage": "Geolocated zone defaults and date-aware sowing windows personalize the rack from real calendar data.", + "strength": "world" + }, + { + "id": "vernacular-ephemera-signboard-canyon-midnight", + "form": "a rain-slicked Tokyo signboard alley at midnight, where stacked floor-by-floor signs, vending glow, and lantern script turn buildings into indexes of nightlife", + "lineage": "Shinjuku and Dotonbori stacked building signage, izakaya lantern conventions, Japanese neon and backlit-panel craft", + "tags": [ + "stacked-index", + "floor-addressing", + "night-glow" + ], + "system": [ + "Palette/material: wet asphalt black doubling every hue in reflection, backlit panel white and neon red stacked floor by floor, lantern vermilion marking the open room", + "Type/composition: one sign one voice per floor, gothic panel, brush kanji, or neon script, stacked into a vertical spine with the ground floor set loudest", + "Topology/navigation: destinations stack vertically per building; the alley scrolls sideways while floors index upward.", + "Controls/state: open, crowded, and closed states read as sign illumination; the reflection doubles the live state below.", + "Responsive/motion: alleys become single sign spines on phones; flicker is rare, brief, and disabled under" + ], + "spark": "Every building is a spine of glowing titles: fourth-floor jazz, second-floor curry, basement karaoke, all reflected twice in the wet street.", + "webLeverage": "Live-state-driven illumination and a reflective ground plane rendered with CSS transforms and filters.", + "strength": "world" + }, + { + "id": "vernacular-ephemera-vhs-rental-wall", + "form": "a friday-night video store wall, clamshell spines packed face-out and spine-out by genre, handwritten shelf talkers and be-kind-rewind stickers doing the persuasion", + "lineage": "mom-and-pop VHS rental shops, Blockbuster category walls, staff-picks shelf talkers", + "tags": [ + "spine-browse", + "genre-shelf", + "clamshell" + ], + "system": [ + "Palette/material: fluorescent-lit black clamshells with genre-lurid cover inks, horror red and sci-fi chrome blue, the yellow rented-out tag marking every absence", + "Type/composition: title spines in stacked display caps read sideways along shelves, marker-written shelf talkers beneath, genre headers in cut vinyl letters above", + "Topology/navigation: aisles are genres and shelves are alphabet runs; you browse sideways along spines and pull a box face-out to consider it", + "Controls/state: box present means available, an empty slot with a tag means rented out; flipping the clamshell reveals the back-panel synopsis and stills", + "Responsive/motion: pulled boxes rotate face-out on a hinge; phones browse one shelf strip at a time" + ], + "spark": "Under buzzing fluorescents the horror aisle glows lurid, and the only copy of the movie you came for is a gap on the shelf with someone else's name on the tag.", + "webLeverage": "IntersectionObserver lazy-hydrates hundreds of spines so an entire wall scrolls smoothly, boxes flipping in 3d on tap", + "strength": "world" + }, + { + "id": "vernacular-ephemera-well-traveled-passport", + "form": "a well-traveled passport, where visa plates, entry stamps, and security paper accumulate into an involuntary autobiography of borders", + "lineage": "Passport security printing, border entry stamps, visa label design across national systems", + "tags": [ + "stamped-history", + "page-sequence", + "official-paper" + ], + "system": [ + "Palette/material: burgundy cover with a gold-blocked crest, guilloché-tinted security pages in rose and pale green, each border's stamp ink accumulating as the record", + "Type/composition: OCR-B machine lines anchoring the data page, engraved capitals on the cover, stamps landing at any angle over a ruled page grid that stays official", + "Topology/navigation: chronological pages hold accumulated records; the document itself is identity plus history.", + "Controls/state: each grant occupies real page space with an official mark; renewals open a fresh booklet that references the old.", + "Responsive/motion: spreads become single pages on phones; new stamps land with one press, then stay still forever." + ], + "spark": "No two stamps align: purple ovals, faded dates, a full-page visa with a hologram bird, and your face getting older near the front.", + "webLeverage": "Verifiable stamp permalinks and printable pages make the record portable, with offline access to the booklet.", + "strength": "dual" + }, + { + "id": "vernacular-ephemera-worn-playing-card-deck", + "form": "a worn deck of standard playing cards, four suit systems in strict red and black on white stock, mirrored double-ended courts and corner indices ranked to read from a fanned hand, the ornamental back betraying nothing", + "lineage": "Rouen-derived English pattern, De La Rue court redrawings, Bicycle rider-back printing", + "tags": [ + "suit-system", + "corner-index", + "mirrored-court" + ], + "system": [ + "Palette/material: strict red and black suit inks on bright white air-cushion stock, worn rider-back blue for everything face-down, red carrying hearts, diamonds, and alerts", + "Type/composition: rank numerals and suit pips as the only alphabet, corner indices anchoring every card, mirrored double-ended courts so no orientation reads wrong", + "Topology/navigation: the deck is stack, fan, and spread; cards travel between hands and piles, and a fanned edge of stepped indices is the entire overview", + "Controls/state: face-up discloses and the back conceals, selection slides a card proud of the fan, discards keep their order, the back pattern never leaks a value", + "Responsive/motion: wide screens spread the table, phones hold one fanned hand with indices stepped up the edge; shuffles riffle once" + ], + "spark": "The deck is soft at the corners from a thousand shuffles; you fan thirteen cards one-handed under the kitchen light and the indices step up the edge, a red queen looking both ways at once.", + "webLeverage": "css 3d flips reveal faces while drag reorders the fan, the rider back tiling as repeating svg that stays crisp at any scale", + "strength": "dual" + }, + { + "id": "vernacular-ephemera-blank-tape-brand-wall", + "form": "a blank-media shelf wall, identical black cassettes told apart by sleeve geometry alone, diagonal stripes, gradient bands and bold grade codes ranking UR to XL-II across the rack", + "lineage": "TDK, Maxell, BASF and Sony blank-media packaging, electronics-aisle shelf systems", + "tags": [ + "grade-coded-tiers", + "diagonal-banding", + "shelf-rack-grid" + ], + "strength": "world", + "system": [ + "Palette/material: matte black cassette ground, white grade codes as ink, each tier owning one band color, TDK red, Maxell gold, chrome blue for the premium state", + "Type/composition: massive italic grade codes set in extended grotesk, minutes and bias data in small tabular type, one diagonal stripe cutting each sleeve on the same angle", + "Topology/navigation: the rack is a strict shelf grid; families sit in columns, grades ascend within a column, and one pulled sleeve opens as the detail face", + "Controls/state: selection pulls a sleeve forward off the rack, the chosen grade's band color floods its edge, quantity and length read as printed C60 C90 codes", + "Responsive/motion: columns collapse to a single scrolling shelf at narrow widths; motion is a sleeve sliding out on its diagonal" + ], + "spark": "you run a finger along the rack and the identical black shells flicker past, then the gold Maxell band stops you, XL-II in huge italics, and you tilt the sleeve so the gradient stripe catches the aisle light", + "webLeverage": "css linear gradients and transforms draw every stripe and pulled-sleeve tilt natively, scroll snap holds the rack columns" + }, + { + "id": "vernacular-ephemera-grandstand-score-wall", + "form": "a full grandstand score wall, hand-turned plates for the line score, lamp clusters for the live count, an out-of-town rail, climbing pennants and painted sponsor panels all working one summer afternoon", + "lineage": "Manual ballpark scoreboards, Fenway and Wrigley operations, stadium sign painting, pennant traditions", + "tags": [ + "zoned-surfaces", + "plate-and-lamp", + "pennant-rank" + ], + "strength": "dual", + "system": [ + "Palette/material: forest green steel ground with navy and cream painted panels, white plate numerals for figures, amber lamps for anything live, pennant yellow for the leader", + "Type/composition: sign-painter block numerals on interchangeable plates, stencil caps for team rows, sponsor panels in period lettering framing the grid without ever entering it", + "Topology/navigation: each zone owns a data type, line score center, lamp counts beside it, the out-of-town rail below, and nothing ever changes position once learned", + "Controls/state: scores arrive as sliding plates, live counts as lamps clicking on, empty innings hold blank plates, and a pennant climbs its mast when the standings turn", + "Responsive/motion: the wall folds to line score, then lamps, then rail on phones, and every change is one weighty announced plate slide or lamp click" + ], + "spark": "A clank carries across the bleachers as the eighth-inning plate drops into its slot, two amber lamps burning under a sky of painted sponsors, and somewhere a yellow pennant inches up its mast.", + "webLeverage": "Live data feeds drive plate slides and lamp states in real time while the DOM stays a plain, readable line-score table" + }, + { + "id": "vernacular-ephemera-ekiben-wrapper-kiosk", + "form": "a station platform ekiben kiosk, boxed meals sleeved in destination-proud paper wrappers, each lid printed with the local landmark, a numbered contents map of every compartment, and a paper band tied shut across the corner", + "lineage": "Japanese ekiben boxed-meal wrappers, station kiosk culture, regional souvenir label printing", + "tags": [ + "wrapper-band", + "contents-map", + "compartment-grid" + ], + "system": [ + "Palette/material: warm kraft and cream paper grounds, one regional accent ink per box, vermilion maker's seals, woodblock-flavored illustration always and photography never", + "Type/composition: the destination name largest on the lid in confident display letters, a numbered contents diagram mapping each compartment, small notes on origin and season", + "Topology/navigation: the kiosk shelf ranks boxes by rail line and region; opening a box enters a section, and its printed contents map is the index you navigate by", + "Controls/state: an unbroken band means untouched, sliding it free opens the lid, an emptied compartment stays visible as honest absence, seasonal boxes rotate with a dated slip", + "Responsive/motion: phones show one lid at a time with the contents map beneath; motion is a lid lifting and the band sliding off" + ], + "spark": "two minutes before the train you buy the box with the printed gorge on its lid, slide off the paper band in your seat, and find the diagram was true, every compartment exactly where the wrapper promised", + "webLeverage": "css grid mirrors the compartment map as a linked index and a view transition lifts the lid between list and detail", + "strength": "world" + }, + { + "id": "vernacular-ephemera-loteria-tabla-night", + "form": "a backyard loteria night, a deck of numbered icon cards in flat carnival color, each image named and numbered in the same breath, players marking their tablas with dried beans while the caller sings riddles instead of names", + "lineage": "Mexican loteria decks, Don Clemente Gallo editions, cantina and family tabla play", + "tags": [ + "icon-card", + "caller-sequence", + "bean-marker" + ], + "system": [ + "Palette/material: sun yellow, rose, and turquoise flat fields behind each icon, heavy black contour ink, carnival red card borders, a dried bean's brown as the mark of progress", + "Type/composition: one icon per card, centered, named beneath in spaced caps with its number, tablas as four-by-four grids of the same icons, no image ever cropped", + "Topology/navigation: the deck is the sequence and the tabla is the map; the caller's drawn card is always the current item, and your grid fills in whatever order fate deals", + "Controls/state: a called card flips face-up for everyone, placing a bean commits a match, a completed row shouts itself, and unclaimed matches sit as quiet regret between rounds", + "Responsive/motion: tablas stay square and shrink whole on phones with the called card pinned above; motion is a card flip and a bean drop" + ], + "spark": "the caller sings the riddle before the name, and half the table laughs and reaches for beans while you scan your tabla for the mermaid, one row short of shouting", + "webLeverage": "multiplayer card calls sync over websocket while each tabla remains a keyboard-operable grid with live-region announcements", + "strength": "dual" + }, + { + "id": "vernacular-ephemera-cigar-box-lithograph", + "form": "a havana cigar box lithograph, chromolith brand art blooming across the inner lid, embossed gold medallions and a government warranty seal crossing the edge, ring bands repeating the crest in miniature around every cigar inside", + "lineage": "Cuban cigar box chromolithography, habilitacion label printing, government warranty seals, ring band design", + "tags": [ + "lid-art", + "band-badge", + "seal-break" + ], + "system": [ + "Palette/material: cedar cream ground, chromolith crimson and tobacco green inks, embossed gold as printed light, never hardware, the green seal's stripe crossing one corner", + "Type/composition: the brand name in ornamented display caps on an arced ribbon, supporting claims in etiquette script, medallions and coin vignettes ranking honors around the frame", + "Topology/navigation: the lid art is home and the inner lid holds the deep story; every item wears the ring band of its box, and the seal must be crossed to enter", + "Controls/state: breaking the seal is the one irreversible act, sliding a band off commits a choice, and empty rows in the box stay shown, never quietly backfilled", + "Responsive/motion: the lid frame compresses ornament before it ever shrinks the brand ribbon; motion is a hinged lid opening past its resistance" + ], + "spark": "you slit the green seal with a thumbnail, lift the cedar lid, and the inner lithograph blooms, a harbor, a coat of arms, twenty bands repeating the same tiny crest in perfect rows", + "webLeverage": "layered svg builds the lithograph frame and ring bands, with an animated one-time seal-break state gating first entry", + "strength": "world" + }, + { + "id": "vernacular-ephemera-airline-safety-card", + "form": "a laminated airline safety card, wordless pictogram panels in numbered sequence, flat calm-faced figures bracing and inflating in primary color, red slashes forbidding and green arrows escaping, engineered to be read in panic", + "lineage": "jet-age airline safety briefing cards, 1970s and 80s wordless pictogram instruction, laminated seat-pocket ephemera", + "tags": [ + "numbered-panels", + "wordless-pictogram", + "slash-and-arrow" + ], + "system": [ + "Palette/material: laminated white ground with flat spot color, safety-yellow vests and sky-blue cabin fills, red kept for prohibition slashes, green kept for exits and their arrows", + "Type/composition: almost no words anywhere, big circled step numerals order the panels, figures drawn flat with calm faces and heavy outlines, arrows doing all the verbs", + "Topology/navigation: each scenario is a numbered strip of panels; strips rank by urgency down the card, and the exit-path diagram anchors everything as the master map", + "Controls/state: the current step holds full color while done steps gray back, forbidden actions wear the red slash, and success is always a figure moving along a green arrow", + "Responsive/motion: strips stack one panel per screen keeping their numerals; motion is a straight cut between steps, nothing decorative" + ], + "spark": "Somewhere over the ocean you flip the stiff card and a serene flat woman inflates her vest in three numbered panels, a red slash forbidding the cigarette she was never going to light.", + "webLeverage": "svg pictogram panels advance with css steps() timing so every instruction cuts frame to frame like the printed card", + "strength": "dual" + } + ] + }, + { + "id": "pop-culture-shelf", + "label": "Pop Culture Shelf", + "well": "vernacular-ephemera", + "concepts": [ + { + "id": "pop-culture-shelf-acid-rave-flyer", + "form": "an acid-house rave flyer, chrome-bevel logotype over a fractal backdrop, smiley yellow punctuation, an info line promising a secret location and a phone number", + "lineage": "UK acid house 1988-92, Fantazia and Dreamscape flyers, Hacienda print culture", + "tags": [ + "chrome-bevel", + "fractal-ground", + "info-line" + ], + "system": [ + "Palette/material: smiley yellow and hot magenta on a black fractal ground, chrome-gradient silver for the headline logotype, the yellow reserved for the active call to action", + "Type/composition: a chrome-bevel logotype dominating the top half, venue and date stacked in tight caps along a bottom info line, everything centered on the vertical axis", + "Topology/navigation: one flyer face per event; the headline pulls you in, the info line at the foot holds every practical answer, the phone number is the deep link", + "Controls/state: the smiley is the confirm button and pressing it grins wider; secret details stay scrambled until the night unlocks them line by line", + "Responsive/motion: the logotype scales to width and the info line wraps last; motion is a slow fractal zoom behind static type" + ], + "spark": "Someone presses the flyer into your hand outside the chip shop, chrome letters flashing under the streetlight, and you memorize the phone number on the info line because the map only exists after midnight.", + "webLeverage": "canvas fractal zoom background under css chrome-gradient text; the info line stays pinned with position sticky", + "strength": "world" + }, + { + "id": "pop-culture-shelf-anime-command-center", + "form": "a nineties mecha-anime crisis wall, phosphor orange and acid green type on absolute black, hazard-chevron bands framing bilingual kanji-over-caps labels, seven-segment countdowns at monumental scale", + "lineage": "Neon Genesis Evangelion MAGI displays, Gainax screen graphics, nineties mecha-anime UI tradition", + "tags": [ + "hazard-chevrons", + "bilingual-labels", + "hex-overlay" + ], + "system": [ + "Palette/material: phosphor orange and acid green on absolute black ground, red reserved for condition bars, alarms invert to yellow-on-black chevrons with a red-boxed headline", + "Type/composition: bilingual labels stack a kanji headline over spaced roman caps, every block ruled and framed, seven-segment countdown digits set at monumental scale", + "Topology/navigation: hexagonal cell overlays tile the black field, leader lines run from a central schematic silhouette out to framed label blocks at the edges", + "Controls/state: cross-hair calipers snap to the target, signed counters tick under each reading, red condition bars fill by severity, warnings band the frame", + "Responsive/motion: narrow frames stack the label blocks over one countdown clock; motion is counter ticks and chevron crawl" + ], + "spark": "sirens drop to a hum as the lights go down; the wall floods orange, seven-segment digits taller than you count backward, hazard chevrons crawl the border while kanji headlines snap over spaced caps and a red bar creeps toward its limit", + "webLeverage": "css text-shadow does the phosphor glow, canvas draws the rainbow contour plots, and a steps() animation ticks the seven-segment countdown digits", + "strength": "dual" + }, + { + "id": "pop-culture-shelf-arcade-marquee-row", + "form": "an arcade marquee row, backlit painted logotypes glowing above each cabinet, airbrushed side-art heroes down a dark aisle, attract screens cycling their promises", + "lineage": "golden-age arcade cabinet art, Atari and Williams marquees, the airbrush illustration trade", + "tags": [ + "marquee-band", + "side-art-panel", + "attract-loop" + ], + "system": [ + "Palette/material: near-black aisle ground, marquees in backlit cyan, magenta and sunset airbrush fades, phosphor white for score type, the lit marquee is the active state", + "Type/composition: chrome-and-bevel game logotypes painted wide on each marquee band, scores in phosphor bitmap caps, side art running full-height on the flanks", + "Topology/navigation: one cabinet per destination down a single dark aisle; the glowing marquee band is the signpost, the attract screen previews before you commit a coin", + "Controls/state: coin-in wakes a cabinet from attract loop to play, the marquee holds its glow, high-score entry takes exactly three phosphor initials", + "Responsive/motion: the row collapses to one lit cabinet at a time on phones; attract screens loop on idle" + ], + "spark": "You walk the dark aisle with a pocket of quarters, marquee glow striping the ceiling, and stop where an attract screen resets its demo just as your reflection lines up with the joystick.", + "webLeverage": "layered box-shadow builds the backlit marquee glow; canvas attract loops pause under prefers-reduced-motion", + "strength": "world" + }, + { + "id": "pop-culture-shelf-bebop-title-card", + "form": "a jazz-session anime title card, flat mustard, brick, teal, and cream fields sliced by hard asymmetric bars, oversized grotesk titles set tight with deliberate collisions, silhouettes in freeze-frame, print texture over cel color", + "lineage": "Cowboy Bebop title cards and eyecatches, Sunrise print-graphic sensibility, jazz LP typography", + "tags": [ + "color-bars", + "freeze-frame", + "colliding-caps" + ], + "system": [ + "Palette/material: flat mustard, brick red, teal, and cream fields over ink black, one field flooding behind the active title, print grain dusting every color", + "Type/composition: oversized grotesk caps set tight to deliberate collisions, episode numbering as ornament, hard asymmetric bars slicing the frame into ranked fields", + "Topology/navigation: each section is a card cut like a title frame; you move by hard cuts between compositions, a numbered index strip keeping the running order", + "Controls/state: the current item freezes as a silhouette against its flooded color field, hover slides a bar across the frame, selection stamps the number", + "Responsive/motion: narrow frames stack the bars horizontal with titles breaking mid-word on purpose; motion is freeze-frame cuts on a beat" + ], + "spark": "a brass hit lands and the frame freezes: a figure flat black against mustard, a teal bar slicing past its shoulder, the session title crashing letters together above a tiny episode number, grain settling over the color like an old print", + "webLeverage": "css grid slices the asymmetric color bars while negative letter-spacing collides the display caps, grain screened on with blend modes", + "strength": "world" + }, + { + "id": "pop-culture-shelf-benday-comic-page", + "form": "a silver-age comic page, ben-day dots and four-color misregistration on pulp, caption boxes and thought bubbles, action lettering carrying its own physics", + "lineage": "silver-age four-color printing, Jack Kirby page layouts, Roy Lichtenstein's appropriation", + "tags": [ + "four-color", + "panel-grid", + "burst-lettering" + ], + "system": [ + "Palette/material: CMYK process inks on yellowed pulp, ben-day dots mixing flesh from magenta on white, flat process-blue skies, red reserved for the action state and its lettering", + "Type/composition: hand-lettered caps in caption boxes and bubbles, bold-italic emphasis mid-sentence, sound effects in outlined burst letters that scale with impact", + "Topology/navigation: a six-panel grid read left to right; caption boxes hand off between scenes, a splash page interrupts the grid only when the story earns it", + "Controls/state: the active panel registers its plates cleanly while idle panels drift a half-dot off register, thought bubbles hold unsaved intent", + "Responsive/motion: the grid stacks to one panel per screen on phones; motion is a panel-to-panel wipe with a burst on commit" + ], + "spark": "You flatten the comic on the spinner rack's bottom shelf, pulp smell rising, and see the printing slipped, the hero's red sitting a half dot off his outline for the whole fight.", + "webLeverage": "css blend modes stack simulated CMYK plates; a misregistration offset animates via transform translate", + "strength": "world" + }, + { + "id": "pop-culture-shelf-blister-card-wall", + "form": "an action-figure blister-card wall, character art framing a vacuum-formed bubble on a pegboard of punch-hole cards, the full lineup printed across every cardback", + "lineage": "Kenner Star Wars cardbacks, Hasbro blister packaging, toy-aisle merchandising", + "tags": [ + "pegboard-grid", + "bubble-window", + "cardback-index" + ], + "system": [ + "Palette/material: glossy black card under a clear PVC bubble, silver logotype rail across the top, one line-color band per wave, accent red reserved for the active peg", + "Type/composition: the character name in wide movie-logo caps under the bubble, the cardback lineup set as a numbered thumbnail grid, legal lines in tiny type at the foot", + "Topology/navigation: a pegboard grid of identical cards; the front sells one item, the cardback indexes the whole collection as your map to what is missing", + "Controls/state: the sealed bubble is the untouched state, lifting a card off its peg opens detail, owned items get a check on the cardback lineup while gaps stay ghosted", + "Responsive/motion: cards reflow to a two-up peg column on phones; motion is the card swinging off its peg hole" + ], + "spark": "You run a thumb along the peg hooks, cards clicking, until one bubble catches the fluorescent light, and you flip it to the cardback where the whole lineup stares out in numbered squares, three of them still missing from your shelf.", + "webLeverage": "css grid pegboard; backdrop-filter and layered box-shadow render the raised PVC bubble, drag lifts a card off its peg", + "strength": "dual" + }, + { + "id": "pop-culture-shelf-cereal-box-aisle", + "form": "a supermarket cereal aisle, a planogram wall of saturated boxes with mascots aimed at child eye height, burst violators and prize call-outs up front, mazes waiting on the back panels", + "lineage": "mid-century cereal box design, General Mills and Kellogg's mascot art, supermarket planogram craft", + "tags": [ + "shelf-grid", + "burst-violator", + "mascot-panel" + ], + "system": [ + "Palette/material: cereal-red and sunrise yellow on coated board, milk-white side panels carry body copy, a sunburst NEW! violator in untinted yellow marks the active item", + "Type/composition: fat rounded logotype arched across the box top, prize call-outs in starburst caps, condensed nutrition type ranked down the side panel", + "Topology/navigation: the aisle is a planogram grid of box facings, each front opens to a back panel where the mazes and fine print live", + "Controls/state: picking a box pulls it proud of the shelf and its mascot turns to meet your eye, the burst violator stamps NEW on whatever changed", + "Responsive/motion: narrow screens shrink the wall to a single-facing carousel; motion is a shelf-glide dolly down the aisle" + ], + "spark": "You crouch to the second shelf where the mascots aim their eyes, a toucan and a tiger grinning at kid height, and turn a box over to trace the back-panel maze while the whole wall hums with competing yellows.", + "webLeverage": "css grid planogram with scroll-snap facings; a 3d flip transition turns each box to its back panel", + "strength": "world" + }, + { + "id": "pop-culture-shelf-city-pop-airbrush", + "form": "a city-pop airbrush sleeve, chrome script logotype over a gradient sunset sky, pastel sea horizon and glass-tower skyline, palm silhouettes placed like punctuation, bilingual titles sharing the cover in balance", + "lineage": "eighties Japanese city-pop LP artwork, Hiroshi Nagai resort paintings, Eizin Suzuki airbrush school", + "tags": [ + "gradient-horizon", + "chrome-script", + "airbrush-pastel" + ], + "system": [ + "Palette/material: gradient sunset ground from peach through rose to powder blue, airbrushed aqua sea as the body field, chrome script reserved for the title mark", + "Type/composition: a chrome script logotype floats above the horizon while japanese and english titles share the lower band in small balanced caps", + "Topology/navigation: everything hangs on one horizon line; sections are stations along the shore you glide between, palms and glass towers marking the stops", + "Controls/state: controls are smooth airbrushed pills, hover raises a soft light flare, the active choice takes a chrome rim and a reflection in the water", + "Responsive/motion: the horizon holds as frames narrow, the skyline compressing before the sea does; motion is a slow parallax drift toward sunset" + ], + "spark": "the sky grades peach into powder blue behind a chrome script you could almost touch; a windshield flares once out on the coast road, palms stand like commas along the aqua horizon, and the evening looks airbrushed smooth enough to drive into", + "webLeverage": "layered css gradients paint the sunset and sea, background-clip text chromes the script logotype, and scroll parallax drifts the skyline", + "strength": "world" + }, + { + "id": "pop-culture-shelf-code-cascade-terminal", + "form": "a cyberpunk glyph-rain terminal, pale green half-width katakana and digits falling in columns of unequal speed, bright leading characters over fading tails, wireframe schematics surfacing through the cascade", + "lineage": "The Matrix digital rain, Ghost in the Shell 1995 terminal sequences, cyberpunk hacker-screen tradition", + "tags": [ + "glyph-rain", + "column-cascade", + "wireframe-overlay" + ], + "system": [ + "Palette/material: pale phosphor green glyphs on black ground, leading characters burned near white, tails fading through green to charcoal, the active column held brightest", + "Type/composition: monospaced half-width katakana and digits in strict vertical columns of unequal speed, data locking into readable rows only where you focus", + "Topology/navigation: content surfaces out of the rain as wireframe panes; you tunnel between layers, the cascade always falling behind the one in focus", + "Controls/state: hover freezes a column to legibility, selection burns its glyphs white and holds them, idle panes dissolve back into falling texture", + "Responsive/motion: narrow screens thin the rain to a margin curtain beside one readable pane" + ], + "spark": "green glyphs sheet down the dark like rain on glass; you stare until a column slows, katakana snapping into a name you know, and a wireframe city rotates up through the cascade while the rest keeps falling behind your reflection", + "webLeverage": "a canvas loop draws thousands of falling glyphs with per-column speed, css mix-blend-mode screening them over the wireframe svg layer", + "strength": "dual" + }, + { + "id": "pop-culture-shelf-elbow-panel-console", + "form": "a pill-cornered starship wall panel, thick colored elbows turning every corner, flat pastel lilac, peach, gold, and periwinkle blocks on pure black, numeric code clusters as button labels, the frame itself the layout grid", + "lineage": "Michael Okuda's LCARS for Star Trek: The Next Generation, okudagram screen graphics tradition", + "tags": [ + "elbow-frames", + "pill-segments", + "flat-pastels" + ], + "system": [ + "Palette/material: flat lilac, peach, gold, and periwinkle blocks on pure black ground, no gradients and no glow, the warmest gold saved for the active segment", + "Type/composition: condensed uppercase set flush inside each block, numeric code clusters as button labels, the sweeping elbow frame is the only layout grid", + "Topology/navigation: thick elbows sweep the frame and branch into ranked pill segments; sections are color banks you travel between, never pages that reload", + "Controls/state: every pill is a button, a press blinks it to a brighter tint with a short chirp cue, numeric codes reorder to show the routine now running", + "Responsive/motion: on narrow screens the elbow rotates to run down the left edge with pills stacking below; motion is instant color swaps, nothing left to reduce" + ], + "spark": "you rest a palm on the black glass, pastel pills glowing flat as paint; a fingertip tap turns a peach segment gold, a numeric cluster reshuffles beside it, and the great lilac elbow sweeps the whole wall around to the next bank of codes", + "webLeverage": "css border-radius and grid draw the elbow frames natively, and :active state swaps flat background colors with zero transition time", + "strength": "dual" + }, + { + "id": "pop-culture-shelf-endurance-livery-garage", + "form": "an endurance-racing garage, Martini stripes and Gulf orange-over-blue run as portable identity systems across bodywork, number roundels and sponsor patchwork resolved into speed", + "lineage": "Martini Racing livery, the Gulf Porsche 917, Le Mans endurance livery tradition", + "tags": [ + "stripe-system", + "number-roundel", + "sponsor-grid" + ], + "system": [ + "Palette/material: Gulf powder blue with a marigold stripe, or white ground running Martini's light blue, dark blue and red bands, the white number roundel as focus state", + "Type/composition: sponsor logotypes gridded to panel lines, race numbers in heavy grotesk digits inside roundels, the stripe system reading identity before any word does", + "Topology/navigation: stripes run nose to tail as the wayfinding spine; sections read as body panels, the roundel anchors each car's page and the pit board calls the lap", + "Controls/state: the live car carries the lit roundel, stints tick on the pit board, a sponsor panel dims when its system is cold and flares on activation", + "Responsive/motion: on narrow screens the stripe spine turns vertical and panels stack along it; changes streak with speed lines" + ], + "spark": "You stand in the garage at 3 a.m. as the 917 rolls in, powder blue and marigold under sodium light, and a mechanic wipes the roundel clean so the number reads for the night stint.", + "webLeverage": "css linear-gradient stripe systems persist across view transitions, carrying identity between pages", + "strength": "world" + }, + { + "id": "pop-culture-shelf-eurostile-panel-computer", + "form": "a midcentury spaceflight status wall, a black frame of small glowing rectangular screens, each one flat color field carrying a three-letter code in white extended caps, red, amber, green, and blue reading as one calm wall of state", + "lineage": "2001: A Space Odyssey HAL 9000 displays, Douglas Trumbull screen graphics, Eurostile Bold Extended tradition", + "tags": [ + "code-cells", + "flat-color-state", + "even-grid" + ], + "system": [ + "Palette/material: matte black frame as ground, each cell a single flat field of signal red, amber, green, or cool blue, white extended caps the only ink", + "Type/composition: bold extended caps with squared curves, one three-letter code centered per cell, the even grid of cells is the entire composition, lowercase never spoken", + "Topology/navigation: an even grid of labeled cells grouped by function, not hierarchy; you read the wall whole, then lean into one cell to expand it in place", + "Controls/state: state is color and nothing else: a cell turns amber to warn and red to fail, acknowledged cells settle back to green, touch expands the code to words", + "Responsive/motion: the grid reflows from wall to single column keeping cell proportions; the only motion is a measured color crossfade" + ], + "spark": "the cabin is silent except for air; you float before a black wall of small lit windows, each holding three white letters on its own calm color, and when one square slips from green to amber the whole room seems to lean toward it", + "webLeverage": "css grid tiles the code cells and background-color transitions carry all state, a variable font width axis stretching the extended caps", + "strength": "dual" + }, + { + "id": "pop-culture-shelf-football-kit-crest", + "form": "a football kit wall, embroidered crests over the heart, drop-shadow number typography across the back, sponsor lockups and sleeve patch grammar, home and away colorway logic", + "lineage": "Admiral and Umbro kit eras, national team crest heraldry, football shirt typography", + "tags": [ + "crest-anchor", + "number-back", + "colorway-pair" + ], + "system": [ + "Palette/material: home colors saturated on polyester weave, the away kit their inverse, gold embroidery thread on the crest, the captain's armband hue as active accent", + "Type/composition: drop-shadow numerals filling the back panel, the player name arched above in spaced caps, crest and sponsor lockup balancing the chest line", + "Topology/navigation: the crest is home, always over the heart; the back number identifies, the sleeve patches say which competition you are in tonight", + "Controls/state: switching context swaps home for away colorway with the crest untouched, a sleeve patch appears per active competition, retired numbers lock", + "Responsive/motion: narrow screens show the chest first and a tap spins to the number back; motion is a fabric ripple on the swap" + ], + "spark": "You hold the new shirt up to the light, thumb finding the raised gold thread of the crest, then turn it around to see your own name arched over a nine in drop-shadow numerals.", + "webLeverage": "variable font weight plus svg filters build the drop-shadow numeral style; css custom properties swap the colorway", + "strength": "world" + }, + { + "id": "pop-culture-shelf-industrial-starship-terminal", + "form": "a used-future starship crew terminal, green and amber phosphor caps on curved crt black, hazard pictograms and stenciled equipment codes on grimy off-white panels, a workhorse ship's paperwork made screen", + "lineage": "Alien's Nostromo and Mother screens, Ron Cobb's Semiotic Standard, used-future production design", + "tags": [ + "typed-readout", + "phosphor-crt", + "pictogram-plates" + ], + "system": [ + "Palette/material: green phosphor body text and amber warnings on curved crt black, grimy off-white panel chrome around the glass, stencil black for equipment codes", + "Type/composition: chunky monospaced uppercase readouts that type themselves line by line, stenciled codes and striped pictogram plates labeling every zone", + "Topology/navigation: one query line at a time, the screen answers in typed pages; deck plans are schematic plates you request by code rather than browse", + "Controls/state: commands are typed and acknowledged in caps, standby is a blinking block cursor, danger swaps the phosphor to amber under a striped hazard plate", + "Responsive/motion: small screens keep one column of typed lines and shrink pictogram plates to icons; motion is the character-by-character print" + ], + "spark": "the ready room hums with recycled air; you key a query and the curved glass answers in green capitals, one letter at a time, while an amber line blinks about pressure and a striped pictogram plate above the hatch says exactly what not to touch", + "webLeverage": "a css steps() typewriter reveal prints each phosphor line, with border-image stripes and svg pictogram plates for the hazard chrome", + "strength": "world" + }, + { + "id": "pop-culture-shelf-kaiju-broadcast-alert", + "form": "a kaiju-era emergency broadcast graphic, brush-weight kanji title cards over roman subtitles, red and white civil-defense stripes, evacuation maps with bold arrows, newsreel monochrome cut with full-color alarm frames", + "lineage": "Showa-era tokusatsu broadcast inserts, Godzilla-series alert graphics, Japanese civil-defense print", + "tags": [ + "striped-alerts", + "brush-kanji", + "broadcast-cuts" + ], + "system": [ + "Palette/material: newsreel gray monochrome as ground, civil-defense red and white stripes framing every alert, full color reserved for the alarm frame alone", + "Type/composition: brush-weight kanji headlines over small spaced roman subtitles, centered with bureaucratic calm, evacuation arrows the heaviest strokes on the page", + "Topology/navigation: broadcast order rules the sequence: title card, map, instruction, in fixed succession; the map's bold arrows are the only wayfinding that matters", + "Controls/state: routine notices stay in calm gray bureaucracy, escalation adds the striped border, the true alarm cuts to full color under a held siren card", + "Responsive/motion: small screens crop to the headline and one arrow; motion is hard broadcast cuts and a slow stripe crawl" + ], + "spark": "the picture cuts from gray newsreel to a striped frame; brush-stroke kanji fill the screen over a quiet roman subtitle, a map slides in with one thick arrow pointing away from the coast, and the announcer's calm makes it worse", + "webLeverage": "css repeating-linear-gradient draws the civil-defense stripes with an animation crawling them, filter grayscale holding the newsreel ground", + "strength": "world" + }, + { + "id": "pop-culture-shelf-manga-screentone-page", + "form": "a weekly manga page, screentone gradients standing in for every material, speed lines bending panel space, bleeds breaking the gutter for emotion, sound effects drawn as characters", + "lineage": "weekly manga print production, Shonen Jump layouts, Letratone and IC screentone sheet craft", + "tags": [ + "panel-gutter", + "tone-density", + "bleed-break" + ], + "system": [ + "Palette/material: black ink on newsprint white only, material rendered by tone pitch, 60-line 10% dot for skin, 30% for shadow, solid black fill reserved for the decisive beat", + "Type/composition: dialogue in rounded type inside bubbles, sound effects hand-drawn as expressive characters, panels ranked right to left on the page grid", + "Topology/navigation: read right to left, top to bottom; gutters pace time, a bleed past the trim marks the emotional peak, the page turn is the cliffhanger", + "Controls/state: focus tightens with speed lines converging on the chosen panel, hover raises tone density one step, the active panel breaks its gutter", + "Responsive/motion: panels stack single-file on phones keeping right-to-left order within rows; speed lines animate on transitions" + ], + "spark": "You hold the phone-book weekly open on the train, newsprint graying your fingers, and hit a spread where the speed lines converge and the tone drops to solid black for one panel.", + "webLeverage": "svg pattern fills reproduce exact tone pitches; repeating radial-gradient halftones scale without moire", + "strength": "world" + }, + { + "id": "pop-culture-shelf-neo-tokyo-neon-night", + "form": "a neo-tokyo neon night, kanji signage stacking rain-black towers in red, magenta, and cyan, taillight streaks smearing into light trails, hazard stripes and government stencils on concrete, one red accent burning at the center", + "lineage": "Akira's Neo-Tokyo production design, Katsuhiro Otomo, cyberpunk anime cityscape tradition", + "tags": [ + "stacked-signage", + "neon-on-black", + "light-trails" + ], + "system": [ + "Palette/material: rain-black ground with stacked neon kanji in magenta and cyan, wet reflections doubling every light, one scarlet accent burning for the live element", + "Type/composition: vertical kanji sign stacks played against horizontal stenciled roman caps, compositions built tall with the red mark always weighted at center", + "Topology/navigation: the page is a tower you climb; signage stacks mark the districts, hazard stripes fence off restricted sections, streets scroll sideways at ground level", + "Controls/state: dormant signs hold a dim tube glow, the active one snaps to full neon with a reflection beneath, warnings flicker like failing gas before they die", + "Responsive/motion: small screens keep one sign stack and shorten trails to glints; taillight streaks smear on scroll" + ], + "spark": "rain needles past the tube light; you crane up a tower of stacked kanji burning magenta over cyan, a taillight smears its red ribbon down the wet street, and somewhere above, one scarlet sign holds the whole night's center of gravity", + "webLeverage": "scroll-linked animation smears the taillight trails while css blur and blend modes double every neon sign in wet-asphalt reflection", + "strength": "world" + }, + { + "id": "pop-culture-shelf-photocard-binder", + "form": "a k-pop photocard binder, idol portrait cards seated in padded deco sleeves, era-coded backs and album-version scarcity, a trading spread open across two rings", + "lineage": "K-pop photocard culture, cut albums and pull inclusions, binder deco craft", + "tags": [ + "sleeve-grid", + "era-coding", + "deco-layer" + ], + "system": [ + "Palette/material: milky lavender and cream binder shell, holographic sleeve film over each card, era color coding the card backs, glitter deco reserved for the bias slot", + "Type/composition: rounded hangul-and-latin logotype lockups per era, member and album version in small caps under each sleeve, the page a strict three-by-three sleeve grid", + "Topology/navigation: rings turn as pages and each spread holds one era; the sleeve grid is the index, and empty pockets read as wants, not errors", + "Controls/state: a card slides from its pocket to trade, deco stickers layer on the sleeve and never the card, duplicates fan behind the front pull", + "Responsive/motion: the spread folds to a single page column on phones; motion is a page turn on the rings and a slow holo shimmer" + ], + "spark": "You turn the binder rings to the new era spread and slide a fresh pull into its padded sleeve, holo film catching the desk lamp, one pocket left open for the version your trade partner is bringing tomorrow.", + "webLeverage": "pointer-driven gradient shimmer on sleeves via css blend modes; drag moves cards between pockets", + "strength": "world" + }, + { + "id": "pop-culture-shelf-rebel-menu-interface", + "form": "a rebel stylish-menu collage, harsh red, black, and white only, torn-paper cutouts and starburst panels at reckless angles, enormous sheared italic display type, halftone dots and comic hatching under perfect usability", + "lineage": "Persona 5 menu and battle UI, Shigenori Soejima's art direction, stylish JRPG interface tradition", + "tags": [ + "torn-cutouts", + "sheared-italics", + "smash-cuts" + ], + "system": [ + "Palette/material: flat scarlet ground with black torn-paper shapes and white knockout type, halftone gray for texture, the current choice flipped to white-on-black", + "Type/composition: enormous italic display caps sheared for speed, set at reckless angles yet ranked on a hidden grid, labels punched out of starburst panels", + "Topology/navigation: menus are full-screen splashes, each choice a jagged cutout at its own angle; a silhouette owns a third of the frame and points the way onward", + "Controls/state: selection snaps with a full-frame splash and a burst of hatching, the chosen cutout swells while rejected options collapse flat to the edge", + "Responsive/motion: small screens stack the cutouts down the red field at alternating shear; transitions are single-frame smash cuts" + ], + "spark": "the menu hits like a poster slammed on a wall: scarlet floods the frame, a silhouette lunges across a starburst, and every option is a torn black shard tilting toward your thumb, the chosen one snapping white with a burst of hatching", + "webLeverage": "css clip-path cuts the torn-paper panels, transforms shear the italic type, and view transitions land the full-frame smash cuts", + "strength": "dual" + }, + { + "id": "pop-culture-shelf-rpg-dialog-window", + "form": "a classic jrpg command window, deep blue gradient panels under crisp double white borders, pixel-serif text revealed letter by letter, a blinking triangle promising more, vertical menus with a pointing hand cursor", + "lineage": "Dragon Quest command windows, Final Fantasy menu screens, 8-bit and 16-bit JRPG conventions", + "tags": [ + "bordered-windows", + "letter-reveal", + "hand-cursor" + ], + "system": [ + "Palette/material: deep blue gradient panel ground under crisp double white borders, white pixel text as body ink, gold reserved for coin and item counters", + "Type/composition: white pixel-serif set with generous line height inside bordered windows, vertical command lists ranked one word per row, counters right-aligned in gold", + "Topology/navigation: windows stack in strict z-order, each choice opening a smaller bordered pane beside the last; the pointing hand always marks where you are", + "Controls/state: the hand cursor steps between rows with a click, a confirmed choice flashes its window, a blinking triangle in the corner promises more text", + "Responsive/motion: on small screens windows go full-width and stack; the only motions are letter-by-letter reveal and cursor blink" + ], + "spark": "the blue window slides up with a soft chime; letters print one by one inside the double white border, the little triangle blinks in the corner, and a white hand waits beside four words that hold the rest of your evening", + "webLeverage": "css image-rendering pixelated keeps the double borders crisp while a steps() animation prints text letter by letter and blinks the continue triangle", + "strength": "dual" + }, + { + "id": "pop-culture-shelf-saturday-title-card", + "form": "a saturday-morning cartoon title card, chunky outlined logotype on a starburst, the character lockup frozen mid-leap, taped-off-air VHS patina over theme-song energy", + "lineage": "Hanna-Barbera and Filmation title design, broadcast bumper cards, home VHS taping culture", + "tags": [ + "starburst-card", + "outline-logotype", + "vhs-patina" + ], + "system": [ + "Palette/material: cel-paint primaries, sunshine yellow rays over sky cyan, thick black outlines as body ink, VHS chroma bleed softening the active card's edges", + "Type/composition: a chunky outlined logotype bowed across the card's center, episode titles in brush caps on a lower third, everything locked to the starburst's hub", + "Topology/navigation: one card per segment; bumper cards announce every transition, the starburst hub is where the eye lands and the next card wipes in from black", + "Controls/state: play tracks like a VHS head, pausing tears the frame into static bands, the selected card leaps its character lockup one cel higher", + "Responsive/motion: the starburst crops to a vertical wedge on phones with the logotype re-bowed; rays spin slowly behind the lockup" + ], + "spark": "You sit cross-legged on the carpet at 7 a.m., cereal going soft, when the starburst card slams in with the theme song and the tracking wobbles because this tape has been recorded over twice.", + "webLeverage": "svg starburst rays rotate with css animation; svg filters add VHS tracking noise, disabled under reduced motion", + "strength": "world" + }, + { + "id": "pop-culture-shelf-skate-deck-wall", + "form": "a skate-shop deck wall, full-bleed illustration on a die-cut canvas rack, brand logotypes built to survive scale-down, grip-tape black backs against screaming color", + "lineage": "Powell-Peralta Ripper, Santa Cruz Screaming Hand, Jim Phillips and VCJ deck art", + "tags": [ + "deck-rack", + "full-bleed-art", + "logo-lockup" + ], + "system": [ + "Palette/material: screaming aqua, hot pink and bone white silkscreen inks on maple, grip-tape black as the resting back face, one dayglo spot color marking the deck in hand", + "Type/composition: brand logotypes drawn as lockups that still read at sticker size, artist linework owning the full bleed, price and size in marker caps on a rail tag", + "Topology/navigation: decks rack in vertical rows nose-up; you browse by walking the wall, each board a full-height card, the top rail names the brand family", + "Controls/state: pulling a deck off the rack flips grip black to full art, the dayglo spot ink flags the selected board, sold decks leave an empty hook", + "Responsive/motion: the wall narrows to a swipeable two-deck rack on phones; motion is the pull-and-flip off the hook" + ], + "spark": "You walk the rack under buzzing shop lights, aqua and pink screaming off the maple, and pull one deck by the nose to flip it from grip-tape black to the full hand-drawn scream underneath.", + "webLeverage": "horizontal scroll-snap rack of tall svg art; a 3d rotateY flip swaps the grip back for the full-bleed face", + "strength": "world" + }, + { + "id": "pop-culture-shelf-tcg-card-frame", + "form": "a trading-card-game frame, cost corner, art window, type line, rules box and power corner all load-rated for play, rarity stamp and set symbol seated in fixed slots", + "lineage": "Magic: The Gathering frame anatomy, Pokemon TCG layouts, Richard Garfield's systems design", + "tags": [ + "fixed-slots", + "rules-box", + "rarity-stamp" + ], + "system": [ + "Palette/material: a five-color frame code keyed to faction, parchment cream rules box as ground, black ink rules text, gold-foil rarity stamp marking the rare state", + "Type/composition: a serif name bar over the art window, italic flavor text below plain rules type, numbers seated in corner slots, every element millimetered to one frame grid", + "Topology/navigation: one card is one unit of meaning; the frame's fixed slots are the wayfinding, cost top-left, identity center, power bottom-right, always", + "Controls/state: tap rotates the card ninety degrees to mark it spent, targeting lifts it above the stack, the foil stamp shimmers only on the selected rare", + "Responsive/motion: small screens keep the frame ratio and zoom the rules box on tap; motion is the tap rotation and a foil sheen sweep" + ], + "spark": "You fan seven cards and read them without reading, cost corners first, the parchment rules boxes waiting, then tilt one so the gold rarity stamp throws a line of light across the sleeve.", + "webLeverage": "css transforms drive the tap rotation; a pointer-position gradient sweep fakes foil holography on the rare stamp", + "strength": "dual" + }, + { + "id": "pop-culture-shelf-wax-pack-card", + "form": "a wax pack of baseball cards, team-color borders framing posed portraits, stat tables ruled across the card backs, a rookie flag cutting one corner", + "lineage": "Topps 1952-89 card design, Fleer, the Upper Deck hologram era", + "tags": [ + "team-border", + "stat-back", + "corner-flag" + ], + "system": [ + "Palette/material: team-color border pairs, dodger blue on white, cardinal red on gray, gum-gray cardstock backs with black stat ink, the rookie flag in untouched gold", + "Type/composition: player name in slab caps along the border, position in a small disc, the back a ruled stat table of monospaced season rows, year by year", + "Topology/navigation: the pack deals a fixed stack; front is the portrait face, flip for the stat back, the set is browsed by card number, never by search", + "Controls/state: doubles stack behind the front card, a flip reveals the stats, the rookie flag and a gum stain mark provenance states you cannot fake", + "Responsive/motion: cards deal one at a time on narrow screens and stat tables scroll inside their rule lines; the flip is the only motion" + ], + "spark": "You crack the wax seal and the gum dust rises, then deal the stack card by card onto the bedspread, team borders flashing past, hunting the one rookie flag the checklist says is in this series.", + "webLeverage": "3d css flip between portrait front and stat back; sticky table headers keep monospaced season rows legible on scroll", + "strength": "world" + }, + { + "id": "pop-culture-shelf-jingle-truck-art", + "form": "a south asian jingle truck, every panel painted edge to edge with florals, portraits, and calligraphy, mirror mosaic catching light, chained pendants ringing below the bumper", + "lineage": "Pakistani and Indian truck art workshops, Karachi phool patti style, Rawalpindi and Swat truck body shops", + "tags": [ + "zoned-panels", + "mirror-mosaic", + "hanging-fringe" + ], + "system": [ + "Palette/material: enamel emerald, rose, and canary over a lacquered teal body, chrome and mirror chips as literal highlights, the loudest panel crowning the active zone", + "Type/composition: urdu display calligraphy with outlines and drop shadows owns the crown panels, every surface zoned and filled, symmetry down the centerline", + "Topology/navigation: the truck body zones the content, crown board for identity, side panels for main sections, tailgate for messages, fringe row for small actions", + "Controls/state: active elements take mirror-chip glint and a fresh enamel coat, pendants ring on confirmation, nothing is ever left as bare unpainted metal", + "Responsive/motion: side panels stack under the crown board on narrow screens, fringe stays at the foot; motion is pendant sway and glint" + ], + "spark": "You circle a parked Bedford truck in a Karachi yard, painters filling the last bare panel with roses around a partridge, mirror chips throwing spots of sun across your arms, chains chiming under the bumper each time the body rocks.", + "webLeverage": "css blend modes and specular gradients fake the mirror glint, while keyframed transforms swing the pendant fringe", + "strength": "world" + }, + { + "id": "pop-culture-shelf-bollywood-painted-poster", + "form": "a hand-painted bombay film poster, heroes airbrushed at impossible scale, several scenes montaged onto one sheet, bilingual display lettering with outlines and drop shadows carrying the billing", + "lineage": "Bombay poster painting studios, single-screen cinema hoardings, Hindi film publicity art of the 1950s to 1980s", + "tags": [ + "scale-billing", + "montage-sheet", + "outlined-lettering" + ], + "system": [ + "Palette/material: airbrushed crimson and gold skies over indigo shadow, faces lit in warm ochre glow, the title's chrome yellow with red outline reserved for the primary action", + "Type/composition: bilingual display lettering, latin and devanagari paired, outlined and drop-shadowed; size is billing, the hero's face outranks everything but the title", + "Topology/navigation: one sheet montages scenes at different scales; a giant portrait anchors, vignettes orbit it, and you enter a section through its painted vignette", + "Controls/state: importance is painted scale, the active item grows and gains a rim-light glow, secondary items sit as smaller matte vignettes low on the sheet", + "Responsive/motion: the montage restacks with the portrait always largest; motion is a slow airbrush glow pulse on the lead" + ], + "spark": "You stand under a hoarding six stories tall while painters on bamboo scaffolds finish an eye the size of a door, crimson sky still wet behind the hero's collar, the title's yellow letters outlined in red catching the evening traffic light.", + "webLeverage": "css clip-path cuts the vignette montage shapes and text-shadow stacks build the outlined bilingual display lettering", + "strength": "dual" + }, + { + "id": "pop-culture-shelf-camcorder-overlay", + "form": "a consumer camcorder viewfinder, REC dot and timestamp locked in monospace corners, tracking bands and tape noise fraying the frame edges while the scene plays underneath", + "lineage": "consumer camcorder OSD design, VHS home movies, found-footage film grammar", + "tags": [ + "corner-anchored-hud", + "monospace-overlay", + "full-bleed-frame" + ], + "strength": "world", + "system": [ + "Palette/material: white OSD monospace over the live scene, one blinking rec red as the sole accent, gray tracking-noise bands at the frame edges, black letterbox as ground", + "Type/composition: all-caps segmented monospace pinned to the four corners, PLAY SP and battery glyphs ranked, the center kept empty for the footage", + "Topology/navigation: one full-bleed frame is the whole space; menus overlay as corner stacks and moving between views reads as tape transport, rewind and cue", + "Controls/state: the active item blinks like the REC dot, toggles read as OSD glyphs switching, errors arrive as tracking bands and a shaking PLEASE INSERT TAPE line", + "Responsive/motion: corners keep their glyphs while the frame letterboxes at narrow widths; motion is tape jog and brief static between views" + ], + "spark": "you press record and the red dot starts blinking over your sister's birthday, the timestamp counting in the corner, and when the tape drops out for a second the whole kitchen tears into gray bands before snapping back", + "webLeverage": "css blend modes and an svg noise filter composite the OSD over any content, with a canvas static burst on view transitions" + }, + { + "id": "pop-culture-shelf-cassette-futurism-deck", + "form": "a cassette futurist tape deck fascia, brushed aluminum panel gridded with chrome toggles and orange LED ladders, beige plastic surround, every function given its own labeled switch", + "lineage": "seventies and eighties hi-fi deck design, Nakamichi and Marantz fascias, Nostromo-adjacent consumer tech, cassette futurism", + "tags": [ + "panel-grid", + "physical-toggles", + "led-meters" + ], + "strength": "world", + "system": [ + "Palette/material: brushed aluminum ground with beige plastic surround, engraved black labels as body ink, amber LED ladders reserved for the active channel", + "Type/composition: narrow engraved grotesk caps under every control, functions ranked left to right in a strict panel grid, meter numerals in dot-matrix amber", + "Topology/navigation: one fascia holds everything; sections read as bolted panel zones and deeper settings hinge open like the cassette door, no pages", + "Controls/state: chrome toggles snap between labeled positions, sliders ride milled tracks, the running process shows as VU needles and a climbing amber ladder", + "Responsive/motion: the fascia restacks into narrow bolted panels at small sizes; motion is needle sway and toggle snap" + ], + "spark": "you thumb a chrome toggle and it lands with a click you feel in the shelf, the amber ladder climbs as the reels take up, and the aluminum is cool under your wrist while the counter rolls", + "webLeverage": "css gradients and box shadows do brushed metal and lit LEDs without images, and keyboard focus maps to toggle positions" + }, + { + "id": "pop-culture-shelf-fashion-doll-dreamhouse", + "form": "a fashion-doll dreamhouse aisle, pink-spectrum architecture of scalloped edges and heart cutouts, blister windows presenting accessories in molded trays, logo script bouncing across every roofline", + "lineage": "Barbie-era Mattel packaging and playset design, toy-aisle graphics, dollcore revival", + "tags": [ + "blister-tray-cells", + "scalloped-frames", + "pink-spectrum" + ], + "strength": "world", + "system": [ + "Palette/material: bubblegum pink ground shading to magenta, white scalloped frames, glossy blister sheen on cards, one hot fuchsia heart marking the chosen item", + "Type/composition: a bouncing logo script owns headers while rounded sans labels the trays, everything framed in scallops and composed as a house of window cells", + "Topology/navigation: rooms are the sections; you move floor to floor through the dollhouse cutaway and every collection sits behind its own blister window", + "Controls/state: items sit in molded tray recesses, choosing one pops it from the blister with a sheen sweep, empty recesses keep the item's ghost outline", + "Responsive/motion: the cutaway stacks into single floors on small screens; motion is a sprung bounce on pops and page turns" + ], + "spark": "you crouch in the aisle and the whole shelf glows pink, tiny shoes ranked in their molded tray behind the blister, the script logo looping over the roofline, and you press a thumb into the plastic just to feel it give", + "webLeverage": "css clip-path scallops and heart cutouts, spring easing via css animation, blister sheen with gradients and blend modes" + }, + { + "id": "pop-culture-shelf-magical-girl-transformation", + "form": "a magical-girl transformation sequence, pastel gradient space cut by star flares and ribbon trails, crescent and gem insignia anchoring each phase while the costume assembles piece by piece", + "lineage": "Sailor Moon-era shoujo anime, transformation sequence animation, magical girl insignia design", + "tags": [ + "phase-sequence", + "insignia-anchors", + "ribbon-trails" + ], + "strength": "dual", + "system": [ + "Palette/material: rose to lavender gradient ground, white ribbon light as structure lines, gold crescent and gem accents, the active phase burns in saturated star pink", + "Type/composition: rounded display caps with a slight italic sweep, phase titles arcing along ribbon paths, body text held in soft white cards floating on the gradient", + "Topology/navigation: progress is a transformation sequence; each step is a phase with its own insignia and you advance along the ribbon trail, never sideways", + "Controls/state: completing a step snaps its costume piece into place with a star flare, pending steps wait as dim gem outlines, the gem fills with light when done", + "Responsive/motion: phases stack vertically on small screens with insignia as section marks; motion is ribbon sweep and flare bloom" + ], + "spark": "you raise the brooch and the room falls away into rose gradient, ribbons wrap your arm into a glove, a star flare pops at each finished piece, and the crescent seals over your forehead as the sequence completes", + "webLeverage": "svg paths animate ribbon trails and insignia strokes, css gradients and view transitions carry the phase-to-phase bloom" + }, + { + "id": "pop-culture-shelf-sticker-sheet-decoden", + "form": "a puffy sticker sheet and decoden bench, die-cut shapes on glossy backing grids, whipped-cream cases studded with charms, reward stars and googly eyes crowding every surface past capacity", + "lineage": "kawaii stationery culture, decoden craft, sticker album collecting, Sanrio-era sticker sheets", + "tags": [ + "die-cut-cells", + "peel-and-place", + "maximal-accretion" + ], + "strength": "world", + "system": [ + "Palette/material: glossy white backing-sheet ground, candy pastels for the sticker bodies, puffy vinyl highlights, one gold reward star reserved for the done state", + "Type/composition: fat rounded bubble letters with white outlines, labels sit inside die-cut shapes, the sheet grid loose and packed rather than aligned", + "Topology/navigation: sheets are the pages; items live as die-cuts in their backing grid and collections accrete onto a decoden surface that never clears", + "Controls/state: picking an item peels it from the backing with a lifted-edge shadow, placed items stay put and stack, completion earns a gold foil star", + "Responsive/motion: the sheet reflows its die-cuts to one column on small screens; motion is peel lift and squish settle" + ], + "spark": "you slide a thumbnail under the puffy bear's edge and it peels with a soft resistance, the backing shines where it left, and you press it onto the case between a cream swirl and three googly eyes that wobble in agreement", + "webLeverage": "drag and drop places stickers anywhere, css drop shadows and radial gradients fake the puffy vinyl, state persists the accreted surface" + }, + { + "id": "pop-culture-shelf-teen-magazine-quiz", + "form": "a nineties teen-magazine quiz spread, lettered checkboxes marching down torn-edge photo collage, gel-pen doodles over halftone crushes, a verdict box waiting at the fold in pink and acid green", + "lineage": "nineties teen magazine art direction, quiz-page layout, locker-collage culture, Sassy and YM spreads", + "tags": [ + "quiz-branching", + "torn-collage", + "verdict-box" + ], + "strength": "dual", + "system": [ + "Palette/material: newsprint white ground with halftone photo blocks, hot pink and acid green as the shouting pair, gel-pen silver ink circling whatever is chosen", + "Type/composition: chunky condensed headlines at a tilt, questions in friendly serif columns, answers as lettered checkbox rows, every block torn and taped into the collage", + "Topology/navigation: the spread is the space; questions run down columns, mostly-As logic branches you across the fold, and the verdict box is the destination", + "Controls/state: choosing an answer circles it in gel-pen ink, tallies collect as margin tick marks, the verdict box flips open only when every row is marked", + "Responsive/motion: columns stack to one scrolling strip on phones with the verdict pinned last; motion is pen scribble draw-on" + ], + "spark": "you press the magazine flat on the carpet, circle mostly Bs in silver gel pen, count the ticks twice, and flip to the verdict box under a torn photo of a crush to find out what your summer holds", + "webLeverage": "svg stroke-dashoffset draws the gel-pen circles, css columns and rotated clip-path tears build the collage, form state tallies the verdict" + }, + { + "id": "pop-culture-shelf-couture-doll-atelier", + "form": "a couture doll atelier, dress forms and hatboxes at one-sixth scale, garments bagged in tissue with script labels, and a runway lookbook art-directing every miniature look in ivory, blush and black", + "lineage": "1959-era fashion doll couture, miniature garment construction, fashion-house lookbook design", + "tags": [ + "lookbook-plates", + "dress-form-focus", + "tissue-reveal" + ], + "strength": "world", + "system": [ + "Palette/material: ivory box-board ground, blush satin and black grosgrain accents, gold-foil script for names, one rouge red reserved for the chosen look", + "Type/composition: high-contrast didone headlines signed with a fine script, looks presented as numbered plates with lookbook margins, captions in letterspaced small caps", + "Topology/navigation: the collection reads as a runway lineup, look by look in order, while wardrobe trunks hold the sections and open into labeled trays", + "Controls/state: hover loosens the tissue, selection pins the garment to the dress form under a spotlight, and sold-out looks keep only a tissue silhouette", + "Responsive/motion: plates fall into a single lookbook column on phones, and motion is a tissue lift and the dress form's slow quarter turn" + ], + "spark": "You untie one striped garment bag and the tissue sighs open on a black-and-white maillot the size of your palm, plate No. 7 in the book, the gold script on its tag naming it like a couture house would.", + "webLeverage": "css 3d transforms turn the dress form, layered translucency plays the tissue, and the lineup runs as a scroll-snapped runway" + }, + { + "id": "pop-culture-shelf-window-box-toy-shelf", + "form": "a toy-aisle wall of window-box sets, die-cut cellophane windows opening onto tiny illustrated dioramas, warm cream board trimmed in gingham with a friendly rounded logotype on every lid", + "lineage": "Window-box toy packaging, miniature playset dioramas, gentle toy-aisle merchandising", + "tags": [ + "die-cut-window", + "diorama-cells", + "gingham-trim" + ], + "strength": "dual", + "system": [ + "Palette/material: warm cream board ground, gingham trims in meadow green, berry and sky blue, cellophane gloss over each window, one sunny yellow shelf tag for the featured set", + "Type/composition: a rounded lowercase logotype names each set, hand-lettered contents lists run down the box sides, and shelves rank boxes in tidy rows with one end-cap hero", + "Topology/navigation: aisles are categories and shelf rows are lists; every box front is the summary and lifting its lid is the detail view, the diorama unfolding inside", + "Controls/state: hover tilts a box so light crosses the cellophane, choosing one hinges the lid open, and out-of-stock spots keep the shelf tag over empty board", + "Responsive/motion: shelves collapse to one browsable row on phones, and motion is the gentle lid hinge and a paper pop-up rising" + ], + "spark": "You crouch to the third shelf and a thumb-sized kitchen glows behind cellophane, its gingham trim matching the lid, and the whole row of boxes waits like houses with their lights on.", + "webLeverage": "css perspective tilts the boxes, clip-path cuts the windows, and the pop-up diorama unfolds with 3d transforms on open" + }, + { + "id": "pop-culture-shelf-foil-stamped-deck", + "form": "a deluxe card press run on matte museum-black stock, hot-foil frames and spot-gloss art windows stamped to registration, every card sharing one fixed anatomy of title bar, art plate and rules footer", + "lineage": "Premium TCG showcase printing, deluxe board-game production, hot-foil and letterpress card finishing", + "tags": [ + "fixed-anatomy", + "hot-foil-frame", + "spot-gloss" + ], + "strength": "dual", + "system": [ + "Palette/material: matte near-black stock as ground, champagne-gold foil for frames and rank marks, spot gloss lifting only the art window, faction hues as quiet duotone underprints", + "Type/composition: engraved serif caps in the title bar, tabular numerals seated in foiled corner slots, rules text in letterpress gray, one millimetered grid across the whole run", + "Topology/navigation: the fixed anatomy is the wayfinding, name top, art center, data in the corners; collections fan as decks and a card expands in place without leaving the spread", + "Controls/state: pointer tilt sweeps a light line along the foil, selection lifts the card on a deepened shadow, spent cards turn ninety degrees, premium prints carry gilded edges", + "Responsive/motion: cards hold their ratio at every size with the footer zooming on tap, and motion is the foil light sweep and one weighted lift" + ], + "spark": "You tilt the top card and a thin line of gold runs the frame like a lit fuse, the art window glassy against the matte black, every number seated exactly where your thumb expects it.", + "webLeverage": "pointer-position gradients fake foil holography, and css transforms handle tilt, lift and the ninety-degree tap" + }, + { + "id": "pop-culture-shelf-starship-readout-grid", + "form": "a starship systems wall of small backlit screens in a matte black bezel grid, each screen one of four fixed layouts, a color code cell, a bar column, a white wireframe schematic or scrolling figures, all in extended caps", + "lineage": "2001 and Silent Running screen graphics, Douglas Trumbull readout films, Eurostile Bold Extended tradition", + "tags": [ + "bezel-grid", + "four-layouts", + "hue-as-state" + ], + "strength": "dual", + "system": [ + "Palette/material: matte black bezels as the ground, screens in flat signal hues only, green nominal, amber caution, red alert, cool blue data, white ink and no gradients anywhere", + "Type/composition: extended bold caps with squared curves, three-to-five-letter codes centered, figures right-aligned in columns, padding identical so the grid reads as one gauge", + "Topology/navigation: bezel rows group screens by function; you scan the wall whole, and any screen expands into a four-screen quad while its neighbors compress, never overlap", + "Controls/state: state is background hue alone, a warning crossfades to amber and holds, and acknowledging returns it to green while a timestamp line logs the event", + "Responsive/motion: the grid reflows from wall to two columns to one keeping screen aspect, and motion is the measured crossfade and a single-line figure tick" + ], + "spark": "The cabin hums and forty small screens hold their colors like a calm mosaic, until LOX slips from green to amber and the wireframe beside it begins redrawing the feed line.", + "webLeverage": "css grid tiles the screens, background-color transitions carry all state, and a variable width axis stretches the extended caps" + }, + { + "id": "pop-culture-shelf-viewfinder-bracket-hud", + "form": "a camcorder viewfinder built from framing tools, corner focus brackets, a zoom bar gliding W to T, zebra stripes crawling over blown highlights and a tape counter in segmented digits, the scene always full-bleed beneath", + "lineage": "Prosumer camcorder viewfinder graphics, broadcast safe-area conventions, videographer focus craft", + "tags": [ + "focus-brackets", + "zoom-depth-bar", + "zebra-warning" + ], + "strength": "world", + "system": [ + "Palette/material: white segmented OSD ink over live imagery, amber for the zoom bar and cautions, diagonal zebra stripes as the only texture, black letterbox bars as the ground", + "Type/composition: segmented monospace caps pinned just inside the safe-area corners, the center always empty for the subject, readouts ranked one per corner", + "Topology/navigation: one full-bleed frame is the whole space, the zoom bar maps depth, W for overview and T for detail, and the counter wheel scrubs between sections like tape", + "Controls/state: focus brackets snap thin around the targeted element, anything overexposed or overdue wears zebra stripes, and locked settings show a small closed bracket pair", + "Responsive/motion: brackets hug the safe area at any aspect ratio, and motion is the zoom bar's glide with a single-frame cut between views" + ], + "spark": "You half-press and the corner brackets tighten around her face, zebra crawling on the bright window behind her, the amber bar easing from W toward T as the counter climbs quietly in its corner.", + "webLeverage": "css blend modes composite the OSD over any content while an svg counter and zoom bar animate with stepped easing" + }, + { + "id": "pop-culture-shelf-magnetic-weather-board", + "form": "a 1970s television weather board, a steel map of the nation hung with magnetic suns, cloud cutouts, and felt front bands, the presenter placing tomorrow by hand while cream temperature discs cling in rows along the coast", + "lineage": "BBC magnetic-symbol weather forecasts, pre-1985 Michael Fish era, local-station studio weather boards", + "tags": [ + "magnet-symbols", + "region-board", + "presenter-hand" + ], + "system": [ + "Palette/material: studio gray-blue steel map ground, sunshine yellow and cloud white symbol magnets, felt front bands in warning red and cold blue, temperature discs in cream", + "Type/composition: hand-applied numerals on round discs, city names in small stick-on caps, the map itself is the layout and symbols cluster exactly where the weather is", + "Topology/navigation: one national map is home and regions zoom as closer boards; you follow the presenter's sweep from west to east, tomorrow waits on a second board off camera", + "Controls/state: placing a magnet asserts a forecast, restacking discs updates the numbers, a symbol knocked askew or sliding off is honest uncertainty left in view", + "Responsive/motion: phones crop to one region with the disc row beneath; motion is a hand entering frame to swap a sun for a cloud" + ], + "spark": "the forecaster reaches across the North Sea and presses a magnetic sun over your city, and it slips a centimeter on live television, so he steadies it with one finger and promises Tuesday will hold", + "webLeverage": "draggable svg symbol magnets snap to map regions with drop-shadow lift, and state changes animate as one hand-timed swap", + "strength": "world" + }, + { + "id": "pop-culture-shelf-shaw-brothers-freeze-title", + "form": "a 1970s hong kong studio title card, the frame freezing mid-strike as a crimson field slams in behind bilingual titles, brush-stroked characters over bold outlined roman caps, a crash zoom and a horn sting for every name on the bill", + "lineage": "Shaw Brothers title sequences, Shawscope-era studio graphics, Golden Harvest freeze-frame credits", + "tags": [ + "freeze-frame", + "bilingual-lockup", + "crash-zoom" + ], + "system": [ + "Palette/material: scope-widescreen black, a flooded crimson or gold field behind every title, film-print warmth over the frozen still, white roman type with hard black outlines", + "Type/composition: paired lockups with brush display characters above bold outlined roman caps, names ranked by card order and size, everything centered on the frozen gesture", + "Topology/navigation: sections open as title cards over their own freeze-frame; you move by hard cuts and crash zooms, and the card order is the billing order", + "Controls/state: the active item freezes and floods its field color, hover snaps one zoom step closer, confirmation lands with the horn sting and holds the frame", + "Responsive/motion: scope frames letterbox on phones with lockups stacking vertically; motion is a crash zoom in three hard steps, never a glide" + ], + "spark": "the fist stops an inch from the lens and the whole frame slams crimson, brush characters crashing in above the star's name in outlined caps, a horn sting holding while the dust of the courtyard hangs mid-air", + "webLeverage": "css steps() timing fakes the three-step crash zoom and a view transition freeze carries the held frame between routes", + "strength": "world" + }, + { + "id": "pop-culture-shelf-grand-tour-jersey-road", + "form": "a grand tour on the road, classification jerseys ranking the whole race in wearable color, yellow for the lead and polka dots for the climbs, dossard numbers pinned to every back, fans' white paint shouting names up the tarmac of the col", + "lineage": "Tour de France jersey classifications, dossard and publicity caravan print culture, roadside climb paint", + "tags": [ + "jersey-rank", + "dossard-number", + "road-paint" + ], + "system": [ + "Palette/material: tarmac gray ground, jersey yellow, green, and polka-dot red-on-white as ranked accents, team kit colors for everything else, white road paint as annotation", + "Type/composition: dossard numerals in heavy grotesk on white bibs, rider and team names in caravan caps, time gaps set as plus figures that outrank any headline", + "Topology/navigation: the race is one long road; stages are chapters, the col's climb profile is the section map, and the peloton orders itself by jerseys you can read at a glance", + "Controls/state: taking a classification swaps its jersey onto the new leader, a breakaway carries a running gap counter, and abandoning leaves a dossard that never advances again", + "Responsive/motion: phones ride at the head of the race, one jersey and one gap at a time; motion is road paint streaming under the wheels" + ], + "spark": "through camper vans and cowbells the polka dots crest the col first, a fan's painted ALLEZ sliding under his wheels, and the yellow jersey, forty seconds back, becomes a countdown the whole mountain can read", + "webLeverage": "live gap timers stream along an svg climb profile with jerseys as draggable comparison markers on the road", + "strength": "world" + }, + { + "id": "pop-culture-shelf-ligne-claire-album", + "form": "a ligne claire adventure album page, every object drawn with the same unvarying line weight and filled with flat unshadowed color, the brussels clear-line discipline making a harbor crane as legible as a teacup", + "lineage": "Hergé and Studios Hergé, Casterman album printing, Brussels clear-line school, Edgar P. Jacobs", + "tags": [ + "uniform-line", + "flat-fill", + "waffle-grid" + ], + "system": [ + "Palette/material: flat unmodulated fills held by one even black line, daylight blue and sand ochre midtones, no gradients or cast shadows, red saved for the object the story needs", + "Type/composition: hand-lettered upright caps in white speech balloons, narration in yellow caption boxes, panels ranked in the album's strict four-tier waffle grid", + "Topology/navigation: pages read tier by tier; a wide establishing panel opens each scene, and section changes are page turns, never dissolves inside a panel", + "Controls/state: the active panel keeps full color while the rest of its tier rests one tone paler, selection is the same black line drawn heavier, alarm arrives as speed lines only", + "Responsive/motion: tiers stack one panel at a time on phones in reading order; motion is a clean cut from panel to panel with no easing flourish" + ], + "spark": "You flatten the album under the lamp and the moon rocket stands in checkerboard red and white, drawn with the same calm line as the professor's teacup, every rivet exactly as important as it should be.", + "webLeverage": "svg shapes with a single stroke width scale losslessly, and css flat fills swap per state without any shading pipeline", + "strength": "world" + } + ] + }, + { + "id": "signals-instruments", + "label": "Signals & Instruments", + "well": "instruments-signals", + "description": "Instruments and display hardware that already solved showing state and inviting manipulation: flap boards, dials, drums, cords, tubes, and phosphor.", + "concepts": [ + { + "id": "broadcast-programming-teletext-service", + "form": "a broadcast teletext magazine, three-digit pages of block-mosaic graphics and double-height headers held in a 40 by 24 character grid on black", + "lineage": "Ceefax and ORACLE broadcast teletext, World System Teletext mosaics, Mode 7 microcomputer graphics", + "tags": [ + "character-grid", + "page-numbers", + "eight-colors" + ], + "system": [ + "Palette/material: the fixed broadcast eight on flat black, white for body text, yellow for headlines, cyan for live figures, red reserved for alerts and REVEAL answers", + "Type/composition: one bitmap face in a rigid 40 by 24 cell grid, double-height rows for section headers, block-mosaic sixels drawing every graphic from the same cells", + "Topology/navigation: every page holds a three-digit address keyed directly; magazines group by hundreds and subpages rotate on a timed carousel you can hold", + "Controls/state: keying digits is the whole input; loading counts page numbers in the header, hidden answers wait behind REVEAL, held subpages show a HOLD flag", + "Responsive/motion: the 40-cell row is sacred, small screens scale the cell rather than reflow; motion is subpage rotation and blink, both stoppable to a held still" + ], + "spark": "You key 302 and the header counts pages in the corner; the screen blinks and a football score builds itself from cyan blocks on black, and behind the quiz question an answer waits invisible until your thumb finds REVEAL.", + "webLeverage": "ch-unit CSS grid and a bitmap face keep the 40 by 24 cell lattice exact; keyboard digits route pages and a REVEAL state toggles hidden spans", + "strength": "dual" + }, + { + "id": "mapping-navigation-celestial-navigation-instrument", + "form": "a navigator's chart table at night, sextant boxed beside the almanac while pencil lines of position cross the chart into a running fix", + "lineage": "Marine sextant practice, the Nautical Almanac and H.O. 229 sight-reduction tables, Admiralty chart plotting", + "tags": [ + "plotted-lines", + "tabular-lookup", + "bounded-error" + ], + "system": [ + "Palette/material: chart buff and shoal-water tints under red night light, graphite pencil gray for working lines, one red-lamp accent marking the current fix", + "Type/composition: engraved chart capitals and tabular almanac columns of ranked digits, every number seated in a ruled row, labels set sparse along plotted lines", + "Topology/navigation: the chart is the ground truth; you move between sight, table, and plot, and each observation becomes a line of position laid onto the shared sheet", + "Controls/state: a sight is taken, timed, reduced, then drawn; doubtful sights are struck through but kept, and confidence is the size of the cocked-hat triangle", + "Responsive/motion: small screens stack sight, tables, and chart as ordered stations; the fix advances by discrete plotted steps, never a sliding position" + ], + "spark": "Under a red lamp the chronometer ticks; you bring the star down to the horizon, note the second, and minutes later three pencil lines cross on the chart in a small triangle that says, within this cocked hat, here you are.", + "webLeverage": "SVG lines of position draw onto a zoomable chart canvas, and device time feeds the chronometer while tables stay keyboard-searchable", + "strength": "composition" + }, + { + "id": "scientific-notation-oscilloscope-signal-bench", + "form": "a crt oscilloscope on a signal bench, phosphor trace riding an etched graticule while detented knobs set channel, timebase, and trigger", + "lineage": "Tektronix 465 and Hewlett-Packard cathode-ray oscilloscopes, electronic test-bench practice, phosphor display engineering", + "tags": [ + "graticule-grid", + "trigger-hold", + "trace-glow" + ], + "system": [ + "Palette/material: phosphor green blazing on near-black glass, graticule gray etched beneath, a second channel in dimmer trace; amber readouts for armed and warning states", + "Type/composition: condensed instrument caps on knob skirts and bezels, glowing seven-segment readouts; everything on screen is measured against the ten-division graticule", + "Topology/navigation: one screen, many signals; you travel by timebase and vertical scale, and channels overlay in the same graticule space rather than separate views", + "Controls/state: detented knobs set scale and trigger level; an untriggered trace rolls free, a triggered one locks still, and freeze holds the waveform for cursors", + "Responsive/motion: the graticule stays square while readouts drop below on narrow screens; the sweep is continuous" + ], + "spark": "You clip the probe to the pin and a green line snaps out of the noise; a nudge of the trigger knob and the waveform stands still, breathing in phosphor over the etched grid, ten divisions wide, every one meaning something.", + "webLeverage": "canvas draws the persistent phosphor trace from live Web Audio or sensor input, with pointer-dragged trigger level and keyboard-stepped cursors", + "strength": "dual" + }, + { + "id": "scientific-notation-particle-detector-event-display", + "form": "a collider event display, particle tracks curving out of one frozen collision through onion rings of detector and into stacked calorimeter wedges", + "lineage": "CERN bubble-chamber photography, ATLAS and CMS event displays, Fermilab track-reconstruction graphics", + "tags": [ + "layered-rings", + "curved-tracks", + "energy-wedges" + ], + "system": [ + "Palette/material: near-black vacuum ground, detector rings in muted steel blue, tracks in signal yellow and cyan by particle type, red calorimeter bars for deposited energy", + "Type/composition: spare technical grotesk labels pinned to tracks and wedges, momentum figures in tabular digits; the concentric ring section is the compositional law", + "Topology/navigation: space is concentric, beamline at center; you move outward through detector layers and along individual tracks, one event held at a time", + "Controls/state: select a track to isolate it and dim the rest; competing reconstruction hypotheses overlay as ghost tracks, confidence written as line weight", + "Responsive/motion: the ring section stays whole on phones while wedges and figures move to drawers; rotation is inertial 3D" + ], + "spark": "The event lands and the cross-section blooms: yellow tracks curl through the inner rings, two stiff blue lines punch straight to the muon chambers, and red energy bars stack in the calorimeter wedges like a sudden bar chart of violence.", + "webLeverage": "WebGL renders thousands of curved tracks in one 3D scene, with drag rotation, zoom into detector layers, and picked tracks reporting momentum", + "strength": "dual" + }, + { + "id": "signals-instruments-barograph-week-drum", + "form": "a brass barograph on a hall table, where an inked needle drags pressure history onto a slowly rotating weekly drum", + "lineage": "Aneroid barograph instruments, meteorological chart drums, inked-trace recording design", + "tags": [ + "continuous-trace", + "drum-time", + "unbroken-line" + ], + "system": [ + "Palette/material: cream chart paper ruled in faded rose grid, violet-black recording ink for the trace, polished brass fittings framing the ground", + "Type/composition: engraved instrument capitals on the brass plate, small ruled-grid numerals along the chart's arcs; the drum's curved ruling is the layout law", + "Topology/navigation: time wraps a drum; history is one unbroken trace you rotate rather than paginate.", + "Controls/state: the present is where the needle touches; annotations pin to the trace without interrupting it.", + "Responsive/motion: the drum flattens to a scrollable strip on phones; rotation is slow, continuous, and pausable." + ], + "spark": "The needle has drawn all week without lifting; Tuesday's storm is a cliff in the line, and the weekend rises like a promise.", + "webLeverage": "Continuous data draws a genuine unbroken SVG trace with timeline scrubbing along the drum.", + "strength": "composition" + }, + { + "id": "signals-instruments-darkroom-safelight-bay", + "form": "a printing darkroom under amber safelight, where enlarger beams, timed baths, and drying lines stage photographs into slow deliberate existence", + "lineage": "Silver-gelatin darkroom practice, enlarger and easel design, safelight and test-strip conventions", + "tags": [ + "staged-development", + "amber-light", + "timed-reveal" + ], + "system": [ + "Palette/material: amber safelight washing every surface as the ground, wet-print silver grays deepening to black as the image ink, enamel tray white at the edges", + "Type/composition: grease-pencil notes and printed timer digits under amber, labels sparse on bottles and trays; test strips band the field into stepped exposures", + "Topology/navigation: work moves through fixed stations in order: compose, expose, develop, fix, wash, dry.", + "Controls/state: progress is chemical and irreversible past marked points; test strips preview before committing.", + "Responsive/motion: stations linearize on phones; the develop reveal is one continuous emergence, shown statically under" + ], + "spark": "In the developer tray, gray ghosts gather into a face; the timer ticks, and pulling the print too early is a real loss.", + "webLeverage": "Canvas-simulated development curves let previews emerge in real time before an action commits.", + "strength": "dual" + }, + { + "id": "signals-instruments-evening-switchboard", + "form": "a telephone exchange switchboard at evening peak, where weighted cords, labeled jacks, and lamp rows let operators braid a city's conversations by hand", + "lineage": "Manual telephone exchanges, cord-and-jack switchboard design, operator practice and lamp signaling", + "tags": [ + "cord-connection", + "lamp-signal", + "jack-field" + ], + "system": [ + "Palette/material: walnut board and black cord lacquer as the ground, brass jack rings ranked in rows, lamps glowing amber for waiting and steady white for connected", + "Type/composition: tiny engraved number plates under every jack, exchange names in painted caps across the panel top; the jack field's strict rows rule the layout", + "Topology/navigation: the jack field is the address space; live connections are physical cords you can trace.", + "Controls/state: requests arrive as lamps; connecting, holding, and ending are cord gestures with visible seats.", + "Responsive/motion: the board becomes a connection list on phones; cord plugs are single decisive motions." + ], + "spark": "A lamp lights, a cord arcs across the board, and two strangers are suddenly one circuit in a wall of quiet conversations.", + "webLeverage": "Live sessions render as patchable cords with real presence lamps and full keyboard connection control.", + "strength": "composition" + }, + { + "id": "signals-instruments-night-flight-six-pack", + "form": "a small aircraft's night instrument six-pack, where six luminous gauges hold a pilot's trust through cloud with nothing outside the glass", + "lineage": "General-aviation six-pack instrument layout, artificial-horizon and altimeter design, night-flight cockpit lighting", + "tags": [ + "gauge-grammar", + "cross-check", + "luminous-trust" + ], + "system": [ + "Palette/material: matte black panel ground, instrument faces near-black with luminous white markings, radium-green glow for needles; amber and red lamps only for caution", + "Type/composition: white aviation numerals and tick scales on round dials, terse placard caps beneath each gauge; two ranked rows of three set the fixed composition", + "Topology/navigation: a fixed constellation of instruments, each owning one truth; the cross-check sweep is the reading order.", + "Controls/state: deviations tilt needles before alarms; every gauge shows trend as well as value.", + "Responsive/motion: the six-pack stacks by criticality on phones; needle motion is damped and physical, never snapped." + ], + "spark": "Outside is ink; inside, six calm dials agree with each other, and the practiced eye sweeps them in a quiet ritual of cross-checks.", + "webLeverage": "Real-time data binds to SVG gauges with damped spring physics and a screen-reader flight summary.", + "strength": "world" + }, + { + "id": "signals-instruments-nixie-laboratory-counter", + "form": "a nixie-tube laboratory counter, where stacked digits glow orange inside glass envelopes and every count arrives as visible plasma", + "lineage": "Cold-cathode nixie display tubes, Cold War laboratory counters, decimal-digit instrument design", + "tags": [ + "glowing-digit", + "glass-envelope", + "layered-count" + ], + "system": [ + "Palette/material: neon orange digit glow inside clear glass envelopes, blackened steel chassis as ground, hairline anode mesh gray; the lit digit is the only warm accent", + "Type/composition: stacked metal numerals of one engineered digit form, each tube a fixed decimal place; labels sit as engraved caps on the panel below the banks", + "Topology/navigation: quantities are the interface; each metric owns a tube bank with fixed digit positions.", + "Controls/state: value changes cross-fade between physical digit layers; overflow and reset are visible mechanical events.", + "Responsive/motion: banks drop to essential digits on phones; digit transitions are single cross-fades under" + ], + "spark": "Inside each glass tube ten metal numerals nest; the lit one hovers orange, and a count change is a tiny change of physical depth.", + "webLeverage": "Layered DOM digits with depth-true cross-fades render tube physics in pure CSS.", + "strength": "dual" + }, + { + "id": "signals-instruments-phosphor-terminal-midnight", + "form": "a green-phosphor terminal in a midnight machine room, where a blinking cursor, scanline glow, and afterimage trails make text feel alive on glass", + "lineage": "VT100-era CRT terminals, P1 phosphor persistence, command-line interface history", + "tags": [ + "phosphor-persistence", + "breathing-cursor", + "monospace-field" + ], + "system": [ + "Palette/material: P1 phosphor green on near-black curved glass, dimmer green afterimage for history, bright bloom for the cursor line; the tube's dark ground holds all", + "Type/composition: one monospaced bitmap face in a fixed 80-column field, no other type exists; hierarchy is made of indentation, case, and full-width rules", + "Topology/navigation: the surface is one continuous scrolling transcript; place is position in the conversation's history.", + "Controls/state: input is a first-class typed dialogue; system states print themselves rather than appearing as chrome.", + "Responsive/motion: phosphor bloom and trails scale with capability" + ], + "spark": "The cursor breathes; each typed line lands with a faint bloom and its ghost lingers a half-second after the scroll.", + "webLeverage": "A live transcript log with CSS phosphor glow, searchable history, and full keyboard-first operation.", + "strength": "world" + }, + { + "id": "signals-instruments-pinball-backglass", + "form": "a pinball machine's backglass and playfield, a tilted world of ramps and rollovers where score erupts on painted glass above the physics below", + "lineage": "Bally and Williams electromechanical pinball, Gottlieb backglass art, arcade score reels", + "tags": [ + "tilted-gravity", + "score-spectacle", + "mechanical-ceremony" + ], + "system": [ + "Palette/material: saturated backglass enamel reds, yellows, and blues over mirror silver, playfield lacquer and chrome ball below; lit inserts flare the active target", + "Type/composition: airbrushed carnival lettering and drop-shadow score numerals on the glass, playfield labels curving with the lanes; the tilted plane composes everything", + "Topology/navigation: one inclined plane holds every target; the ball's path is the traversal, and everything is reachable but nothing is guaranteed", + "Controls/state: two flippers and a plunger are the entire input; lamps, chimes, and score reels answer every hit with disproportionate ceremony", + "Responsive/motion: portrait shows the full incline, landscape splits playfield from backglass" + ], + "spark": "The ball rockets off the plunger, kisses two bumpers into a scream of chimes, and the painted magician on the backglass lights up as the score reels slam forward a thousand at a time.", + "webLeverage": "pointer and keyboard flippers drive a real 2d physics simulation; the Vibration API answers slingshot hits on touch devices", + "strength": "dual" + }, + { + "id": "signals-instruments-seven-segment-alarm-clock", + "form": "the seven-segment display family, bedside clocks, gas-station price totems, scoreboards, and microwave panels all speaking one eight-cell mask where unlit segments are designed too", + "lineage": "Texas Instruments and Hewlett-Packard LED segment displays, 1970s clock radios, gas-station price totems, stadium scoreboards", + "tags": [ + "segment-mask", + "lit-and-unlit", + "fixed-cells" + ], + "system": [ + "Palette/material: lit segments in LED red, amber, or scoreboard green on matte near-black ground, unlit segments held as faint ghost cells; red glow owns the night register", + "Type/composition: one eight-cell mask makes every glyph, digits ranked in fixed slots with the colon or decimal as its own cell; absence is drawn as deliberately as light", + "Topology/navigation: the layout is a rigid mask of cells, from four bedside digits to a price totem's stack; place never moves, only which segments light", + "Controls/state: modes cycle by held buttons, set digits blink while everything else holds; the flashing 12:00 of an unset clock is the canonical error state", + "Responsive/motion: cells scale as whole units and never reflow mid-glyph; every change is an instant segment swap" + ], + "spark": "At 3am the bedroom hour hangs as four red digits; by noon the same alphabet quotes gasoline at two meters tall, and at the stadium the score slams from 98 to 100 with nothing sliding, segments simply dying and igniting.", + "webLeverage": "CSS grid and clip-path build a true segment mask with ghost cells, and a shared worker keeps blink phase synchronized across every open tab", + "strength": "dual" + }, + { + "id": "signals-instruments-split-flap-concourse", + "form": "a rail concourse split-flap board at rush hour, where cascading letter flaps, platform columns, and departure rhythm hold a thousand travelers in one gaze", + "lineage": "Solari di Udine split-flap displays, mid-century rail concourse boards, departure-row information design", + "tags": [ + "flap-cascade", + "columnar-truth", + "departure-rhythm" + ], + "system": [ + "Palette/material: matte black flap faces with white paint letters, brushed steel board frame as ground, amber row lamps for delay; cancelled rows drop to dim red type", + "Type/composition: one condensed white sans on every flap, characters in fixed cells, destinations in caps; the board's ruled rows and columns are the entire composition", + "Topology/navigation: rows are live entities ranked by time; columns never move, only their flaps.", + "Controls/state: changes cascade character by character; delayed and cancelled states restyle the row without breaking the grid.", + "Responsive/motion: the board narrows column priority on phones; the cascade collapses to a single update under" + ], + "spark": "A ripple of clacks runs the board, Milan becomes Marseille, and every head in the concourse lifts at the same half-second.", + "webLeverage": "WebSocket-fed rows animate per-character flips while remaining a semantic, sortable table underneath.", + "strength": "dual" + }, + { + "id": "signals-instruments-telegraph-key-sounder", + "form": "a telegraph office counter, printed telegram blanks with gummed message strips, punched register tape coiling off the sounder, and route stamps dating every hop", + "lineage": "Western Union telegram blanks, Morse-Vail register tape, railroad wire offices and route stamping practice", + "tags": [ + "gummed-strips", + "form-blank", + "stamped-route" + ], + "system": [ + "Palette/material: manila blank and buff tape grounds, black form print, message text in typewriter and paste-strip ink, one violet route stamp as the state accent", + "Type/composition: printed form rules and small caps framing pasted uppercase message strips; the telegram blank's boxes and STOP-broken lines set the composition", + "Topology/navigation: each message is one blank; the office is a counter of forms in flight, and a message's route reads as its ladder of stamps", + "Controls/state: composing fills a priced blank word by word; sending punches tape, and received words arrive as strips pasted in order, stamps confirming each hop", + "Responsive/motion: the blank keeps its printed proportions at any width; strips paste on in reading rhythm, appearing whole and still under" + ], + "spark": "The sounder clatters and tape spools; the clerk shears the gummed strip, pastes the words line by line onto a printed blank, and thumps the route stamp twice, so the message arrives wearing every office it passed through.", + "webLeverage": "words stream in over WebSocket as pasted strips animated by CSS, the blank prints cleanly, and each message's route survives in the URL", + "strength": "world" + }, + { + "id": "signals-instruments-vu-meter-bridge", + "form": "a vu-meter bridge across a recording desk, a long row of ballistic needles behind glass that all lean into the red on the same downbeat", + "lineage": "Neve and API meter bridges, the ANSI VU ballistics standard, broadcast peak-programme metering", + "tags": [ + "ballistic-needle", + "parallel-channels", + "threshold-red" + ], + "system": [ + "Palette/material: warm ivory meter faces behind glass, black scale arcs and needles as the working ink, walnut and steel desk frame; the arc past zero is the only red", + "Type/composition: the VU scale's flared numerals and minus-to-plus arc on every face, channel numbers in strip labels below; identical meters repeat as the row's ruler", + "Topology/navigation: identical channels stand shoulder to shoulder; you read the room by sweeping the whole row, never by opening one meter", + "Controls/state: each needle integrates the last 300ms with weighted overshoot; the arc past zero is the only red the instrument allows", + "Responsive/motion: narrow viewports stack the row into bar ballistics" + ], + "spark": "Twenty needles lie asleep against their left pins until the chorus hits, and then the whole bridge leans right together, trembling at the edge of the red like horses at a gate.", + "webLeverage": "an AnalyserNode feeds real signal levels; canvas needles obey true VU ballistics with mass and damping, never instant values", + "strength": "dual" + }, + { + "id": "signals-instruments-ticker-tape-quote-board", + "form": "a trading floor quote wall and its glass-domed ticker, abbreviated symbols and fractional prices running on paper tape while clerks chalk the ruled grid of listed names", + "lineage": "Edison stock tickers, NYSE chalk quote boards, Trans-Lux moving tape displays", + "tags": [ + "running-tape", + "chalk-grid", + "fractional-quotes" + ], + "system": [ + "Palette/material: slate-black board and manila tape grounds, chalk white for posted quotes, ticker print in ink black, an up or down chalk mark as the change accent", + "Type/composition: abbreviated ticker symbols and fractional figures in stenciled caps, the wall ruled into name rows and quote columns, tape running as one unbroken line", + "Topology/navigation: the wall grid is the index of listed names while the tape is time; you read a name down its column of quotes or chase the session along the tape", + "Controls/state: a new print posts over the old chalk figure with its ghost still faint; up and down marks accumulate through the session, and halts chalk a flat line", + "Responsive/motion: narrow screens keep the tape running and fold the wall to watched names; the tape's crawl pauses to a stacked list under" + ], + "spark": "The dome chatters and tape piles into the basket, US STL 68 1/2; a boy calls it out and a clerk on the ladder rubs out the old chalk figure, posts the new one, and adds another up-tick to a column already leaning bullish.", + "webLeverage": "WebSocket prints feed a canvas tape crawl while the chalk grid stays a semantic table, sortable and searchable by keyboard", + "strength": "world" + }, + { + "id": "signals-instruments-election-night-big-board", + "form": "a 1970s network election night big board, character-generator numerals keyed white over deep studio blue, state-by-state returns ranked in ruled columns, percent-reporting counters under every total and a projected-winner stamp that lands only when the desk is sure", + "lineage": "1976-era NBC and CBS election night sets, Vidifont and Chyron character generators, hand-updated studio tally walls", + "tags": [ + "keyed-numerals", + "percent-reporting", + "projection-stamp" + ], + "system": [ + "Palette/material: deep studio blue ground, keyed white CG numerals with a soft edge glow, one candidate color bar per row, red held back for the moment a race is called", + "Type/composition: condensed all-caps CG lettering in ruled rows, state name left with raw count and percentage right, a small percent-reporting figure under every total", + "Topology/navigation: the board ranks races by closeness; drilling into a state opens its county rows, and the anchor-desk lower third follows you to every view", + "Controls/state: totals tick upward as precincts report, an unsettled race alternates its color bar, the PROJECTED stamp lands once and never retracts", + "Responsive/motion: phones keep one race per screen with its reporting counter; numerals change by odometer roll, never by fade" + ], + "spark": "at 11:04 the board holds at 91 percent reporting, two rows a thousand votes apart, and when the PROJECTED stamp finally slams over the top line the studio behind the numbers erupts off camera", + "webLeverage": "server-sent updates roll the CG numerals with css transforms while every race stays a semantic, sortable table", + "strength": "dual" + }, + { + "id": "signals-instruments-radar-scope-watch", + "form": "a night radar watch, a circular phosphor scope swept by a rotating trace, blips blooming on first paint and decaying by recency, range rings and a compass rose ordering the dark, grease-pencil tracks marked by hand on the glass", + "lineage": "Cold War air-defense PPI scopes, air traffic radar rooms, grease-pencil plotting practice", + "tags": [ + "sweep-refresh", + "blip-decay", + "range-rings" + ], + "system": [ + "Palette/material: near-black scope ground, phosphor green trace and blips, dimmer green afterglow grading recency, grease-pencil white for human annotation, amber only for warnings", + "Type/composition: terse alphanumeric tags beside each blip, range ring numerals at fixed bearings, a compass rose at the rim; density lives in the tags, quiet in empty sectors", + "Topology/navigation: the scope is a polar map centered on you; range rings are distance, bearing is direction, and switching range scales is the only zoom that exists", + "Controls/state: the sweep refreshes truth once per rotation, a fading blip is aging data, a grease-pencil line is a human promise, and a new contact blooms brightest on first paint", + "Responsive/motion: small screens keep the full circle and shed the outer rings; motion is the constant sweep and the slow decay behind it" + ], + "spark": "the trace comes around and paints a new bloom at forty miles, brighter than everything else on the glass, and the watch officer leans in with a grease pencil to give it a name before it fades", + "webLeverage": "canvas draws the sweep and persistence decay in real time while contacts mirror into an accessible bearing-sorted list", + "strength": "dual" + }, + { + "id": "signals-instruments-telemetry-ward-monitor", + "form": "a night-shift telemetry bay, bedside traces sweeping in fixed channel color, green heart line, cyan oxygen, yellow breath, large numeric tiles updating beside each wave, alarm limits bracketing every value in quiet confidence", + "lineage": "1990s patient monitor design, ECG sweep-and-erase convention, hospital ward central telemetry stations", + "tags": [ + "channel-colors", + "sweep-erase", + "limit-brackets" + ], + "system": [ + "Palette/material: matte black screen ground, one fixed color per channel, green, cyan, and yellow, alarm red reserved and rare, everything else in dim gray restraint", + "Type/composition: large numeric values beside each trace in a squarish digital face, small unit labels beneath, channels stacked in strict rows with the most vital on top", + "Topology/navigation: each bed is a stack of channels and the ward view tiles the beds; you move from many small truths to one large one and back, never losing the vitals row", + "Controls/state: traces sweep left to right behind an erase bar, values inside their limit brackets stay calm, and crossing a limit colors the number first and sounds later", + "Responsive/motion: phones keep one bed with its top two channels; motion is the sweep itself, steady, unhurried, and never decorative" + ], + "spark": "at 3 a.m. the bay is a wall of slow green waves, and one cyan number drifts two points below its bracket, recoloring itself a beat before the soft chime, so the nurse is already standing", + "webLeverage": "real-time channel data drives canvas sweep-and-erase traces with aria live regions announcing limit crossings", + "strength": "dual" + }, + { + "id": "signals-instruments-drum-machine-step-row", + "form": "an early-80s rhythm machine step row, sixteen candy-colored step keys under a running chase light, pattern banks behind them and a tempo readout above, accents lighting deeper as the loop swings around again", + "lineage": "Roland TR-808 and TR-909 step sequencers, pattern-based rhythm programming, chase-light panel convention", + "tags": [ + "step-row", + "chase-light", + "pattern-banks" + ], + "system": [ + "Palette/material: charcoal panel ground, the step row quartered in red, orange, yellow, and white keys, lit LEDs as the only glow, silkscreen white labels for everything else", + "Type/composition: instrument names as small silkscreen caps above their rows, the tempo in a red segmented readout, the sixteen-step row as the page's one unbroken line", + "Topology/navigation: patterns are pages and banks are chapters; the step row is a timeline you write into place, and the chase light always tells you where now is", + "Controls/state: tapping a step arms it and lights it, a second tap accents it brighter, the chase light sweeps in tempo, and an empty pattern is sixteen dark keys of invitation", + "Responsive/motion: the sixteen-step row never wraps, it scales; motion is the chase light and a key's press flash, both locked to the clock" + ], + "spark": "you punch four steps into the red quarter of the row and hit run, the chase light comes around, and the empty machine suddenly has a pulse you made, so you lean in and accent the offbeat", + "webLeverage": "web audio clocks the chase light and playback while each step key stays a toggle button operable by keyboard", + "strength": "dual" + } + ] + }, + { + "id": "machines-contraptions", + "label": "Machines & Contraptions", + "well": "instruments-signals", + "description": "Tools, instruments, workbenches, mechanisms, product forms, wear, repair, and precise relationships between hand and object.", + "concepts": [ + { + "id": "product-industrial-mechanical-espresso-lever", + "form": "a lever espresso machine on a bar counter, a spring-loaded piston, a group head, and a pressure gauge that make nine bars a matter of forearm and timing", + "lineage": "Gaggia's 1948 lever patent, Faema E61 group heads, Italian bar counter ritual", + "tags": [ + "pressure-arc", + "hand-timed", + "declining-spring" + ], + "system": [ + "Palette/material: polished chrome and cream enamel over a walnut bar, the pour's honey-dark-to-blonde gradient as the live progress hue, gauge red for over-pressure", + "Type/composition: engraved italic badge script over stamped gauge numerals on cream dial faces, the layout one narrow column stacked along the lever's vertical arc", + "Topology/navigation: the whole task is one vertical arc of the lever; every stage, preinfusion to blonding, is a position along that single stroke", + "Controls/state: the spring declines pressure naturally from nine bars toward six; the gauge and the color of the pour are the state, the spent puck is the log", + "Responsive/motion: gauge and stroke condense to a single arc on small screens" + ], + "spark": "The barista pulls the lever down against the spring, holds one breath while water soaks the puck, then lets go; the piston climbs and honey-dark syrup unwinds into the cup in a slowly blonding rope.", + "webLeverage": "a pointer-dragged lever drives a real pressure simulation over time, and the pour renders live as canvas fluid that blondes as it runs", + "strength": "composition" + }, + { + "id": "product-industrial-mechanical-letterpress-composing", + "form": "a letterpress composing stick over a california job case, metal type set upside-down and backwards, then locked into a chase with quoins before the proof", + "lineage": "Gutenberg-descended hand composition, california job case layouts, Hatch Show Print", + "tags": [ + "physical-typesetting", + "mirror-logic", + "lockup-discipline" + ], + "system": [ + "Palette/material: oil-black ink on cream cotton paper, worn lead-gray sorts in a wood case, one vermilion ink pass reserved for the line being set", + "Type/composition: wood-type headline caps over metal text sizes, everything locked to the chase's rectangle; furniture and quads make the whitespace literal metal", + "Topology/navigation: the case maps letter frequency to reach, common sorts in the big near bays; the line grows one piece of type at a time in the stick", + "Controls/state: nothing prints until the forme is locked tight with quoins; a loose lockup is a visible failure that spills type across the floor", + "Responsive/motion: line length is the stick's set gauge and reflow means recomposing" + ], + "spark": "The compositor's hand flies over the case without looking, clicking sorts into the stick mirror-backwards, and only when the inked proof rolls off does the sentence turn to face the world.", + "webLeverage": "sorts drag from case to stick with pointer events; a CSS transform holds the forme mirrored until the pulled proof reveals the readable state", + "strength": "composition" + }, + { + "id": "product-industrial-mechanical-linotype-caster", + "form": "a linotype hot-metal caster, a ninety-character keyboard raining brass matrices into a line that is cast in molten lead and returned by a spinning elevator", + "lineage": "Mergenthaler Linotype, newspaper composing rooms, the ETAOIN SHRDLU tradition", + "tags": [ + "line-at-a-time", + "circulating-parts", + "molten-commit" + ], + "system": [ + "Palette/material: brass matrices and dull lead-silver slugs against oil-dark cast iron, molten orange glow reserved for the committing line, newsprint gray as ground", + "Type/composition: condensed headline gothics ranked over agate text lines in strict newspaper columns, every line justified tight by the spacebands' wedges", + "Topology/navigation: matrices circulate in a loop, magazine to assembler to caster to distributor; every character physically returns to its channel", + "Controls/state: a line commits by casting in hot lead, irreversible; errors are cast anyway and thrown back in the pot, ETAOIN SHRDLU down the slug", + "Responsive/motion: the assembling line justifies live as spacebands wedge wider" + ], + "spark": "The operator's fingers trigger a soft brass rain, matrices sliding down chutes into a line, and then the machine drinks molten lead and hands back a still-warm slug of tomorrow's headline.", + "webLeverage": "each keystroke animates a matrix drop from a live keyboard listener; the cast slug renders as a canvas relief you can ink and proof", + "strength": "composition" + }, + { + "id": "product-industrial-mechanical-manual-typewriter", + "form": "a manual typewriter with basket and carriage, typebars swinging through one shared apex while a bell warns the margin and the return lever feeds the platen", + "lineage": "Underwood No. 5, Olivetti Lettera 22, Hermes 3000 newsroom machines", + "tags": [ + "strike-commitment", + "carriage-geometry", + "margin-bell" + ], + "system": [ + "Palette/material: ribbon black on onionskin cream with a gunmetal frame, the ribbon's red half reserved for emphasis and correction, platen rubber as the dark ground", + "Type/composition: one monospaced typewriter face at one size, hard left margin and ragged right; hierarchy is only capitals, underscores, and blank lines", + "Topology/navigation: the page never moves sideways, the carriage does; position is where the machine has carried the paper, one em at a time", + "Controls/state: each keystrike is a committed inked impression and corrections are visible scars; the bell announces the margin before the lock enforces it", + "Responsive/motion: line width is the carriage's set margins and reflow is a fresh sheet" + ], + "spark": "Somewhere in the small hours the room is nothing but strike, strike, strike, a bell, the ratcheting zip of the return, and a page slowly filling with words that cannot be taken back.", + "webLeverage": "keyboard events fire typebar animation with Web Audio strikes; the margin bell is a timed notification the page itself gives", + "strength": "composition" + }, + { + "id": "product-industrial-mechanical-pipe-organ-keydesk", + "form": "a pipe-organ keydesk of stacked manuals and drawknobs, stops that admit wind to whole ranks so one keypress can be a flute, a trumpet, or a building's roar", + "lineage": "baroque tracker-action organs, Cavaillé-Coll symphonic instruments, cathedral organ lofts", + "tags": [ + "registration-layers", + "rank-switching", + "wind-budget" + ], + "system": [ + "Palette/material: dark oak console with ivory and ebony manuals, bone-white drawknob faces; a drawn stop sits proud and its gilt lettering marks the sounding rank", + "Type/composition: engraved roman small caps on round knob faces with pitch marks as 8', 4', 2'; the layout is symmetric stop jambs flanking stacked manuals", + "Topology/navigation: manuals stack by division, each keyboard a different room of pipes; the pedalboard is a third hand under the feet", + "Controls/state: drawknobs preselect which ranks may speak before any key sounds; a registration is a saved combination recalled by pistons mid-phrase", + "Responsive/motion: divisions fold onto one manual with stops summed on narrow screens" + ], + "spark": "The organist pulls three knobs, and the same struck key that whispered as a single flute now opens wind into forty ranks at once, the chord arriving through the floor before it reaches the ears.", + "webLeverage": "Web Audio layers real rank samples per drawknob state, and MIDI or keyboard input plays every division live", + "strength": "composition" + } + ], + "retired": true + }, + { + "id": "medium-native", + "label": "The Medium Itself", + "well": "medium-native", + "description": "The browser and computation as material: generative systems, textmode culture, shaders, glitch, and web-native traditions that can exist nowhere else.", + "concepts": [ + { + "id": "medium-native-algorave-source-floor", + "form": "an algorave floor, where projected live code edits the music mid-dance and every thrown bracket changes what a hundred bodies do next", + "lineage": "TidalCycles and SuperCollider live coding, algorave performance culture, projected-source screening ethics", + "tags": [ + "live-source", + "pattern-edit", + "crowd-feedback" + ], + "system": [ + "Palette/material: phosphor green and magenta syntax on projector black, the code buffer as ground; the pattern about to change flashes amber before it sounds", + "Type/composition: monospaced terminal type at stage scale with hard line breaks as musical bars, the composition one code buffer whose cursor line is the downbeat", + "Topology/navigation: the source is the stage; sections of code map to audible layers you can follow live.", + "Controls/state: edits apply on the next cycle boundary; upcoming changes are visible before they sound.", + "Responsive/motion: code and visuals share one clock; small screens follow a single highlighted pattern lane." + ], + "spark": "The coder deletes half a line and the kick drops out; the crowd howls, the line comes back wrong on purpose, and the room lifts.", + "webLeverage": "Web Audio scheduling ties editable patterns to a shared clock with live evaluation in the page.", + "strength": "dual" + }, + { + "id": "medium-native-ansi-bbs-nightboard", + "form": "a dial-up bulletin board at 2 a.m., where ANSI title screens in sixteen colors, block-character art, and one phone line make a neighborhood out of text", + "lineage": "ANSI artscene and BBS door culture, CP437 block graphics, 2400-baud modem-era interface design", + "tags": [ + "textmode", + "block-character", + "scarce-presence" + ], + "system": [ + "Palette/material: sixteen ANSI colors on terminal black, cyan and magenta block art as chrome, blinking white on blue reserved for new mail and live presence", + "Type/composition: CP437 block glyphs and box-drawing rules composing all chrome on an 80 by 25 cell grid, centered title art over numbered menu lines", + "Topology/navigation: everything is a text screen with numbered exits; the character grid is the only geometry.", + "Controls/state: presence is scarce and precious; who is online, new posts, and mail land as textmode events.", + "Responsive/motion: the grid rescales by character cell; the pour-in reveal respects" + ], + "spark": "The title screen pours in line by line at modem speed, cyan on black, and being the only caller connected feels like owning the night.", + "webLeverage": "A true character-grid renderer with line-by-line streamed arrival and complete keyboard operation.", + "strength": "dual" + }, + { + "id": "medium-native-ascii-live-scene-render", + "form": "a live scene rendered as typewriter characters, where density of glyphs stands in for light and an at-sign can be a face if it moves correctly", + "lineage": "AAlib and libcaca renderers, ASCII-art scene culture, teletext and line-printer picture tradition", + "tags": [ + "glyph-density", + "character-grid", + "luminance-ramp" + ], + "system": [ + "Palette/material: single-ink phosphor, green or amber on black; tone is glyph density from period to at-sign, and the densest glyph is the highlight", + "Type/composition: one strict monospace grid as the entire composition, the luminance ramp serving as the typographic scale, captions living inside the same grid", + "Topology/navigation: the world is a fixed character grid; you move the camera, and the alphabet re-renders the view.", + "Controls/state: the luminance ramp is the palette; swapping ramps changes mood while geometry stays put.", + "Responsive/motion: cell count adapts to viewport while glyphs stay monospace-true" + ], + "spark": "A rotating skull made entirely of dollar signs and periods; you squint and it is sculpture, you focus and it is text, and it is both at every distance.", + "webLeverage": "Canvas or camera frames sample down to a live glyph grid, so video, 3D, and pointer input all become selectable text.", + "strength": "dual" + }, + { + "id": "medium-native-crt-arcade-pixel-glow", + "form": "a pixel-art arcade cabinet screen, where fat luminous pixels, scanlines, and phosphor bloom turn a 240-line grid into a stage with real glow", + "lineage": "CRT arcade monitors, pixel-art sprite discipline, shadow-mask and scanline rendering culture", + "tags": [ + "pixel-grid", + "scanline", + "sprite-discipline" + ], + "system": [ + "Palette/material: a sixteen-color sprite palette over phosphor black, scanline gaps doing half the shading, flashing white-gold reserved by law for power-ups", + "Type/composition: eight-by-eight pixel caps for score and menus pinned to the top edge, the playfield composing in whole tiles with nothing allowed off-grid", + "Topology/navigation: space is a tile grid with screen-by-screen rooms; the camera moves in whole-pixel steps.", + "Controls/state: states are sprite swaps with strict palette discipline; damage, power, and rarity are palette laws.", + "Responsive/motion: integer scaling preserves the grid at every size; bloom and scanlines are togglable capability layers." + ], + "spark": "Up close it is just squares; at play distance the squares fuse into a hero, and the black between scanlines is doing half the work.", + "webLeverage": "Crisp integer-scaled canvas with shader scanline glow, and every sprite state addressable in code.", + "strength": "world" + }, + { + "id": "medium-native-fluid-ink-basin", + "form": "a shallow basin of suminagashi ink, where a fingertip drags marbled currents across the surface and every swirl obeys real fluid law rather than decoration", + "lineage": "Japanese suminagashi and Turkish ebru marbling, Navier-Stokes solvers, Jos Stam's stable fluids", + "tags": [ + "fluid-dynamics", + "marbling", + "advection" + ], + "system": [ + "Palette/material: indigo and carbon sumi ink marbling on paper-white water, dye thinning to gray where it has spread, the newest drop always the darkest region", + "Type/composition: a quiet humanist sans held to a still margin outside the basin, the surface itself composing only as current, whorl, and feathered rain", + "Topology/navigation: the basin is one continuous surface; regions are dye colors that remember where they have flowed.", + "Controls/state: stir, drop, fan, and still are the verbs; viscosity and vorticity are dials with honest physical names.", + "Responsive/motion: simulation grid scales to GPU budget" + ], + "spark": "One drop of indigo lands, the fan passes, and the surface writes chrysanthemums; a fingertip's slow drag pulls the whole pattern into feathered rain.", + "webLeverage": "A GPU fluid solver in WebGL answers the pointer at sixty frames, making the page itself a liquid material.", + "strength": "dual" + }, + { + "id": "medium-native-hypercard-stack-shoebox", + "form": "a HyperCard shoebox stack, where black-and-white cards link through buttons anyone can paint and the tool for reading is also the tool for making", + "lineage": "Bill Atkinson's HyperCard, Vannevar Bush's Memex trails, Myst-era stackware and one-bit Mac aesthetics", + "tags": [ + "card-stack", + "author-reader", + "one-bit" + ], + "system": [ + "Palette/material: one-bit black on white with stipple-dither grays and no color anywhere, the pressed button inverting to solid black as its active state", + "Type/composition: bold Chicago-style pixel menus over Geneva-style body text, cards composing as fixed rectangles with hand-drawn borders and painted buttons", + "Topology/navigation: space is a stack of cards linked by visible buttons; back retraces your exact trail through them.", + "Controls/state: every card is editable in place; browse and author are two modes of the same object.", + "Responsive/motion: cards keep fixed proportions and dissolve between each other" + ], + "spark": "A shoebox of black-and-white cards where clicking a hand-painted button flips you somewhere the author felt you should go next, and the paint tools are one menu away.", + "webLeverage": "History API and deep links make every card addressable, while in-place editing keeps reader and author one keypress apart.", + "strength": "dual" + }, + { + "id": "medium-native-life-colony-petri-grid", + "form": "a petri dish of Conway's Life, where gliders, still lifes, and oscillators form a zoo of creatures born from two lines of law", + "lineage": "John Conway's Game of Life, Martin Gardner's Scientific American columns, LifeWiki pattern taxonomy", + "tags": [ + "cellular-colony", + "glider", + "generation-clock" + ], + "system": [ + "Palette/material: live cells in ink black on agar cream, a just-died cell fading through gray for one tick, the stamped pattern previewing in ghost blue", + "Type/composition: monospace coordinates and a generation count holding one corner, the dish an unbounded grid where labels are bookmarks pinned to coordinates", + "Topology/navigation: an unbounded grid explored by pan and zoom; named colonies are bookmarks in coordinate space.", + "Controls/state: paint cells, stamp known creatures, step, run, and rewind; birth and death are the only verbs.", + "Responsive/motion: generation rate obeys a visible clock you own" + ], + "spark": "You stamp five cells in the dish, and the glider actually leaves, crawling toward the edge of the world forever with nobody steering it.", + "webLeverage": "Bit-packed simulation in a worker keeps million-cell colonies live while canvas zoom goes from cell to galaxy.", + "strength": "composition" + }, + { + "id": "medium-native-lsystem-grammar-garden", + "form": "a garden grown from grammar, where each plant is a sentence rewritten five times and the angle of one rule decides whether it becomes fern, bramble, or poplar", + "lineage": "Aristid Lindenmayer's L-systems, Prusinkiewicz's Algorithmic Beauty of Plants, turtle-graphics tradition", + "tags": [ + "rewriting-rule", + "branching", + "growth-depth" + ], + "system": [ + "Palette/material: fern green deepening by generation depth over loam-dark ground, the selected branch and the production that grew it lit in chlorophyll yellow", + "Type/composition: the grammar set in monospace as axiom and arrow rules beside each bed, the garden composing in rows, one species per row, roots to crowns", + "Topology/navigation: walk rows of species, each a rule set; selecting a branch highlights the exact production that grew it.", + "Controls/state: edit axiom, rules, angle, and depth; every plant carries seedling through senescent generations.", + "Responsive/motion: rewrite depth caps to viewport budget" + ], + "spark": "You change one angle from 25 to 27 degrees and the whole bed leans from ferns into thorn scrub, every plant obeying a sentence it cannot read.", + "webLeverage": "SVG turtle rendering keeps every branch a real addressable node, so grammar edits regrow the garden live.", + "strength": "composition" + }, + { + "id": "medium-native-mandelbrot-coastline-dive", + "form": "an infinite dive down the Mandelbrot coastline, where every zoom lands on seahorse valleys and lightning filaments that were always there, waiting at that magnification", + "lineage": "Benoit Mandelbrot's fractal geometry, Peitgen and Richter's Beauty of Fractals, deep-zoom video culture", + "tags": [ + "fractal", + "infinite-zoom", + "self-similar" + ], + "system": [ + "Palette/material: escape-time bands cycling indigo, gold, and white against the set's absolute black interior, recoloring rotating the band palette live", + "Type/composition: coordinate and depth readouts in a small monospace strip, the plane composing full bleed with named locations captioned in spaced caps", + "Topology/navigation: place is a complex coordinate plus a depth; famous locations have names and shareable addresses.", + "Controls/state: zoom, re-center, and re-color are the verbs; iteration budget and precision are honest visible limits.", + "Responsive/motion: tiles refine progressively from coarse to sharp" + ], + "spark": "You push into a black bay the size of a pixel and it opens into a valley of seahorses, each tail carrying the entire set again, smaller and unbothered.", + "webLeverage": "WebGL shaders with perturbation math compute each frame live, and the URL encodes any coordinate and depth exactly.", + "strength": "composition" + }, + { + "id": "medium-native-noise-flow-ink-field", + "form": "a field of iron filings combed by invisible noise, where a hidden simplex wind bends ten thousand ink strokes into currents, eddies, and doldrums", + "lineage": "Perlin and simplex noise research, flow-field generative art, magnetic-filing physics demonstrations", + "tags": [ + "vector-field", + "noise-octaves", + "particle-trace" + ], + "system": [ + "Palette/material: iron-black ink strokes combed over unbleached paper, trails aging to sepia, named eddies and doldrums carrying a faint rust wash", + "Type/composition: engraved caps annotating the margins like a chart's border, the field itself composing as combed directional strokes with no boxes inside", + "Topology/navigation: you travel by seeding particles and following their trails; zooming reveals octaves of finer wind.", + "Controls/state: noise scale, octave count, and seed are the levers; calm, laminar, and turbulent regions carry names.", + "Responsive/motion: trail density adapts to device budget" + ], + "spark": "Drop one drop of ink and it writes a long calligraphic sentence downwind; drop a thousand and the invisible weather of the page becomes suddenly, completely legible.", + "webLeverage": "Procedural noise evaluated per frame on canvas turns a pure function into weather the pointer can stir.", + "strength": "composition" + }, + { + "id": "medium-native-scroll-driven-strata-essay", + "form": "a long-form essay cut into geological strata, where the scrollbar is a drill and every centimeter of travel exposes a deeper layer of evidence", + "lineage": "NYT Snow Fall scrollytelling, parallax picture books, stratigraphic diagram tradition", + "tags": [ + "scroll-as-time", + "strata", + "pinned-scene" + ], + "system": [ + "Palette/material: topsoil umber through clay ochre to bedrock slate as the scroll deepens, evidence cards on bone paper, the depth gauge filling in stratum color", + "Type/composition: a serif essay voice over slab figure captions, one measured column plumbing the strata with headings marking each layer like core labels", + "Topology/navigation: position in the page is position in the argument; a depth gauge shows how far down you are.", + "Controls/state: scenes pin while their evidence assembles; scrubbing backward disassembles it in reverse.", + "Responsive/motion: layers thin to a single column on phones" + ], + "spark": "The headline sinks like topsoil as you drag downward; roots, then bones, then bedrock slide past at different speeds, and the story is exactly as deep as your scroll.", + "webLeverage": "Scroll-driven CSS animation and IntersectionObserver bind narrative state to the scrollbar itself.", + "strength": "composition" + }, + { + "id": "medium-native-variable-font-bellows-press", + "form": "a letterpress with bellows for type, where one variable font breathes between hairline and black, and weight, width, and slant respond like organ stops", + "lineage": "Variable-font OpenType axes, phototypesetting distortion experiments, kinetic typography practice", + "tags": [ + "variable-axes", + "kinetic-type", + "weight-breath" + ], + "system": [ + "Palette/material: soot-black ink on unbleached cream stock with brass bellows hardware as the only chrome, the word at full black weight owning the active state", + "Type/composition: one variable grotesk performing every voice from hairline whisper to black shout, centered lines with weight, width, and slant as the hierarchy", + "Topology/navigation: content is set in one family; the axes' positions are the map, and extremes are named destinations.", + "Controls/state: weight answers importance, width answers density, slant answers voice; each axis has a resting home.", + "Responsive/motion: axes retune to viewport width instead of breaking layout" + ], + "spark": "The word inhales: hairline strokes swell to full black as it comes due, then exhale back to a whisper once you have seen it, without ever changing size.", + "webLeverage": "CSS font-variation-settings animate live axes on real selectable text, so type performs without becoming image.", + "strength": "composition" + }, + { + "id": "medium-native-webring-homepage-lane", + "form": "a hand-built homepage neighborhood, where tiled backgrounds, guestbooks, under-construction signs, and webring badges link strangers into a lane of personal rooms", + "lineage": "GeoCities-era personal homepages, webring navigation culture, guestbook and hit-counter conventions", + "tags": [ + "personal-room", + "ring-link", + "handmade-html" + ], + "system": [ + "Palette/material: tiled starfield black with neon lime text, royal-blue links purpling once visited, the under-construction amber stripe marking anything unfinished", + "Type/composition: default serif body under exuberant display headings, centered layout ruled by horizontal lines, badges and counters clustering at the page's foot", + "Topology/navigation: spaces link laterally through ring badges: previous, random, next; discovery beats hierarchy.", + "Controls/state: visitor traces are celebrated; counters, guestbook entries, and last-updated stamps are first-class.", + "Responsive/motion: rooms keep their handmade proportions with honest scrollbars; ornament loops pause under" + ], + "spark": "Every page is somebody's room: a starfield background, a song you can stop, and a webring badge promising a neighbor either way.", + "webLeverage": "Real cross-page ring navigation with shared state via URL, plus a live guestbook as the social layer.", + "strength": "dual" + }, + { + "id": "medium-native-one-bit-desktop", + "form": "an early one-bit desktop, dithered gray patterns standing in for every tone, window chrome with title bars and close boxes, marching-ants selections, and 32-pixel icons drawn from two colors", + "lineage": "Susan Kare's Macintosh System icons and Chicago, Xerox Star, Windows 1.0 bitmapped interfaces", + "tags": [ + "one-bit", + "dither", + "window-chrome" + ], + "system": [ + "Palette/material: black and white pixels only, ordered stipple dithers standing in for every gray, selection inverting to solid black over a fifty-percent dither ground", + "Type/composition: bold Chicago-style pixel caps in title bars over small Geneva-style labels, windows composing as overlapping rectangles with one-pixel black chrome", + "Topology/navigation: overlapping windows on one desktop plane, folders opening into new windows while a zoom rectangle animates the lineage between them", + "Controls/state: pressing inverts, dragging shows a dotted outline, selections wear marching ants; dimmed dither means disabled and a checkmark marks the chosen item", + "Responsive/motion: windows tile edge to edge on small screens at whole-pixel scale" + ], + "spark": "You drag a window and its gray dither shears into moire as it moves; the trash can's lid pops open pixel by pixel, and the marching ants around your selection never stop walking.", + "webLeverage": "image-rendering pixelated canvas keeps dithers crisp at integer scale, and CSS steps() animation drives the marching-ants selection border", + "strength": "world" + } + ] + }, + { + "id": "space", + "label": "Space", + "well": "material-worlds", + "description": "Celestial scale, orbital movement, alien distance, deep time, and imagined life beyond Earth.", + "concepts": [ + { + "id": "galaxies-nebulae-deep-time-accretion-disk-threshold", + "form": "a black-hole accretion disk at the edge of disappearance, with warped horizons, time-dilated rings, and matter crossing an irreversible threshold", + "lineage": "relativistic visualization and cinematic scientific simulation; grounded in deep-field astronomy, planetarium-scale science visualization, and immersive cosmic media", + "tags": [ + "threshold", + "relativity", + "irreversibility" + ], + "system": [ + "Palette/material: void black ground, disk light graded blue-white toward approach and ember red in recession, a photon-ring gold arc as the active accent", + "Type/composition: hairline technical grotesk with lining numerals bent along concentric ring bands, labels orbiting the rim, the center held as unmarked black", + "Topology/navigation: Navigate outer disk, photon ring, horizon, and observer viewpoints through guided anchors.", + "Controls/state: Change viewpoint, trace matter, and show orbiting, plunging, redshifted, and lost states.", + "Responsive/motion: Replace free orbit with sectional viewpoints on phones" + ], + "spark": "A bright disk folds over itself while one glowing fragment slows, reddens, and vanishes at the horizon.", + "webLeverage": "Relativistic shader approximation bends light and color around an interactive horizon.", + "strength": "world" + }, + { + "id": "orbits-eclipses-celestial-cycles-tidally-locked-world", + "form": "a tidally locked world divided between eternal day and night, with a living twilight ring, atmospheric circulation, and no conventional eastward journey", + "lineage": "exoplanet climate models and speculative planetary visualization; grounded in celestial mechanics, astronomical instruments, kinetic sculpture, and time-based immersive media", + "tags": [ + "tidal-lock", + "twilight", + "climate" + ], + "system": [ + "Palette/material: nightside ink blue-black as ground, dayside scorched amber-white, the twilight ring a violet band holding every active and habitable state", + "Type/composition: climate-atlas grotesk with small-cap zone labels, all columns ruled parallel to the terminator, longitude bands ordering the page", + "Topology/navigation: Navigate dayside, terminator, nightside, and circulation loops around a fixed starward axis.", + "Controls/state: Adjust atmosphere, inspect zones, and show scorched, temperate, frozen, and storm states.", + "Responsive/motion: Use a terminator-first cross-section on phones; rotation is constrained by the world's physical law." + ], + "spark": "One hemisphere burns, one freezes, and a narrow violet belt circles the planet with every possible habitat.", + "webLeverage": "GPU climate fields and PBR planetary rendering couple light, heat, and circulation.", + "strength": "composition" + } + ] + }, + { + "id": "earth-water-worlds", + "label": "Earth & Water Worlds", + "well": "material-worlds", + "description": "Terrain, stone, rivers, oceans, clouds, storms, and the forces that continually remake a planet.", + "concepts": [ + { + "id": "clouds-storms-auroras-auroral-curtain", + "form": "a vast auroral curtain folded by magnetic fields, with luminous bands, sudden substorms, and color changing by altitude", + "lineage": "auroral science, night-sky cinematography, and immersive light environments; grounded in meteorological visualization, atmospheric field observation, environmental installation, and sky photography", + "tags": [ + "aurora", + "curtain", + "altitude" + ], + "system": [ + "Palette/material: arctic night blue-black ground, the curtain body in oxygen green, lower fringes magenta, substorm magenta breaking through as the active state", + "Type/composition: light grotesk drawn tall and narrow like hanging rays, captions on a horizon band, vertical striation setting the rhythm of every column", + "Topology/navigation: Navigate latitude, altitude layer, field line, and substorm sequence.", + "Controls/state: Adjust solar input, isolate emissions, and show quiet, building, breaking, and recovering states.", + "Responsive/motion: Recompose the dome into a panoramic ribbon on phones" + ], + "spark": "Green fabric hangs across the whole sky, then snaps into magenta folds that race overhead without sound.", + "webLeverage": "Procedural ribbon geometry and emission shaders respond to magnetic-field data.", + "strength": "composition" + }, + { + "id": "clouds-storms-auroras-hurricane-eye-wall", + "form": "a hurricane organized around an uncanny calm eye, with spiral rainbands, asymmetric wind, and an evolving eyewall replacement", + "lineage": "tropical-cyclone science and satellite-image choreography; grounded in meteorological visualization, atmospheric field observation, environmental installation, and sky photography", + "tags": [ + "hurricane", + "spiral", + "eye" + ], + "system": [ + "Palette/material: basin gray-blue cloud decks as ground, the sunlit eye white-gold at center, hazard arcs in warning coral as the active alert color", + "Type/composition: condensed advisory caps with monospaced timing digits, copy set in radial bands around a center kept empty and calm", + "Topology/navigation: Navigate basin view, rainband, eyewall, eye, and local hazard arc.", + "Controls/state: Scrub intensity, choose radius, and show forming, strengthening, replacing, and weakening states.", + "Responsive/motion: Use radial bands plus a local timeline on phones; never loop destructive imagery decoratively." + ], + "spark": "The viewer passes through screaming cloud into a sunlit circular calm, then watches a second wall form outside it.", + "webLeverage": "GPU cloud volumes and vector fields couple storm structure to measured wind.", + "strength": "world" + }, + { + "id": "clouds-storms-auroras-iridescent-cloud-edge", + "form": "a newly formed cloud edge diffracting sunlight through similarly sized droplets, with pastel bands shifting as droplet distribution and angular distance from the sun change", + "lineage": "optical meteorology, cloud microphysics, safe sky observation, spectral photography, and immersive color-field installation", + "tags": [ + "cloud-diffraction", + "droplet-size", + "fleeting-color" + ], + "system": [ + "Palette/material: plain cloud white ground with slate gray body ink, a narrow fringe of mint, rose, and violet at the edge, violet marking the active band", + "Type/composition: quiet thin humanist sans, wide white margins, color confined to hairline band edges while the text field stays achromatic", + "Topology/navigation: Move between cloud body, droplet-size sample, angular color band, observation moment, and competing explanation.", + "Controls/state: Adjust droplet distribution, compare images, mark uncertainty, and inspect absent, forming, vivid, and dispersed states.", + "Responsive/motion: Stack image, spectrum, and droplet evidence on phones; never require device motion or direct viewing near the sun." + ], + "spark": "A plain white cloud grows a narrow crown of mint, rose, and violet; minutes later the droplets broaden in size and the entire spectral edge dissolves.", + "webLeverage": "Local image analysis, a droplet-diffraction model, and shareable comparison states let users test observed bands against particle-size hypotheses while retaining safe-viewing guidance and semantic spectra.", + "strength": "dual" + }, + { + "id": "clouds-storms-auroras-monsoon-wall-arrival", + "form": "a monsoon wall arriving across a dry landscape, with advancing dust edge, temperature drop, first rain, and sudden surface renewal", + "lineage": "seasonal weather observation and landscape time-lapse; grounded in meteorological visualization, atmospheric field observation, environmental installation, and sky photography", + "tags": [ + "monsoon", + "front", + "renewal" + ], + "system": [ + "Palette/material: parched ochre and tan ground before the front, the wall in dust brown, rain slate gray, returning leaf green reserved for the renewed active state", + "Type/composition: field-journal grotesk with dated entries, the page split as a horizontal before-front-after band, notes stamped at the moment of arrival", + "Topology/navigation: Navigate prefront landscape, dust boundary, rain core, runoff, and poststorm response.", + "Controls/state: Scrub arrival, inspect place, and show waiting, overtaken, raining, and renewed states.", + "Responsive/motion: Use a horizontal before-front-after sequence on phones; motion remains user-controlled." + ], + "spark": "A brown wall swallows the horizon; the wind flips, rain strikes hot ground, and dormant color returns.", + "webLeverage": "Terrain particles, wetness shaders, and vegetation state blending stage the transformation.", + "strength": "world" + }, + { + "id": "clouds-storms-auroras-supercell-cathedral", + "form": "a rotating supercell rising like a vast atmospheric cathedral, with layered inflow, suspended vaults, and a rain-wrapped core", + "lineage": "storm structure studies and panoramic severe-weather imaging; grounded in meteorological visualization, atmospheric field observation, environmental installation, and sky photography", + "tags": [ + "supercell", + "rotation", + "layers" + ], + "system": [ + "Palette/material: darkened prairie umber ground, slate cloud vaults stacked above, anvil white-gray at the top, hail-core green as the charged accent light", + "Type/composition: condensed caps stacked by altitude like a storm section, labels ruled to horizontal stratification, the vertical axis ordering all copy", + "Topology/navigation: Navigate inflow, wall cloud, updraft, anvil, and precipitation through a vertical storm section.", + "Controls/state: Adjust humidity and shear, and show organizing, mature, cycling, and collapsing states.", + "Responsive/motion: Turn the storm into stacked sectional layers on phones; cloud motion slows under" + ], + "spark": "Low clouds race inward beneath a vaulted mothership while green light gathers around the hidden core.", + "webLeverage": "Volumetric ray marching and wind-vector particles reveal internal storm architecture.", + "strength": "world" + }, + { + "id": "geological-strata-crystals-basalt-column-organ", + "form": "a basalt column field rising like a stone organ, with cooling fractures, hexagonal rhythms, and broken coastal edges", + "lineage": "volcanic geology, architectural rhythm, and natural stone craft; grounded in geological field craft, mineral collections, scientific illustration, and immersive earth-history exhibitions", + "tags": [ + "basalt", + "rhythm", + "fracture" + ], + "system": [ + "Palette/material: wet basalt charcoal-black ground, rain-sheen gray on column tops, surf foam white at the broken edge, one lichen ochre patch as the accent", + "Type/composition: heavy grotesk set in tall narrow columns of even width, a strict hexagonal rhythm, the ragged coastal break allowed only at the page edge", + "Topology/navigation: Navigate field rhythm, column cluster, fracture junction, and cooling history.", + "Controls/state: Change cooling rate, isolate polygons, and show liquid, cracking, mature, and eroded states.", + "Responsive/motion: Recompose the field as rhythmic vertical bands on phones; camera movement is optional." + ], + "spark": "Black columns descend toward surf in impossible regularity, each top catching a different sheet of rain.", + "webLeverage": "Instanced hexagonal prisms and fracture growth simulate column formation efficiently.", + "strength": "world" + }, + { + "id": "geological-strata-crystals-cave-speleothem-chronicle", + "form": "a limestone cave growing drop by drop, with branching chambers, mineral curtains, and climate history sealed inside formations", + "lineage": "speleology, cave lighting, and natural-history interpretation; grounded in geological field craft, mineral collections, scientific illustration, and immersive earth-history exhibitions", + "tags": [ + "cave", + "growth", + "climate" + ], + "system": [ + "Palette/material: absolute cave dark as ground, lamplit calcite amber and flowstone cream, rust-orange growth bands, the live drip glinting as the accent", + "Type/composition: warm lantern serif in pooled islands of light, captions surfacing only inside the lit chambers while the dark field stays unlettered", + "Topology/navigation: Navigate entrance, chamber, formation, growth band, and source water path.", + "Controls/state: Scrub centuries, change rainfall, and show dripping, accreting, dormant, and broken states.", + "Responsive/motion: Turn cave branches into a chamber sequence on phones; growth is reversible and user-paced." + ], + "spark": "A single drop lands in darkness; centuries race forward and a stone curtain slowly reaches the floor.", + "webLeverage": "Signed-distance cave geometry and layered mineral growth animate geological time.", + "strength": "world" + }, + { + "id": "geological-strata-crystals-geode-hidden-cathedral", + "form": "a rough geode split to reveal a crystalline interior cathedral, with radial growth, nested cavities, and light trapped between facets", + "lineage": "mineral collection display and lapidary craft; grounded in geological field craft, mineral collections, scientific illustration, and immersive earth-history exhibitions", + "tags": [ + "geode", + "reveal", + "facets" + ], + "system": [ + "Palette/material: rough gray rind as ground, amethyst violet crystal points as the accent, quartz white facets between, the hollow center kept in shadowed black", + "Type/composition: lapidary specimen small caps with a locality line, labels growing radially from rim toward the hollow, facet edges ruling the columns", + "Topology/navigation: Navigate exterior shell, cut threshold, cavity, crystal family, and growth base.", + "Controls/state: Rotate, split, relight, and show closed, opening, revealed, and magnified states.", + "Responsive/motion: Use an interactive sectional cut on phones; sparkle never replaces readable contrast." + ], + "spark": "An ordinary stone opens and floods the dark with thousands of violet points arranged around a hollow center.", + "webLeverage": "PBR mineral shaders, parallax facets, and clipping planes reveal nested crystal structure.", + "strength": "world" + }, + { + "id": "geological-strata-crystals-salt-polygon-horizon", + "form": "a salt flat tiled by self-organizing polygons, with brine rising at edges, crystalline ridges, and mirage-softened distance", + "lineage": "evaporite science, aerial land art, and desert optics; grounded in geological field craft, mineral collections, scientific illustration, and immersive earth-history exhibitions", + "tags": [ + "salt", + "polygons", + "self-organization" + ], + "system": [ + "Palette/material: blinding salt white ground with pale gray ridge shadows, deep umber body ink, mirror-cyan brine pools marking the active edges", + "Type/composition: sun-bleached thin caps with wide tracking, copy tiled to the hexagonal field, ridges serving as the only dividers between cells", + "Topology/navigation: Navigate aerial pattern, polygon edge, brine channel, crystal ridge, and horizon.", + "Controls/state: Change evaporation, flood depth, and show submerged, forming, mature, and dissolving states.", + "Responsive/motion: Shift between aerial field and single polygon on phones; mirage motion is restrained." + ], + "spark": "White hexagons repeat beyond scale while shallow water turns the horizon into a perfect mirror.", + "webLeverage": "Reaction-diffusion geometry and reflective shaders form evolving salt patterns.", + "strength": "world" + }, + { + "id": "rivers-tides-ocean-depths-hydrothermal-vent-oasis", + "form": "a hydrothermal vent oasis in abyssal darkness, with mineral chimneys, black-smoker plumes, chemical gradients, and dense life around heat", + "lineage": "deep-sea expedition imaging and chemosynthetic ecology; grounded in hydrological visualization, oceanographic expeditions, water-based installation, and landscape observation", + "tags": [ + "vents", + "chemistry", + "oasis" + ], + "system": [ + "Palette/material: abyssal black ground, chimney sulfide rust and ash gray, smoker plume charcoal against the dark, tube-worm crimson as the living accent", + "Type/composition: monospaced depth digits with small-cap specimen labels, copy held in lamplit circles of legibility surrounded by unbroken dark", + "Topology/navigation: Navigate abyssal plain, chimney, plume, gradient, and symbiotic community.", + "Controls/state: Shift chemistry, inspect species, and show dormant, venting, colonized, and collapsing states.", + "Responsive/motion: Use a chimney cross-section on phones; plume motion slows under" + ], + "spark": "A black plume erupts from a mineral tower and reveals a crowded white ecosystem in a world without sunlight.", + "webLeverage": "Volume particles and reaction-gradient shaders reveal heat and chemistry around the vent.", + "strength": "world" + }, + { + "id": "rivers-tides-ocean-depths-mesophotic-deep-dive", + "form": "a technical deep dive down a volcanic island wall, where one small diver leaves the turquoise surface, crosses a cold blue thermocline, and enters a mesophotic garden of black coral, glass sponges, and falling marine snow", + "lineage": "Technical diving, oceanographic depth transects, mesophotic reef ecology, bathymetric profiles, and underwater documentary cinematography", + "tags": [ + "depth-descent", + "thermocline", + "mesophotic-reef" + ], + "system": [ + "Palette/material: abyssal ink blue deepening by dive stage as the ground, chalk-white marine snow as particle texture, one thermocline cyan band marking the active depth", + "Type/composition: monospaced dive-computer digits for depth and gas beside quiet grotesk notes, one vertical depth axis ruling every line of copy", + "Topology/navigation: Descend through surface, thermocline, reef ledge, mesophotic wall, turnaround depth, ascent stops, and the vertical route home.", + "Controls/state: Descend, hover, illuminate, mark, turn, and ascend with daylight, cooling, dark, gas-limited, decompression, and surfaced states.", + "Responsive/motion: Pair the vertical dive profile with selected close views; stop drift and bubbles under" + ], + "spark": "At forty meters the last warm red drains from the diver's gloves; a lamp clicks on, revealing black-coral branches and white particles falling past a wall with no visible floor.", + "webLeverage": "A synchronized depth-and-time scrub can change light, color, sound, species, and ascent obligations together, while any observation remains pinned to its exact depth and dive phase.", + "strength": "dual" + }, + { + "id": "rivers-tides-ocean-depths-tidal-bore-front", + "form": "a tidal bore running upriver as a moving wall, with compressed flow, reflected waves, and successive banks awakening behind it", + "lineage": "river-tide dynamics and event-scale landscape film; grounded in hydrological visualization, oceanographic expeditions, water-based installation, and landscape observation", + "tags": [ + "bore", + "front", + "reversal" + ], + "system": [ + "Palette/material: estuary mud gray-brown ground, ebb water slate, the bore a single foam white line as the accent, reversed flow steel blue behind it", + "Type/composition: tide-table tabular numerals with condensed station caps, one horizontal front line dividing the page into before and after", + "Topology/navigation: Navigate downstream tide, bore front, river reach, reflected wave, and post-bore flow.", + "Controls/state: Scrub arrival, choose reach, and show ebbing, approaching, passing, and reversed states.", + "Responsive/motion: Turn the river into a horizontal arrival sequence on phones; the wave moves only on command." + ], + "spark": "A river suddenly reverses; a white line rounds the bend and rushes upstream beneath cheering birds.", + "webLeverage": "Shallow-water simulation reproduces the front and reflections along real terrain.", + "strength": "composition" + }, + { + "id": "geological-strata-crystals-gem-lapidary-bench", + "form": "a lapidary bench, rough stones becoming faceted gems against the wheel, dop sticks and index gears setting each cut angle, finished stones ranked in felt trays by cut and fire", + "lineage": "lapidary craft, gem faceting diagrams, GIA cut nomenclature, mineralogy collection drawers", + "tags": [ + "facet-progression", + "tray-taxonomy", + "loupe-zoom" + ], + "strength": "dual", + "system": [ + "Palette/material: charcoal felt ground with steel bench tones, gems keep their true hues, tourmaline green to garnet red, the stone on the dop flashes fire as the active state", + "Type/composition: engraved small caps for stone names, cut angles and carat weights in tabular figures, facet diagrams drawn as fine ruled line art beside each tray", + "Topology/navigation: trays are collections sorted by cut and family; one stone lifts to the dop for work and the loupe view zooms until light paths become the map", + "Controls/state: adjustments turn the index gear in notched steps, each pass adds a facet you can count, progress reads as the rough going from frosted to fire", + "Responsive/motion: trays become a single scrolling drawer on small screens; motion is a slow gem rotation catching light" + ], + "spark": "you seat the dop against the lap and feel the stone take the wheel, frost giving way to a window, then tilt it under the loupe and watch the first facet fire a needle of red light across your knuckles", + "webLeverage": "webgl refraction renders real light paths through facets, with svg facet diagrams and wheel-driven zoom as the fallback" + }, + { + "id": "earth-water-worlds-banded-agate-slice", + "form": "a polished agate slice on a lapidary light table, concentric mineral bands ringing a druzy quartz pocket, every ring a sealed stratum of color readable from rough rind to hollow under one glassy face", + "lineage": "Lapidary slab cutting and polishing, banded agate geology, mineral-show light-table display", + "tags": [ + "banded-rings", + "backlit-stone", + "druzy-focus" + ], + "strength": "world", + "system": [ + "Palette/material: smoke-gray rind as chrome, carnelian, honey and mist-blue bands as section grounds, white druzy sparkle reserved for focus, all sealed under one wet-polish gloss", + "Type/composition: lapidary specimen small caps with a locality line, headings seated on band boundaries, body copy on the widest calm band, columns ruled by the ring edges", + "Topology/navigation: concentric bands are the sections, overview at the rind and detail deepening inward, crossing a band boundary is the page transition", + "Controls/state: the light table is hover, glowing a band translucent from beneath; selection opens the druzy pocket wide, and unpolished matte marks what is disabled", + "Responsive/motion: bands unroll into stacked horizontal strata on phones, and motion is one slow light sweep across the polished face" + ], + "spark": "The lamp under the glass clicks on and the slice ignites, honey and carnelian rings glowing around a pocket of white crystal teeth, and you trace the stone's whole life from rough rind to hollow with one fingertip.", + "webLeverage": "Radial gradients and svg ring paths make each band a clickable region while backdrop-filter carries the backlit translucency." + } + ] + }, + { + "id": "living-worlds", + "label": "Living Worlds", + "well": "material-worlds", + "description": "Plants, animals, ecologies, collective behavior, growth, adaptation, and the strange architectures of life.", + "concepts": [ + { + "id": "forests-canopies-mycelium-mangrove-amphibious-maze", + "form": "a mangrove forest between land and sea, with stilt roots, tidal rooms, nursery channels, and routes that exist only at certain water levels", + "lineage": "mangrove ecology and tidal landscape exploration; grounded in forest ecology, botanical illustration, environmental art, and immersive landscape interpretation", + "tags": [ + "mangrove", + "tides", + "nursery" + ], + "system": [ + "Palette/material: tea-brown brackish water as ground, dark tangled root wood for body ink, one silver-fish flash marking the active channel, gray-green leaves overhead", + "Type/composition: field-guide sans with tide-level numerals, routes drawn as horizontal strips that appear and vanish by water state, roots as the structural grid", + "Topology/navigation: Navigate canopy, root chamber, creek, nursery pocket, and open sea by tide state.", + "Controls/state: Scrub water level, follow species, and show exposed, flooding, submerged, and draining states.", + "Responsive/motion: Turn the maze into tide-dependent route strips on phones; water movement can be stepped." + ], + "spark": "At low tide the roots form walkable chambers; hours later silver fish occupy the same corridors.", + "webLeverage": "Terrain-aware tides and instanced root geometry create a genuinely amphibious topology.", + "strength": "composition" + }, + { + "id": "growth-metamorphosis-branching-fern-fiddlehead-unfurl", + "form": "a fern fiddlehead uncoiling through recursive geometry, with nested leaflets, tension release, and mature frond structure already packed inside", + "lineage": "botanical time-lapse and spiral craft; grounded in developmental biology, botanical time-lapse, morphogenesis visualization, and generative craft", + "tags": [ + "fern", + "unfurl", + "recursion" + ], + "system": [ + "Palette/material: spring-green coiled frond as ground, brown scales freckling the stem, one bright growth-tip green marking the active leaflet, shade-green mature blade", + "Type/composition: geometric sans laid on a logarithmic spiral, content nested self-similar from whole coil to leaflet, labels unrolling as the curve loosens", + "Topology/navigation: Navigate whole coil, pinna, leaflet, growth tip, and mature frond.", + "Controls/state: Scrub growth, isolate recursion, and show coiled, opening, expanding, and mature states.", + "Responsive/motion: Unroll the spiral into nested disclosure on phones; motion follows direct scroll." + ], + "spark": "A tight green spiral loosens over hours, revealing smaller spirals nested all the way down.", + "webLeverage": "Procedural curves and recursive instancing grow the frond from one rule.", + "strength": "composition" + }, + { + "id": "growth-metamorphosis-branching-ikebana-ma-arrangement", + "form": "a tokonoma alcove holding an ikebana arrangement of one weathered pine branch, three irises, and an off-center bronze suiban, where line, asymmetry, season, and ma make the surrounding emptiness active", + "lineage": "Japanese ikebana practice, moribana composition, tokonoma display, and attentive use of seasonal plant material", + "tags": [ + "ikebana", + "active-emptiness", + "seasonal-line" + ], + "system": [ + "Palette/material: pale plaster alcove as ground, weathered gray-brown pine for body, three iris-blue stems marking the active accent, a dark bronze suiban at the base", + "Type/composition: a few vertical characters set off-center, primary secondary and supporting lines forming an asymmetric triangle, empty plaster left charged as ma", + "Topology/navigation: Move among primary, secondary, and supporting lines while vessel, viewing front, seasonal material, and active emptiness remain related.", + "Controls/state: Trim, angle, rotate, place, and remove stems with budding, open, balanced, crowded, fading, and renewed states.", + "Responsive/motion: Preserve the arrangement's viewing front and proportional emptiness on small screens; use plan and elevation views instead of decorative reflow." + ], + "spark": "One pine branch rises through the quiet alcove, bends toward three blue irises, and leaves a charged triangle of empty plaster more vivid than another flower could fill.", + "webLeverage": "Direct manipulation can preserve stem-angle, balance, and negative-space constraints, while a time scrub connects each plant's seasonal and fading state to the whole composition.", + "strength": "world" + }, + { + "id": "reefs-bioluminescent-nocturnal-chromatophore-skin-language", + "form": "a cephalopod skin becoming a living display, with expanding chromatophores, traveling patterns, texture change, and context-dependent signals", + "lineage": "cephalopod behavior research and responsive-material design; grounded in marine natural history, night diving, fluorescence imaging, and immersive bioluminescent art", + "tags": [ + "chromatophores", + "signals", + "texture" + ], + "system": [ + "Palette/material: pale mantle-cream as ground, red-brown chromatophores as body ink, one iridophore blue-green flash marking the active signal, dark ridges as texture", + "Type/composition: a variable typeface whose weight tracks pigment expansion, patterns traveling body to skin-cell as waves, signals drawn directly onto the surface", + "Topology/navigation: Navigate whole body, skin region, pigment cell, pattern wave, and environmental trigger.", + "Controls/state: Change context, draw signals, and show neutral, camouflaging, warning, and communicating states.", + "Responsive/motion: Flatten skin into an inspectable living textile on phones; pattern speed is adjustable." + ], + "spark": "A pale animal crosses patterned stone and its skin becomes waves, eyes, and ridges in less than a heartbeat.", + "webLeverage": "GPU cellular shaders and displacement textures render signal, color, and texture together.", + "strength": "dual" + }, + { + "id": "reefs-bioluminescent-nocturnal-plankton-wake-stars", + "form": "a night sea igniting with bioluminescent plankton, with every wake tracing motion, fading memory, and currents revealed by living light", + "lineage": "marine bioluminescence and long-exposure night photography; grounded in marine natural history, night diving, fluorescence imaging, and immersive bioluminescent art", + "tags": [ + "plankton", + "wake", + "memory" + ], + "system": [ + "Palette/material: black night sea as ground, electric-blue plankton light marking the active wake, cyan fading traces as body, darkness reclaiming everything at rest", + "Type/composition: thin luminous letterforms glowing on black, wayfinding drawn as pointer trails across a dark field, text held bright enough to read over the void", + "Topology/navigation: Navigate dark field, disturbance path, glowing eddy, fade history, and current direction.", + "Controls/state: Draw wakes, change speed, and show dormant, excited, radiant, and fading states.", + "Responsive/motion: Use touch trails on phones" + ], + "spark": "A hand enters black water and draws a blue galaxy that survives for seconds before darkness closes.", + "webLeverage": "GPU particles react to pointer velocity and advect through a visible current field.", + "strength": "dual" + }, + { + "id": "reference-taxonomy-biodiversity-tree-of-life", + "form": "a printed phylogenetic wall chart in the haeckel tradition, branching ink lines rising from a single root, clade labels ranked along each limb, extinct branches ending in small daggers, deep-time rings scaled outward like tree growth", + "lineage": "Ernst Haeckel's tree engravings, Darwin's branching notebook sketch, Hillis circular cladograms, and engraved natural-history wall charts", + "tags": [ + "phylogeny", + "branching-ink", + "deep-time" + ], + "system": [ + "Palette/material: aged paper-cream ground, sepia-black ink for the branching lines, one vermilion dagger marking each extinct tip, faint gray rings scaling deep time", + "Type/composition: engraved small-caps clade labels ranked along each limb, a branching grid rooted at one origin, hairline connectors thickening toward the trunk", + "Topology/navigation: zoom from kingdom to single organism along the branching spine, ancestry as the fixed path, extinct limbs kept as quiet negative space", + "Controls/state: toggle trait overlays, confidence ranges, and alternate trees; nodes read as living, extinct, disputed, or uncertain", + "Responsive/motion: prune labels by scale so only the visited rank stays legible, the selected lineage held across layouts" + ], + "spark": "You stand before a wall of aged chart paper; sepia ink branches climb from one root past ranked small-caps names, your finger traces a limb outward through widening time rings until it ends at a single vermilion dagger where a lineage went extinct.", + "webLeverage": "Semantic zoom over an SVG cladogram keeps ancestry fixed while labels prune by scale, and view transitions carry the selected lineage smoothly across radial and vertical layouts.", + "strength": "world" + }, + { + "id": "swarms-flocks-migration-bee-swarm-consensus", + "form": "a bee swarm choosing a new home, with scouts dancing proposals, support accumulating, quorum, and sudden collective departure", + "lineage": "swarm decision science and dance notation; grounded in collective-behavior science, wildlife cinematography, kinetic installation, and movement notation", + "tags": [ + "bees", + "consensus", + "quorum" + ], + "system": [ + "Palette/material: honey-amber bees over a dark clustered mass as ground, waxen comb-yellow for body, quorum-gold marking the winning site, brown branch as anchor", + "Type/composition: labels aligned to waggle-dance vectors, competing proposals drawn as directional arcs whose weight grows with support, quorum marked by convergence", + "Topology/navigation: Navigate cluster, scout, candidate site, dance support, quorum, and departure.", + "Controls/state: Inspect proposals, alter evidence, and show exploring, advocating, converging, and committed states.", + "Responsive/motion: Recompose dances into directional vote arcs on phones; departure never auto-plays." + ], + "spark": "Thousands hang from one branch while a handful dance competing directions until the whole cluster lifts at once.", + "webLeverage": "Agent states and directional motion encode decentralized consensus.", + "strength": "composition" + } + ] + }, + { + "id": "light-hidden-forces", + "label": "Light & Hidden Forces", + "well": "material-worlds", + "description": "Light, shadow, flow, turbulence, fields, electricity, magnetism, and matter made perceptible through consequence.", + "concepts": [ + { + "id": "light-shadow-caustics-rain-night-cityscape", + "form": "a cityscape passing from blue hour into rain-dark night, where skyline silhouette, window grids, transit veins, rooftop beacons, wet streets, river reflections, and first dawn light form an urban nocturne", + "lineage": "Night photography, urban-light masterplanning, nocturne painting, neon and sign craft, location cinematography, and public-realm lighting design", + "tags": [ + "night-cityscape", + "public-light-rhythm", + "rain-reflections" + ], + "system": [ + "Palette/material: cobalt blue-hour over black towers as ground, amber transit and neon signs as body, one silver dawn facade marking the hour, wet streets doubling each light", + "Type/composition: neon-sign lettering against condensed dark type, skyline street and reflection stacked as synchronized night bands, transit veins timed along the axis", + "Topology/navigation: Move between skyline, street canyon, transit line, rooftop signal, river mirror, public landmark, weather layer, and chosen viewpoint.", + "Controls/state: Shift hour and weather, follow one public light journey, and compare blue-hour, active, rain-bright, dimmed, blackout, and dawn states.", + "Responsive/motion: Unroll skyline, street, and reflection into synchronized night bands on phones" + ], + "spark": "The last cobalt sky drains behind black towers; trains draw amber stitches across the river, rain doubles every sign on the street, and one eastern facade turns silver before dawn.", + "webLeverage": "Time-indexed transit, weather, and civic-light data, spatial Web Audio, deep-linked viewpoints, and a semantic city index let users read collective nocturnal rhythm without exposing private households.", + "strength": "world" + }, + { + "id": "light-shadow-caustics-water-caustic-floor", + "form": "a sunlit pool casting moving caustic lace across a submerged floor, with focal knots, wave ancestry, and depth-controlled scale", + "lineage": "water optics and architectural light installation; grounded in optical science, light-and-space installation, shadow theater, photography, and glass craft", + "tags": [ + "caustics", + "water", + "focus" + ], + "system": [ + "Palette/material: pale submerged stone floor as ground, blue pool water above, bright white caustic lace as the active pattern, dark shadow gaps between the knots", + "Type/composition: type read through a rippling caustic net from above, focal knots tightening and breaking with each wave, a top-down floor plane as the composition", + "Topology/navigation: Navigate surface wave, refracted ray, focal knot, shadow gap, and floor pattern.", + "Controls/state: Disturb water, change depth, and show diffuse, focusing, braided, and calm states.", + "Responsive/motion: Use a fixed top-down patch on phones" + ], + "spark": "A plain stone floor becomes alive with bright nets that tighten, break, and reform with every ripple.", + "webLeverage": "Real-time water normals and caustic projection connect surface action to light below.", + "strength": "composition" + }, + { + "id": "magnetism-electricity-plasma-ferrofluid-spike-crown", + "form": "a ferrofluid surface rising into a crown of black spikes, with field strength, repeating peaks, hysteresis, and liquid collapse when force leaves", + "lineage": "magnetic-fluid research and responsive material art; grounded in field visualization, high-voltage photography, plasma science, kinetic sculpture, and responsive material experiments", + "tags": [ + "ferrofluid", + "spikes", + "hysteresis" + ], + "system": [ + "Palette/material: glossy black ferrofluid as ground and body, silver highlights riding the spikes, one peak-ring crown marking the field center, flat pool at rest", + "Type/composition: type rising into black spikes as the field strengthens, peaks repeating on a radial lattice around the magnet, collapsing to flat when force leaves", + "Topology/navigation: Navigate pool, field center, spike ring, saddle, and returning surface.", + "Controls/state: Move magnet, change strength, and show flat, nucleating, peaked, and relaxing states.", + "Responsive/motion: Use a sectional crown on phones; motion follows direct magnet movement." + ], + "spark": "A glossy black pool suddenly grows a perfect armored landscape around an approaching magnet.", + "webLeverage": "Height-field fluid simulation and magnetic potential generate Rosensweig patterns.", + "strength": "composition" + }, + { + "id": "magnetism-electricity-plasma-hand-bent-neon-circuit", + "form": "a hand-bent neon letter becoming a continuous gas-discharge circuit, where glass radius, electrode placement, gas, pressure, transformer load, and typography determine the final light", + "lineage": "neon sign bending, urban lettering, glass tube craft, gas-discharge spectroscopy, electrical fabrication, and sign-conservation practice", + "tags": [ + "neon-craft", + "gas-discharge", + "luminous-lettering" + ], + "system": [ + "Palette/material: dark room as ground, clear glass tube softening over flame, one cobalt gas-discharge glow marking the active run, warm electrode-red at the sealed ends", + "Type/composition: hand-bent script drawn as one continuous glass stroke, glyphs bending on a fabrication path, bridges and electrodes ranked where the circuit breaks", + "Topology/navigation: Follow glyph, tube run, bend, bridge, electrode, transformer circuit, gas spectrum, and installed sign.", + "Controls/state: Edit path, change gas, test bend radius, split circuits, and compare sketched, bent, pumped, aging, and restored states.", + "Responsive/motion: Unroll the tube into a fabrication path on phones" + ], + "spark": "A clear glass stroke softens over flame and bends into a cobalt script; electrodes seal, the room goes dark, and one continuous word ignites from within.", + "webLeverage": "Direct SVG path editing, bend-radius and transformer validation, selectable source text, spectral comparison, and fabrication-ready export turn browser typography into a buildable neon circuit.", + "strength": "dual" + }, + { + "id": "magnetism-electricity-plasma-lichtenberg-fractal-scar", + "form": "an electrical discharge frozen as a branching Lichtenberg figure, with radial leaders, charge density, nested forks, and one irreversible material scar", + "lineage": "high-voltage material experiments and fractal photography; grounded in field visualization, high-voltage photography, plasma science, kinetic sculpture, and responsive material experiments", + "tags": [ + "discharge", + "fractal", + "scar" + ], + "system": [ + "Palette/material: clear acrylic resin as ground, white branching leaders burned as body, one bright origin marking the active strike, charred gray at the terminals", + "Type/composition: type branching outward from a single origin in nested forks, charge density thinning toward the tips, one irreversible fractal fixed in the material", + "Topology/navigation: Navigate origin, major branch, nested fork, terminal tip, and material depth.", + "Controls/state: Choose charge and geometry, then show charging, breaking down, branching, and fixed states.", + "Responsive/motion: Use a progressive branch reveal on phones; discharge plays only by explicit action." + ], + "spark": "A flash passes through clear resin and leaves a white lightning tree suspended forever inside.", + "webLeverage": "Dielectric-breakdown growth produces unique volumetric branching structures.", + "strength": "composition" + }, + { + "id": "magnetism-electricity-plasma-magnetic-tape-memory-landscape", + "form": "a reel of magnetic tape carrying an audible memory landscape, where oxide domains, splices, erasure, saturation, and repeated playback reshape recorded time", + "lineage": "analog tape recording, musique concrete, broadcast editing craft, magnetic-domain science, and archival audio conservation", + "tags": [ + "magnetic-tape", + "sound-memory", + "physical-editing" + ], + "system": [ + "Palette/material: rust-brown oxide tape as ground, a lit table glowing beneath it, silver splice tape marking the active edit, darkened saturation scars as body ink", + "Type/composition: grease-pencil reel labels and timecode along a linear strip, passages spliced end to end, erased gaps and saturation scars marked in the running order", + "Topology/navigation: Travel by reel, recorded passage, splice, erased gap, saturation scar, and assembled sequence.", + "Controls/state: Scrub, cut, join, reverse, overdub, and compare source, marked, spliced, degraded, and restored states.", + "Responsive/motion: Unroll the reel into an addressable passage strip on phones" + ], + "spark": "Rust-brown tape unwinds across a light table; touching one darkened span releases a lost voice, while a silver splice turns its final word into a new beginning.", + "webLeverage": "Web Audio scrubbing, non-destructive edit history in IndexedDB, and shareable time-range URLs let users hear, rearrange, and preserve magnetic recordings without flattening provenance.", + "strength": "dual" + }, + { + "id": "light-shadow-caustics-skyspace-aperture-threshold", + "form": "a skyspace chamber, a knife-edge ceiling aperture framing open sky as the single color field, stone benches ringing bare plaster walls tuned by slow dusk light programs", + "lineage": "James Turrell skyspaces, Roden Crater, the Light and Space movement", + "tags": [ + "aperture-frame", + "single-chamber", + "slow-hue-wash" + ], + "system": [ + "Palette/material: bare plaster warmed to ember by the wash, the aperture's sky a live cyan-to-violet field as the active surface, graphite shadow for body ink", + "Type/composition: one hairline sans line letter-spaced wide at the threshold, otherwise near wordless, a centered void ringed by an even bench margin", + "Topology/navigation: one chamber, one ceiling opening; all wayfinding is orientation toward the aperture, secondary items ring the walls at even bench spacing", + "Controls/state: the light program is the state, choosing a step rewashes the whole room's hue so the framed sky seems to change color, nothing takes an outline", + "Responsive/motion: the aperture letterboxes to a narrow slot on small screens; motion is hue drift too slow to catch" + ], + "spark": "You step down onto a cool stone bench as the program begins; the plaster walls warm to ember and the square of open sky overhead turns an impossible green, then violet, and someone across the chamber exhales.", + "webLeverage": "css transitions running minute-long hue interpolation on one background layer, mix-blend-mode tinting the framed sky region", + "strength": "world" + }, + { + "id": "light-shadow-caustics-indoor-weather-sun", + "form": "an indoor weather sun, a monofrequency semicircle doubled to a full disc by a mirrored ceiling, mist haze filling a vast hall where crowds lie inside their own silhouettes", + "lineage": "Olafur Eliasson's The Weather Project, Tate Turbine Hall, Light and Space lineage", + "tags": [ + "mirrored-ceiling", + "horizon-band", + "duotone-haze" + ], + "system": [ + "Palette/material: monofrequency sodium amber flattening every color, hazed amber as ground, silhouette black for body ink, the mirror's doubled sun as the accent", + "Type/composition: silhouette-black grotesk set low against a long horizon line, one vast horizontal band, captions small and scattered like lying figures", + "Topology/navigation: one hall with a half sun at its far wall, the mirrored ceiling doubling everything; you navigate by walking the long axis toward the light", + "Controls/state: your pointer is a silhouette, hover deepens a figure to full black, selection appears twice, once on the floor and once in the ceiling mirror", + "Responsive/motion: the semicircle scales with the wall and its mirror half collapses first on short screens; motion is drifting mist" + ], + "spark": "You lie on the concrete floor of a vast hall, haze thick with amber; far above, the mirrored ceiling shows your tiny silhouette waving back beside a hundred strangers, and the half sun on the wall completes itself into a disc.", + "webLeverage": "backdrop-filter haze over a css scaleY(-1) reflection building the mirrored ceiling, blend mode flattening all color to amber duotone", + "strength": "world" + } + ] + }, + { + "id": "patterns-motion", + "label": "Patterns & Motion", + "well": "material-worlds", + "description": "Kinetic sculpture, physical causality, procedural art, rule-driven emergence, and authored systems that visibly transform.", + "concepts": [ + { + "id": "kinetic-sculpture-automata-cam-drum-mechanical-garden", + "form": "a cam-driven mechanical garden of steel stems and enamel petals, where one rotating drum releases a precise sequence of blooms", + "lineage": "Clockwork automata, punched mechanical scores, and botanical sculpture", + "tags": [ + "cams", + "sequence", + "bloom" + ], + "system": [ + "Palette/material: brushed steel and gunmetal ground, scarlet enamel reserved for the blooming active state, oiled black drum as the deep field behind readouts", + "Type/composition: engraved machine caps and stenciled track numerals, content banded in circular tracks around the drum with one fixed index line", + "Topology/navigation: Read the experience as a circular score whose tracks correspond to distinct families of movement.", + "Controls/state: Scrub, isolate, and retime cam tracks while dormant, rising, open, and folding states remain inspectable.", + "Responsive/motion: Turn the drum into a horizontal score on small screens." + ], + "spark": "Pins on a dark drum catch hidden levers; scarlet flowers rise one by one, hold for a breath, then fold back into brushed steel.", + "webLeverage": "A shared animation clock can synchronize many linked mechanisms while allowing frame-accurate direct manipulation.", + "strength": "composition" + }, + { + "id": "kinetic-sculpture-automata-crank-paper-menagerie", + "form": "a hand-cranked paper menagerie of tabs, bellows, and pinned joints, where humble folds produce a surprising procession of motion", + "lineage": "Paper automata, movable books, and hand-cut mechanical toys", + "tags": [ + "paper", + "crank", + "procession" + ], + "system": [ + "Palette/material: cut white paper on kraft board as the ground, charcoal cast shadow as body ink, one crimson fold reserved for the figure currently in motion", + "Type/composition: hand-cut letterpress caps with visible tab and slot marks, captions on folded paper strips beneath each figure, one crank line ruling the base", + "Topology/navigation: Advance through a procession while each figure opens into its own linkage and supporting details.", + "Controls/state: Turn, pause, reverse, and inspect joints with folded, tensioned, extended, and resting states.", + "Responsive/motion: Reduce the procession to one figure per viewport and provide illustrated keyframes beside every control." + ], + "spark": "The crank turns; a white fox bows, a crimson bird opens concertina wings, and their shadows cross on the paper wall behind them.", + "webLeverage": "Pointer and keyboard input can drive a common crank timeline, synchronizing SVG cut-paper layers with accessible step descriptions.", + "strength": "dual" + }, + { + "id": "kinetic-sculpture-automata-escapement-tide-clock", + "form": "a monumental escapement clock paced by a silver tidal dial, where energy advances through teeth, pallets, and lunar intervals", + "lineage": "Marine chronometers, astronomical clocks, and exposed escapement craft", + "tags": [ + "escapement", + "tide", + "interval" + ], + "system": [ + "Palette/material: silvered dial ground with engraved black chapter figures as body ink, brass wheelwork behind, moon-white reserved for the advancing hand", + "Type/composition: engraved roman chapter numerals and small caps on concentric rings, text follows the circle, intervals ruled by tick marks not boxes", + "Topology/navigation: Traverse long cycles through nested lunar, tidal, daily, and momentary scales.", + "Controls/state: Wind, pause, advance, and compare intervals while stored, released, and depleted energy stays explicit.", + "Responsive/motion: Stack the time scales into concentric readouts and replace ticking with user-stepped advances when requested." + ], + "spark": "A polished wheel strains against its pallet, releases one tooth with a dry click, and a moon-white tide hand advances almost imperceptibly.", + "webLeverage": "Deterministic time simulation can couple astronomical cycles to an inspectable mechanical chain without blocking the page shell.", + "strength": "dual" + }, + { + "id": "kinetic-sculpture-automata-tensegrity-breathing-column", + "form": "a tensegrity column of carbon rods and red cord, where opposing forces make a rigid body appear to inhale and lengthen", + "lineage": "Tensegrity research, deployable structures, and kinetic spatial sculpture", + "tags": [ + "tension", + "compression", + "breathing" + ], + "system": [ + "Palette/material: matte carbon-black rods on a pale concrete ground, red cord as the tension accent, slack members dropping to ash gray", + "Type/composition: engineering monospaced labels with force values, annotations pinned to nodes on leader lines, layout obeys the strut network not a page grid", + "Topology/navigation: Expose a network of tension and compression paths, letting users trace any load to its counterforce.", + "Controls/state: Pull, release, lock, and compare members while slack, balanced, stressed, and failed states are distinct.", + "Responsive/motion: Flatten the column into a force diagram on compact screens and substitute before-after poses for continuous breathing." + ], + "spark": "The cords tighten in sequence; black rods float apart without touching, and the column rises as if drawing a slow breath.", + "webLeverage": "A constraint graph can drive both spatial geometry and a semantic force diagram from the same underlying state.", + "strength": "dual" + }, + { + "id": "kinetic-sculpture-automata-water-cup-chain", + "form": "a vertical chain of bronze cups lifted by falling water, where accumulation, tipping, and return create a patient hydraulic rhythm", + "lineage": "Water clocks, chain pumps, and civic fountain engineering", + "tags": [ + "water", + "threshold", + "return" + ], + "system": [ + "Palette/material: worn bronze cups over deep basin-green ground, water-darkened patina marking the filling state, one clear silver spill sheet as the active accent", + "Type/composition: stamped foundry caps on each cup lip, measures stacked in a strict vertical ledger beside the chain, baselines set by the cup rungs", + "Topology/navigation: Arrange content as a vertical transfer chain with upstream causes and downstream effects always visible.", + "Controls/state: Adjust inflow, hold a cup, and compare capacity while empty, filling, tipping, and returning states remain explicit.", + "Responsive/motion: Use a vertical step sequence on phones and replace fluid animation with labeled level changes when necessary." + ], + "spark": "One cup darkens as it fills, hesitates at the threshold, tips a clear sheet into the next, and rises empty into the light.", + "webLeverage": "Threshold-based state transitions can produce convincing flow with minimal simulation and clear nonvisual equivalents.", + "strength": "composition" + }, + { + "id": "kinetic-sculpture-automata-wind-vane-chorus", + "form": "a field of patinated copper vanes tuned to different winds, where direction and pressure compose a changing metallic chorus", + "lineage": "Aeolian sculpture, weather instruments, and outdoor copper craft", + "tags": [ + "wind", + "orientation", + "chorus" + ], + "system": [ + "Palette/material: verdigris green vanes over a storm-gray sky ground, raw copper flashing on freshly turned edges, resonant vanes brightening toward penny bronze", + "Type/composition: compass-style engraved caps at cardinal points, labels rotate with each vane's bearing, the field ruled by wind-rose radials not columns", + "Topology/navigation: Organize material by direction and exposure, letting users enter through a vane or follow the passing front.", + "Controls/state: Filter by force, bearing, and duration while calm, stirring, and resonant states remain distinct.", + "Responsive/motion: Compress the field into directional rows and substitute stepped state changes for continuous wind motion." + ], + "spark": "A gust crosses the field from left to right, waking green copper fins in sequence until the whole horizon shivers and falls quiet.", + "webLeverage": "Device orientation and live environmental data can drive a bounded field whose motion encodes real directional change.", + "strength": "composition" + }, + { + "id": "kinetic-sculpture-automata-infinity-polka-field", + "form": "a mirrored infinity room of polka dots, dotted pumpkins and paper lanterns multiplied past counting, one dot motif carried from button scale to cosmos scale", + "lineage": "Yayoi Kusama infinity mirror rooms, obliteration dots, the Naoshima pumpkin", + "tags": [ + "dot-grid", + "infinite-reflection", + "scale-free-motif" + ], + "system": [ + "Palette/material: mirror black depth as ground, cadmium yellow pumpkin skins carrying black dots, red-on-white dot cards, the lit lantern dot as the active state", + "Type/composition: chunky rounded grotesk in dot red on white, the dot grid the only layout law, every element aligned to dot centers from button to banner", + "Topology/navigation: one small room reflected past counting; depth is navigation, stepping toward a reflection opens it one recursion deeper", + "Controls/state: every control is a dot, toggles fill from ring to solid, the selected dot swells one scale step while the infinite field holds its rhythm", + "Responsive/motion: the dot motif is scale free, so the grid re-tiles at any width without breaking; motion is a slow lantern pulse" + ], + "spark": "You stand on a low platform between mirrored walls; red-dotted pumpkins repeat toward a horizon that keeps receding, your reflection multiplies into a crowd, and every surface, even your hands, carries the same dots.", + "webLeverage": "canvas tiling one dot sprite into false mirror depth, css radial-gradient dot fields re-tiling responsively at every scale", + "strength": "world" + }, + { + "id": "kinetic-sculpture-automata-endless-column-rhythm", + "form": "an endless column, one gilded rhomboid module stacked skyward until repetition reads as ascent, cast iron under open weather on a flat plain", + "lineage": "Constantin Brancusi's Endless Column, the Targu Jiu ensemble, modernist seriality", + "tags": [ + "modular-stack", + "vertical-rhythm", + "single-axis" + ], + "system": [ + "Palette/material: gilded brass ochre modules against a flat zinc gray sky, cast iron near black for body ink, the active module alone taking the fresh gold finish", + "Type/composition: one geometric modernist sans stacked in equal-height modules, the vertical rhythm absolute, every block the same measure and no ragged sizes", + "Topology/navigation: a single vertical axis; items stack as identical rhomboid modules and wayfinding is counting your height up the column", + "Controls/state: state never changes a module's size, only its finish, gilded for active, weathered dull for rest, the seam between modules the only divider", + "Responsive/motion: the column stays one column at every width, modules just tighten; motion is a stepwise rise, one module per beat" + ], + "spark": "You crane your neck at the base of the column; identical gilded rhomboids climb into a flat gray sky until you lose count, wind pushes cold across the plain, and the top module dissolves into glare.", + "webLeverage": "css scroll-snap stepping the viewport one module per snap point, scroll-linked animation making ascent a counted rhythm", + "strength": "world" + } + ] + }, + { + "id": "craft-making", + "label": "Craft & Making", + "well": "material-worlds", + "description": "Glass, metal, clay, heat, pressure, fracture, repair, patina, and the expressive behavior of matter under skilled hands.", + "concepts": [ + { + "id": "clay-ceramics-fracture-celadon-ice-crackle", + "form": "a celadon bowl whose pale green glaze opens into deep ice-like crackle, where cooling stress writes a second geometry over the vessel", + "lineage": "East Asian celadon traditions, crackle glaze chemistry, and kiln cooling practice", + "tags": [ + "celadon", + "crackle", + "cooling" + ], + "system": [ + "Palette/material: pale celadon green glaze as the ground, iron-dark crackle lines as body ink, freshly stained cracks flashing amber for the active branch", + "Type/composition: brush-fine hairline serifs echoing crack weight, sparse labels floating in open glaze fields, layout follows crack junctions not a grid", + "Topology/navigation: Move between whole vessel, crack network, junction, and local glaze depth while position stays registered.", + "Controls/state: Cool, stain, trace, and compare with molten, sealed, initiating, opened, and aged states.", + "Responsive/motion: Replace live propagation with a labeled sequence of crack maps and preserve a complete branch list." + ], + "spark": "The bowl leaves the kiln luminous and still; over the next hour a fine dark crack races through the green glaze with an audible ping.", + "webLeverage": "Progressive fracture geometry can tie each branch to cooling time and glaze thickness without requiring constant motion.", + "strength": "world" + }, + { + "id": "clay-ceramics-fracture-coiled-earth-tower", + "form": "a monumental earthen tower built from visible coils, where compression, drying, and hand pressure leave a slow ascending record", + "lineage": "Coil-built ceramics, vernacular earthen construction, and large-scale clay sculpture", + "tags": [ + "coil", + "tower", + "compression" + ], + "system": [ + "Palette/material: raw terracotta and umber coil bands as the ground, slip-white seams as dividers, one damp dark clay ring marking the course in progress", + "Type/composition: broad low-contrast slab caps like stamped brick marks, text banded in horizontal courses, each line's measure matching its coil", + "Topology/navigation: Rise through courses while local joins, wall thickness, and overall silhouette remain connected.", + "Controls/state: Add, compress, brace, dry, and inspect with plastic, bearing, cracking, leather-hard, and fired states.", + "Responsive/motion: Convert the tower into an ordered vertical section and show construction growth only on request." + ], + "spark": "Broad clay ropes circle upward above the maker's head, each thumb-smoothed seam catching a different band of late light.", + "webLeverage": "Incremental geometry can connect each course to time, maker action, and structural consequence without large assets.", + "strength": "dual" + }, + { + "id": "clay-ceramics-fracture-glaze-river-shelf", + "form": "a kiln shelf beneath a row of heavily glazed cups, where molten color pools, runs, stops, and sometimes welds the vessel to the floor", + "lineage": "High-fire glaze testing, kiln furniture, and flux behavior", + "tags": [ + "glaze", + "runoff", + "threshold" + ], + "system": [ + "Palette/material: chalk-white kiln shelf as the ground, cobalt glaze runs as the accent flow, fused puddles hardening to glassy sapphire for the warning state", + "Type/composition: monospaced batch numerals on recipe cards beside each cup, samples ranked in one shelf row, gravity setting the vertical reading order", + "Topology/navigation: Connect recipe, thickness, kiln position, vertical path, and final pool for each sample.", + "Controls/state: Apply, fire, flow, arrest, and compare with dry, melting, running, pooled, and fused states.", + "Responsive/motion: Replace molten flow with registered stage overlays and keep recipe and risk visible beside every sample." + ], + "spark": "A cobalt glaze reaches the foot in one thick tear, freezes a millimeter above the shelf, while the cup beside it spills into a glassy blue puddle.", + "webLeverage": "A viscosity-and-slope model can predict meaningful thresholds while remaining bounded to selected samples.", + "strength": "dual" + }, + { + "id": "clay-ceramics-fracture-interlocking-vault-tile", + "form": "a self-supporting vault assembled from interlocking ceramic tiles, where compression crosses hundreds of small fired joints without mortar", + "lineage": "Ceramic vaulting, stereotomy, and interlocking modular construction", + "tags": [ + "vault", + "interlock", + "compression" + ], + "system": [ + "Palette/material: warm terracotta tiles as the ground, mortar-free shadow joints as the ink lines, the bearing force path traced in kiln-flash orange", + "Type/composition: incised Roman capitals stamped into tile faces, coursework aligned to the vault's rib grid, assembly numbers running along each arc", + "Topology/navigation: Move from whole vault to force path, tile family, joint, and assembly order.", + "Controls/state: Place, rotate, test, and remove tiles with unsupported, bearing, locked, overloaded, and failed states.", + "Responsive/motion: Turn assembly into ordered sectional steps and retain a keyboard-readable force path." + ], + "spark": "The final terracotta key slides into place; temporary supports fall away and the ribbed ceiling holds itself in a warm red curve.", + "webLeverage": "Constraint checking can make each placement structurally consequential while a simplified section supports low-power devices.", + "strength": "composition" + }, + { + "id": "clay-ceramics-fracture-porcelain-lantern-skin", + "form": "a paper-thin porcelain lantern turned almost transparent by fire, where carved thickness controls which veins of warm light survive", + "lineage": "Translucent porcelain, lithophane carving, and ceramic lighting", + "tags": [ + "porcelain", + "translucency", + "thickness" + ], + "system": [ + "Palette/material: unglazed porcelain white as the ground, carved veins glowing candle-amber where light passes, overcut zones warning in hot orange", + "Type/composition: hairline didone with carved-thin strokes, labels surfacing under backlight like lithophane imagery, layout ruled by the vessel's rotation bands", + "Topology/navigation: Pair outer form, thickness map, and transmitted image so hidden structure remains locatable.", + "Controls/state: Carve, illuminate, rotate, and compare with opaque, thinning, translucent, and overcut states.", + "Responsive/motion: Use synchronized exterior and light-through views on small screens and retain high-contrast relief diagrams." + ], + "spark": "Unlit, the vessel is quiet white; the flame inside reveals a hidden forest of branches carved only a millimeter beneath the skin.", + "webLeverage": "Thickness-aware rendering can reveal hidden imagery while the same scalar map drives accessible contours and labels.", + "strength": "dual" + }, + { + "id": "clay-ceramics-fracture-raku-smoke-flash", + "form": "a red-hot raku vessel lifted into smoke and combustible leaves, where thermal shock, carbon, and exposed clay create an unrehearsed black-white skin", + "lineage": "Japanese raku firing and contemporary post-firing reduction practice", + "tags": [ + "raku", + "smoke", + "thermal-shock" + ], + "system": [ + "Palette/material: soot-black carbonized clay as the ground, crackled silver-white glaze as the body surface, ember orange reserved for the still-hot active vessel", + "Type/composition: rough brush-stroke marks paired with a quiet grotesk for data, stage labels stacked like kiln logs, asymmetry accepted as the compositional law", + "Topology/navigation: Follow vessel regions through glaze coverage, smoke contact, reduction, and crack response.", + "Controls/state: Fire, expose, cover, cool, and reveal with hot, reducing, carbonized, cracked, and cleaned states.", + "Responsive/motion: Present the firing as deliberate stages and provide still material maps for every result." + ], + "spark": "Tongs lift the orange bowl into a bed of leaves; smoke folds over it, and when the lid opens the glaze shines silver against soot-black clay.", + "webLeverage": "A probabilistic surface process can make conditions consequential while preserving exact input and outcome records.", + "strength": "world" + }, + { + "id": "clay-ceramics-fracture-saggar-ember-map", + "form": "a pale ceramic jar fired inside a sealed saggar with salts, wire, and seaweed, where vapor and contact leave rust-red weather across the surface", + "lineage": "Saggar firing, vapor marking, and atmospheric ceramic surfaces", + "tags": [ + "saggar", + "vapor", + "contact-mark" + ], + "system": [ + "Palette/material: cream jar body as the ground, smoke-gray vapor drift as the secondary tone, one vermilion contact halo marking the selected mark", + "Type/composition: field-notebook italic annotations tied to each mark, a flat gridded placement diagram beside the vessel, letters kept off the surface itself", + "Topology/navigation: Read the final surface through placement, contact, vapor path, and firing zone.", + "Controls/state: Arrange, seal, fire, unwrap, and compare with packed, vaporizing, marked, cooled, and revealed states.", + "Responsive/motion: Pair a flat placement diagram with the finished vessel and avoid simulated fire when static evidence suffices." + ], + "spark": "The jar emerges cream and smoke-gray, crossed by one vermilion halo where copper wire touched it in the dark kiln.", + "webLeverage": "Registered before-after maps can connect hidden material placement to final atmospheric marks.", + "strength": "world" + }, + { + "id": "glass-refraction-transparency-breath-blown-vessel", + "form": "a family of hand-blown vessels preserving the pressure of each breath, with asymmetry, wall thickness, and trapped bubbles recording the maker's exertion", + "lineage": "Free-blown glass, furnace craft, and material process documentation", + "tags": [ + "breath", + "vessel", + "process" + ], + "system": [ + "Palette/material: honey amber glass over a furnace-dark ground, trapped bubbles as silver punctuation, the active gather glowing molten orange at its core", + "Type/composition: rounded humanist sans with breath-length line measures, process notes riding the vessel profile, sections keyed by gather number", + "Topology/navigation: Move from finished vessel to successive gathers, turns, and breaths without losing the final silhouette.", + "Controls/state: Rotate, section, compare, and annotate forms with molten, gathering, inflated, annealing, and cooled states.", + "Responsive/motion: Replace free rotation with chosen orthographic views on compact screens and supply tactile process descriptions." + ], + "spark": "A honey-colored globe turns before the furnace; one trapped bubble stretches into a silver comma as the maker gives a final breath.", + "webLeverage": "Synchronized breath audio, wall-thickness sections, and rotation connect each maker's exhale to its exact material consequence, with selected gathers and process stages deep-linkable.", + "strength": "composition" + }, + { + "id": "glass-refraction-transparency-fresnel-ring-beacon", + "form": "a towering Fresnel lens assembled from concentric glass steps, gathering one small flame into a rotating blade of light visible across dark water", + "lineage": "Lighthouse optics, precision glass molding, and maritime signaling", + "tags": [ + "fresnel", + "beacon", + "concentric" + ], + "system": [ + "Palette/material: night-sea black ground, lens glass in pale green-edged steps, one warm flame core and its white beam as the sole active accents", + "Type/composition: maritime engraved caps on brass rings, content ordered in concentric bands widening from the source, bearings set in tabular figures", + "Topology/navigation: Arrange detail in concentric levels that gather toward a clear central source and project outward.", + "Controls/state: Focus, rotate, occlude, and compare layers with idle, gathering, aligned, and broadcasting states.", + "Responsive/motion: Flatten rings into nested disclosure bands and replace sweeping light with a stepped bearing indicator." + ], + "spark": "A modest warm flame ignites at the center; stepped rings gather it into one white blade that sweeps across a black sea.", + "webLeverage": "Efficient instanced optics can show how many small refractive steps create one legible long-range signal.", + "strength": "composition" + }, + { + "id": "glass-refraction-transparency-leaded-rose-aperture", + "form": "a leaded rose window of mouth-blown glass and dark structural cames, where radial stories are held together by visible joints", + "lineage": "Gothic rose windows, stained-glass painting, and lead-came construction", + "tags": [ + "rose-window", + "radial", + "joint" + ], + "system": [ + "Palette/material: matte black lead cames as the structural ink, cobalt blue and ruby red pot-metal fields, clear star glass as the ground where light reads white", + "Type/composition: lombardic display capitals with a plain roman for captions, chapters ranked by radial ring, every text block bounded by a visible came", + "Topology/navigation: Use radial hierarchy for chapters while lead joints expose relation, boundary, and return paths.", + "Controls/state: Open, isolate, compare, and trace segments with clear, colored, repaired, and missing states that do not rely on hue alone.", + "Responsive/motion: Recast radial sectors into an ordered chapter wheel and offer a high-contrast line-art mode." + ], + "spark": "Blue saints, red leaves, and clear stars orbit a black iron center while late sun paints their geometry across the opposite wall.", + "webLeverage": "Vector geometry can support deep radial navigation, precise zoom, and accessible segment descriptions from one structure.", + "strength": "world" + }, + { + "id": "glass-refraction-transparency-millefiori-section", + "form": "a cut millefiori cane revealing hundreds of miniature colored flowers, where one long composite rod contains the same intricate world at every slice", + "lineage": "Venetian millefiori glassmaking and composite cane construction", + "tags": [ + "millefiori", + "cross-section", + "repetition" + ], + "system": [ + "Palette/material: dark uncut cane skin as the ground, cobalt hexagon fields with daisy-white cores inside, the freshly cut slice polished bright as the active face", + "Type/composition: tiny repeated cap labels like cane stamps, content tiled in a packed hexagonal lattice, one enlarged slice serving as the master legend", + "Topology/navigation: Move between whole cane, nested component, and repeated slice while preserving the part-to-whole relation.", + "Controls/state: Slice, rotate, isolate, and compare components with bundled, fused, cut, and polished states.", + "Responsive/motion: Turn spatial slicing into a stepped cross-section sequence and pair color with labeled geometry." + ], + "spark": "A plain dark rod meets the saw; its polished cut opens into a field of tiny white daisies nested inside cobalt hexagons.", + "webLeverage": "Procedural cross-sections can expose deeply nested composition without loading a unique asset for every slice.", + "strength": "world" + }, + { + "id": "glass-refraction-transparency-prismatic-caustic-nave", + "form": "a long stone nave crossed by suspended prisms, where daylight breaks into moving caustics that mark passage, emphasis, and time", + "lineage": "Architectural daylight studies, optical prisms, and sacred spatial proportion", + "tags": [ + "prism", + "caustic", + "daylight" + ], + "system": [ + "Palette/material: cool limestone gray as the ground, deep nave shadow as the resting tone, split spectral bands from violet to red reserved for the active pool", + "Type/composition: incised lapidary capitals at fixed landmarks, wayfinding text set along the processional axis, spectral labels stacked in prism order", + "Topology/navigation: Organize the route by successive pools of refracted light while architectural landmarks remain stable.", + "Controls/state: Rotate, focus, and compare prisms with direct, split, scattered, and shadowed light states.", + "Responsive/motion: Convert the nave into a linear sequence on small screens and freeze caustics into labeled spectral bands." + ], + "spark": "At noon a blade of white sun enters the dark nave, strikes a hanging prism, and lays a trembling spectrum across the floor from door to altar.", + "webLeverage": "Physically based light transport can make orientation and time visible while a semantic route remains primary.", + "strength": "world" + }, + { + "id": "metal-forging-patina-blacksmith-scale-shower", + "form": "a white-hot iron bar drawn under a power hammer, where each blow sends black scale outward and lengthens the metal with brutal clarity", + "lineage": "Open-die forging, blacksmithing, and industrial hammer craft", + "tags": [ + "forging", + "scale", + "elongation" + ], + "system": [ + "Palette/material: forge-dark ground with anvil-gray steel, the workpiece graded from black through cherry to white heat, scale flecks as black particle texture", + "Type/composition: heavy stenciled industrial caps with tabular force numerals, one blow per full-width row, measurements ruled like a smith's chalk marks", + "Topology/navigation: Move through heats and blows while cross-section, length, and force remain registered.", + "Controls/state: Heat, strike, rotate, and measure with cold, forging-hot, scaling, distorted, and normalized states.", + "Responsive/motion: Present one blow per deliberate step and replace impact animation with before-after geometry and force values." + ], + "spark": "The hammer falls; a halo of black scale leaps from orange iron, and the square billet becomes visibly longer in a single strike.", + "webLeverage": "Fast local deformation and particle shedding can be bounded to user-triggered moments while measured state stays in the DOM.", + "strength": "world" + }, + { + "id": "metal-forging-patina-hammered-copper-vessel", + "form": "a copper vessel raised from one flat disc by thousands of overlapping hammer blows, where geometry emerges as a field of small decisions", + "lineage": "Metalsmith raising, planishing, and hand-hammered hollowware", + "tags": [ + "copper", + "raising", + "hammer-mark" + ], + "system": [ + "Palette/material: rose and salmon planished copper as the ground, annealed oxide purple for softened zones, one bright struck facet as the active mark", + "Type/composition: small caps stamped in concentric rings echoing hammer courses, captions curving with the raising rows, radial symmetry as the layout law", + "Topology/navigation: Move through concentric raising courses while any local mark remains connected to the evolving whole form.", + "Controls/state: Strike, anneal, planish, and compare with work-hardened, softened, rough, and finished states.", + "Responsive/motion: Flatten the vessel into course diagrams on small screens and preserve marks as addressable evidence." + ], + "spark": "A flat red disc turns slowly over the stake; rings of hammer marks climb inward until a deep bowl stands where no seam exists.", + "webLeverage": "A deformation history can drive both a spatial vessel and a precise map of accumulated local actions.", + "strength": "world" + }, + { + "id": "metal-forging-patina-lost-wax-bronze-shell", + "form": "a lost-wax bronze shell emerging from a shattered investment mold, where the absent wax survives as metal, gates, and cooled seams", + "lineage": "Lost-wax casting, bronze sculpture, and foundry gating craft", + "tags": [ + "lost-wax", + "casting", + "absence" + ], + "system": [ + "Palette/material: chalk-white investment as the ground, dark oil-brown bronze as body ink, sprue channels and hot joints glowing pour-orange for active flow", + "Type/composition: foundry stencil caps with fine chased engraving for detail labels, stages ordered as a strict casting sequence, callouts pinned to gates", + "Topology/navigation: Follow form from wax through channels, void, pour, shell, and final bronze with transformations explicit.", + "Controls/state: Gate, vent, pour, cool, and finish with wax, invested, molten, cast, and chased states.", + "Responsive/motion: Use a staged material sequence on phones and provide section diagrams for hidden flow paths." + ], + "spark": "The chalk-white mold breaks away in chunks, revealing a dark bronze figure still webbed with sprues and glowing faintly at the thickest joints.", + "webLeverage": "A shared volume model can reveal positive form, negative mold, and metal flow as alternate but registered states.", + "strength": "world" + }, + { + "id": "metal-forging-patina-mokume-gane-burl", + "form": "a mokume-gane laminate carved and forged into wood-grain metal, where dissimilar alloys flow into knots, eyes, and wandering strata", + "lineage": "Japanese mokume-gane laminated-metal craft", + "tags": [ + "mokume-gane", + "alloy", + "grain" + ], + "system": [ + "Palette/material: copper, silver, and blue-black shakudo strata as the working surfaces, etched silver contour lines as body ink, one bright knot as the selected eye", + "Type/composition: fine engraved italic labels following the grain contours, layer order listed in a strict stacked ledger, no straight rules crossing the flow", + "Topology/navigation: Trace visible grain through stacked alloys, carved depressions, and subsequent deformation.", + "Controls/state: Stack, bond, carve, forge, and etch with separate, fused, exposed, stretched, and finished states.", + "Responsive/motion: Show synchronized layer and surface diagrams on compact screens and avoid decorative animation." + ], + "spark": "Copper, silver, and dark shakudo emerge from the etch as a metallic burl, with one bright knot folding back into itself.", + "webLeverage": "Procedural laminate geometry can reveal the causal link between hidden layer order and final surface grain.", + "strength": "world" + }, + { + "id": "metal-forging-patina-repousse-sun-relief", + "form": "a repoussé copper sun pushed outward from the reverse and chased from the face, where relief is negotiated between unseen pressure and visible line", + "lineage": "Repoussé, chasing, and architectural metal ornament", + "tags": [ + "repousse", + "relief", + "two-sided" + ], + "system": [ + "Palette/material: burnished copper-gold relief as the ground, chased shadow lines as ink, the ray under the tool warming to rose-gold for the active state", + "Type/composition: chased Roman capitals following the ray lines, front and reverse views ruled as mirrored panels, hierarchy carried by relief depth not weight", + "Topology/navigation: Pair front and reverse views so every visible ridge can be traced to its hidden source pressure.", + "Controls/state: Raise, sink, chase, and compare with flat, roughed, defined, and finished regions.", + "Responsive/motion: Switch between synchronized front and reverse maps on compact screens and retain a tactile relief description." + ], + "spark": "From the back, blunt tools raise a copper dome; turned over, fine chasing cuts rays until the metal catches light as a fierce golden sun.", + "webLeverage": "Linked height maps can keep two-sided editing and inspection synchronized without requiring a heavy solid model.", + "strength": "world" + }, + { + "id": "metal-forging-patina-temper-color-ribbon", + "form": "a polished steel ribbon heated from one end, where pale straw, violet, and blue advance as a visible map of temperature", + "lineage": "Steel tempering, heat-color observation, and toolmaking", + "tags": [ + "temper", + "heat", + "color-band" + ], + "system": [ + "Palette/material: polished silver steel as the ground, temper bands running straw to violet to cobalt as state colors, quenched zones fixed in matte gray", + "Type/composition: instrument-grade monospaced numerals ranked beneath the ribbon, one continuous horizontal band as the layout spine, labels tick at each hue shift", + "Topology/navigation: Read the ribbon as a continuous gradient tied to exact position, temperature, and material response.", + "Controls/state: Heat, hold, quench, and compare with cold, oxidizing, tempered, overheated, and quenched states.", + "Responsive/motion: Offer discrete temperature bands with labels and patterns so color never carries meaning alone." + ], + "spark": "A faint straw line appears on silver steel, deepens through purple, and races as cobalt toward the quenched edge.", + "webLeverage": "A compact thermal model can couple time, temperature, and material color with accessible numeric readouts.", + "strength": "dual" + }, + { + "id": "clay-ceramics-fracture-talavera-courtyard", + "form": "a talavera courtyard, tin-glazed hand-painted tiles in cobalt, yellow, and green climbing stair risers and fountain walls, each tile imperfect alone, ordered as an ensemble", + "lineage": "Puebla Talavera poblana workshops, Spanish-Moorish azulejo inheritance, Uriarte Talavera, Mexican courtyard architecture", + "tags": [ + "tile-module", + "glazed-relief", + "riser-rhythm" + ], + "system": [ + "Palette/material: cobalt on milk-white tin glaze as the base pair, sun yellow and leaf green as secondary marks, terracotta grout lines as the ground between modules", + "Type/composition: lettering hand-brushed inside single tiles like house numbers, layout locked to the tile module, patterns quartered so four corners complete a motif", + "Topology/navigation: the courtyard reads wall by wall; stair risers form a numbered vertical sequence and each landing is a section framed in its own tile border", + "Controls/state: the active tile brightens its glaze with a wet specular sheen, pressed tiles show brush imperfections up close, borders mark editable regions", + "Responsive/motion: the module never stretches, columns of tiles drop instead; motion is a glaze glint passing on hover" + ], + "spark": "You climb a Puebla staircase where every riser is a different painted tile, cobalt ferns and yellow suns wobbling slightly from tile to tile, your hand on a cool glazed rail, a fountain repeating the same blue below.", + "webLeverage": "css grid enforces the tile module and a specular gradient animation plays the glaze glint on the active cell", + "strength": "world" + }, + { + "id": "glass-refraction-transparency-secular-stained-light", + "form": "a leaded-glass domestic interior, Tiffany lamps and Prairie-style geometric windows throwing colored light across plaster and oak, panels of came-bound glass composing every surface", + "lineage": "Tiffany Studios, Frank Lloyd Wright art glass, contemporary architectural leaded glass", + "tags": [ + "leaded-panels", + "cast-light", + "geometric-came" + ], + "strength": "world", + "system": [ + "Palette/material: warm plaster and oak ground, opalescent amber, sage and cream glass, lead came as the dark line ink, one ruby pane marking the active panel", + "Type/composition: geometric Prairie capitals with wide tracking, text held in rectilinear came-bound panels, the layout ruled by lead lines rather than boxes", + "Topology/navigation: rooms are lit by their windows; sections are panels in one glazed wall and moving through them follows the daylight from pane to pane", + "Controls/state: hover warms a pane as if the sun found it, selection sets its cast-light patch on the floor, disabled panes go to unlit slate gray", + "Responsive/motion: panels stack into one tall glazed column on phones with came lines intact; motion is slow cast light drifting across the floor" + ], + "spark": "you read in the window seat as the afternoon moves, the sage and amber lattice sliding across your page, and when a cloud passes the whole oak floor dims and relights like the room breathing", + "webLeverage": "css blend modes and conic gradients do glass luminosity, svg draws the came lattice, a slow animation drifts the cast light" + }, + { + "id": "metal-forging-patina-copper-lantern-souk", + "form": "a copper lantern souk at night, pierced and hammered lamps hung lit in constellations, each throwing its punched pattern as shadow lace across walls, stalls and passersby", + "lineage": "Moroccan and Egyptian pierced metalwork, Marrakesh medina lamp workshops, mashrabiya light craft", + "tags": [ + "pierced-light", + "hung-constellation", + "shadow-lace" + ], + "strength": "world", + "system": [ + "Palette/material: deep night-blue alley ground, hammered copper and brass lamp bodies, candle amber as the light ink, the chosen lantern glowing hottest as the active state", + "Type/composition: geometric arabesque display forms over a plain humanist body face, content composed as lit lanterns against dark, captions riding the shadow lace", + "Topology/navigation: the alley is a hung field; lanterns cluster by workshop, you walk deeper stall by stall and each lamp opens to show the pattern that made its shadow", + "Controls/state: brushing a lantern makes it sway and its shadow lace swings with it, selection brightens the flame, unavailable lamps hang dark with punched holes unlit", + "Responsive/motion: the field narrows to one hanging column on phones; motion is lamp sway and shadow swing on a slow pendulum" + ], + "spark": "you duck under the lowest lamp and the punched stars slide over your sleeves, the hammer marks catching amber at every dent, and the whole alley shifts its lace as a draft moves the constellation", + "webLeverage": "svg masks punch the lantern patterns and project them as scaled shadow layers, css transforms swing lamp and shadow together" + }, + { + "id": "craft-making-planished-copper-wall", + "form": "a wall of planished copper panels riveted in courses, hammer facets catching a raking light, with bright metal, tea-brown oxide and green verdigris recording how recently each panel was worked", + "lineage": "Coppersmith planishing and cladding, architectural copper roofing, patina chemistry", + "tags": [ + "facet-courses", + "finish-as-state", + "raking-light" + ], + "strength": "world", + "system": [ + "Palette/material: rose copper faceted in even hammer courses, mirror-bright for active, tea-brown oxide at rest, verdigris green for the archive, dark iron rivets as separators", + "Type/composition: roman caps struck into the metal to read by shadow rather than color, panel seams ruling the columns, dense figures engraved as hairline rows between rivets", + "Topology/navigation: the wall is a grid of panels laid course by course, sections are panels, and opening one planishes it smooth to full width while neighbors keep their texture", + "Controls/state: hover rakes light across a panel's facets, a press lands as one bright strike ring, and untouched panels patinate slowly toward green until worked again", + "Responsive/motion: courses restack to a single column of panels on phones, and motion is only the raking-light sweep and the strike" + ], + "spark": "You tilt your head and ten thousand hammer blows surface at once across the wall, one panel polished back to rose mirror this morning, its neighbor already going green at the rivets.", + "webLeverage": "css lighting gradients driven by pointer position do the raking light, and a stored timestamp per panel computes its patina state" + }, + { + "id": "craft-making-glazier-colorfield-partition", + "form": "a steel-framed glass partition wall from a glazier's workshop, rectilinear panes of hand-rolled sheet glass in a black glazing grid, mostly clear and seeded white with a few saturated color fields placed like notes in a score", + "lineage": "Steel casement glazing, hand-rolled sheet glass craft, modernist color-field composition", + "tags": [ + "glazing-grid", + "color-field-panes", + "clear-ground" + ], + "strength": "world", + "system": [ + "Palette/material: matte black glazing bars as the only line ink, clear and seeded-white panes as the calm ground, cobalt, amber and oxblood glass reserved for what matters now", + "Type/composition: a quiet grotesque set inside a pane and never across a bar, one pane one statement, hierarchy carried by pane size and glass color rather than type weight", + "Topology/navigation: the wall elevation is the map read left to right, heavier mullions bound the sections, and each pane is one destination you step up to", + "Controls/state: daylight is rest, hover backlights a pane, selection floods it with its assigned color, and disabled panes frost to translucent white", + "Responsive/motion: bays restack into a single column keeping true bar thickness, and motion is the slow brightening of glass, nothing slides" + ], + "spark": "Down the corridor the wall reads almost clear, then one cobalt pane lights from behind and holds, a single saturated note in a grid of black bars and watery white glass.", + "webLeverage": "css grid draws the glazing bars at true thickness while backdrop-filter and background transitions light the panes" + } + ] + }, + { + "id": "fashion-folded-worlds", + "label": "Fashion & Folded Worlds", + "well": "material-worlds", + "description": "Garments, textiles, paper, pleats, folds, drape, body, and transformation from flat material into inhabited form.", + "concepts": [ + { + "id": "generative-art-computational-color-chord-counterpoint", + "form": "an overhead canopy of translucent indigo, madder, and saffron silk crossing a sunlit courtyard, where independently tensioned banners overlap into passing color chords and sudden clear sky", + "lineage": "South Asian shamiana canopy craft, color-light composition, and kinetic textile installation", + "tags": [ + "translucent-canopy", + "counterpoint", + "overlap" + ], + "system": [ + "Palette/material: translucent indigo, madder, and saffron silk over sun-white paving, overlap violets and browns as computed chord states, clear sky white as rest", + "Type/composition: light wide-tracked sans labels pinned at each banner's tensioned edge, the composition horizontal silk lanes crossing one bright open field", + "Topology/navigation: Move among individual banner voices, their crossing zones, the courtyard ground, and moments when several colors coincide.", + "Controls/state: Tension, release, solo, and align bands with separate, approaching, overlapping, dissonant, and clear states labeled beyond color.", + "Responsive/motion: Recompose the canopy as synchronized translucent lanes on compact screens and provide patterned stills for" + ], + "spark": "A wind lifts the indigo span above the saffron; violet races across the paving, a madder band joins for one deep brown chord, and then the courtyard flashes white again.", + "webLeverage": "Synchronized state channels can be soloed or combined in real time, making overlap a task-bearing joint state that remains scrubbable, comparable, and noncolor-coded.", + "strength": "dual" + }, + { + "id": "paper-folds-pleats-deployable-curved-crease-shell", + "form": "a circular sheet folded along one sweeping curved crease, where paper rises into a rigid shell without straight facets or added support", + "lineage": "Curved-crease origami, geometric sculpture, and thin-shell research", + "tags": [ + "curved-crease", + "shell", + "rigidity" + ], + "system": [ + "Palette/material: cream cotton paper as ground, one charcoal compass arc as the active crease, graphite shadow gradients for depth, body notes in soft black ink", + "Type/composition: geometer's inclined serif italic for labels, figures numbered like plates, layout ruled by the sweep of one arc rather than a rectangular grid", + "Topology/navigation: Connect planar crease, local curvature, ridge, and resulting shell through registered views.", + "Controls/state: Bend, invert, lock, and compare with flat, curving, stable, buckled, and reversed states.", + "Responsive/motion: Pair plan and section on small screens and expose a small set of stable key forms." + ], + "spark": "The cream disc lifts along one charcoal arc and locks into a saddle whose shadow looks drawn with a compass in midair.", + "webLeverage": "A curve-driven deformation model can show how one line produces spatial rigidity while retaining a precise 2D source.", + "strength": "dual" + }, + { + "id": "paper-folds-pleats-deployable-kirigami-expansion-net", + "form": "a slit paper net stretched into a deep porous membrane, where tiny cuts rotate into apertures far larger than the original sheet", + "lineage": "Kirigami, auxetic materials, and deployable lattice research", + "tags": [ + "kirigami", + "auxetic", + "aperture" + ], + "system": [ + "Palette/material: crimson coated stock as ground, paper-white apertures opening through it, hairline gray for hinge marks, one deep ink red for the selected region", + "Type/composition: compact engineering sans in small caps at slit ends, columns that widen with the auxetic stretch, labels rotating with their hinges", + "Topology/navigation: Trace cut, hinge, aperture, region, and boundary while the original sheet remains recoverable.", + "Controls/state: Stretch, rotate, lock, and repair with closed, opening, expanded, torn, and restored states.", + "Responsive/motion: Present expansion as synchronized before-after nets and maintain keyboard control of every region." + ], + "spark": "A flat crimson sheet is pulled sideways; rows of narrow slits rotate open into a lantern-sized lattice that grows wider as it lengthens.", + "webLeverage": "Lightweight hinge constraints can reveal nonintuitive expansion while an SVG net supplies the exact fallback.", + "strength": "composition" + }, + { + "id": "paper-folds-pleats-deployable-miura-orbit-sheet", + "form": "a vast Miura-fold sheet unfolding from a hand-sized packet, where one pull deploys a precise field of linked mountain and valley creases", + "lineage": "Miura-ori geometry, deployable aerospace structures, and folded maps", + "tags": [ + "miura", + "deployment", + "linked-crease" + ], + "system": [ + "Palette/material: matte white sheet as ground, gold foil packet face as the accent, mountain creases scored in warm gray, valley creases in pale blue, body ink near-black", + "Type/composition: aerospace spec mono for crease ids, a parallelogram grid ruling every block, headings folded along the tessellation's diagonal seams", + "Topology/navigation: Move between compact packet, crease cell, linked row, and fully deployed sheet.", + "Controls/state: Pull, lock, reverse, and inspect with folded, opening, deployed, misfolded, and collapsed states.", + "Responsive/motion: Use stepped deployment on small screens and preserve the complete crease graph as an accessible diagram." + ], + "spark": "A gold packet no larger than a book is tugged at two corners and opens in one breath into a rigid tessellated sail spanning the floor.", + "webLeverage": "Constraint-linked geometry can make one control propagate across the sheet while adaptive detail protects performance.", + "strength": "dual" + }, + { + "id": "paper-folds-pleats-deployable-orizuru-crane-sequence", + "form": "a single square of vermilion washi becoming an orizuru crane through thirty-two deliberate folds, where one uncut sheet passes from flat geometry to beak, wings, hollow body, and a balanced standing silhouette", + "lineage": "Japanese origami practice, the orizuru crane, washi papermaking, traditional folding sequence, and crease-pattern geometry", + "tags": [ + "orizuru", + "single-sheet", + "fold-sequence" + ], + "system": [ + "Palette/material: vermilion washi as ground with visible kozo fiber, crease lines in faded fold-white, one gold dot marking the active step, notes in sumi black ink", + "Type/composition: quiet humanist sans beside kanji step names, folds numbered one to thirty-two in a strict margin column, diagrams square and centered like the uncut sheet", + "Topology/navigation: Connect face, edge, mountain crease, valley crease, preliminary base, bird base, flap, and finished crane as one continuous sheet.", + "Controls/state: Fold, unfold, rotate, reverse, and replay with flat, creased, collapsed, based, locked, finished, and recoverable states.", + "Responsive/motion: Pair the active crease pattern with one authored spatial view and provide discrete fold states under" + ], + "spark": "The red square closes into a small diamond, opens into a long-necked bird, and with one final pull spreads two crisp wings that still carry every earlier crease.", + "webLeverage": "Constraint-aware direct manipulation can prevent impossible folds, synchronize the crease pattern with the spatial crane, and deep-link any recoverable step for teaching or return.", + "strength": "dual" + }, + { + "id": "textiles-weave-drape-fashion-bias-cut-gravity-line", + "form": "a bias-cut satin garment suspended from a single shoulder, where diagonal grain turns gravity into a continuous spiraling line around the body", + "lineage": "Bias-cut couture, draping on the form, and satin grain behavior", + "tags": [ + "bias-cut", + "gravity", + "spiral" + ], + "system": [ + "Palette/material: silver satin sheen as ground deepening to charcoal in shadow, seam threads in bone white, one claret pin marking the anchor point, body ink in ink-navy", + "Type/composition: high-contrast didone italics that lean with the grain, baselines set at forty-five degrees to the selvage, sparse labels hung from the shoulder anchor", + "Topology/navigation: Trace grain direction, anchor point, body contact, and free fall as one continuous route.", + "Controls/state: Pin, rotate grain, release, and compare with supported, clinging, twisting, and hanging states.", + "Responsive/motion: Use grain maps and chosen drape poses on compact screens instead of continuous simulation." + ], + "spark": "Silver satin leaves one shoulder, crosses the torso without a hard seam, and falls into a long helix that tightens as the wearer walks.", + "webLeverage": "A low-resolution cloth solve can demonstrate grain consequence while detailed geometry loads only around selected regions.", + "strength": "world" + }, + { + "id": "textiles-weave-drape-fashion-conductive-embroidered-night", + "form": "a black velvet field embroidered with conductive silver thread, where touched constellations of stitches answer with low warm light", + "lineage": "Goldwork embroidery, electronic textiles, and interactive fiber art", + "tags": [ + "embroidery", + "conductive-thread", + "touch" + ], + "system": [ + "Palette/material: black velvet pile as ground, couched silver thread carrying every route, amber ember glow as the active state, resting labels stitched in pale bone", + "Type/composition: needlework script for motif names with small stitched caps for routes, composition following couched lines rather than columns, knots as bullet marks", + "Topology/navigation: Follow stitched routes through knots, branches, motifs, and larger regions with endpoints clear.", + "Controls/state: Touch, trace, connect, and mute with dormant, conducting, lit, fading, and broken-thread states.", + "Responsive/motion: Replace traveling light with focused path highlighting and ensure every route has a textual name and state." + ], + "spark": "A fingertip follows a silver stitched branch; amber light travels behind it one knot at a time, then slowly extinguishes from the origin.", + "webLeverage": "Pointer, keyboard, or sensor input can drive a shared path graph across visual light and accessible route feedback.", + "strength": "dual" + }, + { + "id": "textiles-weave-drape-fashion-drawcord-transforming-cape", + "form": "a wide silk cape threaded with hidden drawcord channels, where one pull transforms a flat plane into ribs, gathers, and a protective volume", + "lineage": "Transformable garments, drawstring construction, and deployable textile form", + "tags": [ + "cape", + "drawcord", + "transformation" + ], + "system": [ + "Palette/material: matte black silk as ground, one gold drawcord as accent and control, channel stitching in graphite, gathered shadow rendered in slate", + "Type/composition: narrow tailored grotesk with wide tracking like topstitching, labels riding the cord channels, the semicircle's radius ruling all alignment", + "Topology/navigation: Trace cord channel, gathered region, anchor, and complete silhouette through each transformation.", + "Controls/state: Pull, lock, release, and compare with flat, gathering, shaped, tensioned, and relaxed states.", + "Responsive/motion: Offer a small set of named silhouettes on phones and let users advance transformations stepwise." + ], + "spark": "The cape begins as a black semicircle; one gold cord is pulled and the cloth rises into a pleated shell around the shoulders.", + "webLeverage": "A constraint-driven cloth model can demonstrate functional transformation while static pattern and pose views remain complete.", + "strength": "dual" + }, + { + "id": "textiles-weave-drape-fashion-fortuny-pleat-fall", + "form": "a floor-length silk column held in thousands of permanent irregular pleats, where reflected color deepens and disappears as the body turns", + "lineage": "Heat-set silk pleating, bias-aware dress construction, and early modern fashion innovation", + "tags": [ + "pleat", + "silk", + "turn" + ], + "system": [ + "Palette/material: bronze pleated silk as ground, molten green catchlight reserved for the open active fan, seam cords in muted umber, notes in deep sepia ink", + "Type/composition: slender venetian capitals letterspaced like pleat intervals, text set in narrow vertical columns that compress and open with the silk", + "Topology/navigation: Organize the form through pleat field, seam, body zone, and movement pose rather than flat panels.", + "Controls/state: Turn, gather, release, and compare with compressed, opening, flowing, and resting states.", + "Responsive/motion: Replace simulated drape with selected poses on small screens and include pattern geometry for nonvisual access." + ], + "spark": "The bronze silk dress seems narrow and still, then a turn opens hundreds of fine pleats into a brief fan of molten green light.", + "webLeverage": "Adaptive cloth geometry can focus detail near interaction while a pose strip preserves the full sequence.", + "strength": "world" + }, + { + "id": "textiles-weave-drape-fashion-ikat-ghost-grid", + "form": "an indigo ikat cloth whose threads were dyed before weaving, where calculated bindings meet inevitable blur at every colored edge", + "lineage": "Resist-dyed ikat traditions across Southeast and Central Asia", + "tags": [ + "ikat", + "resist", + "registration" + ], + "system": [ + "Palette/material: deep indigo ground, undyed thread white for resist edges, every boundary feathered by design, one saturated madder red band as the active register", + "Type/composition: soft-edged slab letters that blur at their flanks like dyed warp, a strict weaving grid beneath deliberately offset alignment, motifs in mirrored halves", + "Topology/navigation: Move between dye plan, bound thread group, woven crossing, and resulting motif.", + "Controls/state: Bind, dye, shift, weave, and compare with reserved, saturated, registered, offset, and blended states.", + "Responsive/motion: Pair a thread map with the woven result and preserve offsets through labeled grids rather than blur alone." + ], + "spark": "Dark blue diamonds almost align across the cloth, but each edge flickers into pale threads as if the pattern were remembering motion.", + "webLeverage": "Thread-level registration can show how small offsets accumulate into a distinctive soft-edged whole.", + "strength": "world" + }, + { + "id": "textiles-weave-drape-fashion-jacquard-punched-brocade", + "form": "a jacquard brocade woven from punched instructions, where thousands of binary thread choices resolve into a gold bird across midnight silk", + "lineage": "Jacquard weaving, punched-card computation, and figured brocade", + "tags": [ + "jacquard", + "binary", + "brocade" + ], + "system": [ + "Palette/material: midnight blue silk as ground, gold weft floats as the accent motif, punch-card cream for instruction rows, warp shadow in near-black ink", + "Type/composition: monospaced ledger digits for card rows, motif titles in woven small caps, layout banded row by row like the loom's lift sequence", + "Topology/navigation: Move between finished motif, weave row, card, and individual warp lift with full traceability.", + "Controls/state: Punch, lift, throw, reverse, and compare with encoded, raised, woven, skipped, and corrected states.", + "Responsive/motion: Present the loom as synchronized pattern and instruction rows and make every thread choice keyboard inspectable." + ], + "spark": "Rows of tiny holes pass above the loom; beneath them, gold weft slowly gathers into a bird whose wing spans hundreds of separate thread decisions.", + "webLeverage": "A shared binary matrix can drive textile rendering, editing, and an exact accessible instruction representation.", + "strength": "dual" + }, + { + "id": "textiles-weave-drape-fashion-lace-negative-cathedral", + "form": "a monumental lace hanging built from knots and deliberate absence, where the empty openings carry as much structure as the thread", + "lineage": "Bobbin lace, architectural textile installation, and openwork pattern", + "tags": [ + "lace", + "negative-space", + "knot" + ], + "system": [ + "Palette/material: bone-white linen thread over a near-black floor ground, openings kept as true dark voids, one honey sunlight pass marking the active motif", + "Type/composition: fine openwork serif with generous counters, headings framed by pattern repeats, whitespace treated as drawn structure equal to the text", + "Topology/navigation: Treat knot, connection, opening, motif, and complete hanging as equal navigable scales.", + "Controls/state: Knot, cross, open, repair, and compare with connected, tensioned, open, snagged, and mended states.", + "Responsive/motion: Collapse dense motifs into named regions and provide a high-contrast structural diagram." + ], + "spark": "Sun passes through a white lace wall and projects a second, sharper cathedral of empty diamonds across the dark floor.", + "webLeverage": "Vector openwork can zoom across scales while preserving every connection and negative region as semantic geometry.", + "strength": "world" + }, + { + "id": "textiles-weave-drape-fashion-memory-quilt-atlas", + "form": "a hand-pieced quilt assembled from worn garments and handwritten cloth, where every block carries a different body, date, and domestic history", + "lineage": "Community quilting, memory cloth, and vernacular textile archives", + "tags": [ + "quilt", + "memory", + "provenance" + ], + "system": [ + "Palette/material: pieced grounds of faded chambray blue, worn shirt stripe, and funeral black, bright new stitch red as the accent line, captions in iron-gall brown", + "Type/composition: handwritten cloth labels beside plain block caps, a block grid of unequal patches, every caption seamed to its fabric with a visible stitch rule", + "Topology/navigation: Enter through block, seam, owner, date, or repeated fabric while the complete quilt remains visible.", + "Controls/state: Add, place, cite, turn, and compare with inherited, cut, pieced, quilted, and repaired states.", + "Responsive/motion: Reflow blocks into a chronological patch sequence and keep every provenance link readable." + ], + "spark": "A faded shirt cuff, a child's red pocket, and a square of funeral black meet under one line of bright new stitching.", + "webLeverage": "Deep zoom and linked metadata can preserve material intimacy while supporting many independent stories.", + "strength": "world" + }, + { + "id": "textiles-weave-drape-fashion-runway-color-procession", + "form": "a fashion show advancing along a mirrored black runway inside a vaulted train hall, where twelve looks move from bone-white tailoring through scarlet volume to a final silver raincoat that catches every flash and reflection", + "lineage": "Postwar couture salon presentation, contemporary runway scenography, fashion-show sequencing, garment choreography, and editorial show lighting", + "tags": [ + "runway-sequence", + "silhouette", + "finale" + ], + "system": [ + "Palette/material: mirrored black runway as ground, bone-white tailoring for items at rest, scarlet volume for emphasis, the silver finale flash reserved for the active look", + "Type/composition: editorial didone numerals for look order over a spare grotesk for credits, one look owning each full frame, captions ranked in a strict lower rail", + "Topology/navigation: Follow collection, look order, runway position, silhouette family, fabric detail, styling relation, turn, exit, and finale return.", + "Controls/state: Cue, hold, follow, isolate, and compare looks with backstage, entering, full-view, turning, exiting, and finale states.", + "Responsive/motion: Preserve the authored look sequence with full-body stills and detail cuts; never require autoplay or flatten garments into cards." + ], + "spark": "The hall goes dark before the final look turns: a silver coat gathers the runway, vaulted roof, audience, and camera flashes into one moving sheet of weather.", + "webLeverage": "Synchronized runway, detail, and backstage media let users hold any look without losing collection rhythm, compare silhouettes in motion, and retain captions and garment provenance.", + "strength": "composition" + }, + { + "id": "textiles-weave-drape-fashion-shibori-resist-topography", + "form": "a long indigo cloth bound, stitched, and folded before dyeing, where white resist lines preserve the exact memory of pressure and thread", + "lineage": "Japanese shibori resist-dye traditions", + "tags": [ + "shibori", + "resist", + "binding" + ], + "system": [ + "Palette/material: saturated indigo ground, resist-line white carrying every path, thread punctures as pale points, one wet deeper indigo pool marking the active fold", + "Type/composition: brush-informed sans in unbleached white on indigo, composition banded by fold lines, step numbers stitched along the binding routes", + "Topology/navigation: Connect finished mark to fold, stitch, binding point, and dye exposure.", + "Controls/state: Fold, bind, stitch, immerse, and unfold with exposed, resisted, saturated, bleeding, and revealed states.", + "Responsive/motion: Pair binding diagrams with final cloth and use a step sequence instead of decorative liquid effects." + ], + "spark": "The wet bundle opens to reveal a white river branching through deep indigo, each fork ending at a tiny puncture left by removed thread.", + "webLeverage": "Registered folding and resist maps can reveal causal transformation from compact bundle to opened cloth.", + "strength": "world" + }, + { + "id": "textiles-weave-drape-fashion-warp-weighted-loom", + "form": "a warp-weighted loom leaning against a wall, where hanging stones keep vertical threads alive with unequal but visible tension", + "lineage": "Ancient warp-weighted weaving and archaeological textile reconstruction", + "tags": [ + "warp-weighted", + "tension", + "vertical" + ], + "system": [ + "Palette/material: undyed white warp as ground, clay-weight terracotta for anchors, one red weft pass as the active line, shed shadow in deep umber", + "Type/composition: inscriptional capitals cut like loom marks, text hung in vertical warp columns, each finished row beaten upward into a dense woven band", + "Topology/navigation: Read vertically from weight to warp group, shed, woven band, and growing cloth.", + "Controls/state: Lift, weight, tension, pass, and beat with slack, open, crossed, packed, and broken states.", + "Responsive/motion: Turn the loom into a vertical thread ledger and animate only deliberate user-driven passes." + ], + "spark": "Clay weights hang in a staggered row beneath white warp; one lifted tablet opens a dark shed and the red weft passes across.", + "webLeverage": "A constraint model can connect each hanging weight to visible thread tension and weaving consequences.", + "strength": "world" + }, + { + "id": "paper-folds-pleats-deployable-akari-light-sculpture", + "form": "an akari workshop, washi over bamboo ribs folded into glowing moons and columns, paper diffusing one bare bulb into weightless warm volumes that ship flat", + "lineage": "Isamu Noguchi's Akari light sculptures, Gifu lantern craft, sculptural light design", + "tags": [ + "folded-volume", + "lit-from-within", + "flat-pack" + ], + "system": [ + "Palette/material: candlelit washi ivory glowing as the ground, bamboo rib tan for structure lines, charcoal for body ink, one vermilion stamp as the active mark", + "Type/composition: a light humanist sans beside a brush-stamped mark, rib lines banding the page into gentle segments that bow like paper under light", + "Topology/navigation: lit volumes hang and stand at different heights in one dim room; you move between glows, and unlit forms wait folded flat against the wall", + "Controls/state: the bulb is the state, on means inhabited and warm, hover brightens the paper from inside, dismissed volumes fold flat to a rib outline", + "Responsive/motion: small screens collapse volumes to their flat shipping outlines that reopen on tap; motion is a soft unfolding inflation" + ], + "spark": "You hold a bamboo rib hoop while sheets of washi dry on the rack; when the bulb inside snaps on, the folded column beside you becomes a warm moon, weightless, and its light lands on your hands like paper.", + "webLeverage": "layered box-shadow and radial-gradient glow through translucent paper textures, view transition unfolding panels from flat to volume", + "strength": "world" + }, + { + "id": "textiles-weave-drape-fashion-margiela-blank-atelier", + "form": "a white-painted atelier, garments carrying blank labels held by four white pick stitches, exposed linings and raw hems as the finish, line numbers 0 to 23 circled on cotton tape", + "lineage": "Maison Margiela, deconstructed tailoring, anonymous white-coat atelier practice", + "tags": [ + "numbered-line", + "exposed-seams", + "blank-label" + ], + "system": [ + "Palette/material: whitewash over every surface, cotton tape white on raw canvas ecru, black typewriter ink for numerals, the hand-drawn circle as the only accent", + "Type/composition: plain typewriter numerals on cotton tape and blank labels, seams and structure left exposed, the composition an inventory line 0 to 23", + "Topology/navigation: the numbered line 0 to 23 is the whole map; each numeral is a department, and you arrive by circling one on the tape", + "Controls/state: selection is a hand-drawn circle around a numeral, the blank label is the unnamed default, four white pick stitches mark what can be opened", + "Responsive/motion: the tape wraps to as many rows as the width allows, numerals never shrink; motion is a garment turned lining-out" + ], + "spark": "You stand in a workshop where everything, tables, telephone, doorframe, is painted flat white; a garment on the rail wears its lining outward, and you turn a collar to find a blank label held by four white stitches.", + "webLeverage": "css dashed borders and outline exposing element seams as construction, :checked state drawing an svg circle stroke around the chosen numeral", + "strength": "world" + }, + { + "id": "textiles-weave-drape-fashion-industrial-quote-grammar", + "form": "an industrial streetwear grammar, ordinary words set in straight quotation marks, zip-tie tags left on, diagonal hazard stripes crossing white cotton and black nylon", + "lineage": "Virgil Abloh's Off-White, quotation-mark labeling, workwear appropriation", + "tags": [ + "quoted-labels", + "hazard-stripe", + "tagged-state" + ], + "system": [ + "Palette/material: stockroom white cotton and black nylon as ground and ink, black-on-white hazard diagonals for structure, safety orange zip-tie tags as the accent", + "Type/composition: bold industrial caps inside straight quotation marks naming the obvious, label plates set square on the grid like stenciled crates", + "Topology/navigation: every zone is labeled with its literal quoted name, wayfinding is reading, and the hazard stripe runs diagonally under whatever matters", + "Controls/state: the active item keeps its orange zip tie on, toggles read \"ON\" and \"OFF\" in quotes, disabled things take the diagonal stripe across them", + "Responsive/motion: stripes hold 45 degrees at every width while label plates stack; motion is a tag swinging once on selection" + ], + "spark": "You lift a jacket and the zip-tie tag clacks against the hanger; across the back, giant caps in straight quotes name the obvious, and a hazard stripe runs diagonally under the fluorescent light of the stockroom.", + "webLeverage": "css repeating-linear-gradient hazard stripes at 45deg, generated content wrapping every label in straight quotes via ::before and ::after", + "strength": "world" + }, + { + "id": "textiles-weave-drape-fashion-sneaker-box-stacks", + "form": "a sneaker archive wall, stacked cardboard boxes with silhouette line art printed on the ends, colorway names read as poetry beside monospaced size runs, tissue folded inside each lid", + "lineage": "sneaker box design, sneakerhead archive culture, the colorway naming tradition", + "tags": [ + "stacked-boxes", + "end-label-index", + "lid-reveal" + ], + "system": [ + "Palette/material: burnt orange box board as the ground, black one-line silhouette art for ink, tissue white interiors, the colorway chip strip carrying accent states", + "Type/composition: condensed caps on the end label over monospaced size-run digits, the label grid of name, colorway, and size ruling every card", + "Topology/navigation: a wall of stacked boxes indexed by their end labels; you browse the stack face, pull a box halfway, and open the lid to go deeper", + "Controls/state: the selected box slides half out of the stack, opening hinges the lid and folds back tissue, the colorway chip marks which variant is live", + "Responsive/motion: the wall re-shelves to a single column of end labels on narrow screens; motion is lid hinge and tissue lift" + ], + "spark": "You slide a box from a stack taller than you; the end label lists the colorway name like a line of verse, the lid lifts with a cardboard sigh, and tissue paper folds back from the shape you already know by silhouette.", + "webLeverage": "css 3d transforms hinging box lids open on interaction, grid re-shelving the stack from wall to single column across breakpoints", + "strength": "dual" + }, + { + "id": "textiles-weave-drape-fashion-wax-print-market", + "form": "a west african wax print market wall, six-yard cuts stacked in loud harmonious towers, saturated pattern systems veined with wax-resist crackle, named designs trading in social meaning", + "lineage": "Dutch wax and Ankara printing, Vlisco pattern naming, Ghanaian and Nigerian cloth markets, Akosombo Textiles", + "tags": [ + "stacked-bolts", + "crackle-texture", + "named-patterns" + ], + "system": [ + "Palette/material: marigold, teal, and oxblood grounds veined with indigo wax crackle, selvedge white for margins, the loudest print reserved for the active cut", + "Type/composition: pattern names in confident slab capitals like selvedge stamps, content banded as stacked horizontal bolts, edge-to-edge repeat with no timid whitespace", + "Topology/navigation: the wall is a vertical stack of folded bolts; you flip downward through the cuts, and pulling one bolt unfolds it full width over the stack", + "Controls/state: selection pulls a bolt proud of the stack and unfolds a yard of it, quantity reads as stack height, the pattern's given name confirms every choice", + "Responsive/motion: stacks narrow to single-bolt columns keeping full-bleed repeats; motion is cloth unfolding in one throw" + ], + "spark": "You stand in a market stall walled floor to ceiling with folded wax prints, the seller throwing a six-yard cut open across the counter in one motion, crackle veins running through a marigold fan pattern she calls by name.", + "webLeverage": "css background repeats build the pattern fields while blend modes lay indigo crackle veins over every ground", + "strength": "world" + }, + { + "id": "fashion-folded-worlds-sewing-pattern-envelope", + "form": "a home sewing pattern envelope and its tissue, fashion figures in three lettered views on the front, yardage tables on the back, and inside a folded map of dashed cutting lines, notches, grain arrows, and place-on-fold brackets", + "lineage": "Butterick, Simplicity, and McCall's printed patterns, 1960s and 70s envelope illustration and tissue drafting", + "tags": [ + "lettered-views", + "tissue-markings", + "cutting-layout" + ], + "system": [ + "Palette/material: manila tissue ground with black drafting marks, envelope figures in dry gouache pastels, one dressmaker red tracing the view and size you have committed to", + "Type/composition: view letters A, B, and C rank the variants, circled piece numbers sit on every tissue shape, instructions run as numbered steps with thumbnail diagrams", + "Topology/navigation: the envelope front indexes the views, the back holds size and yardage tables, and the cutting layout maps every numbered piece onto the folded yardage", + "Controls/state: the chosen size renders its nested cut line solid while other sizes stay dashed, notches must meet to join pieces, and a placed piece pins flat and stops drifting", + "Responsive/motion: the layout refolds to the fabric width at hand, pieces never rotating off grain; motion is tissue settling and a pin dropping home" + ], + "spark": "You smooth the crackling tissue across the table, third size line from the edge, and pin piece 4 with its grain arrow dead parallel to the fold before the scissors commit you to view B.", + "webLeverage": "css outlines trace nested size grading while drag interaction snaps svg pieces onto a grain-locked layout grid", + "strength": "dual" + }, + { + "id": "fashion-folded-worlds-tartan-sett-registry", + "form": "a woven tartan and its registry page, the sett written as a thread count in wool shorthand, colors crossing over themselves into blended intersections, each clan's pattern a recorded recipe any mill can weave true", + "lineage": "Scottish tartan mills and pattern books, thread-count sett notation, the civic register of named tartans", + "tags": [ + "thread-count", + "sett-repeat", + "blended-crossing" + ], + "system": [ + "Palette/material: a declared roster of wool tones per tartan, hunter green, navy, and carmine crossing on twill so every overlap births a blended third tone, selvedge as margin", + "Type/composition: the sett line in mono shorthand like K4 R32 G32, small-caps captions beneath a woven specimen swatch, the pattern itself carrying the identity", + "Topology/navigation: the registry lists named setts; opening one unfolds its repeat full width, and zoom descends from cloth to thread grid where the recipe becomes countable", + "Controls/state: editing the thread count reweaves the cloth live, the pivot thread mirrors the sequence back on itself, and a registered sett locks its recipe line", + "Responsive/motion: the repeat tiles to any width by weaving more of itself, never stretching; motion is the sett filling in thread by thread" + ], + "spark": "The mill clerk reads K4 R32 G32 off the registry card and the loom answers, navy crossing carmine into a muted plum at every intersection, a family's whole identity stated in one countable line.", + "webLeverage": "a canvas loom renders any thread-count string into true blended twill in real time, with css fallback repeats for static views", + "strength": "world" + } + ] + }, + { + "id": "food-potioncraft", + "label": "Food & Potioncraft", + "well": "material-worlds", + "description": "Ingredients, kitchens, apothecaries, fermentation, heat, chemistry, craft, and meals that change through time and participation.", + "concepts": [ + { + "id": "food-fermentation-culinary-theater-candlelit-potion-class", + "form": "a candlelit potion-making class around a long oak table, where eight students grind rosehip, juniper, hibiscus, and butterfly-pea flower in brass mortars before one glazed cauldron shifts from wine red to luminous violet", + "lineage": "Historical apothecary teaching, mortar-and-pestle preparation, alembic distillation, botanical color chemistry, and participatory culinary theater", + "tags": [ + "potion-class", + "botanical-reaction", + "shared-cauldron" + ], + "system": [ + "Palette/material: candlelit oak brown as ground, brass mortar glint for instruments, cauldron wine red at rest shifting luminous violet as the active state, notes in soot black", + "Type/composition: apothecary italic for ingredient names against engraved measure capitals, recipe steps ruled like a ledger down the long table's axis", + "Topology/navigation: Move from apothecary ingredient through measure, mortar, infusion, vessel, shared cauldron, individual glass, and recorded batch.", + "Controls/state: Measure, grind, steep, strain, combine, and taste with raw, bruised, infused, reacting, clarified, settled, and substituted states.", + "Responsive/motion: Recompose the long table as an ordered preparation sequence while color, aroma, temperature, and texture remain described in text." + ], + "spark": "Eight mortars stop at once as the final blue infusion enters the red cauldron; violet races around the rim, steam lifts through candlelight, and every student's glass answers differently.", + "webLeverage": "A shared causal batch model lets each measured addition change color, aroma, and strength for everyone in real time, while exact recipes, substitutions, and outcomes remain replayable.", + "strength": "composition" + }, + { + "id": "food-fermentation-culinary-theater-chocolate-temper-crystal-river", + "form": "a chocolate temper crystal river, where heat, agitation, seed crystals, cooling, and flow determine whether a surface snaps like glass or blooms gray", + "lineage": "Chocolatier tempering craft, cocoa-butter crystallography, and confectionery cooling curves.", + "tags": [ + "chocolate", + "crystal", + "temperature" + ], + "system": [ + "Palette/material: deep cacao brown as ground with molten gloss highlights, seed-crystal gold flecks as the active markers, bloom gray reserved for failure, cream captions", + "Type/composition: confectioner's serif for stage names with mono digits for degrees, layout as one horizontal river band annotated at each thermal bend", + "Topology/navigation: Follow cocoa butter through melt, crystal loss, seeding, working range, set, and storage.", + "Controls/state: Heat, stir, seed, and cool while crystal populations and surface outcome update together.", + "Responsive/motion: Use a single temperature river on phones and express phases through pattern as well as color." + ], + "spark": "Molten chocolate moves as a dark river through three thermal bends; stable crystals flash gold beneath the surface and the final bar breaks with a clean, audible edge.", + "webLeverage": "Probe input and a phase-transition model connect direct tempering actions to predicted crystal stability, gloss, and snap.", + "strength": "composition" + }, + { + "id": "food-fermentation-culinary-theater-pastry-lamination-geology", + "form": "a pastry lamination geology, where dough, butter, fold, rest, temperature, steam, and pressure build edible strata that lift in the oven", + "lineage": "Viennoiserie lamination, bakery temperature craft, dough-fold diagrams, and cross-section food photography.", + "tags": [ + "pastry", + "layers", + "geology" + ], + "system": [ + "Palette/material: pale dough cream as ground, butter yellow seams as the structural accent, baked gold crust for finished states, flour-dust white for margins", + "Type/composition: sturdy bakery slab for fold names, strata labeled like a geological column, text banded in thin horizontal layers that multiply with each fold", + "Topology/navigation: Travel from slab to fold sequence, layer count, rest, shaping, bake, and crumb section.", + "Controls/state: Fold, chill, roll, and alter pressure while butter continuity and final lift remain visible.", + "Responsive/motion: Present one geological fold per phone viewport with a persistent cross-section." + ], + "spark": "A butter seam disappears between pale dough cliffs, repeats through a book fold, and erupts in the oven as hundreds of crisp golden layers separated by steam.", + "webLeverage": "Layer-count computation, time-temperature guidance, and sectional animation connect hand technique to butter breakage and lift.", + "strength": "composition" + }, + { + "id": "food-fermentation-culinary-theater-pickling-brine-calendar", + "form": "a pickling brine calendar, where salt, acidity, spice, vegetable, vessel, temperature, and crunch mature through bright seasonal jars", + "lineage": "Seasonal pickling traditions, brine fermentation, pantry calendars, jar labeling, and sensory food preservation.", + "tags": [ + "pickling", + "calendar", + "season" + ], + "system": [ + "Palette/material: clear jar glass and pale brine haze as ground, radish coral and cabbage ruby as seasonal accents, dill green for fresh states, labels in kraft brown", + "Type/composition: hand-lettered jar-label script over stamped date caps, jars ranked on shelf lines, each label banded with harvest, brine, and day count", + "Topology/navigation: Browse jars by harvest, brine, fermentation stage, sensory change, and safe storage.", + "Controls/state: Mix a brine, log a taste, vent or chill a vessel, and compare batches over days.", + "Responsive/motion: Arrange jars as a vertical seasonal shelf on phones with safety thresholds stated in text." + ], + "spark": "Spring radishes tint one jar coral, summer cucumbers cloud another with dill, and a winter cabbage crock slowly turns ruby as bubbles climb its stone weight.", + "webLeverage": "Batch timers, optional pH and temperature input, and photo comparison connect daily observation to safe, sensory maturation.", + "strength": "world" + }, + { + "id": "food-fermentation-culinary-theater-sourdough-microbial-sky", + "form": "a sourdough microbial sky, where yeast, bacteria, flour, water, temperature, and time appear as a living weather above each loaf", + "lineage": "Artisan sourdough fermentation, microbial ecology, and bakers' time-temperature practice.", + "tags": [ + "sourdough", + "microbes", + "weather" + ], + "system": [ + "Palette/material: pale dough ivory as ground, cool dawn blue for dormant culture, amber gas-cell clusters as the active front, crust bronze fixing finished states", + "Type/composition: barometric small caps for stage fronts with mono time stamps, layout split as loaf horizon below and weather band above", + "Topology/navigation: Move through starter, mix, fold, proof, bake, and crumb as connected microbial climates.", + "Controls/state: Change flour, hydration, inoculation, and temperature while predicted fermentation remains visibly uncertain.", + "Responsive/motion: Stack the loaf and microbial weather as timed sections on phones with discrete stage playback." + ], + "spark": "A cool blue culture wakes at dawn, small amber gas cells gather into a storm front, and the dough rises beneath them like a pale continent before the oven fixes the sky.", + "webLeverage": "Temperature streams, time-lapse imagery, and a bounded fermentation model connect recipe choices to rise, acidity, and crumb observations.", + "strength": "composition" + }, + { + "id": "food-fermentation-culinary-theater-tea-steeping-color-clock", + "form": "a tea-steeping color clock, where leaf unfurling, water heat, mineral content, aroma, bitterness, and hue mark time without a numerical countdown", + "lineage": "Gongfu tea brewing, sensory evaluation, and infusion-color observation.", + "tags": [ + "tea", + "color", + "time" + ], + "system": [ + "Palette/material: clear glass and pale steam as ground, liquor shifting jade to honey as the live active clock, dark wet-leaf green at rest, deep amber warning over-steep", + "Type/composition: unhurried humanist serif for tasting notes, steeps ranked as concentric rings around the vessel, minutes named in words rather than countdown digits", + "Topology/navigation: Read the infusion through leaf, liquor, aroma, mouthfeel, and successive steeps.", + "Controls/state: Choose tea, vessel, water, and heat; lift the leaves when the desired sensory window appears.", + "Responsive/motion: Use one vessel-height timeline on phones and pair color with named sensory changes." + ], + "spark": "Pearled leaves open in a glass vessel as the water shifts from clear jade to honey; a ring of orchid aroma reaches the cup edge just before bitterness darkens the center.", + "webLeverage": "Camera color sampling, temperature input, and user-timed tasting notes build a personal infusion model without claiming universal taste.", + "strength": "dual" + } + ], + "retired": true + }, + { + "id": "mythical-worlds", + "label": "Mythical Worlds", + "well": "material-worlds", + "description": "Myth, magic, dreams, impossible geometry, alternate laws, archetypal journeys, and worlds unconstrained by ordinary reality.", + "concepts": [ + { + "id": "dream-surreal-impossible-worlds-alphabet-storm", + "form": "an alphabet storm, where letters condense into words, break into weather, and reshape the landscape according to grammar", + "lineage": "Concrete poetry, illuminated alphabets, and language-as-weather surrealism.", + "tags": [ + "alphabet", + "storm", + "language" + ], + "system": [ + "Palette/material: paper white ground, storm-letter black as both body ink and weather mass, one silver flash for words mid-transformation, rain gray for spent grammar", + "Type/composition: a single monumental grotesk behaving as matter, kerning loosening into wind, words breaking across lines as literal weather fronts on an open field", + "Topology/navigation: Travel between letter fronts, word formations, grammatical forces, and the landscapes they produce.", + "Controls/state: Type, split, conjugate, and recombine language while physical consequences remain reversible.", + "Responsive/motion: Use one word-weather event per phone viewport and preserve readable text throughout transformation." + ], + "spark": "Black letters gather into CLOUD, burst into rain, and carve the word RIVER across white ground; changing one vowel turns the current into a field of silver ravens.", + "webLeverage": "Text parsing, procedural particles, and semantic rules turn typed language into deterministic weather with accessible narrative descriptions.", + "strength": "dual" + }, + { + "id": "dream-surreal-impossible-worlds-cloud-quarry", + "form": "a cloud quarry, where workers cut blocks of weather, reveal blue voids, and assemble temporary buildings that rain from their own walls", + "lineage": "Cloud studies, stone-quarry craft, and impossible weather architecture.", + "tags": [ + "cloud", + "quarry", + "weather" + ], + "system": [ + "Palette/material: cumulus white block mass as ground, cut faces opening onto sky blue voids, thunder gray for heavy stock, one silver saw line as the active edge", + "Type/composition: quarry-stencil industrial caps on tally boards, measurements in mono, composition stacked like cut blocks with deep blue gaps between sections", + "Topology/navigation: Explore cloud strata through density, weather content, cut face, transport path, and atmospheric structure.", + "Controls/state: Cut, lift, join, warm, and release cloud blocks while their weather remains active.", + "Responsive/motion: Use sectional cloud blocks on phones and replace vapor motion with textured state changes." + ], + "spark": "A silver saw opens a cumulus cliff, a cube of thunder rolls onto a crane, and a pale fog arch is set over the valley before dissolving into rain.", + "webLeverage": "Volumetric rendering, procedural weather, and direct constructive gestures let users build transient architecture with predictable dissolution.", + "strength": "dual" + }, + { + "id": "dream-surreal-impossible-worlds-gravity-rain-garden", + "form": "a gravity-rain garden, where drops fall toward flowers, walls, moons, and walking figures according to the color of each cloud", + "lineage": "Surreal garden painting, speculative physics, and weather-making folklore.", + "tags": [ + "gravity", + "rain", + "garden" + ], + "system": [ + "Palette/material: dusk green-gray garden as ground, cloud color coding each gravity, blue and red rains as directional accents, the black flower anchoring clear orbits", + "Type/composition: light rounded sans whose baselines bend along local gravity, labels falling or rising toward their clouds, only the legend held level", + "Topology/navigation: Explore garden regions through local gravity, cloud color, water path, and impossible habitat.", + "Controls/state: Paint a cloud, tilt its pull, plant an object, and watch new rivers find their destination.", + "Responsive/motion: Keep one gravity field dominant on phones and offer trajectory stills in" + ], + "spark": "Blue rain falls upward into a floating pond, red rain bends around a sleeping fox, and clear drops orbit a black flower without ever touching the ground.", + "webLeverage": "A vector-field physics simulation and direct painting gestures let users compose shareable rain laws with deterministic replay.", + "strength": "dual" + }, + { + "id": "dream-surreal-impossible-worlds-luminescent-alien-understory", + "form": "an alien forest understory at nightfall, where luminescent spore canopies, breathing ground-veins, and slow light rain make botany feel newly invented", + "lineage": "Bioluminescence field studies, speculative botany illustration, immersive nocturnal garden installations", + "tags": [ + "luminescence", + "alien-botany", + "proximity-reveal" + ], + "system": [ + "Palette/material: near-black loam as ground, spore glow in cyan and lilac, root veins pulsing pale green, the brightest white bloom reserved for the focused element", + "Type/composition: thin phosphor sans that brightens on approach, labels blooming beside their growths, no fixed grid, composition following the vein network's branching", + "Topology/navigation: paths reveal by proximity glow; destinations announce themselves as distant pulses.", + "Controls/state: touching a growth wakes it; attention, dormancy, and bloom are luminance states with afterglow.", + "Responsive/motion: glow trails shorten on phones; pulses slow to still gradients under" + ], + "spark": "The path lights itself two steps ahead: spores drift up like inverted rain and the roots pulse softly with something like attention.", + "webLeverage": "Pointer-proximity light fields and additive canvas glow make attention itself the illumination model.", + "strength": "dual" + }, + { + "id": "dream-surreal-impossible-worlds-moon-shadow-bazaar", + "form": "a moon-shadow bazaar, where merchants trade shadows by length, memory, temperature, and the strange light that cast them", + "lineage": "Moonlit bazaar tales, shadow theater, and surreal object-exchange folklore.", + "tags": [ + "shadow", + "bazaar", + "moon" + ], + "system": [ + "Palette/material: moonlit blue-black lane as ground, shadow goods in layered soft blacks, stall canvas in muted saffron, one cool moon white edging the active trade", + "Type/composition: bazaar signpainter script over chalked price caps, stalls ranked down one lane, each shadow tagged with a small ticket of origin and length", + "Topology/navigation: Wander stalls by shadow origin, shape, time, emotional charge, and possible exchange.", + "Controls/state: Cast, stretch, compare, trade, and return a shadow while its story stays attached.", + "Responsive/motion: Arrange stalls as a moonlit vertical lane on phones and retain high-contrast readable commerce." + ], + "spark": "A vendor unrolls the cool shadow of a cedar at midnight, another offers a child's summer silhouette in a glass jar, and the moon changes price by moving behind a cloud.", + "webLeverage": "Camera silhouette capture, solar geometry, and interactive shadow deformation turn personal light moments into ephemeral tradable artifacts.", + "strength": "dual" + }, + { + "id": "dream-surreal-impossible-worlds-sleeping-city-fold", + "form": "a sleeping city fold, where streets crease into blankets, towers become bedposts, and neighborhoods dream different weather beneath one night", + "lineage": "Dream-city literature, folding-paper landscapes, and nocturnal urban fantasy.", + "tags": [ + "city", + "sleep", + "fold" + ], + "system": [ + "Palette/material: night navy city as ground, window lights as embroidered gold stars, quilt seams in pale thread white, each dreaming district tinted its own weather hue", + "Type/composition: soft rounded caps for district names stitched along seam lines, the map grid relaxing into blanket folds, morning notes set in a plain waking sans", + "Topology/navigation: Move through waking streets, folded neighborhoods, shared dream edges, and morning return.", + "Controls/state: Tuck a district, open its dream, connect two sleeping weather patterns, and unfold at dawn.", + "Responsive/motion: Use layered city quilts on phones and substitute crossfades with static night and morning plates." + ], + "spark": "At midnight an avenue rises like a quilt seam, apartment lights become embroidered stars, and a whole district folds gently over a park dreaming tropical rain.", + "webLeverage": "Deformable map geometry, local time, and collaborative dream fragments create a nightly city that remains spatially recognizable.", + "strength": "dual" + }, + { + "id": "ritual-ceremony-festival-yggdrasil-nine-realms", + "form": "Yggdrasil as a vast ash carrying nine mythic realms, with roots at ancient wells, creatures traveling its bark, messages crossing worlds, and cycles of injury, counsel, fate, and renewal", + "lineage": "The Poetic and Prose Eddas, Norse cosmology, manuscript scholarship, Nordic woodcarving, oral storytelling, and annotated mythic interpretation", + "tags": [ + "yggdrasil", + "nine-realms", + "mythic-cosmology" + ], + "system": [ + "Palette/material: ash-bark gray-brown as ground, well water in three cold blue-greens, rune gold reserved for the active path, manuscript vellum cream for cited sources", + "Type/composition: carved rune-inflected capitals for realm names over a scholarly serif for sources, layout climbing root to crown along one vertical trunk axis", + "Topology/navigation: Travel by root, trunk path, branch, realm, well, messenger route, named creature, and cited source without forcing one canonical map.", + "Controls/state: Trace a story, compare sources, hear a name, mark a relationship, and inspect flourishing, wounded, warning, remembered, and renewed states.", + "Responsive/motion: Unroll one root-to-crown journey on phones while retaining the complete realm graph, source variants, and return path." + ], + "spark": "An ash trunk wider than a mountain rises through cloud and starlight; a red squirrel carries an insult between eagle and serpent while three roots drink from three differently remembered wells.", + "webLeverage": "A deep-linked myth graph, source-layer comparison, original-language audio, collaborative annotations, and a semantic tree let readers explore variant traditions without turning Yggdrasil into franchise lore.", + "strength": "dual" + } + ] + }, + { + "id": "performance-spectacle", + "label": "Performance & Spectacle", + "well": "performed-time", + "description": "Cinema, theater, music, dance, staging, light, sound, costume, rhythm, and shared attention unfolding through time.", + "concepts": [ + { + "id": "cinema-cinematography-editing-hand-processed-film-bloom", + "form": "a hand-processed strip of 16mm film carrying scratches, uneven chemistry, and light leaks, where the emulsion itself joins the photographed event", + "lineage": "Experimental 16mm practice, hand processing, and direct film intervention", + "tags": [ + "16mm", + "emulsion", + "light-leak" + ], + "system": [ + "Palette/material: silver-gray emulsion over near-black leader as ground, orange light-leak flare reserved for the active frame, chemical sepia stains as wear", + "Type/composition: stamped edge-code caps and grease-pencil frame numerals along the sprocket margin, content banded in strict frame-by-frame rows", + "Topology/navigation: Move between frame, strip, perforation, processing event, and photographed subject.", + "Controls/state: Expose, process, scratch, splice, and compare with latent, developing, fogged, damaged, and projected states.", + "Responsive/motion: Use selected frames and a user-controlled strip while providing transcript and visual descriptions." + ], + "spark": "A runner crosses a gray field; orange light floods the perforations, scratches flash white, and the figure briefly dissolves into boiling grain.", + "webLeverage": "Procedural film artifacts can be tied to exact frames and processing events rather than applied as a generic filter.", + "strength": "world" + }, + { + "id": "cinema-cinematography-editing-multiplane-cel-dawn", + "form": "a multiplane cel-animation dawn, where hand-painted forest planes slide at different speeds and the camera sinks through mist toward a lit cottage", + "lineage": "Multiplane camera cinematography, hand-painted animation backgrounds in the Kazuo Oga tradition, cel-and-background compositing", + "tags": [ + "painted-plane", + "parallax-depth", + "camera-sink" + ], + "system": [ + "Palette/material: gouache forest greens and mist blue-gray planes over a deep umber ground, the cottage window's lamp amber as the single active accent", + "Type/composition: hand-painted title-card serifs held on their own clear cel, text always on the nearest plane, composition banded by painted depth layers", + "Topology/navigation: scenes are stacked painted planes; travel is camera movement through layers, not page swaps.", + "Controls/state: focus racks between planes; interactive elements live on their own cel above the painting.", + "Responsive/motion: plane count reduces gracefully on phones; parallax follows scroll and freezes into a full composition under" + ], + "spark": "The nearest ferns blur past, the middle forest drifts, the far ridge barely breathes: five paintings pretending, perfectly, to be one morning.", + "webLeverage": "Scroll-linked parallax planes with real painted-texture assets and rack-focus blur via CSS filters.", + "strength": "dual" + }, + { + "id": "music-rhythm-sound-resonance-harmonic-lantern-field", + "form": "a harmonic lantern field, where suspended paper lanterns hang at pitch heights and their warmth, halo, and afterglow spell consonance across a dark hall", + "lineage": "Lantern festivals, color-organ traditions from Castel to Scriabin, and harmonic lattice diagrams.", + "tags": [ + "lantern-field", + "height-pitch", + "afterglow" + ], + "system": [ + "Palette/material: soot-black hall as ground, rice-paper amber lanterns as body elements, warm gold halos for consonant tones, a cold blue-white flicker for clashes", + "Type/composition: thin engraved-brass tag capitals under each lantern, pitch names ranked on a vertical height scale, the field gridded by hanging string lines", + "Topology/navigation: height is pitch and nearness is kinship; travel by climbing rows and following shared-overtone strings between lantern clusters", + "Controls/state: tapping kindles a lantern, held tones glow steady, a selected interval brightens both halos, dissonance shows as visible halo beating", + "Responsive/motion: the field compresses to one vertical lantern column on phones; halos breathe slowly" + ], + "spark": "A dark hall holds a grid of unlit paper lanterns; one kindles amber at chest height, a fifth above it answers in the same warmth, and a wrong entrance flickers its halo into hard-edged moire until the chord settles.", + "webLeverage": "SVG lantern field with CSS glow and blend modes; optional Web Audio input kindles lanterns live, but height, warmth, and afterglow carry the whole state visually.", + "strength": "dual" + }, + { + "id": "music-rhythm-sound-resonance-spectral-stained-glass", + "form": "a spectral rose window, where each pane is one partial of a tone, lead cames hold the radial structure, and pane color and size carry harmonic weight", + "lineage": "Gothic rose-window geometry, Chartres glass craft, and Fourier spectrum diagrams.", + "tags": [ + "rose-window", + "radial-panes", + "harmonic-weight" + ], + "system": [ + "Palette/material: charcoal lead cames on a dark nave ground, ruby glass for the fundamental pane, wine and amber for mid partials, cold cyan needles at the rim", + "Type/composition: incised lapidary capitals on the stone surround, pane labels curved along their ring, the whole composition ordered by strict radial symmetry", + "Topology/navigation: the fundamental holds the center and partials ring outward by frequency; move along radial families and set neighboring roses side by side", + "Controls/state: selecting a pane lights it from behind, pane area shows its weight, removed partials become gray leaded blanks, the lit rose is the current timbre", + "Responsive/motion: the rose unrolls into stacked spectral arcs on phones; panes brighten and dim slowly" + ], + "spark": "Inside a dark nave one rose window burns: a ruby heart pane for the fundamental, wine and amber rings around it, and a rim of icy needle panes that splinter wider as the tone turns metallic.", + "webLeverage": "High-resolution SVG panes with backlight filters read as a pure visual spectrum; optional microphone FFT re-lights the rose live for those who want sound.", + "strength": "dual" + }, + { + "id": "stagecraft-theater-lighting-cyclorama-dawn", + "form": "a seamless cyclorama passing from black night through cobalt and rose into white day, where light alone creates an infinite horizon behind the actors", + "lineage": "Cyclorama lighting, theatrical dawn effects, and scenic color composition", + "tags": [ + "cyclorama", + "dawn", + "horizon" + ], + "system": [ + "Palette/material: depthless cyc black as ground, a low cobalt horizon band as structure, rose gathering above it, white-day wash reserved for the fully active state", + "Type/composition: lighting-plot stencil caps for cue names with tabular numerals, content held in horizontal horizon bands stacked from dark to light", + "Topology/navigation: Organize atmosphere by horizon band, time phase, subject relation, and transition interval.", + "Controls/state: Raise, blend, hold, and compare with night, first light, dawn, day, and blackout states.", + "Responsive/motion: Offer discrete atmospheric phases with labels and patterns so color is never the sole signal." + ], + "spark": "The curved wall begins as depthless black; a low cobalt band appears, rose gathers above it, and the actors acquire shadows before the stage becomes day.", + "webLeverage": "A scrubbable cue timeline binds horizon bands to actor and scene state, making each light transition inspectable while named cue states remain deep-linkable and text-equivalent.", + "strength": "dual" + }, + { + "id": "stagecraft-theater-lighting-fly-tower-transformation", + "form": "a bare stage transformed by descending walls, trees, chandeliers, and sky cloths, where vertical rigging rewrites the entire world in measured silence", + "lineage": "Counterweight fly rigging, scenic transformation, and proscenium stagecraft", + "tags": [ + "fly-tower", + "transformation", + "vertical" + ], + "system": [ + "Palette/material: matte stage black as ground, hemp-rope beige and counterweight steel gray for the machinery, one gilt scenic gold reserved for the piece at trim", + "Type/composition: stenciled batten numerals and cue-sheet grotesk caps, every element ranked on numbered vertical linesets, composition ruled by the fly lines", + "Topology/navigation: Organize scenic elements by vertical line, depth plane, scene, and change sequence.", + "Controls/state: Fly, hold, trim, and compare with stored, moving, at-trim, obstructed, and cleared states.", + "Responsive/motion: Present scene changes as deliberate stacked stages and stop all autonomous movement under" + ], + "spark": "A bare black floor holds for one breath; a gold room descends from darkness in five planes and locks together before the first actor enters.", + "webLeverage": "A bounded layer timeline can coordinate complex spatial transformation while every element retains a clear semantic state.", + "strength": "composition" + }, + { + "id": "stagecraft-theater-lighting-peppers-ghost-table", + "form": "a candlelit table visited by a transparent figure reflected from a hidden chamber, where glass and darkness let two spaces occupy one scene", + "lineage": "Pepper's Ghost illusion, angled glass, and Victorian theatrical optics", + "tags": [ + "peppers-ghost", + "reflection", + "double-space" + ], + "system": [ + "Palette/material: candlelit umber and wax gold on the visible table as ground, glass-green glints at the plane, the ghost's pale cyan-white as the appearing state", + "Type/composition: Victorian playbill didones with engraved small caps, labels split between solid front-scene type and translucent reflected type", + "Topology/navigation: Keep visible scene, hidden source, glass plane, reflected figure, and audience viewpoint registered.", + "Controls/state: Illuminate, align, fade, and reveal with source-hidden, appearing, present, slipping, and absent states.", + "Responsive/motion: Use a diagram plus explicit source and composite views when the illusion cannot be spatially reproduced." + ], + "spark": "Four diners sit around the table; a pale fifth figure appears through the wood, raises a glass, and fades when the hidden light extinguishes.", + "webLeverage": "Registered reflection layers can reveal optical causality while ensuring source content remains directly accessible.", + "strength": "composition" + } + ] + }, + { + "id": "architecture-places", + "label": "Architecture & Places", + "well": "performed-time", + "description": "Buildings, gardens, rooms, thresholds, galleries, public interiors, and places choreographed for inhabitation and discovery.", + "concepts": [ + { + "id": "architecture-inhabitable-space-acoustic-cloister", + "form": "an acoustic cloister, where arches, planted courts, water, and absorbent niches shape places for whisper, conversation, music, and silence", + "lineage": "Monastic cloisters, courtyard acoustics, and contemplative sound architecture.", + "tags": [ + "acoustics", + "cloister", + "silence" + ], + "system": [ + "Palette/material: pale limestone arcade as ground, moss green and water-dark basalt for the absorbent zones, one fountain aqua marking the live listening point", + "Type/composition: incised roman capitals with wide letterspacing, inscriptions running along the arcade line, plans and text held to a calm four-court grid", + "Topology/navigation: Navigate by audible territories and the passages that connect loud, social, and quiet rooms.", + "Controls/state: Place a voice or instrument, change a surface, and compare decay at listening points.", + "Responsive/motion: Combine plan, impulse graph, and audio samples in a single phone-width reading path." + ], + "spark": "Footsteps ring along one stone arcade, vanish beside a moss wall, and return as a soft circle of voices around the fountain at the court's center.", + "webLeverage": "Measured impulse responses and user-triggered binaural convolution make acoustic differences audible without autoplay.", + "strength": "composition" + }, + { + "id": "architecture-inhabitable-space-daylight-section", + "form": "a daylight section, where the sun cuts luminous rooms through a building and daily life gathers along the moving edge of warmth", + "lineage": "Architectural sun-path studies, sectional drawing, and passive daylight design.", + "tags": [ + "daylight", + "section", + "occupation" + ], + "system": [ + "Palette/material: limewash white walls as ground, section-cut poche in deep charcoal, the traveling sunbeam's gold as the active band, shadow blue for withdrawn hours", + "Type/composition: architect's inclined lettering with tabular time stamps, the page ruled as one long continuous section, annotations pinned to sun angles", + "Topology/navigation: Read rooms in section through solar paths, apertures, surfaces, and moments of occupation.", + "Controls/state: Change date, orientation, and opening depth while comparing useful light and glare.", + "Responsive/motion: Stack time slices beneath a fixed section on narrow screens and preserve a still noon state." + ], + "spark": "A winter beam enters beneath a deep lintel, climbs a limewashed wall, and reaches a breakfast table at 08:12 before withdrawing into the stair by noon.", + "webLeverage": "Solar-position computation and a shader-backed section visualize exact daylight paths with numeric lux and glare summaries.", + "strength": "dual" + }, + { + "id": "architecture-inhabitable-space-ruin-inhabitation-layers", + "form": "an inhabited ruin, where new timber rooms touch ancient masonry lightly and daily life reveals rather than erases accumulated time", + "lineage": "Adaptive reuse, archaeological conservation, and reversible timber insertion into masonry ruins.", + "tags": [ + "ruin", + "adaptation", + "layers" + ], + "system": [ + "Palette/material: blackened masonry and lichen gray as ground, warm birch timber for every new insertion, a thin brass shadow-gap line marking where eras touch", + "Type/composition: archaeological label sans with dated strata numerals, old fabric captioned in gray and additions in warm black, layers ranked by age", + "Topology/navigation: Move between historical layers through joints, gaps, scars, and reversible additions.", + "Controls/state: Peel construction phases, compare touch points, and reveal what each intervention preserves.", + "Responsive/motion: Align archival section, present fabric, and new occupation in a phone-width layered viewer." + ], + "spark": "A warm birch stair floats a handspan from a blackened stone wall; at sunset its shadow briefly completes the outline of a vanished roof before entering a new reading room.", + "webLeverage": "Registered archival imagery and a semantic layer comparator let users inspect change while retaining dates, evidence, and uncertainty.", + "strength": "world" + }, + { + "id": "architecture-inhabitable-space-versailles-bosquet-vistas", + "form": "the gardens of Versailles as a choreographed landscape of axial vistas, embroidered parterres, concealed bosquets, hydraulic fountains, forced perspective, and rooms made from living walls", + "lineage": "André Le Nôtre's landscape architecture, seventeenth-century French garden craft, hydraulic engineering, court spectacle, archival plans, and contemporary conservation", + "tags": [ + "versailles-gardens", + "choreographed-vistas", + "hydraulic-spectacle" + ], + "system": [ + "Palette/material: clipped hedge green and raked gravel buff as ground, gilt bronze and fountain-spray white as active accents, marble statuary gray at fixed points", + "Type/composition: engraved garden-plan capitals with hairline flourishes, labels set along axial sightlines, parterres composed in strict mirrored symmetry", + "Topology/navigation: Move from palace axis to parterre, cross-vista, bosquet threshold, fountain chamber, canal horizon, and the labor beneath the spectacle.", + "Controls/state: Walk, reveal, align, compare plans, follow water, and inspect dormant, flowing, private, ceremonial, altered, and conserved states.", + "Responsive/motion: Turn each axial reveal into a measured garden sequence on phones" + ], + "spark": "From the palace terrace, clipped geometry appears infinite; descending one axis breaks the perfection into secret green theaters just as a hundred fountains wake in sequence.", + "webLeverage": "Registered historic maps, solar and perspective computation, spatial fountain audio, deep-linked walks, and conservation overlays let users examine beauty, power, labor, and water demand together.", + "strength": "world" + }, + { + "id": "exhibition-museum-curation-provenance-ribbon", + "form": "a provenance ribbon, where ownership, extraction, exchange, repair, silence, and restitution fold through one object's life without becoming a bureaucratic table", + "lineage": "Object-biography research, restitution practice, and archival chain-of-custody.", + "tags": [ + "provenance", + "journey", + "restitution" + ], + "system": [ + "Palette/material: archival buff as ground, one continuous red silk ribbon as the custody line, gaps rendered as gray unwoven thread, dealer stamps in fading ink", + "Type/composition: ledger serifs with dated small caps at every fold, known passages in solid type and inferred ones in hairline, one ribbon-led column", + "Topology/navigation: Follow the ribbon through dated custody, geographic movement, gaps, and competing claims.", + "Controls/state: Open evidence at any fold, compare accounts, and distinguish known, inferred, and disputed passages.", + "Responsive/motion: Unroll the ribbon vertically on phones and keep uncertainty attached to every transition." + ], + "spark": "A red silk ribbon leaves a temple, disappears for forty years, reappears beneath a dealer's stamp, and splits at the present into display, return, and unresolved claim.", + "webLeverage": "A citation-backed temporal graph, map projection, and revision history reveal provenance claims without implying certainty the evidence lacks.", + "strength": "dual" + }, + { + "id": "architecture-places-azulejo-station-hall", + "form": "an azulejo station hall, thousands of tin-glazed tiles painting history in cobalt on white, narrative panels framed by scrolled borders, the tile grid's seams running straight through every scene like a truth the painting admits", + "lineage": "Portuguese azulejo tradition, Jorge Colaço's São Bento station panels, tin-glaze cobalt narrative tilework", + "tags": [ + "cobalt-monochrome", + "framed-panels", + "tile-seams" + ], + "system": [ + "Palette/material: cobalt blue on milk white only, painted in washes and line, mustard yellow permitted solely inside the border frames, grout seams gridding every surface", + "Type/composition: captions brushed in roman caps inside cartouche frames, scenes composed straight across tile boundaries, scrolled pattern borders separating panel from panel", + "Topology/navigation: the hall unrolls as a sequence of framed narrative panels; borders are section breaks, patterned friezes carry minor content, and you walk the story in order", + "Controls/state: the active panel deepens its cobalt while neighbors fade toward glaze white, and missing content reads as a blank white tile awaiting its painter", + "Responsive/motion: panels recompose by whole tiles, never fractional ones; motion is a wash of blue filling the line work like glaze in the kiln" + ], + "spark": "You step off the train into a hall where a cavalry battle sixty tiles wide breaks over the doorway, cobalt horses charging straight through the grid's seams, a painted cartouche naming the year.", + "webLeverage": "css grid snaps every layout decision to whole-tile units while svg line art fills with animated cobalt washes", + "strength": "world" + } + ] + }, + { + "id": "games-toys-physics-play", + "label": "Games, Toys, Physics & Play", + "well": "performed-time", + "description": "Rules, toys, puzzles, chance, skill, gravity, collaboration, and physical delight that invite active experimentation.", + "concepts": [ + { + "id": "games-toys-physics-play-magnetic-marble-cosmos", + "form": "a magnetic marble cosmos, where steel spheres bend paths around hidden poles and every collision leaves a temporary orbit", + "lineage": "Magnetic construction toys, marble runs, and tabletop orbital experiments.", + "tags": [ + "magnetism", + "marble", + "orbit" + ], + "system": [ + "Palette/material: deep space black felt as ground, chrome marble silver for bodies, hidden poles glowing ember red and cold blue, the active orbit traced in thin white", + "Type/composition: observatory-style monospaced readouts for strength and speed, labels orbiting their objects, the field open and unruled like a star chart", + "Topology/navigation: Explore playfields by magnetic wells, launch gates, orbit families, and reachable targets.", + "Controls/state: Place poles, set strength, launch marbles, and rewind surprising collisions.", + "Responsive/motion: Scale the field to one-hand play on phones and offer trajectory ghosts instead of continuous motion." + ], + "spark": "A silver marble enters a black field, curves around an unseen red pole, slingshots through a ring of smaller moons, and settles into a wobbling blue orbit.", + "webLeverage": "A deterministic physics engine, touch launch gestures, and replayable seeds make magnetic experiments shareable and reproducible.", + "strength": "composition" + }, + { + "id": "games-toys-physics-play-mechanical-puzzle-cutaway", + "form": "a mechanical puzzle cutaway, where sliders, pins, cams, hidden channels, and false moves reveal a secret sequence through touch and sound", + "lineage": "Japanese puzzle-box joinery, mechanical locks, and sequential-discovery toys.", + "tags": [ + "puzzle", + "mechanism", + "cutaway" + ], + "system": [ + "Palette/material: oiled walnut and brass as the surface world, cutaway interiors in blueprint blue, the one movable part warmed to polished gold", + "Type/composition: engraved serif numerals stamped on brass parts, exploded-view captions in small caps, composition split between closed box and sectioned interior", + "Topology/navigation: Explore visible affordances beside hidden mechanical dependencies and reversible dead ends.", + "Controls/state: Push, turn, listen, undo, and request progressively deeper cutaway hints.", + "Responsive/motion: Use large tactile gestures on phones and preserve discovery by revealing internals only on demand." + ], + "spark": "A walnut box refuses three obvious pulls; rotating one brass disc lifts a concealed pin, opens a diagonal channel, and releases the lid with a soft double click.", + "webLeverage": "Constraint-based mechanism simulation, spatial sound cues, and layered hints support satisfying physical reasoning without random guessing.", + "strength": "composition" + }, + { + "id": "games-toys-physics-play-room-height-marble-run", + "form": "a room-height transparent marble run assembled by many hands, where gravity, switches, lifts, funnels, near misses, and returning paths turn one released sphere into public suspense", + "lineage": "Marble-run play, science-museum interactives, rolling-ball sculpture, transparent mechanical toys, and communal chain-reaction building", + "tags": [ + "marble-run", + "causal-play", + "shared-construction" + ], + "system": [ + "Palette/material: clear acrylic track over workshop white, marbles in cobalt and amber glass, brass bowls and gates, the armed gate ringed in signal red", + "Type/composition: museum-label sans in small caps naming each segment, an event ledger set in monospaced rows, composition stacked by height like the run itself", + "Topology/navigation: Follow source, track segment, junction, lift, holding gate, reunion, failure point, and finish while alternate routes stay visible.", + "Controls/state: Build, test, divert, catch, rewind, and compare untested, armed, moving, jammed, recovered, and completed states.", + "Responsive/motion: Present one causal chain at a time on phones" + ], + "spark": "A cobalt marble drops six meters through clear track, circles a brass bowl, misses one gate by a breath, then arrives seconds later to release three waiting amber spheres above the crowd.", + "webLeverage": "Deterministic browser physics, realtime collaborative building, replayable seeds, constraint checks, and an accessible event trace let groups construct and debug shared runs rather than merely watch animation.", + "strength": "composition" + }, + { + "id": "games-toys-physics-play-brick-build-instructions", + "form": "a brick build-instruction book, numbered exploded steps on sky-blue pages, 1:1 piece call-outs in a cornered box, a stud grid ruling every alignment, wordless arrows teaching assembly", + "lineage": "Lego building instructions, stud geometry, wordless technical illustration", + "tags": [ + "stud-grid", + "numbered-steps", + "exploded-view" + ], + "system": [ + "Palette/material: instruction-page sky blue as the ground, black keyline ink outlining every piece, brick red for the new part in each step, yellow held in the inventory", + "Type/composition: oversized step numerals are almost the only text, wordless arrows do the teaching, and every element aligns to the stud grid module", + "Topology/navigation: numbered spreads in strict sequence, a parts inventory up front, 1:1 call-out boxes zooming the pieces a step introduces", + "Controls/state: prior assembly renders ghosted, the new pieces arrive bright with an arrow to their seat, done means clicked down flush on the studs", + "Responsive/motion: spreads split into single step frames on small screens, call-outs pin to a corner; pieces animate down along their arrows" + ], + "spark": "You flatten the booklet on the carpet, tip the numbered bag out, and match a red brick to its 1:1 call-out against the page; the arrow shows the seat, the stud grid agrees, and the piece clicks down exactly where it must.", + "webLeverage": "svg exploded-step diagrams with dashed guide arrows, css grid locked to a stud-module unit, animation dropping new pieces along their arrows", + "strength": "dual" + }, + { + "id": "games-toys-physics-play-hanafuda-flower-months", + "form": "a hanafuda deck laid out by month, forty-eight small stiff cards, each flower month a suit of four, flat vermilion, ink black, and mustard gold motifs with no numerals anywhere, worth read from imagery alone", + "lineage": "Japanese hanafuda publishing, Nintendo's 1889 card workshop, koi-koi play, twelve flower-month suits", + "tags": [ + "month-suits", + "pictorial-rank", + "capture-bank" + ], + "system": [ + "Palette/material: cream card faces bordered in black, motifs in flat vermilion, ink black, and mustard gold, purple held for the rare, backs a plain lacquer red", + "Type/composition: no numerals on the cards, rank is pictorial, bright animals and poetry ribbons over plain grass cards, month names set small in english caps beneath each row", + "Topology/navigation: the year is the map, twelve month rows of four; captured pairs gather in a bank by month, and the yaku list names every scoring combination", + "Controls/state: matching means month meets month, a captured card slides face up to your bank, and calling koi-koi risks the round to keep going, marking the multiplier", + "Responsive/motion: month rows stack in season pairs on phones; motion is the sharp snap of a small stiff card landing" + ], + "spark": "Under a kitchen bulb the january pines land beside the crane and someone whispers koi-koi, betting the whole round that february's plum and the red poetry ribbon will come home too.", + "webLeverage": "css grid holds the twelve-month lattice while touch drag matches suits and a snap animation banks each capture", + "strength": "dual" + } + ] + }, + { + "id": "festivals-public-life", + "label": "Festivals & Public Life", + "well": "performed-time", + "description": "Ceremony, festival, gathering, participation, civic space, shared symbols, and collective experiences people make together.", + "concepts": [ + { + "id": "ritual-ceremony-festival-lantern-river-vows", + "form": "a lantern river of vows, where handwritten hopes gather into a luminous current and each remains private until its maker chooses release", + "lineage": "River-lantern remembrance rites, paper-lantern craft, and communal vow offerings.", + "tags": [ + "lantern", + "river", + "vow" + ], + "system": [ + "Palette/material: black river water as ground, warm paper-lantern gold for each vow, bridge-lamp amber at the edges, the writer's own lantern held in brighter flame", + "Type/composition: brush-written vows kept private inside plain lantern panels, interface labels in quiet small sans, composition a slow horizontal current line", + "Topology/navigation: Move between preparation, gathering shore, release, confluence, and downstream remembrance.", + "Controls/state: Write privately, choose visibility, release, and withdraw a digital trace without altering the physical act.", + "Responsive/motion: Let one lantern occupy the phone viewport while the communal river remains optional and calm." + ], + "spark": "One paper lantern touches black water, turns beside a hundred others, and carries a single unread gold line beneath a bridge crowded with silent witnesses.", + "webLeverage": "Private local drafting, consented projection, and ephemeral shared events support participation without turning vows into permanent content.", + "strength": "composition" + }, + { + "id": "ritual-ceremony-festival-mask-unveiling-sequence", + "form": "a mask-unveiling sequence, where carving, painting, concealment, entrance, dance, voice, and removal transform a face through carefully held stages", + "lineage": "Carved-mask performance, ceremonial reveal, and embodied transformation rites.", + "tags": [ + "mask", + "unveiling", + "transformation" + ], + "system": [ + "Palette/material: torchlit umber and carved-wood black as ground, indigo cloth for concealment, ochre and bone pigment on the mask, the permitted layer edged in firelight gold", + "Type/composition: ceremonial stage names in wide letterspaced caps, context notes in a quiet serif, composition a strict horizontal procession of stages", + "Topology/navigation: Move through making, preparation, appearance, action, withdrawal, and interpretation with cultural permissions intact.", + "Controls/state: Reveal only the current permitted layer, hear named context, and return to concealment.", + "Responsive/motion: Use discrete ceremonial stages on phones and never turn restricted knowledge into a visual reward." + ], + "spark": "A dark carved face waits behind indigo cloth, appears first in profile beneath torchlight, speaks through a reed voice, and is removed only after the circle closes.", + "webLeverage": "Role-aware access, time-coded media, and community-authored context preserve boundaries while supporting public understanding.", + "strength": "composition" + }, + { + "id": "social-participatory-public-space-communal-repair-tapestry", + "form": "a communal repair tapestry, where broken chairs, radios, coats, bicycles, and stories leave colored mends in a public fabric of care", + "lineage": "Repair cafes, visible-mending circles, and communal textile storytelling.", + "tags": [ + "repair", + "tapestry", + "care" + ], + "system": [ + "Palette/material: worn wool gray as the public fabric ground, mends in bright patches of sashiko red, silver, and marigold thread, the newest stitch shown still threaded", + "Type/composition: hand-stitched object names beside plain workshop sans instructions, the field composed as a patch grid that densifies where repairs cluster", + "Topology/navigation: Move between objects, repair skills, material needs, local helpers, and the visible communal mend.", + "Controls/state: Offer an object or skill, document a repair, and add its stitch without ranking contribution value.", + "Responsive/motion: Use object-to-mend pairs on phones and keep accessible repair instructions beside visual stories." + ], + "spark": "A torn red coat becomes a bright patch, a repaired fan contributes a silver spiral, and the square's tapestry slowly records hundreds of objects kept in use.", + "webLeverage": "Local matching, repair media, and collaborative textile rendering connect face-to-face making with an evolving public record.", + "strength": "composition" + }, + { + "id": "ritual-ceremony-festival-papel-picado-canopy", + "form": "a papel picado canopy strung wall to wall over a fiesta street, chiseled tissue panels of magenta, orange, cyan, and lime whose cut silhouettes throw moving shadow lace on the ground", + "lineage": "Mexican papel picado craft, Aguascalientes banner workshops, and Day of the Dead streetscapes.", + "tags": [ + "cut-paper", + "banner-row", + "shadow-lace" + ], + "system": [ + "Palette/material: saturated magenta, orange, cyan, and lime tissue against open sky, cut negative space reading as white light, shadow lace in soft gray as the ground texture", + "Type/composition: letterforms chiseled from the paper itself as stencil-cut silhouettes, panels ranked in strung rows, one motif per panel on a repeating banner grid", + "Topology/navigation: the strung line is the axis; panels hang in ordered rows overhead and wayfinding means walking the street beneath one banner run at a time", + "Controls/state: the active panel pulls taut and brightens while its neighbors tremble, selection punches a new silhouette, tissue tears mark destructive actions", + "Responsive/motion: narrow screens stack panels as one vertical string, motion is wind tremble and drifting shadow lace" + ], + "spark": "Overhead, a hundred chiseled banners tremble in the afternoon wind; a magenta skeleton dances beside a cyan dove, and the whole street floor ripples with their traveling shadow lace.", + "webLeverage": "CSS masks and SVG cutwork render true negative-space silhouettes, with blend modes projecting animated shadow lace onto the page ground.", + "strength": "world" + } + ], + "retired": true + }, + { + "id": "memory-ruins", + "label": "Memory & Ruins", + "well": "performed-time", + "description": "Archives, ruins, traces, repair, erasure, testimony, accumulated time, and the evidence through which the past remains present.", + "concepts": [ + { + "id": "memory-palimpsest-ruins-archive-demolished-street-ghost-grid", + "form": "a demolished-street ghost grid, where former doors, rooms, shopfronts, trees, and neighbor routes hover at true scale across a changed block", + "lineage": "Urban archaeology, ghost maps, cadastral overlays, and displacement testimony.", + "tags": [ + "demolition", + "street", + "ghost" + ], + "system": [ + "Palette/material: present-day asphalt gray as ground, vanished walls in pale chalk white, documented rooms in archive sepia, inferred space hatched in faint blue", + "Type/composition: cadastral plan numerals and surveyor's condensed caps for parcels, testimony set in a quiet serif, composition ruled by the true-scale street grid", + "Topology/navigation: Traverse the present block alongside former parcels, interiors, routes, and community landmarks.", + "Controls/state: Shift date, align evidence, enter a remembered threshold, and distinguish documented from inferred space.", + "Responsive/motion: Pair map, street view, and archival section on phones without requiring camera overlays." + ], + "spark": "Walking across a parking lot, a visitor reaches the exact threshold of a vanished bakery; pale walls rise waist-high and a remembered morning route continues through the present fence.", + "webLeverage": "Georeferenced plans, optional augmented overlays, and oral testimony reconstruct spatial memory with visible evidence confidence.", + "strength": "composition" + }, + { + "id": "memory-palimpsest-ruins-archive-fire-damaged-film-recovery", + "form": "a fire-damaged film archive, where fused reels, buckled emulsion, singed edge codes, surviving frames, and remembered scenes rebuild a lost collection", + "lineage": "Nitrate-film rescue, moving-image conservation, frame identification, disaster recovery, and community archival memory.", + "tags": [ + "film-archive", + "material-damage", + "reconstruction" + ], + "system": [ + "Palette/material: charcoal black fused reels on cold examination gray, surviving frames in scorched amber and silver nitrate, the matched frame ringed in conservation green", + "Type/composition: singed edge codes and leader numerals in stamped monospace, catalog entries in plain archival sans, composition ruled as contact strips of frames", + "Topology/navigation: Move from storage shelf to reel, scene, frame, and the evidence chain that identifies each surviving fragment.", + "Controls/state: Separate frozen, fused, scanned, unidentified, matched, restored, and irrecoverable material without hiding loss.", + "Responsive/motion: Recompose damaged reels as contact strips on narrow screens; animate only recovered frame sequences with explicit playback." + ], + "spark": "A fused black reel opens under cold light; three blistered frames reveal a red coat crossing a vanished station, and an elderly viewer supplies the scene that heat erased between them.", + "webLeverage": "Frame similarity, collaborative identification, synchronized oral testimony, and provenance-linked restoration history let scattered survivors rebuild a collection without inventing missing footage.", + "strength": "world" + }, + { + "id": "memory-palimpsest-ruins-archive-floodline-house-memory", + "form": "a floodline house memory, where water marks, repaired plaster, moved furniture, family testimony, and future refuge accumulate through rooms", + "lineage": "Flood-height marks, vernacular house repair, and family disaster testimony.", + "tags": [ + "flood", + "house", + "waterline" + ], + "system": [ + "Palette/material: plaster white walls as ground, the floodline in silt brown as the ruling mark, repair patches in mismatched blue, testimony highlights in lamp amber", + "Type/composition: pencil height marks and dated captions in a survey hand, family accounts in warm serif, composition ruled by the horizontal waterline through every room", + "Topology/navigation: Move room by room through flood height, damage, repair, displacement, and adaptation.", + "Controls/state: Compare events, hear household accounts, and test future water against changed spaces.", + "Responsive/motion: Pair each room section with testimony on phones and keep trauma-sensitive content optional." + ], + "spark": "A brown line crosses the kitchen wall above a child's height; lifting it reveals the table floating in 1986, blue repair plaster from 2004, and a new stair to refuge built last winter.", + "webLeverage": "Registered household media, elevation data, and scenario overlays preserve lived memory while supporting concrete resilience choices.", + "strength": "composition" + }, + { + "id": "memory-palimpsest-ruins-archive-vanished-theater-seat-field", + "form": "a vanished theater seat field, where numbered chairs, sightlines, applause, programs, demolition dust, and recollection rebuild an absent auditorium", + "lineage": "Theater archaeology, seat-plan archives, and oral histories of vanished venues.", + "tags": [ + "theater", + "seat", + "absence" + ], + "system": [ + "Palette/material: demolition-lot black as ground, seat numbers glowing velvet red, the chosen seat's restored view in warm stage gold, uncertainty dimmed to smoke gray", + "Type/composition: marquee-lettered headings over ticket-stub serif numerals, composition a raked seat-plan grid with one restored proscenium view above", + "Topology/navigation: Navigate the absent theater through seat, sightline, performance, witness, and surviving fragment.", + "Controls/state: Choose a seat, align memory with evidence, and compare events without pretending full reconstruction.", + "Responsive/motion: Present one seat view and the missing room outline together on phones with user-triggered sound." + ], + "spark": "Rows of empty red numbers glow on a dark lot; choosing seat G14 restores its view of a 1932 curtain and the remembered roar of opening night for twelve seconds.", + "webLeverage": "Archival plans, spatial audio, panoramic reconstruction, and uncertainty layers connect individual memories to a legible absent volume.", + "strength": "composition" + }, + { + "id": "memory-palimpsest-ruins-archive-ghost-sign-gable", + "form": "a brick gable of layered ghost signs, decades of hand-painted advertisements fading over one another with wall-dog lettering stacked in translucent strata that surface as newer paint fails", + "lineage": "Wall-dog sign painting trade, American ghost sign survey photography, and painted brick advertising.", + "tags": [ + "layered-lettering", + "brick-wall", + "palimpsest" + ], + "system": [ + "Palette/material: mortar-brown brick as ground, lettering in mineral white and oxide red pressed into the texture, the layer in focus lifted to fresh lead-paint opacity", + "Type/composition: wall-dog letterforms, fat slab caps over showcard script, each campaign a horizontal band scaled to the gable, newer strata partly covering older", + "Topology/navigation: one wall holds everything; depth is time, and moving between layers means fading strata up and down through the same fixed brick field", + "Controls/state: the selected campaign paints up to full opacity while others thin to stains, zones under the eaves stay legible, edits weather in rather than snap", + "Responsive/motion: the gable crops to one campaign band per narrow screen, motion is slow paint fade between strata" + ], + "spark": "Late sun rakes a warehouse gable; under the eaves a mineral-white flour ad still shouts, while below it an oxide-red tobacco script surfaces through a fading 1950s soda campaign.", + "webLeverage": "Layered canvas compositing and CSS blend modes stack translucent paint strata over a brick texture, with opacity scrubbed per campaign layer.", + "strength": "world" + } + ], + "retired": true + } + ] +} diff --git a/functions/api/_data/concept-reviews.json b/functions/api/_data/concept-reviews.json new file mode 100644 index 000000000..5c95f6182 --- /dev/null +++ b/functions/api/_data/concept-reviews.json @@ -0,0 +1,2201 @@ +{ + "schemaVersion": 2, + "comment": "Human review decisions keyed by stable concept ID. Missing entries are pending and ineligible for challenger sampling. formHash fingerprints the reviewed content; a mismatch marks the review stale.", + "reviews": { + "architecture-inhabitable-space-acoustic-cloister": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:48:18.430Z", + "formHash": "4e2beac1f509" + }, + "architecture-inhabitable-space-daylight-section": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:48:28.467Z", + "formHash": "69ed80f9b28f", + "rating": 2 + }, + "architecture-inhabitable-space-ruin-inhabitation-layers": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:06:47.630Z", + "formHash": "90ab06138e78", + "note": "didn't quite translate" + }, + "architecture-inhabitable-space-versailles-bosquet-vistas": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:07:09.591Z", + "formHash": "d1a4b4fe0746", + "rating": 2 + }, + "brand-identity-canon-brodovitch-bazaar-spread": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:54:19.287Z", + "formHash": "c6c597e1b6e8", + "rating": 2 + }, + "brand-identity-canon-channel-junction-ident": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:16:28.462Z", + "formHash": "5d4973946ca1", + "note": "mhh the model had no idea what to do with that" + }, + "brand-identity-canon-ddb-think-small-page": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:54:35.445Z", + "formHash": "33b364d204ae", + "note": "too simplistic" + }, + "brand-identity-canon-fletcher-wit-poster": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:54:43.206Z", + "formHash": "2dc541c5091b", + "rating": 2 + }, + "brand-identity-canon-girard-color-compendium": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:55:12.538Z", + "formHash": "45c419f8e525", + "note": "idk doesn't come together that nicely" + }, + "brand-identity-canon-kalman-colors-magazine": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:55:24.933Z", + "formHash": "246a338e0d1b", + "note": "no clear identity" + }, + "brand-identity-canon-push-pin-poster": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:56:20.061Z", + "formHash": "6927cf346107", + "rating": 3 + }, + "brand-identity-canon-saville-catalog-sleeve": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:56:54.008Z", + "formHash": "eb6ddaa651a2", + "rating": 3 + }, + "brand-identity-canon-scher-street-typography": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:57:05.514Z", + "formHash": "f8e89b86e282", + "rating": 3 + }, + "broadcast-programming-teletext-service": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:54:27.158Z", + "formHash": "0cb3bb9bb40a", + "rating": 3 + }, + "cinema-cinematography-editing-hand-processed-film-bloom": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T03:07:07.811Z", + "formHash": "985cf55fa6bb", + "rating": 2 + }, + "cinema-cinematography-editing-multiplane-cel-dawn": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:05:03.402Z", + "formHash": "1f9e37608f1f", + "rating": 3 + }, + "clay-ceramics-fracture-celadon-ice-crackle": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:36:23.751Z", + "formHash": "23e1d842adcc", + "note": "too narrow" + }, + "clay-ceramics-fracture-coiled-earth-tower": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:54:15.393Z", + "formHash": "59ba7a2a1e17", + "rating": 2 + }, + "clay-ceramics-fracture-glaze-river-shelf": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T03:04:57.012Z", + "formHash": "f4c6084cbc9d", + "rating": 3 + }, + "clay-ceramics-fracture-interlocking-vault-tile": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:36:35.646Z", + "formHash": "af55b5a07535", + "note": "too narrow" + }, + "clay-ceramics-fracture-porcelain-lantern-skin": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:36:50.489Z", + "formHash": "7819084299b3", + "note": "doesn't translate well" + }, + "clay-ceramics-fracture-raku-smoke-flash": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T03:05:02.304Z", + "formHash": "ec5af4e1fb10", + "rating": 3 + }, + "clay-ceramics-fracture-saggar-ember-map": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:36:56.422Z", + "formHash": "ab2e2437b5a0" + }, + "clay-ceramics-fracture-talavera-courtyard": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:30:50.765Z", + "formHash": "b14de730b649", + "rating": 2 + }, + "clouds-storms-auroras-auroral-curtain": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:34:08.097Z", + "formHash": "af2b53ba3650", + "note": "transferred to composition catalog as collective-fields-folded-curtain" + }, + "clouds-storms-auroras-hurricane-eye-wall": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:25:32.597Z", + "formHash": "7ad02bb7665f" + }, + "clouds-storms-auroras-iridescent-cloud-edge": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:25:39.354Z", + "formHash": "37606f28dfe5", + "rating": 2 + }, + "clouds-storms-auroras-monsoon-wall-arrival": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:25:45.033Z", + "formHash": "c1ea8d378af1" + }, + "clouds-storms-auroras-supercell-cathedral": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:25:49.996Z", + "formHash": "2b49c25232c2" + }, + "craft-making-glazier-colorfield-partition": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:13:24.481Z", + "formHash": "ff39c0843823", + "rating": 2 + }, + "craft-making-planished-copper-wall": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:13:13.154Z", + "formHash": "190c11312113", + "note": "still doesn't quite work" + }, + "design-canon-after-hours-galleria": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:09:10.536Z", + "formHash": "259b64752642", + "note": "didn't translate well into a full visual system" + }, + "design-canon-alhambra-zellige-court": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:04:11.069Z", + "formHash": "f5cccab6ee64", + "note": "this is pretty cool, the actual concept is meh but i love that it is middle eastern, i'd love some more inspiration from around the world, not just western centric visual systems", + "rating": 2 + }, + "design-canon-art-nouveau-metro-threshold": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:36:50.522Z", + "formHash": "c9d127b251b5", + "rating": 3 + }, + "design-canon-bauhaus-foundation-workshop": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:36:54.615Z", + "formHash": "a73dc2846c6b", + "rating": 2 + }, + "design-canon-braun-calibration-bench": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T18:01:47.166Z", + "formHash": "7453eccbdb22" + }, + "design-canon-brutalist-conservatory-terrace": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T20:56:58.341Z", + "formHash": "67490b9a50cf", + "rating": 1 + }, + "design-canon-constructivist-agit-train": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:49:16.809Z", + "formHash": "32d737308578", + "rating": 3 + }, + "design-canon-creator-hardware-bench": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T20:50:50.882Z", + "formHash": "05b73d84a82a", + "rating": 3 + }, + "design-canon-dancheong-bracket-polychrome": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:18:46.217Z", + "formHash": "43655dc9ca4a", + "note": "this didn't translate well into ui" + }, + "design-canon-deco-cinema-lobby": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:38:38.339Z", + "formHash": "a5bd48e45fde", + "rating": 2 + }, + "design-canon-factory-silkscreen-loft": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T20:57:56.845Z", + "formHash": "8f2773f0899b", + "rating": 3 + }, + "design-canon-futurist-bolted-book": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:49:12.615Z", + "formHash": "fc18058e933b", + "rating": 2 + }, + "design-canon-googie-starburst-diner": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:44:46.918Z", + "formHash": "df7257e6c87e", + "rating": 3 + }, + "design-canon-hoffmann-gridsmith-showroom": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:47:39.058Z", + "formHash": "1324f3010a36", + "rating": 2 + }, + "design-canon-liquid-light-ballroom": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:47:35.740Z", + "formHash": "8d63cb13d10a", + "rating": 3 + }, + "design-canon-memphis-showroom-morning": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T20:58:41.495Z", + "formHash": "3aec0d34dca4", + "rating": 3 + }, + "design-canon-morris-pattern-drawing-room": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T20:58:50.133Z", + "formHash": "139b001f373f" + }, + "design-canon-nasa-worm-standards-room": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T20:59:13.705Z", + "formHash": "b73024c53e46" + }, + "design-canon-neon-mall-nocturne": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:19:23.896Z", + "formHash": "bd7eed5249a6", + "note": "didn't quite do a good job in the image gen, unfortunately" + }, + "design-canon-piazza-italia-colonnade": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T20:59:20.261Z", + "formHash": "47cc86967fb6" + }, + "design-canon-punk-pasteup-table": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:51:34.866Z", + "formHash": "cceb2528dbff", + "rating": 3 + }, + "design-canon-raygun-layout-desk": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:45:37.503Z", + "formHash": "f40bff13d6c8", + "rating": 3 + }, + "design-canon-rietveld-sliding-house": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:51:36.777Z", + "formHash": "45e1bcfc8efa", + "rating": 3 + }, + "design-canon-riley-moire-gallery": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:49:25.027Z", + "formHash": "303df6128155", + "rating": 2 + }, + "design-canon-shaker-meeting-room": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:00:00.087Z", + "formHash": "6f794747fa27" + }, + "design-canon-streamliner-observation-lounge": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:00:24.038Z", + "formHash": "7d49056ebc5a", + "rating": 2 + }, + "design-canon-sunken-conversation-pit": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:01:13.662Z", + "formHash": "934359ec11ac", + "rating": 1 + }, + "design-canon-suprematist-icon-corner": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:51:56.459Z", + "formHash": "a942b09af803" + }, + "design-canon-swiss-grid-poster-wall": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:51:58.760Z", + "formHash": "057473a2bf3e", + "rating": 2 + }, + "design-canon-vaporwave-mall-atrium": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:02:01.903Z", + "formHash": "2013eab6fdea", + "note": "too kitschy. neon shopping mall would work, but the font here and accepts are terrible.." + }, + "design-canon-wegner-cabinetmaker-bench": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:02:19.462Z", + "formHash": "ac0297d20235", + "note": "doesn't translate well" + }, + "design-canon-y2k-translucent-lounge": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:46:01.585Z", + "formHash": "bdec2a066312", + "rating": 2 + }, + "digital-design-canon-antialiased-racing-league": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:07:28.662Z", + "formHash": "e83fa3a4d5e1", + "rating": 3 + }, + "digital-design-canon-aqua-liquid-desktop": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:07:37.683Z", + "formHash": "9555a2fa7a92" + }, + "digital-design-canon-console-dashboard-atmosphere": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:08:20.460Z", + "formHash": "6364dec2bc9e" + }, + "digital-design-canon-desktop-skin-workshop": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:10:13.087Z", + "formHash": "255600c1c178", + "note": "cool but not practical, dont think anyone would use it, at least the mobile ui" + }, + "digital-design-canon-gameboy-four-shade-field": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:51:18.583Z", + "formHash": "f456e19646e8", + "rating": 2 + }, + "digital-design-canon-greiman-hybrid-collage": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:51:24.896Z", + "formHash": "8bf7f5f6c3de", + "rating": 3 + }, + "digital-design-canon-metro-typographic-tiles": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:51:44.201Z", + "formHash": "6fe7451d25b9", + "rating": 2 + }, + "digital-design-canon-phosphor-line-atelier": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:09:33.022Z", + "formHash": "c3da2d5da335", + "note": "pretty boring system, monotonous" + }, + "digital-design-canon-skeuomorph-leather-studio": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:52:53.316Z", + "formHash": "5c6b3ecedc91", + "rating": 2 + }, + "digital-design-canon-utilitarian-antiweb": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:53:02.962Z", + "formHash": "fdcea37396f2" + }, + "digital-design-canon-vector-phosphor-arcade": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:53:21.291Z", + "formHash": "8d928a7cc936", + "note": "too game ui like" + }, + "digital-design-canon-winamp-skin-bazaar": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:53:43.974Z", + "formHash": "1a7a968532c0", + "note": "clever, but probably too specific" + }, + "dream-surreal-impossible-worlds-alphabet-storm": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T03:07:37.037Z", + "formHash": "4a4f84bcbe81", + "rating": 3 + }, + "dream-surreal-impossible-worlds-cloud-quarry": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:01:36.762Z", + "formHash": "da0fc8caf721", + "rating": 2 + }, + "dream-surreal-impossible-worlds-gravity-rain-garden": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:55:08.139Z", + "formHash": "7d0a1de7238a", + "rating": 3 + }, + "dream-surreal-impossible-worlds-luminescent-alien-understory": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:02:59.667Z", + "formHash": "07c7b83f92b6", + "note": "maybe some refining", + "rating": 2 + }, + "dream-surreal-impossible-worlds-moon-shadow-bazaar": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T03:05:34.272Z", + "formHash": "9b9db9cef377", + "rating": 2 + }, + "dream-surreal-impossible-worlds-sleeping-city-fold": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T03:07:52.979Z", + "formHash": "8d58264e3329", + "rating": 3 + }, + "earth-water-worlds-banded-agate-slice": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:12:49.601Z", + "formHash": "c1a0cec8ab14", + "note": "doesn't quite work" + }, + "editorial-sequence-montage-botanical-folio-season": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:35:49.699Z", + "formHash": "dd5d4dc258f9", + "rating": 2 + }, + "exhibition-museum-curation-provenance-ribbon": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:49:48.361Z", + "formHash": "457a6aae320b", + "rating": 2 + }, + "food-fermentation-culinary-theater-candlelit-potion-class": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:45:31.273Z", + "formHash": "3f086e7fbf35", + "note": "looks to kitschy/cheap" + }, + "food-fermentation-culinary-theater-chocolate-temper-crystal-river": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:45:43.040Z", + "formHash": "afe820ff33b4", + "note": "doesn't translate well" + }, + "food-fermentation-culinary-theater-pastry-lamination-geology": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:45:57.761Z", + "formHash": "7db883d29e1e", + "note": "too abstract" + }, + "food-fermentation-culinary-theater-pickling-brine-calendar": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:46:12.363Z", + "formHash": "b8899682531e", + "rating": 2 + }, + "food-fermentation-culinary-theater-sourdough-microbial-sky": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:46:18.364Z", + "formHash": "03b931710d68" + }, + "food-fermentation-culinary-theater-tea-steeping-color-clock": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:46:28.908Z", + "formHash": "bb51161029e8" + }, + "forests-canopies-mycelium-mangrove-amphibious-maze": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:57:25.187Z", + "formHash": "cfedcdd10daa" + }, + "galaxies-nebulae-deep-time-accretion-disk-threshold": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:31:22.179Z", + "formHash": "9f145b9da864", + "rating": 2 + }, + "games-toys-physics-play-brick-build-instructions": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:52:17.304Z", + "formHash": "917dd5fba436", + "rating": 3 + }, + "games-toys-physics-play-magnetic-marble-cosmos": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:51:22.652Z", + "formHash": "fd751da23f86", + "note": "too abstract" + }, + "games-toys-physics-play-mechanical-puzzle-cutaway": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:51:32.500Z", + "formHash": "1210db32b209" + }, + "games-toys-physics-play-room-height-marble-run": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:52:08.695Z", + "formHash": "daa27921734f" + }, + "generative-art-computational-color-chord-counterpoint": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T03:07:24.358Z", + "formHash": "fc5413547cbe", + "rating": 2 + }, + "geological-strata-crystals-basalt-column-organ": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:26:08.080Z", + "formHash": "298672933e14", + "rating": 1 + }, + "geological-strata-crystals-cave-speleothem-chronicle": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:26:32.777Z", + "formHash": "d9ffe1a62c39" + }, + "geological-strata-crystals-gem-lapidary-bench": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:30:40.356Z", + "formHash": "34f0cd960b55", + "note": "doesn't work well as a visual system" + }, + "geological-strata-crystals-geode-hidden-cathedral": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:27:22.209Z", + "formHash": "2e50213a6ef7", + "note": "good idea, want something with geodes or gemstones, but this one doesn't quite work" + }, + "geological-strata-crystals-salt-polygon-horizon": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:27:41.508Z", + "formHash": "5faf51465835" + }, + "glass-refraction-transparency-breath-blown-vessel": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:00:46.323Z", + "formHash": "f8830b60e717" + }, + "glass-refraction-transparency-fresnel-ring-beacon": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:37:16.207Z", + "formHash": "b4dd222cb2cc" + }, + "glass-refraction-transparency-leaded-rose-aperture": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:37:45.779Z", + "formHash": "962691597f4a", + "note": "stained-glass would be great, this one is a bit too gothic/religious" + }, + "glass-refraction-transparency-millefiori-section": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:37:50.699Z", + "formHash": "ef6ddaf36069" + }, + "glass-refraction-transparency-prismatic-caustic-nave": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:37:55.371Z", + "formHash": "462c547778b3" + }, + "glass-refraction-transparency-secular-stained-light": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:31:16.970Z", + "formHash": "91e17131f456", + "note": "a bit too gimmicky / confusing" + }, + "growth-metamorphosis-branching-fern-fiddlehead-unfurl": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:29:37.778Z", + "formHash": "e14f443351f6" + }, + "growth-metamorphosis-branching-ikebana-ma-arrangement": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:56:38.852Z", + "formHash": "db14b6c4d9d5", + "rating": 2 + }, + "ink-pigment-printmaking-cyanotype-shadow-herbarium": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:05:50.231Z", + "formHash": "b0f4bc97478c" + }, + "ink-pigment-printmaking-drybrush-reed-storm": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:36:01.279Z", + "formHash": "69d7f5e61f7b", + "rating": 3 + }, + "ink-pigment-printmaking-handscroll-and-seal": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:16:22.959Z", + "formHash": "e5e915df4c93", + "note": "didn't translate intto interesting visual ui, for some reason" + }, + "ink-pigment-printmaking-mezzotint-velvet-night": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:36:06.739Z", + "formHash": "2ab0422e5e71", + "rating": 2 + }, + "ink-pigment-printmaking-persian-miniature-page": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:15:11.814Z", + "formHash": "9ae736765f05", + "rating": 2 + }, + "ink-pigment-printmaking-screenprint-transparent-overlap": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:35:20.019Z", + "formHash": "3ef512775a5c", + "rating": 3 + }, + "kinetic-sculpture-automata-cam-drum-mechanical-garden": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:34:44.241Z", + "formHash": "0dd272024b42" + }, + "kinetic-sculpture-automata-crank-paper-menagerie": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:53:55.163Z", + "formHash": "c655bbc9672a", + "rating": 3 + }, + "kinetic-sculpture-automata-endless-column-rhythm": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:36:02.834Z", + "formHash": "0988633fee7f" + }, + "kinetic-sculpture-automata-escapement-tide-clock": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:34:52.694Z", + "formHash": "f8a0a1035255" + }, + "kinetic-sculpture-automata-infinity-polka-field": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:35:54.239Z", + "formHash": "44896bd5ebe9" + }, + "kinetic-sculpture-automata-tensegrity-breathing-column": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:35:31.170Z", + "formHash": "b89fa7b95332", + "rating": 2 + }, + "kinetic-sculpture-automata-water-cup-chain": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:35:39.343Z", + "formHash": "04ba13e17b4b" + }, + "kinetic-sculpture-automata-wind-vane-chorus": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:35:46.281Z", + "formHash": "33f4c9b24f6b" + }, + "light-shadow-caustics-indoor-weather-sun": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:34:33.172Z", + "formHash": "453a8ed9e1ef", + "rating": 2 + }, + "light-shadow-caustics-rain-night-cityscape": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:32:57.742Z", + "formHash": "2bfda34b228a", + "rating": 2 + }, + "light-shadow-caustics-skyspace-aperture-threshold": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:34:16.432Z", + "formHash": "5f8274732e17" + }, + "light-shadow-caustics-water-caustic-floor": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:33:24.369Z", + "formHash": "bb29f1144b09" + }, + "magnetism-electricity-plasma-ferrofluid-spike-crown": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:33:33.404Z", + "formHash": "2c742a4d6b47" + }, + "magnetism-electricity-plasma-hand-bent-neon-circuit": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:33:46.463Z", + "formHash": "6deca9771768", + "rating": 2 + }, + "magnetism-electricity-plasma-lichtenberg-fractal-scar": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:33:50.827Z", + "formHash": "2e1caa489825" + }, + "magnetism-electricity-plasma-magnetic-tape-memory-landscape": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:34:04.419Z", + "formHash": "8bf85892ee10" + }, + "mapping-navigation-celestial-navigation-instrument": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:13:28.983Z", + "formHash": "6921416fadd8", + "note": "pretty boring visual world, unfortunately" + }, + "medium-native-algorave-source-floor": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:16:05.853Z", + "formHash": "57329a80a72d", + "rating": 2 + }, + "medium-native-ansi-bbs-nightboard": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:57:21.479Z", + "formHash": "c4874503c74e", + "rating": 3 + }, + "medium-native-ascii-live-scene-render": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:57:29.043Z", + "formHash": "919c25d1c180", + "rating": 2 + }, + "medium-native-crt-arcade-pixel-glow": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:52:24.494Z", + "formHash": "cf23e6b68424", + "rating": 3 + }, + "medium-native-fluid-ink-basin": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:27:07.215Z", + "formHash": "9b2c65da871e", + "rating": 2 + }, + "medium-native-hypercard-stack-shoebox": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:57:54.525Z", + "formHash": "d545776af055", + "rating": 2 + }, + "medium-native-life-colony-petri-grid": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:58:01.797Z", + "formHash": "179cece9f4ec" + }, + "medium-native-lsystem-grammar-garden": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:27:23.682Z", + "formHash": "5f820c5f1a1f" + }, + "medium-native-mandelbrot-coastline-dive": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:58:09.514Z", + "formHash": "e21325eb7381" + }, + "medium-native-noise-flow-ink-field": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:58:21.196Z", + "formHash": "19f1e56efe45" + }, + "medium-native-one-bit-desktop": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:24:57.715Z", + "formHash": "078f9be8645a", + "rating": 3 + }, + "medium-native-scroll-driven-strata-essay": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:27:40.692Z", + "formHash": "d94487199c2e", + "note": "a bit too abstract" + }, + "medium-native-variable-font-bellows-press": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:34:08.082Z", + "formHash": "4e9e4d64ff96", + "note": "transferred to composition catalog as interaction-physics-bellows-breath" + }, + "medium-native-webring-homepage-lane": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:16:42.525Z", + "formHash": "b0c156291a7c", + "rating": 3 + }, + "memory-palimpsest-ruins-archive-demolished-street-ghost-grid": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:53:00.617Z", + "formHash": "a627c20ddcd4" + }, + "memory-palimpsest-ruins-archive-fire-damaged-film-recovery": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:53:27.886Z", + "formHash": "b09678ce3908" + }, + "memory-palimpsest-ruins-archive-floodline-house-memory": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:53:36.002Z", + "formHash": "01c4fd6ab208" + }, + "memory-palimpsest-ruins-archive-ghost-sign-gable": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:54:19.413Z", + "formHash": "f5b5c659b8e1", + "rating": 2 + }, + "memory-palimpsest-ruins-archive-vanished-theater-seat-field": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:54:09.932Z", + "formHash": "4d785c5d10c4", + "note": "the vanished part is weird" + }, + "metal-forging-patina-blacksmith-scale-shower": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:38:05.136Z", + "formHash": "31e86e3d626f", + "rating": 2 + }, + "metal-forging-patina-copper-lantern-souk": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:31:35.660Z", + "formHash": "8a2a8cf7e1a0", + "rating": 2 + }, + "metal-forging-patina-hammered-copper-vessel": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:38:33.261Z", + "formHash": "32ae979822ab", + "note": "i love this hammered copper, but somehow doesn't translate well" + }, + "metal-forging-patina-lost-wax-bronze-shell": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:38:38.572Z", + "formHash": "bf9cf4335b4f" + }, + "metal-forging-patina-mokume-gane-burl": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:38:54.922Z", + "formHash": "956c7ab1c8b2", + "note": "too narrow as a visual system" + }, + "metal-forging-patina-repousse-sun-relief": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:39:00.029Z", + "formHash": "fa8745252989" + }, + "metal-forging-patina-temper-color-ribbon": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:39:16.440Z", + "formHash": "8fc97c9c3397" + }, + "music-rhythm-sound-resonance-harmonic-lantern-field": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:47:09.423Z", + "formHash": "8a376ee2fbd0", + "note": "doesn't come together" + }, + "music-rhythm-sound-resonance-spectral-stained-glass": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:47:25.444Z", + "formHash": "cb664a3bc93e", + "note": "too narrow" + }, + "notation-diagram-systems-adinkra-symbol-cloth": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:18:24.759Z", + "formHash": "f6cc0126ce34", + "rating": 3 + }, + "notation-diagram-systems-chess-notation": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:08:46.774Z", + "formHash": "ef3862847f1c" + }, + "notation-diagram-systems-graphic-score": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:09:01.527Z", + "formHash": "954c666e9c1c" + }, + "notation-diagram-systems-guitar-tab": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:09:09.649Z", + "formHash": "0c6b3613a754" + }, + "notation-diagram-systems-heraldic-roll-of-arms": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:10:07.197Z", + "formHash": "21e4c76a20f9" + }, + "notation-diagram-systems-kamon-crest-system": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:17:05.116Z", + "formHash": "30f4b6c72b24", + "note": "didn't translate into a strong visual system" + }, + "notation-diagram-systems-knitting-chart": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:09:27.267Z", + "formHash": "4c3b1da1cd01" + }, + "notation-diagram-systems-labanotation": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:50:45.941Z", + "formHash": "93db538ae6b9", + "rating": 2 + }, + "notation-diagram-systems-orienteering-map": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T01:00:58.578Z", + "formHash": "d58c56e54f3a", + "rating": 2 + }, + "notation-diagram-systems-quipu-knot-ledger": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:17:53.536Z", + "formHash": "b3f82031da10", + "note": "looks a little meh" + }, + "notation-diagram-systems-star-atlas": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T01:00:54.481Z", + "formHash": "44c55b723e8c", + "rating": 2 + }, + "notation-diagram-systems-synoptic-map": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:09:58.805Z", + "formHash": "d923fa33ac7a" + }, + "notation-diagram-systems-thangka-mandala-cosmogram": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:16:37.088Z", + "formHash": "d9ff7c3fddbb", + "rating": 2 + }, + "orbits-eclipses-celestial-cycles-tidally-locked-world": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:55:57.204Z", + "formHash": "b4861250da03" + }, + "paper-folds-pleats-deployable-akari-light-sculpture": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:44:09.147Z", + "formHash": "35e43f8ace43", + "rating": 2 + }, + "paper-folds-pleats-deployable-curved-crease-shell": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:39:42.524Z", + "formHash": "f1dfd589d9ee", + "rating": 2 + }, + "paper-folds-pleats-deployable-kirigami-expansion-net": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:39:53.024Z", + "formHash": "4c96649cad2e" + }, + "paper-folds-pleats-deployable-miura-orbit-sheet": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:40:22.168Z", + "formHash": "73065a95ec32", + "rating": 3 + }, + "paper-folds-pleats-deployable-orizuru-crane-sequence": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T03:05:23.194Z", + "formHash": "45179e408ffa", + "rating": 3 + }, + "pop-culture-shelf-acid-rave-flyer": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T17:58:52.669Z", + "formHash": "9daf52c53f0e", + "note": "quite a look, but tasteless" + }, + "pop-culture-shelf-anime-command-center": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:17:00.644Z", + "formHash": "2f15dbd0a4ae", + "rating": 3 + }, + "pop-culture-shelf-arcade-marquee-row": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:17:17.653Z", + "formHash": "be3834a2a3a5", + "rating": 3 + }, + "pop-culture-shelf-bebop-title-card": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:17:34.812Z", + "formHash": "9b9dca89c000", + "rating": 3 + }, + "pop-culture-shelf-benday-comic-page": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:17:51.297Z", + "formHash": "d13bd725fde8", + "rating": 3 + }, + "pop-culture-shelf-blister-card-wall": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:18:40.160Z", + "formHash": "9009ba3c267d", + "note": "this is nice, but too extremely manly (the metal brush is no good). i'd love some more gender neutral action figure variants, or maybe even barbie / female like" + }, + "pop-culture-shelf-bollywood-painted-poster": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:23:05.779Z", + "formHash": "e73b32786cb1", + "rating": 3 + }, + "pop-culture-shelf-camcorder-overlay": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:23:30.108Z", + "formHash": "6a2ec4bf21b8", + "note": "pretty good but the 'recording indicator' is already an ai slop meme" + }, + "pop-culture-shelf-cassette-futurism-deck": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:23:51.902Z", + "formHash": "9d931778e58b", + "rating": 3 + }, + "pop-culture-shelf-cereal-box-aisle": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:19:26.344Z", + "formHash": "b277206f13be", + "rating": 2 + }, + "pop-culture-shelf-city-pop-airbrush": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:19:42.911Z", + "formHash": "0351a5c2ef86", + "rating": 3 + }, + "pop-culture-shelf-code-cascade-terminal": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:20:12.516Z", + "formHash": "78aa9e470149", + "rating": 2 + }, + "pop-culture-shelf-couture-doll-atelier": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:11:09.587Z", + "formHash": "55c635457cf6", + "rating": 2 + }, + "pop-culture-shelf-elbow-panel-console": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:20:21.387Z", + "formHash": "c03295e94c55", + "rating": 3 + }, + "pop-culture-shelf-endurance-livery-garage": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:20:45.808Z", + "formHash": "e2cf5e645c37", + "rating": 3 + }, + "pop-culture-shelf-eurostile-panel-computer": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:21:07.405Z", + "formHash": "3d8570929d01", + "note": "thought this would translate well, but the imagery sucks" + }, + "pop-culture-shelf-fashion-doll-dreamhouse": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:24:33.452Z", + "formHash": "5b2c00b753f3", + "note": "this one is a bit too over the top pink, but i would love to see some more alts that have feminine energy, including fashion-doll" + }, + "pop-culture-shelf-foil-stamped-deck": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:11:37.389Z", + "formHash": "2ae6aabe36ba", + "note": "very limited system" + }, + "pop-culture-shelf-football-kit-crest": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:21:18.086Z", + "formHash": "90223a8dae2c", + "rating": 2 + }, + "pop-culture-shelf-grand-tour-jersey-road": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:18:25.087Z", + "formHash": "017058257948", + "note": "not very distinct visually" + }, + "pop-culture-shelf-industrial-starship-terminal": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:21:29.922Z", + "formHash": "80d9f60e4933", + "rating": 3 + }, + "pop-culture-shelf-jingle-truck-art": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:20:18.580Z", + "formHash": "17deb25a8a66", + "rating": 3 + }, + "pop-culture-shelf-kaiju-broadcast-alert": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:22:14.420Z", + "formHash": "e30d52565f93", + "rating": 3 + }, + "pop-culture-shelf-magical-girl-transformation": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:25:38.839Z", + "formHash": "15ea1694c0e4", + "rating": 3 + }, + "pop-culture-shelf-magnetic-weather-board": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:17:41.250Z", + "formHash": "c2d18673aed1" + }, + "pop-culture-shelf-manga-screentone-page": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:22:32.172Z", + "formHash": "19b561ab581f", + "rating": 3 + }, + "pop-culture-shelf-neo-tokyo-neon-night": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:22:48.505Z", + "formHash": "3042a0e8d90e", + "rating": 3 + }, + "pop-culture-shelf-photocard-binder": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:23:06.085Z", + "formHash": "6de4cba7b3ec", + "rating": 3 + }, + "pop-culture-shelf-rebel-menu-interface": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:23:13.149Z", + "formHash": "a5dc48c6da3d", + "rating": 3 + }, + "pop-culture-shelf-rpg-dialog-window": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:23:28.000Z", + "formHash": "4aa26d6b57dd", + "rating": 2 + }, + "pop-culture-shelf-saturday-title-card": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:23:43.773Z", + "formHash": "fe429d29ebac", + "rating": 3 + }, + "pop-culture-shelf-shaw-brothers-freeze-title": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:17:56.399Z", + "formHash": "05cb3033b4df" + }, + "pop-culture-shelf-skate-deck-wall": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:23:53.620Z", + "formHash": "18be148b0a44", + "rating": 3 + }, + "pop-culture-shelf-starship-readout-grid": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:12:14.161Z", + "formHash": "eaa6395b7b17", + "note": "ok but no visual consistency at all, the two images are very different" + }, + "pop-culture-shelf-sticker-sheet-decoden": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:25:51.181Z", + "formHash": "487db979de97", + "rating": 3 + }, + "pop-culture-shelf-tcg-card-frame": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:24:25.434Z", + "formHash": "46ee311519d3", + "note": "good concept but this old game ui just looks a bit too cheap" + }, + "pop-culture-shelf-teen-magazine-quiz": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:30:22.781Z", + "formHash": "20789c603f03", + "rating": 3 + }, + "pop-culture-shelf-viewfinder-bracket-hud": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:12:33.210Z", + "formHash": "13e8f4ae3510", + "rating": 2 + }, + "pop-culture-shelf-wax-pack-card": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:24:43.351Z", + "formHash": "9680eedcf515", + "rating": 2 + }, + "pop-culture-shelf-window-box-toy-shelf": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:11:17.580Z", + "formHash": "a5e4ba3c67c4", + "rating": 2 + }, + "posters-covers-sleeves-ecm-sleeve": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:37:02.807Z", + "formHash": "c9511fd3b44f", + "rating": 1 + }, + "posters-covers-sleeves-fight-poster": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:35:42.649Z", + "formHash": "4cf1b66a6930", + "rating": 2 + }, + "posters-covers-sleeves-fillmore-handbill": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:35:48.300Z", + "formHash": "7217ee73fe84", + "rating": 3 + }, + "posters-covers-sleeves-hatch-show-print": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:35:54.877Z", + "formHash": "152569058e20", + "rating": 2 + }, + "posters-covers-sleeves-ospaaal-poster": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:37:06.182Z", + "formHash": "210f6b2d2081", + "rating": 2 + }, + "posters-covers-sleeves-pelican-jacket": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:08:13.145Z", + "formHash": "148d339c7eb2" + }, + "posters-covers-sleeves-polish-film-poster": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:36:01.378Z", + "formHash": "351b708d3267", + "rating": 3 + }, + "posters-covers-sleeves-pulp-rack": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:37:09.361Z", + "formHash": "d36814466051", + "rating": 3 + }, + "posters-covers-sleeves-saul-bass-title": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:36:08.012Z", + "formHash": "9e078b9bd4b0", + "rating": 3 + }, + "posters-covers-sleeves-silent-intertitle-card": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:16:03.876Z", + "formHash": "80d26387896d", + "note": "doesn't quite work as ui" + }, + "posters-covers-sleeves-stenberg-poster": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T01:00:36.161Z", + "formHash": "7f0a3281c9d9", + "rating": 3 + }, + "posters-covers-sleeves-wpa-park-poster": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:36:12.046Z", + "formHash": "dfd4045a4484", + "rating": 3 + }, + "product-industrial-mechanical-espresso-lever": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:19:11.071Z", + "formHash": "1b36aca50f16", + "note": "doesn't translate well" + }, + "product-industrial-mechanical-letterpress-composing": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:23:28.315Z", + "formHash": "c4367e1654b4" + }, + "product-industrial-mechanical-linotype-caster": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:23:40.240Z", + "formHash": "ae253e24dd93" + }, + "product-industrial-mechanical-manual-typewriter": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:23:51.078Z", + "formHash": "b3aa4bd3ea47" + }, + "product-industrial-mechanical-pipe-organ-keydesk": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:24:13.277Z", + "formHash": "d3b3972a3dbb" + }, + "reefs-bioluminescent-nocturnal-chromatophore-skin-language": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:30:37.209Z", + "formHash": "2b2c2823f0e6", + "rating": 2 + }, + "reefs-bioluminescent-nocturnal-plankton-wake-stars": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:56:44.958Z", + "formHash": "a75c2ffad668", + "rating": 2 + }, + "reference-taxonomy-biodiversity-tree-of-life": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:30:47.551Z", + "formHash": "4171d1bd201b" + }, + "ritual-ceremony-festival-lantern-river-vows": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:52:27.535Z", + "formHash": "12f190f234a5" + }, + "ritual-ceremony-festival-mask-unveiling-sequence": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:52:33.819Z", + "formHash": "6c95c865ef2e" + }, + "ritual-ceremony-festival-papel-picado-canopy": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:52:52.366Z", + "formHash": "90ac1a8624bf", + "rating": 2 + }, + "ritual-ceremony-festival-yggdrasil-nine-realms": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:55:03.699Z", + "formHash": "ecf31e685e00", + "rating": 2 + }, + "rivers-tides-ocean-depths-hydrothermal-vent-oasis": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:28:05.207Z", + "formHash": "5916befa86d3", + "rating": 1 + }, + "rivers-tides-ocean-depths-mesophotic-deep-dive": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:28:20.672Z", + "formHash": "4f4fc26744fe", + "rating": 2 + }, + "rivers-tides-ocean-depths-tidal-bore-front": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:28:45.459Z", + "formHash": "cb4a82b433e3" + }, + "scientific-notation-oscilloscope-signal-bench": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:54:31.683Z", + "formHash": "e4176f6a5f24", + "rating": 3 + }, + "scientific-notation-particle-detector-event-display": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:54:34.409Z", + "formHash": "38af570c03fd", + "rating": 2 + }, + "signals-instruments-barograph-week-drum": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:14:20.074Z", + "formHash": "8af5e5530772", + "note": "brass fake ui feels cheap" + }, + "signals-instruments-darkroom-safelight-bay": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:14:30.006Z", + "formHash": "66ba8bf2ca20", + "rating": 3 + }, + "signals-instruments-drum-machine-step-row": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:19:25.554Z", + "formHash": "d3903436b74c", + "rating": 2 + }, + "signals-instruments-election-night-big-board": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:18:34.906Z", + "formHash": "bd625a7be98d" + }, + "signals-instruments-evening-switchboard": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:14:37.857Z", + "formHash": "c35a5d1e75b5" + }, + "signals-instruments-night-flight-six-pack": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:15:04.865Z", + "formHash": "75224c47c879", + "rating": 3 + }, + "signals-instruments-nixie-laboratory-counter": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:15:16.002Z", + "formHash": "e2207f89124f", + "rating": 3 + }, + "signals-instruments-phosphor-terminal-midnight": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:55:02.528Z", + "formHash": "79c30264dac8", + "rating": 3 + }, + "signals-instruments-pinball-backglass": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:15:45.914Z", + "formHash": "7826eb4258fc", + "rating": 2 + }, + "signals-instruments-radar-scope-watch": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:18:51.661Z", + "formHash": "101927928fd8", + "note": "too similar to others we already have" + }, + "signals-instruments-seven-segment-alarm-clock": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:18:06.179Z", + "formHash": "6f36e22e535b", + "rating": 2 + }, + "signals-instruments-split-flap-concourse": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:24:52.128Z", + "formHash": "fc15f90782d4", + "rating": 3 + }, + "signals-instruments-telegraph-key-sounder": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:18:18.727Z", + "formHash": "0cb00b347bf9", + "rating": 1 + }, + "signals-instruments-telemetry-ward-monitor": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:19:15.391Z", + "formHash": "e8ecd4100953", + "note": "doesn't work as visual system" + }, + "signals-instruments-ticker-tape-quote-board": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:18:56.294Z", + "formHash": "d73a7e62cb36" + }, + "signals-instruments-vu-meter-bridge": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:18:26.849Z", + "formHash": "dcdffbc4daa9", + "rating": 2 + }, + "social-participatory-public-space-communal-repair-tapestry": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:52:45.084Z", + "formHash": "205386791419" + }, + "stagecraft-theater-lighting-cyclorama-dawn": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:05:31.116Z", + "formHash": "b15be17ef77a", + "rating": 3 + }, + "stagecraft-theater-lighting-fly-tower-transformation": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:47:42.026Z", + "formHash": "54624f93322f", + "note": "too abstract" + }, + "stagecraft-theater-lighting-peppers-ghost-table": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:05:53.262Z", + "formHash": "5252612fb11b" + }, + "swarms-flocks-migration-bee-swarm-consensus": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:31:07.502Z", + "formHash": "22357a3c0961" + }, + "textiles-weave-drape-fashion-bias-cut-gravity-line": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:41:04.888Z", + "formHash": "33d4077f2207", + "note": "i think this wouldn't translate well in non fashion worlds" + }, + "textiles-weave-drape-fashion-conductive-embroidered-night": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:41:16.948Z", + "formHash": "b6d9447e83eb" + }, + "textiles-weave-drape-fashion-drawcord-transforming-cape": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:41:32.885Z", + "formHash": "496ed82d73ab", + "rating": 3 + }, + "textiles-weave-drape-fashion-fortuny-pleat-fall": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:41:40.862Z", + "formHash": "99f33b2ab2ed" + }, + "textiles-weave-drape-fashion-ikat-ghost-grid": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:42:03.950Z", + "formHash": "26c0fa28e252", + "rating": 2 + }, + "textiles-weave-drape-fashion-industrial-quote-grammar": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:44:43.541Z", + "formHash": "96ecc8896a69", + "rating": 3 + }, + "textiles-weave-drape-fashion-jacquard-punched-brocade": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:42:12.837Z", + "formHash": "984370c38326", + "rating": 2 + }, + "textiles-weave-drape-fashion-lace-negative-cathedral": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:42:44.142Z", + "formHash": "0afd1ca69a09", + "note": "desktop ui needs regen" + }, + "textiles-weave-drape-fashion-margiela-blank-atelier": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:44:27.470Z", + "formHash": "bbb6cbcf8c69", + "note": "too bland/white" + }, + "textiles-weave-drape-fashion-memory-quilt-atlas": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:42:54.980Z", + "formHash": "7dabca7ef289", + "rating": 2 + }, + "textiles-weave-drape-fashion-runway-color-procession": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:43:10.850Z", + "formHash": "7b774dd55532" + }, + "textiles-weave-drape-fashion-shibori-resist-topography": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:43:20.443Z", + "formHash": "f4bba338b51d", + "note": "too narrow" + }, + "textiles-weave-drape-fashion-sneaker-box-stacks": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:45:11.989Z", + "formHash": "60955f6b97ef", + "rating": 2 + }, + "textiles-weave-drape-fashion-warp-weighted-loom": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T22:43:45.769Z", + "formHash": "516261daa343" + }, + "textiles-weave-drape-fashion-wax-print-market": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:31:46.211Z", + "formHash": "968869f074ad", + "rating": 3 + }, + "typography-calligraphy-writing-copperplate-pressure-ribbon": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:06:52.664Z", + "formHash": "2f63c8afba07" + }, + "typography-calligraphy-writing-crossing-script-dialogue": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:07:00.157Z", + "formHash": "244131fd85f2" + }, + "typography-calligraphy-writing-illuminated-initial-vine": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:36:35.891Z", + "formHash": "772e2bf27f04", + "rating": 3 + }, + "typography-calligraphy-writing-palimpsest-scraped-letter": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T16:07:13.352Z", + "formHash": "efe02203e878" + }, + "typography-calligraphy-writing-zoomorphic-calligram": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:15:48.907Z", + "formHash": "742df15b0fec", + "rating": 2 + }, + "vernacular-ephemera-apothecary-tin-wall": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T02:03:15.187Z", + "formHash": "5e2cc839b554", + "note": "doesn't work" + }, + "vernacular-ephemera-banknote-proof-table": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:52:13.019Z", + "formHash": "aea8aae5bb94", + "rating": 2 + }, + "vernacular-ephemera-blank-tape-brand-wall": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:19:58.757Z", + "formHash": "11d66074f3d2", + "note": "didn't quite translate well" + }, + "vernacular-ephemera-board-game-deed": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:05:55.214Z", + "formHash": "ed8a1cbc6e3c", + "note": "doesn't translate well" + }, + "vernacular-ephemera-cancellation-stamp-album": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:47:56.997Z", + "formHash": "a73fa1e1f5bf", + "rating": 2 + }, + "vernacular-ephemera-cassette-j-card": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:06:38.026Z", + "formHash": "416a7f16afa9", + "note": "pretty good, would love to see more cassette tape and vhs aesthetic design systems", + "rating": 2 + }, + "vernacular-ephemera-cigar-box-lithograph": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:17:32.258Z", + "formHash": "e7296752f08d", + "note": "doesn't quite work" + }, + "vernacular-ephemera-citrus-crate-labels": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:06:46.688Z", + "formHash": "80b417da2c67" + }, + "vernacular-ephemera-conductor-punch-stubs": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:07:06.901Z", + "formHash": "115d8432fe39", + "note": "a bit to reduced to these bunch stubs" + }, + "vernacular-ephemera-ekiben-wrapper-kiosk": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:16:59.438Z", + "formHash": "1a5796f8c16a", + "rating": 2 + }, + "vernacular-ephemera-elevator-floor-directory": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:07:24.788Z", + "formHash": "d84a7a86fdc8", + "note": "the fake brass on ui looks cheap for some reason" + }, + "vernacular-ephemera-folded-road-map": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:07:38.162Z", + "formHash": "bca58515565e", + "note": "only ok" + }, + "vernacular-ephemera-grandstand-score-wall": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:10:46.913Z", + "formHash": "46f038c57583", + "note": "not very tasteful / interesting" + }, + "vernacular-ephemera-hand-turned-scoreboard": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:08:20.670Z", + "formHash": "60480b396a15", + "note": "ok but it is a bit too limited.. would like to see a variation that expands on this a little more, but right now it's just green" + }, + "vernacular-ephemera-hardware-bin-wall": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:08:57.340Z", + "formHash": "b510082d67fd", + "note": "same problem as copper, the skeuomorphism here looks cheap (often skeuomorphism works, don't take is as sign against skeuo)" + }, + "vernacular-ephemera-jet-age-ticket-wallet": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:49:00.941Z", + "formHash": "49a84562c50e", + "rating": 2 + }, + "vernacular-ephemera-letter-tile-menu-board": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:52:50.393Z", + "formHash": "d364981cd083" + }, + "vernacular-ephemera-library-due-date-card": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:09:16.630Z", + "formHash": "67d38ca64155", + "rating": 2 + }, + "vernacular-ephemera-loteria-tabla-night": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T04:17:13.551Z", + "formHash": "40df848ca763", + "rating": 2 + }, + "vernacular-ephemera-matchbook-drawer": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:09:29.515Z", + "formHash": "851e96a0930a", + "rating": 2 + }, + "vernacular-ephemera-newspaper-weather-map": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:09:50.597Z", + "formHash": "c73aece60368", + "note": "too simplistic, the visual system" + }, + "vernacular-ephemera-punch-clock-timecard": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:10:22.127Z", + "formHash": "66749cbbe184", + "note": "doesn't translate well into visual idea" + }, + "vernacular-ephemera-racing-form-betting-slip": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:53:15.625Z", + "formHash": "422395b9cb23", + "rating": 1 + }, + "vernacular-ephemera-seed-packet-rack": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:10:39.408Z", + "formHash": "5461262e266b", + "rating": 2 + }, + "vernacular-ephemera-signboard-canyon-midnight": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:11:04.361Z", + "formHash": "c9bf0f00aeef", + "rating": 2 + }, + "vernacular-ephemera-vhs-rental-wall": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:48:47.540Z", + "formHash": "4068e0586ee7", + "rating": 3 + }, + "vernacular-ephemera-well-traveled-passport": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:12:33.476Z", + "formHash": "8c2835c91e3a", + "note": "borderline overall", + "rating": 2 + }, + "vernacular-ephemera-worn-playing-card-deck": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T21:12:42.432Z", + "formHash": "070266e5177e" + }, + "wayfinding-cartography-signage-emergency-light-braid": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T01:59:15.547Z", + "formHash": "19f26a7ceb45", + "note": "this feels too gimmicky / one-trick pony" + }, + "wayfinding-cartography-signage-karakoram-raised-relief-map": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-21T03:34:08.063Z", + "formHash": "1a6e197488ac", + "note": "transferred to composition catalog as data-dramaturgy-raking-relief-terrain" + }, + "wayfinding-cartography-signage-midnight-transit-diagram": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T00:43:35.710Z", + "formHash": "5fafe9dc951a", + "rating": 2 + }, + "wayfinding-cartography-signage-night-market-sign-river": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T20:38:17.861Z", + "formHash": "11599cf43054", + "rating": 3 + }, + "wayfinding-cartography-signage-salt-stiffened-treasure-map": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T01:01:33.273Z", + "formHash": "c3a4d2653604", + "rating": 3 + }, + "wayfinding-cartography-signage-terminal-yellow-wayfinding": { + "status": "approved", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T02:51:18.311Z", + "formHash": "66509a5e8866", + "rating": 3 + }, + "wayfinding-cartography-signage-tidal-harbor-compass": { + "status": "rejected", + "reviewedBy": "pbakaus", + "reviewedAt": "2026-07-20T18:01:33.562Z", + "formHash": "69d3e36cbbd5" + } + } +} diff --git a/functions/api/_worldroll.js b/functions/api/_worldroll.js new file mode 100644 index 000000000..9603e0bc2 --- /dev/null +++ b/functions/api/_worldroll.js @@ -0,0 +1,222 @@ +// Shared world-roll logic for the /api/roll and /api/chosen endpoints. +// +// This mirrors the selection mechanics in skill/scripts/concept-seed.mjs +// exactly (same salts, same sha256 ranking, same rating weights), computed +// with Web Crypto because Workers have no sync hash. Same key + same pool +// revision therefore reproduces a roll bit-for-bit. +// +// Catalog data is bundled at deploy time from functions/api/_data/, refreshed +// by scripts/sync-api-data.mjs. The catalog never ships to clients in full: +// a roll exposes exactly the entries it deals. + +import conceptCatalog from './_data/concept-ingredients.json'; +import conceptReviews from './_data/concept-reviews.json'; +import compositionCatalog from './_data/composition-ingredients.json'; +import compositionReviews from './_data/composition-reviews.json'; + +export const WELL_TIERS = ['graphic', 'interaction', 'atmosphere']; +export const SEED_MODES = new Set(['persuade', 'operate', 'read', 'experience']); + +const encoder = new TextEncoder(); + +async function sha256Hex(input) { + const digest = await crypto.subtle.digest('SHA-256', encoder.encode(input)); + return [...new Uint8Array(digest)].map(byte => byte.toString(16).padStart(2, '0')).join(''); +} + +async function deterministicRank(items, input, idFor = item => item.id) { + const scored = await Promise.all(items.map(async item => ({ + item, + id: idFor(item), + score: await sha256Hex(`${input}:${idFor(item)}`), + }))); + scored.sort((a, b) => b.score.localeCompare(a.score) || a.id.localeCompare(b.id)); + return scored.map(entry => entry.item); +} + +function mergeConcepts() { + const reviews = conceptReviews.reviews || {}; + const wellsById = new Map((conceptCatalog.wells || []).map(well => [well.id, well])); + const concepts = []; + for (const family of conceptCatalog.families || []) { + for (const concept of family.concepts || []) { + concepts.push({ + ...concept, + familyId: family.id, + wellTier: wellsById.get(family.well)?.tier || null, + status: reviews[concept.id]?.status || 'pending', + review: reviews[concept.id] || null, + }); + } + } + return concepts; +} + +function mergeCompositions() { + const reviews = compositionReviews.reviews || {}; + return (compositionCatalog.compositions || []).map(composition => ({ + ...composition, + status: reviews[composition.id]?.status || 'pending', + })); +} + +export async function approvedPoolRevision(concepts) { + const payload = concepts + .filter(concept => concept.status === 'approved') + .map(concept => `${concept.familyId}:${concept.id}:${concept.strength}:${concept.form}:${concept.spark}:${JSON.stringify(concept.system)}:${concept.webLeverage}`) + .sort() + .join('\n'); + return (await sha256Hex(payload)).slice(0, 12); +} + +export async function selectApprovedChallengers({ scope, key, reroll = 0, concepts }) { + const approved = concepts.filter(concept => concept.status === 'approved'); + const wanted = scope === 'direction' + ? new Set(['world', 'dual']) + : new Set(['composition', 'dual']); + const approvedByTier = new Map(); + for (const concept of approved) { + const tier = approvedByTier.get(concept.wellTier) || []; + tier.push(concept); + approvedByTier.set(concept.wellTier, tier); + } + if (WELL_TIERS.some(tier => !(approvedByTier.get(tier) || []).length)) { + throw new Error('every challenger tier needs at least one approved concept'); + } + for (const [tier, pool] of approvedByTier) { + const matching = pool.filter(concept => wanted.has(concept.strength)); + if (matching.length > 0) approvedByTier.set(tier, matching); + } + const ticketsFor = pool => pool.flatMap(concept => { + const rating = concept.review?.rating; + if (rating === 1) return []; + return rating === 3 + ? [{ concept, ticket: 0 }, { concept, ticket: 1 }] + : [{ concept, ticket: 0 }]; + }); + const pickRound = async (round, excluded) => { + const salt = round === 0 ? '' : `:reroll-${round}`; + const tierOrder = (await deterministicRank( + WELL_TIERS.map(id => ({ id })), + `${scope}:${key}:tiers${salt}` + )).map(item => item.id); + const picks = []; + for (const [index, tier] of tierOrder.entries()) { + let pool = approvedByTier.get(tier).filter(concept => !excluded.has(concept.id)); + if (pool.length === 0) pool = approvedByTier.get(tier); + let tickets = ticketsFor(pool); + if (tickets.length === 0) tickets = pool.map(concept => ({ concept, ticket: 0 })); + const ranked = await deterministicRank( + tickets, + `${scope}:${key}:challenger-${index}${salt}`, + entry => `${entry.concept.id}#${entry.ticket}` + ); + const order = []; + const seen = new Set(); + for (const entry of ranked) { + if (seen.has(entry.concept.id)) continue; + seen.add(entry.concept.id); + order.push(entry.concept); + } + const first = order[0]; + const second = order.find(concept => concept.familyId !== first.familyId) + || order.find(concept => concept.id !== first.id); + picks.push(...(second ? [first, second] : [first])); + } + return picks; + }; + const excluded = new Set(); + let picks = await pickRound(0, excluded); + for (let round = 1; round <= reroll; round += 1) { + for (const pick of picks) excluded.add(pick.id); + picks = await pickRound(round, excluded); + } + return { approved, picks }; +} + +export async function selectApprovedStaging({ scope, key, reroll = 0, mode = null, compositions }) { + let approved = compositions.filter(composition => composition.status === 'approved'); + if (approved.length === 0) return null; + if (mode) { + const matching = approved.filter(composition => composition.surface === mode); + if (matching.length === 0) return null; + approved = matching; + } + const prior = new Set(); + let pick = (await deterministicRank(approved, `${scope}:${key}:staging`))[0]; + for (let round = 1; round <= reroll; round += 1) { + prior.add(pick.id); + const pool = approved.filter(composition => !prior.has(composition.id)); + pick = (await deterministicRank( + pool.length > 0 ? pool : approved, + `${scope}:${key}:staging:reroll-${round}` + ))[0]; + } + return pick; +} + +const publicConcept = concept => ({ + id: concept.id, + form: concept.form, + spark: concept.spark, + system: concept.system, + webLeverage: concept.webLeverage, + wellTier: concept.wellTier, +}); + +const publicComposition = composition => ({ + id: composition.id, + form: composition.form, + spark: composition.spark, + grammar: composition.grammar, + webLeverage: composition.webLeverage, + surface: composition.surface, +}); + +export async function rollSeed({ scope, key, mode, reroll }) { + const concepts = mergeConcepts(); + const compositions = mergeCompositions(); + const [poolRevision, { approved, picks }, staging] = await Promise.all([ + approvedPoolRevision(concepts), + selectApprovedChallengers({ scope, key, reroll, concepts }), + selectApprovedStaging({ scope, key, reroll, mode, compositions }), + ]); + return { + key, + scope, + mode: mode || null, + reroll, + poolRevision, + approvedCount: approved.length, + catalogCount: concepts.length, + challengers: picks.map(publicConcept), + staging: staging ? publicComposition(staging) : null, + }; +} + +// Impressions and choices land in Workers Analytics Engine when the binding +// exists; without it, logging is a silent no-op so the roll never fails. +export function logEvent(env, event, fields) { + try { + env.ROLL_ANALYTICS?.writeDataPoint({ + blobs: [ + event, + fields.scope || '', + fields.mode || '', + fields.poolRevision || '', + fields.chosenId || '', + ...(fields.dealtIds || []), + ], + doubles: [fields.reroll || 0], + indexes: [event], + }); + } catch { + // Telemetry must never break a roll. + } +} + +export const CORS_HEADERS = { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', + 'Access-Control-Allow-Headers': 'Content-Type', +}; diff --git a/functions/api/chosen.js b/functions/api/chosen.js new file mode 100644 index 000000000..d382f4f87 --- /dev/null +++ b/functions/api/chosen.js @@ -0,0 +1,30 @@ +// POST /api/chosen { key, poolRevision, chosenId, scope?, mode? } +// +// Anonymous choice ping: records that a world dealt by /api/roll was selected +// as the direction. No project data, no user identity; senders honor +// DO_NOT_TRACK and IMPECCABLE_NO_TELEMETRY before calling. Always answers +// 204 so a failed record can never disturb a design flow. + +import { logEvent, CORS_HEADERS } from './_worldroll.js'; + +export async function onRequestOptions() { + return new Response(null, { status: 204, headers: CORS_HEADERS }); +} + +export async function onRequestPost({ request, env }) { + try { + const body = await request.json(); + const chosenId = typeof body.chosenId === 'string' ? body.chosenId.slice(0, 120) : ''; + if (chosenId && /^[a-z0-9-]+$/.test(chosenId)) { + logEvent(env, 'chosen', { + scope: typeof body.scope === 'string' ? body.scope.slice(0, 16) : '', + mode: typeof body.mode === 'string' ? body.mode.slice(0, 16) : '', + poolRevision: typeof body.poolRevision === 'string' ? body.poolRevision.slice(0, 16) : '', + chosenId, + }); + } + } catch { + // Malformed pings are dropped silently. + } + return new Response(null, { status: 204, headers: CORS_HEADERS }); +} diff --git a/functions/api/roll.js b/functions/api/roll.js new file mode 100644 index 000000000..9d7edf0cf --- /dev/null +++ b/functions/api/roll.js @@ -0,0 +1,48 @@ +// GET /api/roll?scope=direction|surface&mode=&key=&reroll= +// +// Deals a deterministic concept roll: six challengers (two per translation +// tier, rating-weighted) plus one mode-matched staging. Same key + same pool +// revision reproduces the roll. The request itself is the impression record. + +import { rollSeed, logEvent, SEED_MODES, CORS_HEADERS } from './_worldroll.js'; + +export async function onRequestOptions() { + return new Response(null, { status: 204, headers: CORS_HEADERS }); +} + +export async function onRequestGet({ request, env }) { + const url = new URL(request.url); + const scope = url.searchParams.get('scope') || 'surface'; + const mode = url.searchParams.get('mode') || null; + const key = url.searchParams.get('key') || crypto.randomUUID().slice(0, 8); + const reroll = Number(url.searchParams.get('reroll') || 0); + + if (scope !== 'direction' && scope !== 'surface') { + return Response.json({ error: 'scope must be direction or surface' }, { status: 400, headers: CORS_HEADERS }); + } + if (mode !== null && !SEED_MODES.has(mode)) { + return Response.json({ error: 'mode must be persuade, operate, read, or experience' }, { status: 400, headers: CORS_HEADERS }); + } + if (!Number.isInteger(reroll) || reroll < 0 || reroll > 8) { + return Response.json({ error: 'reroll must be an integer between 0 and 8' }, { status: 400, headers: CORS_HEADERS }); + } + if (!/^[a-z0-9-]{1,64}$/i.test(key)) { + return Response.json({ error: 'key must be 1-64 alphanumeric characters' }, { status: 400, headers: CORS_HEADERS }); + } + + try { + const roll = await rollSeed({ scope, key, mode, reroll }); + logEvent(env, 'roll', { + scope, + mode, + reroll, + poolRevision: roll.poolRevision, + dealtIds: [...roll.challengers.map(challenger => challenger.id), roll.staging?.id].filter(Boolean), + }); + return Response.json(roll, { + headers: { ...CORS_HEADERS, 'Cache-Control': 'no-store' }, + }); + } catch (error) { + return Response.json({ error: error.message }, { status: 500, headers: CORS_HEADERS }); + } +} diff --git a/package.json b/package.json index 32435dff0..52ca9657f 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "rebuild:release": "bun run clean && bun run build:release", "dev": "bun run scripts/gen-dev-api.mjs && npx astro dev", "preview": "bun run build && npx astro preview", - "deploy": "bun run build && wrangler pages deploy build/", + "deploy": "node scripts/sync-api-data.mjs && bun run build && wrangler pages deploy build/", "test": "node scripts/run-tests.mjs default", "test:core": "node scripts/run-tests.mjs core", "test:detector": "node scripts/run-tests.mjs detector", diff --git a/scripts/build.js b/scripts/build.js index e0c6febe0..21b881f34 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -646,7 +646,7 @@ function generateCFConfig(buildDir) { // Without this, the SPA fallback serves index.html for function routes const routes = { version: 1, - include: ['/api/download/*', '/worlds/cards/*'], + include: ['/api/download/*', '/api/roll', '/api/chosen', '/worlds/cards/*'], exclude: [], }; fs.writeFileSync(path.join(buildDir, '_routes.json'), JSON.stringify(routes, null, 2)); diff --git a/scripts/sync-api-data.mjs b/scripts/sync-api-data.mjs new file mode 100644 index 000000000..bbe81a32c --- /dev/null +++ b/scripts/sync-api-data.mjs @@ -0,0 +1,24 @@ +#!/usr/bin/env node +// Copies the catalog JSON files into functions/api/_data/ so the roll API +// bundles the current revision at deploy. Run before `bun run deploy` +// whenever catalog content changed (the deploy script chains it). + +import { copyFileSync, mkdirSync } from 'node:fs'; +import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..'); +const SRC = join(ROOT, 'skill', 'scripts'); +const DEST = join(ROOT, 'functions', 'api', '_data'); +const FILES = [ + 'concept-ingredients.json', + 'concept-reviews.json', + 'composition-ingredients.json', + 'composition-reviews.json', +]; + +mkdirSync(DEST, { recursive: true }); +for (const file of FILES) { + copyFileSync(join(SRC, file), join(DEST, file)); +} +process.stdout.write(`synced ${FILES.length} catalog files -> functions/api/_data\n`); diff --git a/site/styles/live-ui-gallery.css b/site/styles/live-ui-gallery.css index 2d5f6e917..019637b16 100644 --- a/site/styles/live-ui-gallery.css +++ b/site/styles/live-ui-gallery.css @@ -1357,10 +1357,11 @@ button.lvg-dot { .lvg-steer-dots { display: inline-flex; - flex: 1; - padding: 0 12px 0 2px; + flex: 0 0 auto; + margin-left: auto; + padding: 0 12px 0 8px; align-items: center; - justify-content: center; + justify-content: flex-end; gap: 5px; } diff --git a/skill/reference/new-work.md b/skill/reference/new-work.md index bb34055c7..37a498094 100644 --- a/skill/reference/new-work.md +++ b/skill/reference/new-work.md @@ -9,7 +9,7 @@ Terms this file uses throughout, defined once: - **World:** the durable visual identity: palette, materials, type voice, ornament logic, and component character that outlive any single surface. - **Coupled pair:** one world joined to one concrete first-surface expression, selected together as a single decision, never as two tournaments. - **Staging:** an identity-free structural idea for a surface (hierarchy, sequence, interaction). The seed may append one; it brings no palette, typeface, or material. -- **Candidate floor:** the four veto tests in section 4. A candidate passes all four or is discarded and replaced. +- **Candidate floor:** the five veto tests in section 4. A candidate passes all five or is discarded and replaced. - **Direction contract:** six promise blocks written into the artifact's opening comment before code, audited against the render by the hooks. - **Surface brief:** durable surface strategy persisted to `.impeccable/surfaces/` via `surface-brief.mjs`. - **Attended run:** a user is present to answer questions. Unattended fallbacks apply only when no one can answer. @@ -48,7 +48,8 @@ In an attended run, ask one round of at most three material questions without re When generating choices, veto rather than rationalize. Before a candidate reaches the user, discard and replace it if any floor fails: - **Truth:** every relationship it visualizes exists in product truth; resemblance is not evidence. -- **Consequence:** removing its bar-raiser materially weakens the surface's central argument or use. Otherwise it is ordinary craft. +- **Translation:** after removing source names, props, materials, and vocabulary, a product-native relationship, behavior, or proof remains. Otherwise it is costume, not a concept. +- **Consequence:** removing its bar-raiser materially weakens the surface's central argument or use; name what the visitor could no longer understand or do. Otherwise it is ordinary craft. - **Survival:** its signature remains compelling on the primary device and within the real asset and tool budget. - **Fit:** its risk is an honest tradeoff, not a probable violation of the brief or audience. @@ -76,10 +77,10 @@ Unattended: use the promoted candidate when a roll ran, otherwise the strongest ### New or replacement world (A, D, or E): choose a coupled pair 1. **Ground.** Derive the product mechanism, user scene, audience's cultural home, and what this surface uniquely proves. Name the category default and its predictable contrarian response; neither may enter the shortlist unchanged. -2. **Derive pairs.** Generate five to seven grounded coupled pairs and order them by product fit. Each joins a durable system to a concrete first-surface structure, native behavior, non-routine bar-raiser, and implementation consequence. Different names or materials on the same experience are one candidate. -3. **Break the ranking rut once.** Run `node {{scripts_path}}/concept-seed.mjs --scope direction --mode `, where the mode is the first surface's: persuade, operate, read, or experience. The seed names a PROMOTED INDEX; elevate the pair at that position of your own ranked list into the serious shortlist and judge it as a peer of your top picks. Translate each challenger into a coherent system and task solution before comparing audience identification, product clarity, system leverage, and use of the medium. Keep the relationships, states, and affordances; discard the source carrier, materials, and vocabulary unless product evidence earns them. When the seed appends a FIRST-SURFACE STAGING, treat it as a candidate structure for the first surface: dress it in each shortlisted world before judging, and keep world and staging one coupled decision. +2. **Derive pairs.** Generate five to seven grounded coupled pairs and order them by product fit. Each joins a durable system to a concrete first-surface structure, native behavior, non-routine bar-raiser, and implementation consequence. State what becomes impossible without the bar-raiser. Different names or materials on the same experience are one candidate. +3. **Break the ranking rut once.** Run `node {{scripts_path}}/concept-seed.mjs --scope direction --mode `, where the mode is the first surface's: persuade, operate, read, or experience. The seed names a PROMOTED INDEX; elevate the pair at that position of your own ranked list into the serious shortlist and judge it as a peer of your top picks. For each challenger, first state the relationship, state change, or affordance it imports without naming the source; only then translate it into a coherent system and task solution. Keep that logic, but discard the source carrier, materials, and vocabulary unless product evidence earns them as functional parts of the product. A candidate still named or explained by the source object has not been translated. Compare every translated pair with the grounded list on audience identification, product clarity, system leverage, and use of the medium. When the seed appends a FIRST-SURFACE STAGING, treat it as a candidate structure for the first surface: dress it in each shortlisted world before judging, and keep world and staging one coupled decision. 4. **Test at full strength.** Apply the candidate floor. Strip names, styling, and source carrier; survivors must still differ in structure, sequence, or interaction. Their world must also govern the whole product: the navigation, a dense surface, and a quiet surface, with the last two dissimilar. -5. **Offer coupled choices.** Present two or three equally viable pairs without recommendation cues, following **Present, visualize, re-roll** below. For each, show the world rules, first-surface expression, bar-raiser, cross-surface consequence, and risk. Ask what is closest, should combine, or feels wrong; rejection is allowed. +5. **Offer coupled choices.** Present two or three equally viable pairs without recommendation cues, following **Present, visualize, re-roll** below. For each, show the world rules, first-surface expression, bar-raiser, cross-surface consequence, risk, and what fails without the bar-raiser. If fewer than two clear every veto, derive replacements rather than padding the choice. Ask what is closest, should combine, or feels wrong; rejection is allowed. 6. **Resolve once.** The user selects or revises the pair. Extract the durable rules into DESIGN.md and the task-specific strategy into the surface brief; do not reopen either half independently. Unattended: use the assigned grounded pair only if it survives product fit, coupling, and breadth; mark assumptions. This is fallback, not user choice. diff --git a/skill/scripts/concept-seed.mjs b/skill/scripts/concept-seed.mjs index 54b67e3d1..591aeafe3 100644 --- a/skill/scripts/concept-seed.mjs +++ b/skill/scripts/concept-seed.mjs @@ -35,13 +35,23 @@ * node scripts/concept-seed.mjs --scope direction --mode persuade * node scripts/concept-seed.mjs --scope surface --mode operate --from * node scripts/concept-seed.mjs --scope direction --mode persuade --from --reroll 1 + * node scripts/concept-seed.mjs --chosen --from --scope direction * * --mode names the requested surface's mode (persuade, operate, read, * experience) so the appended staging matches its register of work; omitted, * the staging rolls from the full approved pool. * + * Challenger data resolves in order: a local catalog directory (the private + * service repo, evals, and tests set IMPECCABLE_CATALOG_DIR), then the roll + * API at impeccable.style, then a degraded promotion-only seed when both are + * unavailable. --chosen sends the anonymous choice ping for API-dealt rolls; + * DO_NOT_TRACK or IMPECCABLE_NO_TELEMETRY disables it. + * * Env vars: * IMPECCABLE_CONCEPT_SEED — same as --from; for reproducible eval runs. + * IMPECCABLE_CATALOG_DIR — directory holding the four catalog JSON files. + * IMPECCABLE_API_URL — roll API base (default https://impeccable.style/api). + * IMPECCABLE_NO_TELEMETRY — disables the choice ping (DO_NOT_TRACK also honored). */ import crypto from 'node:crypto'; @@ -57,20 +67,90 @@ import { import { readCompositionCatalog } from './lib/composition-catalog.mjs'; const here = dirname(fileURLToPath(import.meta.url)); -const catalogState = readConceptCatalog( - join(here, 'concept-ingredients.json'), - join(here, 'concept-reviews.json') -); -const catalogValidation = validateConceptCatalog(catalogState.catalog, catalogState.reviewData); -if (catalogValidation.errors.length > 0) { - throw new Error(`concept-seed: invalid catalog: ${catalogValidation.errors.join('; ')}`); + +// Data resolution order: a local catalog (the private service repo, evals, and +// tests point IMPECCABLE_CATALOG_DIR at one), then the roll API, then a +// degraded promotion-only seed. The full catalog does not ship with the skill. +const CATALOG_DIR = process.env.IMPECCABLE_CATALOG_DIR || here; +const API_BASE = (process.env.IMPECCABLE_API_URL || 'https://impeccable.style/api').replace(/\/$/, ''); +const API_TIMEOUT_MS = Number(process.env.IMPECCABLE_API_TIMEOUT || 4000); + +let localState; // undefined = untried, null = unavailable +function loadLocal() { + if (localState !== undefined) return localState; + try { + const catalogState = readConceptCatalog( + join(CATALOG_DIR, 'concept-ingredients.json'), + join(CATALOG_DIR, 'concept-reviews.json') + ); + const validation = validateConceptCatalog(catalogState.catalog, catalogState.reviewData); + if (validation.errors.length > 0) { + throw new Error(`invalid catalog: ${validation.errors.join('; ')}`); + } + const compositionState = readCompositionCatalog( + join(CATALOG_DIR, 'composition-ingredients.json'), + join(CATALOG_DIR, 'composition-reviews.json') + ); + localState = { + concepts: catalogState.concepts, + compositions: compositionState.compositions, + }; + } catch { + localState = null; + } + return localState; +} + +function requireLocalConcepts() { + const local = loadLocal(); + if (!local) { + throw new Error('concept-seed: no local catalog (set IMPECCABLE_CATALOG_DIR or pass sourceConcepts)'); + } + return local; +} + +async function fetchRoll({ scope, key, mode, reroll }) { + const params = new URLSearchParams({ scope, key, reroll: String(reroll) }); + if (mode) params.set('mode', mode); + const controller = new AbortController(); + const timer = setTimeout(() => controller.abort(), API_TIMEOUT_MS); + try { + const response = await fetch(`${API_BASE}/roll?${params}`, { signal: controller.signal }); + if (!response.ok) return null; + const roll = await response.json(); + if (!Array.isArray(roll.challengers) || roll.challengers.length === 0) return null; + return roll; + } catch { + return null; + } finally { + clearTimeout(timer); + } +} + +function telemetryDisabled() { + return Boolean(process.env.IMPECCABLE_NO_TELEMETRY || process.env.DO_NOT_TRACK); +} + +// Anonymous choice ping: records only that a dealt world was selected. +// Fire-and-forget; never fails the caller. +export async function pingChosen({ chosenId, key, scope, mode }) { + if (telemetryDisabled() || !chosenId) return false; + const controller = new AbortController(); + const timer = setTimeout(() => controller.abort(), API_TIMEOUT_MS); + try { + await fetch(`${API_BASE}/chosen`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ chosenId, key, scope, mode }), + signal: controller.signal, + }); + return true; + } catch { + return false; + } finally { + clearTimeout(timer); + } } -const { concepts } = catalogState; -const compositionState = readCompositionCatalog( - join(here, 'composition-ingredients.json'), - join(here, 'composition-reviews.json') -); -const compositions = compositionState.compositions; export function renderChallenger(concept, index) { const system = concept.system.map(rule => ` - ${rule}`).join('\n'); @@ -94,8 +174,9 @@ ${grammar} // Returns null while the composition pool has no approved entry for the // requested mode. Cross-mode fallback would turn an absent staging into a // misleading one. A re-roll excludes earlier stagings until the pool runs out. -export function selectApprovedStaging({ scope, key, reroll = 0, mode = null, sourceCompositions = compositions }) { - let approved = sourceCompositions.filter(composition => composition.status === 'approved'); +export function selectApprovedStaging({ scope, key, reroll = 0, mode = null, sourceCompositions = null }) { + const pool = sourceCompositions ?? requireLocalConcepts().compositions; + let approved = pool.filter(composition => composition.status === 'approved'); if (approved.length === 0) return null; if (mode) { const matching = approved.filter(composition => composition.surface === mode); @@ -115,8 +196,9 @@ export function selectApprovedStaging({ scope, key, reroll = 0, mode = null, sou return pick; } -export function selectApprovedChallengers({ scope, key, reroll = 0, sourceConcepts = concepts }) { - const approved = sourceConcepts.filter(concept => concept.status === 'approved'); +export function selectApprovedChallengers({ scope, key, reroll = 0, sourceConcepts = null }) { + const source = sourceConcepts ?? requireLocalConcepts().concepts; + const approved = source.filter(concept => concept.status === 'approved'); // Direction chooses a durable identity, so it draws worlds; surface designs // one page inside a committed identity, so it draws stagings. Duals serve // both. A tier with no matching-strength approvals falls back to its full @@ -192,13 +274,14 @@ export function selectApprovedChallengers({ scope, key, reroll = 0, sourceConcep return { approved, picks, - poolRevision: approvedPoolRevision(sourceConcepts), + poolRevision: approvedPoolRevision(source), + catalogCount: source.length, }; } const SEED_MODES = new Set(['persuade', 'operate', 'read', 'experience']); -export function renderConceptSeed({ +export async function renderConceptSeed({ scope = 'surface', key = process.env.IMPECCABLE_CONCEPT_SEED || crypto.randomBytes(4).toString('hex'), reroll = 0, @@ -219,7 +302,34 @@ export function renderConceptSeed({ }; const indexSalt = reroll === 0 ? 'index' : `index:reroll-${reroll}`; const buildIndex = 3 + Math.floor(unit(indexSalt) * 5); // 3..7 - const { approved, picks, poolRevision } = selectApprovedChallengers({ scope, key, reroll }); + + // Local catalog first (private repo, evals, tests), then the roll API, + // then a degraded promotion-only seed. The promoted index is pure local + // math, so even a fully offline run keeps the anti-argmax mechanism. + let data = null; + if (loadLocal()) { + const { approved, picks, poolRevision, catalogCount } = selectApprovedChallengers({ scope, key, reroll }); + data = { + source: 'local', + poolRevision, + approvedCount: approved.length, + catalogCount, + challengers: picks, + staging: selectApprovedStaging({ scope, key, reroll, mode }), + }; + } else { + const roll = await fetchRoll({ scope, key, mode, reroll }); + if (roll) { + data = { + source: 'api', + poolRevision: roll.poolRevision, + approvedCount: roll.approvedCount, + catalogCount: roll.catalogCount, + challengers: roll.challengers, + staging: roll.staging, + }; + } + } const promotedInstruction = scope === 'direction' ? `After ordering the grounded coupled directions by product fit, promote @@ -268,14 +378,31 @@ artifact's rules, never just its name: grid, geometry, ornament logic, material behavior, and information structure become the interface's. Preserve the spark's imaginative distance: do not collapse a galaxy into a mission dashboard, a forest into a taxonomy app, or a performance into a control -console. Use Three.js, generative motion, film language, typography, craft, +console. Translation is complete only when the source name and physical prop +can disappear while a product-native relationship, state change, or proof +remains. A carrier survives only when product evidence makes it functional; +never name a candidate after the prompt merely to preserve the spark. Use +Three.js, generative motion, film language, typography, craft, or another ambitious medium when it materially strengthens the task; keep semantic structure and graceful fallbacks fully capable.`; - const staging = selectApprovedStaging({ scope, key, reroll, mode }); - const stagingBlock = staging + if (!data) { + return `${scope.toUpperCase()} CONCEPT SEED (key: ${key}; mode: ${mode ?? 'unscoped'}; source: degraded; rerun with --scope ${scope}${mode ? ` --mode ${mode}` : ''} --from ${key}${reroll > 0 ? ` --reroll ${reroll}` : ''}) +PROMOTED INDEX: ${buildIndex} + ${promotedInstruction} + The promotion exists to refuse the model's ranking rut, not to outrank the + user or the brief. Never expose promotion metadata in choice labels or order. +No challengers this run: the roll service was unreachable and no local +catalog exists. Proceed with the grounded candidates alone; the promotion +above still applies at full strength. +${authorityInstruction} +A user- or brief-pinned decision beats the roll, always. +`; + } + + const stagingBlock = data.staging ? `\n${scope === 'direction' ? 'FIRST-SURFACE STAGING (identity-free; pair it with the chosen world and judge the pair as one decision):' : 'STAGING CHALLENGER (identity-free; dress it in the committed visual identity before judging):'} -${renderStaging(staging)} +${renderStaging(data.staging)} A staging organizes attention, sequence, and manipulation; it never brings a palette, typeface, or material. It competes on structure alone and loses to a grounded structure that fits the product better.\n` @@ -286,17 +413,23 @@ grounded structure that fits the product better.\n` genuinely new grounded candidates from unexplored angles before judging these fresh challengers.\n` : ''; - return `${scope.toUpperCase()} CONCEPT SEED (key: ${key}; mode: ${mode ?? 'unscoped'}; approved pool: ${poolRevision}; ${approved.length}/${concepts.length} human-approved; rerun with --scope ${scope}${mode ? ` --mode ${mode}` : ''} --from ${key}${reroll > 0 ? ` --reroll ${reroll}` : ''} to reproduce this roll against this catalog revision) + const telemetryBlock = data.source === 'api' + ? `TELEMETRY: if the resolved direction uses one of these challengers, rerun + this script once with --chosen --from ${key} --scope ${scope}${mode ? ` --mode ${mode}` : ''} + after resolution. The ping is anonymous (chosen id only) and is skipped + automatically when DO_NOT_TRACK or IMPECCABLE_NO_TELEMETRY is set.\n` + : ''; + return `${scope.toUpperCase()} CONCEPT SEED (key: ${key}; mode: ${mode ?? 'unscoped'}; source: ${data.source}; approved pool: ${data.poolRevision}; ${data.approvedCount}/${data.catalogCount} human-approved; rerun with --scope ${scope}${mode ? ` --mode ${mode}` : ''} --from ${key}${reroll > 0 ? ` --reroll ${reroll}` : ''} to reproduce this roll against this catalog revision) ${rerollBlock}PROMOTED INDEX: ${buildIndex} ${promotedInstruction} The promotion exists to refuse the model's ranking rut, not to outrank the user or the brief. Never expose promotion metadata in choice labels or order. CHALLENGERS: -${picks.map(renderChallenger).join('\n')} +${data.challengers.map(renderChallenger).join('\n')} ${stagingBlock}${challengerInstruction} ${authorityInstruction} ${richnessInstruction} -A user- or brief-pinned decision beats the roll, always. +${telemetryBlock}A user- or brief-pinned decision beats the roll, always. `; } @@ -306,15 +439,27 @@ if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.ur const scopeIdx = args.indexOf('--scope'); const rerollIdx = args.indexOf('--reroll'); const modeIdx = args.indexOf('--mode'); + const chosenIdx = args.indexOf('--chosen'); try { - process.stdout.write(renderConceptSeed({ - scope: scopeIdx !== -1 ? args[scopeIdx + 1] : 'surface', - key: fromIdx !== -1 - ? args[fromIdx + 1] - : (process.env.IMPECCABLE_CONCEPT_SEED || crypto.randomBytes(4).toString('hex')), - reroll: rerollIdx !== -1 ? Number(args[rerollIdx + 1]) : 0, - mode: modeIdx !== -1 ? args[modeIdx + 1] : null, - })); + if (chosenIdx !== -1) { + // Choice ping: always exits 0, telemetry must never fail a design flow. + const sent = await pingChosen({ + chosenId: args[chosenIdx + 1], + key: fromIdx !== -1 ? args[fromIdx + 1] : undefined, + scope: scopeIdx !== -1 ? args[scopeIdx + 1] : undefined, + mode: modeIdx !== -1 ? args[modeIdx + 1] : undefined, + }); + process.stdout.write(sent ? 'choice recorded\n' : 'choice ping skipped\n'); + } else { + process.stdout.write(await renderConceptSeed({ + scope: scopeIdx !== -1 ? args[scopeIdx + 1] : 'surface', + key: fromIdx !== -1 + ? args[fromIdx + 1] + : (process.env.IMPECCABLE_CONCEPT_SEED || crypto.randomBytes(4).toString('hex')), + reroll: rerollIdx !== -1 ? Number(args[rerollIdx + 1]) : 0, + mode: modeIdx !== -1 ? args[modeIdx + 1] : null, + })); + } } catch (error) { process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`); process.exitCode = 1; diff --git a/skill/scripts/live-browser.js b/skill/scripts/live-browser.js index 47bbfefbf..9bd2bc138 100644 --- a/skill/scripts/live-browser.js +++ b/skill/scripts/live-browser.js @@ -8678,9 +8678,9 @@ void main() { function buildSteerProcessingDots() { const P = pageChatPalette(); const wrap = el('span', { - display: 'inline-flex', alignItems: 'center', justifyContent: 'center', - gap: '5px', flex: '1', minWidth: '0', - padding: '0 12px 0 2px', + display: 'inline-flex', alignItems: 'center', justifyContent: 'flex-end', + gap: '5px', flex: '0 0 auto', minWidth: '0', marginLeft: 'auto', + padding: '0 12px 0 8px', pointerEvents: 'none', }); wrap.setAttribute('aria-hidden', 'true'); diff --git a/tests/live-browser-regression.test.mjs b/tests/live-browser-regression.test.mjs index 20e6c7796..a18eecba3 100644 --- a/tests/live-browser-regression.test.mjs +++ b/tests/live-browser-regression.test.mjs @@ -438,6 +438,11 @@ describe('live-browser.js regression guards', () => { /Handing off|pageChatHint\.textContent = 'Working'/, 'steer processing state should use dots-only animation, not truncated text', ); + assert.match( + SOURCE, + /function buildSteerProcessingDots\(\)[\s\S]{0,500}?justifyContent: 'flex-end'[\s\S]{0,220}?marginLeft: 'auto'/, + 'steer processing dots should stay aligned to the input trailing edge', + ); assert.match( SOURCE, /function syncAgentPollingUi\(/, diff --git a/tests/live-ui-lab.test.mjs b/tests/live-ui-lab.test.mjs index 784ce076f..7ed590adc 100644 --- a/tests/live-ui-lab.test.mjs +++ b/tests/live-ui-lab.test.mjs @@ -53,6 +53,7 @@ test('Live UI gallery organizes states into browsable workflow clusters', () => assert.match(styles, /\.live-ui-gallery :where\(button, input, select\)/); assert.match(styles, /\.lvg-configure-modifier:not\(\.is-count\) > span/); assert.match(styles, /\.lvg-pending-pill > span:not\(\.lvg-pending-count\)/); + assert.match(styles, /\.lvg-steer-dots\s*\{[^}]*margin-left:\s*auto;[^}]*justify-content:\s*flex-end;/s); }); test('legacy Live Lab URL redirects to the labs namespace', () => { diff --git a/wrangler.toml b/wrangler.toml index 00d88b2d4..e38cd20e2 100644 --- a/wrangler.toml +++ b/wrangler.toml @@ -8,3 +8,9 @@ pages_build_output_dir = "./build" [[r2_buckets]] binding = "WORLD_CARDS" bucket_name = "impeccable-world-cards" + +# Roll/choice telemetry lands in Workers Analytics Engine. Create the dataset +# implicitly on first deploy; queries via the CF GraphQL/SQL API. +[[analytics_engine_datasets]] +binding = "ROLL_ANALYTICS" +dataset = "impeccable_world_rolls"