")`, backgroundSize: '220px 220px', }} /> ); } // ── Corner chrome ────────────────────────────────────────────────────── function SCornerChrome() { const time = useTime(); const pulse = 0.5 + 0.5 * Math.sin(time * Math.PI * 1.1); return ( <>

vol. 01 — craft

§ 03 · design system

fig. 03·ii — hierarchy of craft

); } // ── Token tile (tier 1) ──────────────────────────────────────────────── // Each token has a symbol + mono label. const TOKENS = [ { kind: 'color', label: 'color' }, { kind: 'type', label: 'type' }, { kind: 'spacing', label: 'space' }, { kind: 'easing', label: 'ease' }, { kind: 'radius', label: 'radius' }, { kind: 'shadow', label: 'shadow' }, { kind: 'border', label: 'border' }, { kind: 'breakpoint', label: 'break' }, ]; function TokenGlyph({ kind }) { const s = 52; if (kind === 'color') { return (

); } if (kind === 'type') { return (

20/28

); } if (kind === 'spacing') { return (

{[0.4, 0.7, 1.0].map((sc, i) => (

))}

); } if (kind === 'easing') { // SVG ease-out-cubic curve return ( ); } if (kind === 'radius') { return (

); } if (kind === 'shadow') { return (

); } if (kind === 'border') { return ( ); } if (kind === 'breakpoint') { return ( ); } return null; } // ── Tile frame (with entry animation) ────────────────────────────────── function Tile({ cx, cy, w, h, alpha, scale, accent = false, children }) { if (alpha < 0.01) return null; return (

{children}

); } // ── Tier-entry helper: compute (alpha, scale) per-tile with stagger ──── function tierEntry(time, tierStart, tierEnd, i, count) { const span = tierEnd - tierStart; const perTileStagger = Math.min(0.18, (span * 0.55) / Math.max(1, count)); const tileStart = tierStart + i * perTileStagger; const k = sClamp((time - tileStart) / 0.45); const alpha = sEase(k); const scale = 0.82 + 0.18 * sEase(k); return { alpha, scale }; } // ── Tier 1: Tokens ───────────────────────────────────────────────────── function Tier1Tokens() { const time = useTime(); const rev = sReverseAlpha(time); const xs = tileXPositions(1); const cy = TIERS[1].y; const { tileW, tileH } = TIERS[1]; return ( <> {TOKENS.map((tok, i) => { const { alpha, scale } = tierEntry(time, TIER1_START, TIER1_END, i, TOKENS.length); const a = alpha * (1 - rev); return (

{tok.label}

); })} ); } // ── Tier 2: Components ───────────────────────────────────────────────── const COMPONENTS = [ { key: 'button', label: 'Button' }, { key: 'card', label: 'Card' }, { key: 'nav', label: 'Nav' }, { key: 'input', label: 'Input' }, { key: 'modal', label: 'Modal' }, ]; function ComponentGlyph({ kind }) { if (kind === 'button') { return (

Continue

); } if (kind === 'card') { return (

); } if (kind === 'nav') { return (

{[0, 1, 2].map(i => (

))}

); } if (kind === 'input') { return (

email.tld|

); } if (kind === 'modal') { return (

); } return null; } function Tier2Components() { const time = useTime(); const rev = sReverseAlpha(time); const xs = tileXPositions(2); const cy = TIERS[2].y; const { tileW, tileH } = TIERS[2]; return ( <> {COMPONENTS.map((c, i) => { const { alpha, scale } = tierEntry(time, TIER2_START, TIER2_END, i, COMPONENTS.length); const a = alpha * (1 - rev); return (

{c.label}

); })} ); } // ── Tier 3: Patterns ─────────────────────────────────────────────────── const PATTERNS = [ { key: 'hero', label: 'Hero' }, { key: 'grid', label: 'Feature grid' }, { key: 'faq', label: 'FAQ' }, ]; function PatternGlyph({ kind }) { if (kind === 'hero') { return (

); } if (kind === 'grid') { return (

{[0,1,2,3,4,5].map(i => (

))}

); } if (kind === 'faq') { return (

{[0, 1, 2, 3].map(i => (

{i === 1 ? '−' : '+'}

))}

); } return null; } function Tier3Patterns() { const time = useTime(); const rev = sReverseAlpha(time); const xs = tileXPositions(3); const cy = TIERS[3].y; const { tileW, tileH } = TIERS[3]; return ( <> {PATTERNS.map((p, i) => { const { alpha, scale } = tierEntry(time, TIER3_START, TIER3_END, i, PATTERNS.length); const a = alpha * (1 - rev); return (

{p.label}

); })} ); } // ── Tier 4: Page ─────────────────────────────────────────────────────── function Tier4Page() { const time = useTime(); const rev = sReverseAlpha(time); const cy = TIERS[4].y; const { tileW, tileH } = TIERS[4]; const cx = 960; const { alpha, scale } = tierEntry(time, TIER4_START, TIER4_END, 0, 1); const a = alpha * (1 - rev); if (a < 0.01) return null; return (

{/* Left column: hero copy + stats */}

{/* Top nav */}

{[0,1,2].map(i =>

)}

{/* Hero text */}

{/* Stats row */}

{['15k', '72h', '4.9'].map((v, i) => (

{v}

))}

{/* Right: image block + cards below */}

