pbakaus_impeccable/skill/scripts/concept-ingredients.json

{
 "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
  }
 ]
}