Initial commit

2026-06-10 11:48:40 +02:00
commit 40d67c1d6b
17 changed files with 4263 additions and 0 deletions
@@ -0,0 +1,2 @@
+node_modules/
+.DS_Store
@@ -0,0 +1,11 @@
+# Demographic Wave
+
+Standalone Glitch University component that simulates how a large generation moves through age bands and changes which cohort's policy preferences dominate.
+
+## Development
+
+- `npm install`
+- `npm run dev`
+- `npm run build`
+
+The component follows the Glitch Component contract and registers itself as `window.GlitchComponents["demographic-wave"]` when loaded from the built IIFE bundle.
@@ -0,0 +1,15 @@
+{
+  "componentId": "demographic-wave",
+  "displayName": "Demographic Wave",
+  "version": "1.0.0",
+  "folderName": "glitch_demographic_wave",
+  "packageName": "@glitch-components/demographic-wave",
+  "entry": "dist/demographic-wave.js",
+  "source": "src/index.tsx",
+  "tags": [
+    "glitch-component",
+    "demography",
+    "policy",
+    "simulation"
+  ]
+}
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Demographic Wave</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/dev.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,49 @@
+{
+  "name": "@glitch-components/demographic-wave",
+  "version": "1.0.0",
+  "description": "Demographic Wave glitch component for Glitch University",
+  "type": "module",
+  "main": "./dist/demographic-wave.js",
+  "module": "./dist/demographic-wave.js",
+  "types": "./src/types.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/demographic-wave.js",
+      "types": "./src/types.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src/types.ts",
+    "glitch.manifest.json"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "leva": "^0.10.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2"
+  },
+  "keywords": [
+    "glitch",
+    "demography",
+    "simulation",
+    "component"
+  ],
+  "author": "Glitch.university",
+  "license": "MIT"
+}
@@ -0,0 +1,460 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { CSSProperties } from 'react'
+import styles from './styles.module.css'
+import type { GlitchComponentProps } from './types'
+
+type GenerationKey = 'silent' | 'boomer' | 'post'
+
+interface Stage {
+  min: number
+  title: string
+  copy: string
+  policy: string
+}
+
+interface ComponentParams {
+  startYear?: number
+  endYear?: number
+  animationSpeed?: number
+  waveScale?: number
+  startEqualized?: boolean
+}
+
+interface Palette {
+  silent: string
+  boomer: string
+  post: string
+  accent: string
+  grid: string
+  text: string
+}
+
+const COHORT_YEARS = Array.from({ length: 82 }, (_, index) => 1928 + index)
+const BOOMER_CENTER_YEAR = 1957
+const MIN_YEAR = 1946
+const MAX_YEAR = 2038
+
+const STAGES: Stage[] = [
+  {
+    min: 0,
+    title: 'SCHOOLS',
+    copy: 'A large child cohort pulls classrooms, teachers, and local budgets toward youth infrastructure.',
+    policy: 'Education and schools'
+  },
+  {
+    min: 18,
+    title: 'CAMPUS',
+    copy: 'The wave enters college and first jobs. Credentials, housing, and entry labor markets start to flex.',
+    policy: 'Universities and entry jobs'
+  },
+  {
+    min: 30,
+    title: 'FAMILY',
+    copy: 'The cohort becomes parents and buyers. Homes, childcare, transport, and suburbs absorb the demand.',
+    policy: 'Housing and family subsidies'
+  },
+  {
+    min: 50,
+    title: 'VOTES',
+    copy: 'High turnout meets cohort size. Tax, asset, and stability preferences become easier to pass.',
+    policy: 'Tax and asset rules'
+  },
+  {
+    min: 65,
+    title: 'RETIREMENT',
+    copy: 'The wave reaches old age. Health care, pensions, and age-linked spending gain political gravity.',
+    policy: 'Pensions and health care'
+  }
+]
+
+const GENERATIONS: { key: GenerationKey; label: string }[] = [
+  { key: 'silent', label: 'Silent generation' },
+  { key: 'boomer', label: 'Boomers' },
+  { key: 'post', label: 'Later cohorts' }
+]
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+const numberParam = (value: unknown, fallback: number) => (typeof value === 'number' ? value : fallback)
+
+const booleanParam = (value: unknown, fallback: boolean) => (typeof value === 'boolean' ? value : fallback)
+
+const cohortFamily = (birthYear: number): GenerationKey => {
+  if (birthYear >= 1946 && birthYear <= 1964) return 'boomer'
+  if (birthYear < 1946) return 'silent'
+  return 'post'
+}
+
+const turnout = (age: number) => {
+  if (age < 18 || age > 88) return 0
+  if (age < 30) return 0.42
+  if (age < 45) return 0.62
+  if (age < 65) return 0.82
+  return 0.9 - Math.max(0, age - 72) * 0.018
+}
+
+const stageForAge = (age: number) =>
+  STAGES.reduce((chosen, stage) => (age >= stage.min ? stage : chosen), STAGES[0])
+
+const createCohortSize = (equalMode: boolean, waveScale: number) => (birthYear: number) => {
+  if (equalMode) return 1
+
+  const boomerPeak = Math.exp(-Math.pow((birthYear - BOOMER_CENTER_YEAR) / 7.5, 2)) * waveScale
+  const postDip = Math.exp(-Math.pow((birthYear - 1974) / 8, 2)) * -0.22
+  const echo = Math.exp(-Math.pow((birthYear - 1991) / 9, 2)) * 0.18
+  return Math.max(0.5, 0.78 + boomerPeak + postDip + echo)
+}
+
+function drawWave(
+  canvas: HTMLCanvasElement,
+  year: number,
+  equalMode: boolean,
+  waveScale: number,
+  palette: Palette
+) {
+  const rect = canvas.getBoundingClientRect()
+  const scale = window.devicePixelRatio || 1
+  const width = rect.width
+  const height = rect.height
+
+  canvas.width = Math.floor(width * scale)
+  canvas.height = Math.floor(height * scale)
+
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  ctx.setTransform(scale, 0, 0, scale, 0, 0)
+  ctx.clearRect(0, 0, width, height)
+
+  const padX = width * 0.07
+  const base = height * 0.72
+  const maxH = height * 0.68
+  const sizeFor = createCohortSize(equalMode, waveScale)
+
+  ctx.lineWidth = 1
+  ctx.strokeStyle = palette.grid
+  for (let index = 0; index <= 4; index += 1) {
+    const x = padX + (index / 4) * (width - padX * 2)
+    ctx.beginPath()
+    ctx.moveTo(x, height * 0.14)
+    ctx.lineTo(x, height * 0.88)
+    ctx.stroke()
+  }
+
+  for (const birthYear of COHORT_YEARS) {
+    const age = year - birthYear
+    if (age < 0 || age > 88) continue
+
+    const size = sizeFor(birthYear)
+    const x = padX + (age / 88) * (width - padX * 2)
+    const radius = Math.max(4, width * 0.006 + size * width * 0.009)
+    const y = base - size * maxH * 0.52 - Math.sin((birthYear + year) * 0.18) * height * 0.025
+    const family = cohortFamily(birthYear)
+
+    ctx.beginPath()
+    ctx.arc(x, y, radius, 0, Math.PI * 2)
+    ctx.fillStyle = palette[family]
+    ctx.globalAlpha = family === 'boomer' ? 0.94 : 0.68
+    ctx.fill()
+    ctx.globalAlpha = 1
+  }
+
+  const boomerAge = year - BOOMER_CENTER_YEAR
+  if (boomerAge < 0 || boomerAge > 88) return
+
+  const x = padX + (boomerAge / 88) * (width - padX * 2)
+  const y = base - sizeFor(BOOMER_CENTER_YEAR) * maxH * 0.52
+
+  ctx.beginPath()
+  ctx.moveTo(x, height * 0.16)
+  ctx.lineTo(x, height * 0.9)
+  ctx.strokeStyle = palette.boomer
+  ctx.globalAlpha = 0.42
+  ctx.lineWidth = 2
+  ctx.stroke()
+  ctx.globalAlpha = 1
+
+  ctx.beginPath()
+  ctx.arc(x, y, Math.max(16, width * 0.035), 0, Math.PI * 2)
+  ctx.strokeStyle = palette.accent
+  ctx.lineWidth = 3
+  ctx.stroke()
+}
+
+export default function Component({
+  config,
+  onComplete,
+  onProgress,
+  theme,
+  className,
+  host
+}: GlitchComponentProps) {
+  const params = config.params as ComponentParams
+  const startYear = clamp(Math.round(numberParam(params.startYear, MIN_YEAR)), MIN_YEAR, MAX_YEAR)
+  const endYear = clamp(Math.round(numberParam(params.endYear, MAX_YEAR)), startYear + 1, MAX_YEAR)
+  const animationSpeed = clamp(numberParam(params.animationSpeed, 1), 0.25, 3)
+  const waveScale = clamp(numberParam(params.waveScale, 1.15), 0.2, 1.8)
+  const [year, setYear] = useState(startYear)
+  const [running, setRunning] = useState(true)
+  const [equalMode, setEqualMode] = useState(() => booleanParam(params.startEqualized, false))
+  const [completed, setCompleted] = useState(false)
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const lastTickRef = useRef(0)
+
+  const palette = useMemo<Palette>(() => ({
+    silent: '#71a6d2',
+    boomer: '#e7b84f',
+    post: '#7ee0a0',
+    accent: theme?.accent ?? '#22d3ee',
+    grid: 'rgba(232, 232, 236, 0.13)',
+    text: theme?.text ?? '#e8e8ec'
+  }), [theme?.accent, theme?.text])
+
+  const themeStyle = useMemo(() => ({
+    '--gc-primary': theme?.primary,
+    '--gc-accent': theme?.accent,
+    '--gc-bg': theme?.bg,
+    '--gc-bg-secondary': theme?.bgSecondary,
+    '--gc-text': theme?.text,
+    '--gc-text-muted': theme?.textMuted,
+    '--gc-border': theme?.border
+  }) as CSSProperties, [theme])
+
+  const sizeFor = useMemo(() => createCohortSize(equalMode, waveScale), [equalMode, waveScale])
+
+  const boomerAge = year - BOOMER_CENTER_YEAR
+  const activeStage = stageForAge(clamp(boomerAge, 0, 88))
+
+  const currentPressure = useMemo(() => {
+    const totals = Object.fromEntries(STAGES.map((stage) => [stage.policy, 0]))
+    for (const birthYear of COHORT_YEARS) {
+      const age = year - birthYear
+      if (age < 0 || age > 88) continue
+
+      const voteWeight = sizeFor(birthYear) * turnout(age)
+      totals[stageForAge(age).policy] += voteWeight
+    }
+
+    const total = Object.values(totals).reduce((sum, value) => sum + value, 0)
+    return total > 0 ? Math.round((totals[activeStage.policy] / total) * 100) : 0
+  }, [activeStage.policy, sizeFor, year])
+
+  const generationWins = useMemo(() => {
+    const wins = Object.fromEntries(GENERATIONS.map((generation) => [generation.key, 0])) as Record<GenerationKey, number>
+
+    for (let targetYear = startYear; targetYear <= year; targetYear += 1) {
+      const totals = Object.fromEntries(GENERATIONS.map((generation) => [generation.key, 0])) as Record<GenerationKey, number>
+
+      for (const birthYear of COHORT_YEARS) {
+        const age = targetYear - birthYear
+        if (age < 18 || age > 88) continue
+        totals[cohortFamily(birthYear)] += sizeFor(birthYear) * turnout(age)
+      }
+
+      const winner = GENERATIONS.reduce((chosen, generation) =>
+        totals[generation.key] > totals[chosen.key] ? generation : chosen
+      , GENERATIONS[0])
+
+      if (totals[winner.key] > 0) wins[winner.key] += 1
+    }
+
+    return wins
+  }, [sizeFor, startYear, year])
+
+  const maxWins = Math.max(...Object.values(generationWins), 1)
+  const progress = Math.round(((year - startYear) / Math.max(1, endYear - startYear)) * 100)
+
+  const redraw = useCallback(() => {
+    if (!canvasRef.current) return
+    drawWave(canvasRef.current, year, equalMode, waveScale, palette)
+  }, [equalMode, palette, waveScale, year])
+
+  useEffect(() => {
+    setYear((current) => clamp(current, startYear, endYear))
+  }, [endYear, startYear])
+
+  useEffect(() => {
+    setEqualMode(booleanParam(params.startEqualized, false))
+  }, [params.startEqualized])
+
+  useEffect(() => {
+    onProgress?.(progress)
+  }, [onProgress, progress])
+
+  useEffect(() => {
+    redraw()
+    const canvas = canvasRef.current
+    if (!canvas) return undefined
+
+    const resizeObserver = new ResizeObserver(redraw)
+    resizeObserver.observe(canvas)
+    return () => resizeObserver.disconnect()
+  }, [redraw])
+
+  useEffect(() => {
+    let animationFrame = 0
+
+    const step = (timestamp: number) => {
+      const interval = 260 / animationSpeed
+      if (running && timestamp - lastTickRef.current > interval) {
+        setYear((current) => (current >= endYear ? startYear : current + 1))
+        lastTickRef.current = timestamp
+      }
+
+      animationFrame = window.requestAnimationFrame(step)
+    }
+
+    animationFrame = window.requestAnimationFrame(step)
+    return () => window.cancelAnimationFrame(animationFrame)
+  }, [animationSpeed, endYear, running, startYear])
+
+  const playClick = useCallback((target: string) => {
+    host?.playSound?.('ui.button_click', { target, component: config.name })
+  }, [config.name, host])
+
+  const setMode = useCallback((nextEqualMode: boolean) => {
+    playClick(nextEqualMode ? 'equal-generations' : 'boomer-wave')
+    setEqualMode(nextEqualMode)
+  }, [playClick])
+
+  const handleSlider = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    playClick('timeline')
+    setRunning(false)
+    setYear(Number(event.currentTarget.value))
+  }, [playClick])
+
+  const finishProof = useCallback(() => {
+    if (completed) return
+
+    setCompleted(true)
+    playClick('complete')
+    onComplete({
+      success: true,
+      score: 100,
+      data: {
+        year,
+        mode: equalMode ? 'equal-generations' : 'boomer-wave',
+        generationWins,
+        currentPressure,
+        configId: config.id,
+        completedAt: new Date().toISOString()
+      }
+    })
+  }, [completed, config.id, currentPressure, equalMode, generationWins, onComplete, playClick, year])
+
+  const rootClassName = className ? `${styles.wrapper} ${className}` : styles.wrapper
+
+  return (
+    <section className={rootClassName} style={themeStyle} aria-label="Demographic wave simulator">
+      <div className={styles.frame}>
+        <header className={styles.header}>
+          <div className={styles.controls} aria-label="Simulation controls">
+            <button className={styles.iconButton} type="button" onClick={() => setRunning((value) => !value)}>
+              {running ? 'II' : '>'}
+            </button>
+            <button
+              className={`${styles.modeButton} ${!equalMode ? styles.modeActive : ''}`}
+              type="button"
+              onClick={() => setMode(false)}
+            >
+              W
+            </button>
+            <button
+              className={`${styles.modeButton} ${equalMode ? styles.modeActive : ''}`}
+              type="button"
+              onClick={() => setMode(true)}
+            >
+              =
+            </button>
+          </div>
+        </header>
+
+        <div className={styles.stageGrid}>
+          <div className={styles.wavePanel}>
+            <div className={styles.readoutRow}>
+              <div>
+                <strong className={styles.year}>{year}</strong>
+              </div>
+              <div className={styles.legend}>
+                {GENERATIONS.map((generation) => (
+                  <span key={generation.key}>
+                    <i className={styles[generation.key]} />
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            <div className={styles.track}>
+              <div className={styles.ageMarks} aria-hidden="true">
+                <span>0</span>
+                <span>20</span>
+                <span>40</span>
+                <span>60</span>
+                <span>80</span>
+              </div>
+              <canvas ref={canvasRef} className={styles.canvas} />
+              <div className={styles.stageMarks} aria-hidden="true">
+                <span>Kids</span>
+                <span>Campus</span>
+                <span>Work</span>
+                <span>Assets</span>
+                <span>Care</span>
+              </div>
+            </div>
+          </div>
+
+          <aside className={styles.eventPanel}>
+            <h3>{activeStage.title}</h3>
+            <div className={styles.meter}>
+              <strong>{currentPressure}%</strong>
+            </div>
+          </aside>
+        </div>
+
+        <div className={styles.timeline}>
+          <input
+            aria-label="Simulation year"
+            type="range"
+            min={startYear}
+            max={endYear}
+            value={year}
+            onChange={handleSlider}
+          />
+          <strong>{progress}%</strong>
+        </div>
+
+        <section className={styles.proofPanel} aria-label="Accepted policy preference winners">
+          <div className={styles.proofHeader}>
+            <div>
+              <h3>Policy wins</h3>
+            </div>
+            <div className={styles.proofActions}>
+              <span className={styles.modePill}>{equalMode ? '=' : 'W'}</span>
+              <button className={styles.completeButton} type="button" onClick={finishProof} disabled={completed}>
+                {completed ? 'OK' : '✓'}
+              </button>
+            </div>
+          </div>
+
+          <div className={styles.bars}>
+            {GENERATIONS.map((generation) => {
+              const percent = Math.round((generationWins[generation.key] / maxWins) * 100)
+              return (
+                <div className={styles.barRow} key={generation.key}>
+                  <span>{generation.key === 'silent' ? 'S' : generation.key === 'boomer' ? 'B' : 'L'}</span>
+                  <div className={styles.barTrack}>
+                    <div
+                      className={`${styles.barFill} ${styles[generation.key]}`}
+                      style={{ width: `${percent}%` }}
+                    />
+                  </div>
+                  <strong>{percent}</strong>
+                </div>
+              )
+            })}
+          </div>
+        </section>
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,49 @@
+@import url("https://fonts.googleapis.com/css2?family=Iceland&family=JetBrains+Mono:wght@400;600&family=Russo+One&display=swap");
+
+:root {
+  --color-bg: #0a0a0f;
+  --color-bg-secondary: #12121a;
+  --color-text: #e8e8ec;
+  --color-text-muted: #9999a8;
+  --color-primary: #6366f1;
+  --color-primary-hover: #818cf8;
+  --color-accent: #22d3ee;
+  --color-accent-secondary: #a855f7;
+  --color-border: #2a2a3a;
+  --font-main: "Iceland", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-display: "Russo One", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: "JetBrains Mono", "Iceland", monospace;
+  --small-font: 1.875rem;
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 2rem;
+  --spacing-lg: 4rem;
+  --spacing-xl: 6rem;
+  --max-width: 1200px;
+  --border-radius: 12px;
+  --border-radius-sm: 8px;
+  --transition: 0.2s ease;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background:
+    radial-gradient(circle at top, rgb(99 102 241 / 18%), transparent 36%),
+    linear-gradient(180deg, #080810, #0d1018);
+  color: var(--color-text);
+  font-family: var(--font-main);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
@@ -0,0 +1,51 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { Leva, useControls } from 'leva'
+import Component from './Component'
+import { metadata } from './index'
+import './dev-theme.css'
+
+function DevHarness() {
+  const params = useControls({
+    startYear: { value: 1946, min: 1946, max: 2028, step: 1 },
+    endYear: { value: 2038, min: 1964, max: 2038, step: 1 },
+    animationSpeed: { value: 1, min: 0.25, max: 3, step: 0.25 },
+    waveScale: { value: 1.15, min: 0.2, max: 1.8, step: 0.05 },
+    startEqualized: false
+  })
+
+  return (
+    <div style={{ minHeight: '100vh' }}>
+      <Leva hidden />
+      <Component
+        config={{
+          id: 'dev',
+          name: metadata.name,
+          version: metadata.version,
+          params: params as Record<string, unknown>
+        }}
+        theme={{
+          primary: '#6366f1',
+          accent: '#22d3ee',
+          bg: '#0a0a0f',
+          bgSecondary: '#12121a',
+          text: '#e8e8ec',
+          textMuted: '#9999a8',
+          border: '#2a2a3a'
+        }}
+        onProgress={(percent) => {
+          console.log('Progress:', percent)
+        }}
+        onComplete={(result) => {
+          console.log('Complete:', result)
+        }}
+      />
+    </div>
+  )
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <DevHarness />
+  </React.StrictMode>
+)
@@ -0,0 +1,70 @@
+import Component from './Component'
+import type { GlitchComponentMetadata } from './types'
+
+export default Component
+
+export const metadata: GlitchComponentMetadata = {
+  name: 'demographic-wave',
+  displayName: 'Demographic Wave',
+  version: '1.0.0',
+  paramSchema: {
+    startYear: {
+      type: 'range',
+      label: 'Start Year',
+      default: 1946,
+      min: 1946,
+      max: 2028,
+      step: 1
+    },
+    endYear: {
+      type: 'range',
+      label: 'End Year',
+      default: 2038,
+      min: 1964,
+      max: 2038,
+      step: 1
+    },
+    animationSpeed: {
+      type: 'range',
+      label: 'Animation Speed',
+      default: 1,
+      min: 0.25,
+      max: 3,
+      step: 0.25
+    },
+    waveScale: {
+      type: 'range',
+      label: 'Boomer Wave Scale',
+      default: 1.15,
+      min: 0.2,
+      max: 1.8,
+      step: 0.05
+    },
+    startEqualized: {
+      type: 'boolean',
+      label: 'Start Equalized',
+      default: false
+    }
+  },
+  defaultParams: {
+    startYear: 1946,
+    endYear: 2038,
+    animationSpeed: 1,
+    waveScale: 1.15,
+    startEqualized: false
+  }
+}
+
+export type {
+  GlitchComponentProps,
+  GlitchComponentConfig,
+  GlitchComponentResult,
+  GlitchTheme,
+  GlitchHostBridge
+} from './types'
+
+if (typeof window !== 'undefined') {
+  type GCRegistry = Record<string, { default: typeof Component; metadata: GlitchComponentMetadata }>
+  ;(window as unknown as { GlitchComponents: GCRegistry }).GlitchComponents ??= {}
+  ;(window as unknown as { GlitchComponents: GCRegistry }).GlitchComponents[metadata.name] = { default: Component, metadata }
+}
@@ -0,0 +1,494 @@
+.wrapper {
+  --gc-bg: var(--color-bg, #0a0a0f);
+  --gc-bg-secondary: var(--color-bg-secondary, #12121a);
+  --gc-text: var(--color-text, #e8e8ec);
+  --gc-text-muted: var(--color-text-muted, #9999a8);
+  --gc-primary: var(--color-primary, #6366f1);
+  --gc-accent: var(--color-accent, #22d3ee);
+  --gc-border: var(--color-border, #2a2a3a);
+  --gc-font-main: var(--font-main, system-ui, sans-serif);
+  --gc-font-display: var(--font-display, var(--gc-font-main));
+  --gc-font-mono: var(--font-mono, monospace);
+  --gc-shell-padding: clamp(8px, 2vw, 18px);
+  width: 100%;
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  padding: var(--gc-shell-padding);
+  box-sizing: border-box;
+}
+
+.wrapper *,
+.wrapper *::before,
+.wrapper *::after {
+  box-sizing: inherit;
+}
+
+.frame {
+  position: relative;
+  width: min(100%, calc((100dvh - (var(--gc-shell-padding) * 2)) * 16 / 9));
+  max-height: calc(100dvh - (var(--gc-shell-padding) * 2));
+  aspect-ratio: 16 / 9;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  gap: 0.5em;
+  overflow: hidden;
+  padding: 1em;
+  color: var(--gc-text);
+  font-family: var(--gc-font-main);
+  font-size: clamp(10px, 1.12cqw, 18px);
+  line-height: 1.25;
+  background:
+    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--gc-primary) 26%, transparent), transparent 34%),
+    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--gc-accent) 18%, transparent), transparent 30%),
+    linear-gradient(145deg, var(--gc-bg), var(--gc-bg-secondary));
+  border: 1px solid color-mix(in srgb, var(--gc-border) 74%, transparent);
+  box-shadow:
+    inset 0 0 0 1px rgb(255 255 255 / 4%),
+    0 18px 48px rgb(0 0 0 / 34%);
+  container-type: inline-size;
+}
+
+.header,
+.stageGrid,
+.readoutRow,
+.proofHeader,
+.timeline,
+.controls,
+.legend,
+.meter {
+  display: flex;
+  align-items: center;
+}
+
+.header,
+.readoutRow,
+.proofHeader,
+.meter {
+  justify-content: space-between;
+  gap: 1em;
+}
+
+.label {
+  display: block;
+  margin: 0 0 0.25em;
+  color: color-mix(in srgb, var(--gc-accent) 80%, white);
+  font-family: var(--gc-font-mono);
+  font-size: 0.62em;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.controls {
+  gap: 0.45em;
+  justify-content: stretch;
+  width: 100%;
+}
+
+.iconButton,
+.modeButton,
+.completeButton {
+  border: 1px solid color-mix(in srgb, var(--gc-border) 78%, transparent);
+  color: var(--gc-text);
+  font: inherit;
+  font-family: var(--gc-font-mono);
+  font-size: 0.68em;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
+}
+
+.iconButton:hover,
+.modeButton:hover,
+.completeButton:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--gc-accent) 62%, var(--gc-border));
+}
+
+.iconButton {
+  min-width: 3.7em;
+  min-height: 2.75em;
+  background: rgb(10 14 24 / 72%);
+}
+
+.modeButton {
+  min-height: 2.75em;
+  padding: 0 0.85em;
+  background: rgb(10 14 24 / 58%);
+}
+
+.modeActive {
+  color: #090b10;
+  background: linear-gradient(90deg, #e7b84f, color-mix(in srgb, var(--gc-accent) 58%, #e7b84f));
+  border-color: rgb(255 255 255 / 56%);
+}
+
+.stageGrid {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1.36fr) minmax(12em, 0.64fr);
+  align-items: stretch;
+  gap: 0.65em;
+}
+
+.wavePanel,
+.eventPanel,
+.proofPanel,
+.timeline {
+  min-width: 0;
+  border: 1px solid color-mix(in srgb, var(--gc-border) 76%, transparent);
+  background: rgb(5 9 18 / 54%);
+}
+
+.wavePanel {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 0.45em;
+  padding: 0.7em;
+}
+
+.year {
+  display: block;
+  font-family: var(--gc-font-display);
+  font-size: 1.85em;
+  line-height: 0.9;
+}
+
+.legend {
+  gap: 0.4em;
+  justify-content: end;
+  color: var(--gc-text-muted);
+  font-family: var(--gc-font-mono);
+  font-size: 0.62em;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.legend i {
+  display: inline-block;
+  width: 0.8em;
+  height: 0.8em;
+  margin-right: 0;
+  border-radius: 999px;
+}
+
+.track {
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--gc-border) 70%, transparent);
+  background:
+    linear-gradient(90deg, rgb(113 166 210 / 6%), transparent 32%, rgb(231 184 79 / 8%) 62%, rgb(126 224 160 / 7%)),
+    rgb(7 11 17 / 78%);
+}
+
+.canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.ageMarks,
+.stageMarks {
+  position: absolute;
+  left: 7%;
+  right: 7%;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  color: rgb(232 232 236 / 60%);
+  font-family: var(--gc-font-mono);
+  font-size: 0.58em;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  pointer-events: none;
+  text-transform: uppercase;
+}
+
+.ageMarks {
+  top: 0.8em;
+}
+
+.stageMarks {
+  bottom: 0.75em;
+  text-align: center;
+}
+
+.eventPanel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  gap: 1em;
+  padding: 0.9em;
+}
+
+.eventPanel h3,
+.proofHeader h3 {
+  margin: 0;
+  color: var(--gc-text);
+  font-family: var(--gc-font-display);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.eventPanel h3 {
+  font-size: 1.1em;
+}
+
+.eventPanel p {
+  display: none;
+  margin: 0.65em 0 0;
+  color: color-mix(in srgb, var(--gc-text-muted) 86%, white);
+  font-size: 0.88em;
+}
+
+.meter {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+  color: var(--gc-text-muted);
+  font-family: var(--gc-font-mono);
+  font-size: 0.7em;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.meter strong {
+  color: #e7b84f;
+  font-family: var(--gc-font-display);
+  font-size: 2.2em;
+  letter-spacing: 0.02em;
+}
+
+.timeline {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 3.5em;
+  gap: 0.8em;
+  padding: 0.62em 0.8em;
+}
+
+.timeline .label {
+  margin: 0;
+}
+
+.timeline input {
+  width: 100%;
+  accent-color: #e7b84f;
+}
+
+.timeline strong {
+  text-align: right;
+  font-family: var(--gc-font-mono);
+  font-size: 0.72em;
+}
+
+.proofPanel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.8em;
+  padding: 0.8em;
+}
+
+.proofHeader {
+  grid-column: 1 / -1;
+}
+
+.proofHeader h3 {
+  display: none;
+}
+
+.modePill {
+  white-space: nowrap;
+  border: 1px solid color-mix(in srgb, var(--gc-border) 72%, transparent);
+  min-width: 3em;
+  padding: 0.45em 0.7em;
+  color: var(--gc-text-muted);
+  font-family: var(--gc-font-mono);
+  font-size: 0.62em;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.proofActions {
+  display: flex;
+  align-items: center;
+  gap: 0.45em;
+}
+
+.bars {
+  display: grid;
+  gap: 0.45em;
+}
+
+.barRow {
+  display: grid;
+  grid-template-columns: 1.3em minmax(0, 1fr) 2.2em;
+  align-items: center;
+  gap: 0.65em;
+  color: var(--gc-text-muted);
+  font-family: var(--gc-font-mono);
+  font-size: 0.68em;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.barTrack {
+  height: 1.35em;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--gc-border) 76%, transparent);
+  background: rgb(3 6 12 / 72%);
+}
+
+.barFill {
+  height: 100%;
+  transition: width 180ms ease;
+}
+
+.barRow strong {
+  color: var(--gc-text);
+  text-align: right;
+}
+
+.silent {
+  background: #71a6d2;
+}
+
+.boomer {
+  background: #e7b84f;
+}
+
+.post {
+  background: #7ee0a0;
+}
+
+.completeButton {
+  min-height: 2.35em;
+  padding: 0 0.8em;
+  background: color-mix(in srgb, var(--gc-primary) 28%, rgb(5 9 18));
+}
+
+.completeButton:disabled {
+  cursor: default;
+  opacity: 0.68;
+  transform: none;
+}
+
+@media (orientation: portrait) {
+  .frame {
+    width: min(100%, calc((100dvh - (var(--gc-shell-padding) * 2)) / 2));
+    aspect-ratio: 1 / 2;
+    grid-template-rows: auto minmax(0, 1.24fr) auto minmax(0, 0.56fr);
+    font-size: clamp(10px, 3.2cqw, 16px);
+  }
+
+  .title {
+    font-size: 1.2em;
+  }
+
+  .header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.55em;
+  }
+
+  .controls {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .iconButton,
+  .modeButton {
+    min-height: 2.35em;
+  }
+
+  .stageGrid {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1.25fr) auto;
+  }
+
+  .wavePanel {
+    padding: 0.75em;
+  }
+
+  .readoutRow {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.45em;
+  }
+
+  .legend {
+    justify-content: start;
+  }
+
+  .eventPanel {
+    min-height: 0;
+    padding: 0.72em;
+  }
+
+  .eventPanel h3 {
+    font-size: 1em;
+  }
+
+  .eventPanel p {
+    margin-top: 0.42em;
+    font-size: 0.78em;
+    line-height: 1.22;
+  }
+
+  .meter {
+    padding-top: 0.48em;
+  }
+
+  .meter strong {
+    font-size: 1.7em;
+  }
+
+  .stageMarks {
+    display: none;
+  }
+
+  .proofPanel {
+    grid-template-columns: 1fr;
+    gap: 0.5em;
+    padding: 0.65em;
+  }
+
+  .proofHeader {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.45em;
+  }
+
+  .proofActions {
+    width: 100%;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .proofHeader h3 {
+    font-size: 0.82em;
+  }
+
+  .barRow {
+    grid-template-columns: 1fr 2.2em;
+    gap: 0.32em;
+    font-size: 0.6em;
+  }
+
+  .barRow span {
+    grid-column: 1 / -1;
+  }
+
+  .barTrack {
+    height: 0.85em;
+  }
+
+  .completeButton {
+    min-height: 2.35em;
+  }
+}
@@ -0,0 +1,59 @@
+export interface GlitchComponentConfig {
+  id: string
+  name: string
+  version: string
+  params: Record<string, unknown>
+}
+
+export interface GlitchHostBridge {
+  playSound?: (id: string, payload?: Record<string, unknown>) => void
+  stopSound?: (id: string, payload?: Record<string, unknown>) => void
+  emit?: (type: string, payload?: unknown) => void
+}
+
+export interface GlitchTheme {
+  primary: string
+  accent: string
+  bg: string
+  bgSecondary: string
+  text: string
+  textMuted: string
+  border: string
+}
+
+export interface GlitchComponentResult {
+  success: boolean
+  score?: number
+  data?: unknown
+  error?: string
+}
+
+export interface GlitchComponentProps {
+  config: GlitchComponentConfig
+  onComplete: (result: GlitchComponentResult) => void
+  onProgress?: (percent: number) => void
+  theme?: GlitchTheme
+  className?: string
+  host?: GlitchHostBridge
+}
+
+export interface ParamSchema {
+  [key: string]: {
+    type: 'number' | 'string' | 'boolean' | 'color' | 'select' | 'range'
+    label?: string
+    description?: string
+    default: unknown
+    options?: { value: string | number; label: string }[]
+    min?: number
+    max?: number
+    step?: number
+  }
+}
+
+export interface GlitchComponentMetadata {
+  name: string
+  displayName: string
+  version: string
+  paramSchema: ParamSchema
+  defaultParams: Record<string, unknown>
+}
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "types": [
+      "vite/client"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src"
+  ]
+}
@@ -0,0 +1,32 @@
+import { resolve } from 'path'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+
+export default defineConfig(({ mode }) => ({
+  plugins: [react(), cssInjectedByJsPlugin()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'GlitchComponent',
+      fileName: 'demographic-wave',
+      formats: ['iife']
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM'
+        },
+        assetFileNames: 'assets/[name][extname]'
+      }
+    },
+    sourcemap: true,
+    minify: mode === 'production'
+  },
+  server: {
+    port: 3001,
+    open: true
+  }
+}))