{[0,1,2].map(i => (

))}

); } // ── Connecting lines between tiers ───────────────────────────────────── // Each line goes from a higher-tier tile DOWN to a lower-tier tile's top edge. // Draw progressively as the higher tier assembles. function ConnectingLines() { const time = useTime(); const rev = sReverseAlpha(time); // Each pair of tiers: map each UPPER tile's x to a small set of LOWER tile x's. // The lines appear shortly after the upper tile appears, drawing downward to the lower tier. // // Pairings (upper.i → lower indices): // tier2.Button(0) → tier1 color, radius (color/shape tokens) // tier2.Card(1) → tier1 spacing, shadow, radius // tier2.Nav(2) → tier1 type, color // tier2.Input(3) → tier1 border, type // tier2.Modal(4) → tier1 shadow, radius, spacing // tier3.Hero(0) → tier2 Button(0), Card(1) // tier3.Grid(1) → tier2 Card(1), Nav(2), Input(3) // tier3.FAQ(2) → tier2 Card(1), Input(3), Modal(4) // tier4.Page(0) → tier3 Hero(0), Grid(1), FAQ(2) const mappings = [ // tier upper, upperIdx, tier lower, lowerIdxs, appearTime { up: 2, uI: 0, lo: 1, lIs: [0, 4], at: TIER2_START + 0.1 }, { up: 2, uI: 1, lo: 1, lIs: [2, 4, 5], at: TIER2_START + 0.3 }, { up: 2, uI: 2, lo: 1, lIs: [1, 0], at: TIER2_START + 0.5 }, { up: 2, uI: 3, lo: 1, lIs: [6, 1], at: TIER2_START + 0.7 }, { up: 2, uI: 4, lo: 1, lIs: [5, 4, 2], at: TIER2_START + 0.9 }, { up: 3, uI: 0, lo: 2, lIs: [0, 1], at: TIER3_START + 0.2 }, { up: 3, uI: 1, lo: 2, lIs: [1, 2, 3], at: TIER3_START + 0.7 }, { up: 3, uI: 2, lo: 2, lIs: [1, 3, 4], at: TIER3_START + 1.2 }, { up: 4, uI: 0, lo: 3, lIs: [0, 1, 2], at: TIER4_START + 0.3 }, ]; const upperXs = { 2: tileXPositions(2), 3: tileXPositions(3), 4: tileXPositions(4) }; const lowerXs = { 1: tileXPositions(1), 2: tileXPositions(2), 3: tileXPositions(3) }; return ( ); } // ── Tier caption (appears near the active tier) ──────────────────────── function TierCaption() { const time = useTime(); const rev = sReverseAlpha(time); // Determine which tier is active let idx = 0; let label = '§ 01 · tokens'; if (time >= TIER1_START && time < TIER2_START) { idx = 0; label = '§ 01 · tokens'; } else if (time >= TIER2_START && time < TIER3_START) { idx = 1; label = '§ 02 · components'; } else if (time >= TIER3_START && time < TIER4_START) { idx = 2; label = '§ 03 · patterns'; } else if (time >= TIER4_START && time < SETTLE_START) { idx = 3; label = '§ 04 · pages'; } else if (time >= SETTLE_START) { idx = 3; label = '§ 04 · pages'; } else { idx = 0; label = '§ 01 · tokens'; } const tierStarts = [TIER1_START, TIER2_START, TIER3_START, TIER4_START]; const since = time - tierStarts[idx]; let alpha = sClamp(since / 0.4); // Fade out 0.3s before the next tier starts (except last) const nextStart = idx < 3 ? tierStarts[idx + 1] : SETTLE_START; if (time > nextStart - 0.3 && idx < 3) { alpha *= sClamp((nextStart - time) / 0.3); } // Tier 4 stays through settle then fades during reverse alpha *= (1 - rev); if (alpha < 0.01) return null; // Position: to the RIGHT of each tier band, in a consistent slot const tierY = TIERS[idx + 1].y; return (

{label.split('·')[0].trim()}

{label.split('·')[1].trim()}

); } // ── Settle caption "tokens build pages" ──────────────────────────────── function SettleCaption() { const time = useTime(); const rev = sReverseAlpha(time); const k = sClamp((time - (SETTLE_START + 0.1)) / 0.6) * (1 - rev); if (k < 0.01) return null; return (

§ 03 · the design system

tokens{' '} build {' '}pages.

); } // ── Amber bloom behind tier 4 ────────────────────────────────────────── function AmberPageBloom() { const time = useTime(); const rev = sReverseAlpha(time); if (time < TIER4_START - 0.1) return null; const k = sClamp((time - TIER4_START) / 1.2); const alpha = sEase(k) * (1 - rev); const breathe = 0.85 + 0.15 * Math.sin(time * Math.PI * 1.3); const cy = TIERS[4].y; return (

); } // ── Section title ────────────────────────────────────────────────────── function SystemSectionTitle() { const time = useTime(); const rev = sReverseAlpha(time); const alpha = sClamp(time / 0.8); // Fade out BEFORE tier 4 arrives, so the page tile has clean air above it let out = 1; if (time >= TIER4_START - 0.6) out = sClamp((TIER4_START - 0.2 - time) / 0.4); const a = alpha * out * (1 - rev); if (a < 0.01) return null; return (

§ 03 · the design system

built up,{' '} atom by atom .

); } // ── Main scene ───────────────────────────────────────────────────────── function SystemScene() { return ( <> {/* Background tint */}

{/* Connecting lines render FIRST so tiles draw on top of them */} {/* Tiles bottom→top (later tiles paint on top of lines) */} ); } Object.assign(window, { SystemScene, S_PALETTE, S_FONTS, });