oddlyalive 0.2.0-alpha.2

package/examples/shared/example.css

@@ -0,0 +1,320 @@
+:root {
+  color-scheme: dark;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --page: #121211;
+  --page-glow: #302c26;
+  --paper: #efe7d5;
+  --ink: #20201d;
+  --muted: #716c62;
+  --accent: #ee6540;
+  --line: #3b3832;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  background:
+    radial-gradient(circle at 50% 16%, var(--page-glow), transparent 42rem),
+    var(--page);
+  color: #f4f0e8;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+main {
+  width: min(1180px, calc(100vw - 40px));
+  margin: 0 auto;
+  padding: 26px 0 32px;
+}
+
+header,
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+header {
+  min-height: 42px;
+  margin-bottom: 20px;
+  color: #9b968c;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+header nav {
+  display: flex;
+  gap: 20px;
+}
+
+header a {
+  color: inherit;
+  text-decoration: none;
+}
+
+header a:hover {
+  color: #fff;
+}
+
+.wordmark {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+  color: #f4f0e8;
+  font-size: 14px;
+  font-weight: 750;
+  letter-spacing: -0.02em;
+  text-transform: none;
+}
+
+.mark {
+  width: 13px;
+  height: 13px;
+  border: 2px solid var(--accent);
+  border-radius: 50%;
+  box-shadow: inset 4px 0 0 var(--accent);
+}
+
+.stage {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: #1b1a18;
+  box-shadow: 0 30px 90px rgb(0 0 0 / 44%);
+}
+
+.poster {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: var(--paper);
+  color: var(--ink);
+}
+
+.poster::after {
+  position: absolute;
+  inset: 0;
+  z-index: 8;
+  pointer-events: none;
+  content: "";
+  opacity: 0.12;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
+  mix-blend-mode: multiply;
+}
+
+.poster-copy {
+  position: absolute;
+  top: 36px;
+  left: 40px;
+  z-index: 5;
+  width: 290px;
+  pointer-events: none;
+}
+
+.eyebrow {
+  margin: 0 0 9px;
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(34px, 4vw, 60px);
+  font-weight: 900;
+  letter-spacing: -0.075em;
+  line-height: 0.84;
+}
+
+h1 em {
+  color: var(--accent);
+  font-style: normal;
+}
+
+.description {
+  width: 235px;
+  margin: 14px 0 0;
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: clamp(7px, 0.76vw, 10px);
+  line-height: 1.55;
+}
+
+.corner-note {
+  position: absolute;
+  right: 38px;
+  top: 34px;
+  z-index: 5;
+  margin: 0;
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 8px;
+  line-height: 1.5;
+  text-align: right;
+}
+
+.motion {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+}
+
+.folio {
+  position: absolute;
+  right: 38px;
+  bottom: 26px;
+  z-index: 5;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+}
+
+.loading {
+  position: absolute;
+  right: 38px;
+  bottom: 46px;
+  z-index: 10;
+  padding: 5px 7px;
+  background: var(--ink);
+  color: var(--paper);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 8px;
+  letter-spacing: 0.12em;
+}
+
+footer {
+  gap: 30px;
+  padding-top: 17px;
+}
+
+.controls {
+  display: flex;
+  flex: 1;
+  gap: 12px;
+  align-items: center;
+}
+
+button {
+  min-width: 96px;
+  padding: 8px 10px;
+  border: 1px solid #4a463f;
+  border-radius: 3px;
+  background: transparent;
+  color: #d8d3c9;
+  cursor: pointer;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 9px;
+  letter-spacing: 0.09em;
+}
+
+button:hover {
+  border-color: var(--accent);
+  color: #fff;
+}
+
+input[type="range"] {
+  width: min(430px, 40vw);
+  accent-color: var(--accent);
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  gap: 22px;
+  margin: 0;
+}
+
+.metrics div {
+  display: grid;
+  gap: 3px;
+}
+
+.metrics dt {
+  color: #777269;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 8px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.metrics dd {
+  margin: 0;
+  color: #d8d3c9;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+}
+
+.theme-crystal {
+  --paper: #f4eedc;
+  --accent: #cc5f4a;
+  --page-glow: #293337;
+}
+
+.theme-ball {
+  --paper: #e9e1cf;
+  --accent: #df672e;
+  --page-glow: #342c24;
+}
+
+.theme-kick {
+  --paper: #dbe5c9;
+  --accent: #f05d3d;
+  --page-glow: #263121;
+}
+
+.theme-wave {
+  --paper: #e7efe9;
+  --accent: #f06a43;
+  --page-glow: #20333a;
+}
+
+@media (max-width: 760px) {
+  main {
+    width: min(100% - 20px, 1180px);
+    padding-top: 12px;
+  }
+
+  header nav,
+  .corner-note,
+  .description,
+  .metrics {
+    display: none;
+  }
+
+  .poster-copy {
+    top: 20px;
+    left: 22px;
+    width: 210px;
+  }
+
+  h1 {
+    font-size: clamp(26px, 7vw, 42px);
+  }
+
+  footer {
+    padding-top: 11px;
+  }
+
+  .controls,
+  input[type="range"] {
+    width: 100%;
+  }
+}

package/examples/shared/player.js

@@ -0,0 +1,85 @@
+export function mountPlayer({
+  scene,
+  simulation,
+  renderer,
+  metricLabel = "signal",
+  metricValue = "—"
+}) {
+  const loading = document.querySelector("#loading");
+  const toggle = document.querySelector("#toggle");
+  const scrubber = document.querySelector("#scrubber");
+  const fingerprint = document.querySelector("#fingerprint");
+  const metricName = document.querySelector("#metric-name");
+  const metric = document.querySelector("#metric");
+  const lastFrame = simulation.frames.length - 1;
+  const durationMs = scene.timing.duration * 1000;
+
+  scrubber.max = String(lastFrame);
+  fingerprint.textContent = simulation.fingerprint;
+  metricName.textContent = metricLabel;
+  metric.textContent = metricValue;
+  loading?.remove();
+
+  let playing = true;
+  let origin = performance.now();
+  let pausedFrame = 0;
+
+  function paint(frame) {
+    const safeFrame = Math.max(0, Math.min(lastFrame, Math.round(frame)));
+    pausedFrame = safeFrame;
+    renderer.renderFrame(safeFrame);
+    scrubber.value = String(safeFrame);
+  }
+
+  function play() {
+    if (playing) return;
+    playing = true;
+    toggle.textContent = "PAUSE";
+    origin =
+      performance.now() -
+      (pausedFrame / scene.timing.fps) * 1000;
+  }
+
+  function pause() {
+    playing = false;
+    toggle.textContent = "PLAY";
+  }
+
+  function seekFrame(frame) {
+    pause();
+    paint(frame);
+  }
+
+  function seekTime(time) {
+    seekFrame(time * scene.timing.fps);
+  }
+
+  function animate(now) {
+    if (playing) {
+      const elapsed = (now - origin) % durationMs;
+      paint((elapsed / 1000) * scene.timing.fps);
+    }
+    requestAnimationFrame(animate);
+  }
+
+  toggle.addEventListener("click", () => {
+    if (playing) pause();
+    else play();
+  });
+  scrubber.addEventListener("input", () => {
+    seekFrame(Number(scrubber.value));
+  });
+
+  window.__oddlyAlivePlayer = {
+    scene,
+    simulation,
+    paint,
+    pause,
+    play,
+    seekFrame,
+    seekTime
+  };
+
+  paint(0);
+  requestAnimationFrame(animate);
+}

package/examples/shoe-splash/PROVENANCE.md

@@ -0,0 +1,4 @@
+# Provenance
+
+The shoe and water are original procedural SVG. No external image assets are
+used. This is a damped one-dimensional surface model, not a fluid simulator.

package/examples/shoe-splash/app.js

@@ -0,0 +1,26 @@
+import {
+  createSurfaceWaveRenderer,
+  simulateScene,
+  validateScene
+} from "../../src/index.js";
+import { mountPlayer } from "../shared/player.js";
+
+await new Promise((resolve) => requestAnimationFrame(resolve));
+
+const response = await fetch("./scene.json");
+if (!response.ok) throw new Error(`Could not load scene: ${response.status}`);
+const scene = validateScene(await response.json());
+const simulation = simulateScene(scene);
+const renderer = createSurfaceWaveRenderer(
+  document.querySelector("#motion"),
+  simulation,
+  { shoeHref: "../../assets/photoreal/sneaker.png" }
+);
+
+mountPlayer({
+  scene,
+  simulation,
+  renderer,
+  metricLabel: "wave peak",
+  metricValue: `${simulation.diagnostics.maxWaveHeight.toFixed(1)} px`
+});

package/examples/shoe-splash/index.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="OddlyAlive shoe and water-wave example" />
+    <title>Shoe Splash — OddlyAlive</title>
+    <link rel="stylesheet" href="../shared/example.css" />
+  </head>
+  <body class="theme-wave">
+    <main>
+      <header>
+        <a class="wordmark" href="../"><span class="mark"></span>OddlyAlive</a>
+        <nav>
+          <a href="../football-kick/">← Football Kick</a>
+          <a href="../">All examples →</a>
+        </nav>
+      </header>
+      <section class="stage">
+        <div class="poster">
+          <div class="poster-copy">
+            <p class="eyebrow">05 / COUPLED SYSTEM</p>
+            <h1>THROW<br /><em>THE SHOE.</em></h1>
+            <p class="description">
+              A rigid prop disturbs a damped wave surface. The water answers,
+              then buoyancy and drag make the shoe answer back.
+            </p>
+          </div>
+          <p class="corner-note">RIGID PROP<br />1D WAVE SURFACE<br />TWO-WAY COUPLING</p>
+          <svg
+            id="motion"
+            class="motion"
+            viewBox="0 0 960 540"
+            role="img"
+            aria-label="A shoe falling into water and making waves"
+          ></svg>
+          <div class="folio">OA—005</div>
+          <div id="loading" class="loading">SOLVING WORLD…</div>
+        </div>
+      </section>
+      <footer>
+        <div class="controls">
+          <button id="toggle" type="button">PAUSE</button>
+          <input id="scrubber" type="range" min="0" value="0" aria-label="Timeline" />
+        </div>
+        <dl class="metrics">
+          <div><dt>solver</dt><dd>coupled wave</dd></div>
+          <div><dt>step</dt><dd>240 Hz</dd></div>
+          <div><dt id="metric-name">wave peak</dt><dd id="metric">—</dd></div>
+          <div><dt>fingerprint</dt><dd id="fingerprint">—</dd></div>
+        </dl>
+      </footer>
+    </main>
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>

package/examples/shoe-splash/scene.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "../../schemas/scene.schema.json",
+  "version": 1,
+  "type": "surface-wave",
+  "name": "OddlyAlive — Shoe Splash",
+  "seed": 31,
+  "canvas": { "width": 960, "height": 540 },
+  "timing": { "duration": 6.4, "fps": 60, "substeps": 4, "preRoll": 0 },
+  "surface": {
+    "x": 70,
+    "width": 820,
+    "restY": 330,
+    "samples": 161,
+    "waveSpeed": 172,
+    "damping": 2.4,
+    "coupling": 0.42
+  },
+  "world": {
+    "gravity": 720,
+    "airDrag": 0.06,
+    "waterDrag": 4.8,
+    "buoyancy": 29
+  },
+  "body": {
+    "id": "shoe",
+    "kind": "shoe",
+    "x": 500,
+    "y": 78,
+    "width": 174,
+    "height": 66,
+    "mass": 0.72,
+    "vx": -11,
+    "vy": 20,
+    "angle": -13,
+    "angularVelocity": 0.9,
+    "restitution": 0.18
+  }
+}

package/examples/string-touch/PROVENANCE.md

@@ -0,0 +1,11 @@
+# Provenance
+
+The interaction model is an original extraction from TheVibeFounder’s 2026
+city-postcard experiments. The public alpha preserves their fixed-step XPBD
+constraints, pressure-bearing contact capsule, per-strand static/kinetic friction,
+load-based peel, and deterministic material variation while removing all
+city-specific artwork and layout assumptions.
+
+The demo typography, SVG hardware, interface, and scene are original work for
+OddlyAlive. No third-party image, video, font file, or embedded raster contributes
+pixels.

package/examples/string-touch/app.js

@@ -0,0 +1,79 @@
+import {
+  createSvgRenderer,
+  sampleGesture,
+  simulateScene,
+  validateScene
+} from "../../src/index.js";
+
+const loading = document.querySelector("#loading");
+const svg = document.querySelector("#motion");
+const toggle = document.querySelector("#toggle");
+const scrubber = document.querySelector("#scrubber");
+const debugButton = document.querySelector("#debug");
+const grip = document.querySelector("#grip");
+const fingerprint = document.querySelector("#fingerprint");
+
+await new Promise((resolve) => requestAnimationFrame(resolve));
+const rawScene = await fetch("./scene.json").then((response) => response.json());
+const scene = validateScene(rawScene);
+const simulation = simulateScene(scene);
+const renderer = createSvgRenderer(svg, simulation, {
+  glyphCharmHref: "../../assets/photoreal/letter-charm-square.png"
+});
+const durationMs = scene.timing.duration * 1000;
+const lastFrame = simulation.frames.length - 1;
+
+scrubber.max = String(lastFrame);
+grip.textContent = `${simulation.diagnostics.observedMaxStaticGrip}/${scene.contact.maxStaticGrip}`;
+fingerprint.textContent = simulation.fingerprint;
+loading.remove();
+
+let playing = true;
+let debug = false;
+let origin = performance.now();
+let pausedFrame = 0;
+
+function paint(frame) {
+  const time = frame / scene.timing.fps;
+  renderer.renderFrame(frame, sampleGesture(scene.gesture.points, time));
+  scrubber.value = String(frame);
+}
+
+function animate(now) {
+  if (playing) {
+    const elapsed = (now - origin) % durationMs;
+    const frame = Math.min(
+      lastFrame,
+      Math.round((elapsed / 1000) * scene.timing.fps)
+    );
+    pausedFrame = frame;
+    paint(frame);
+  }
+  requestAnimationFrame(animate);
+}
+
+toggle.addEventListener("click", () => {
+  playing = !playing;
+  toggle.textContent = playing ? "PAUSE" : "PLAY";
+  if (playing) {
+    origin =
+      performance.now() -
+      (pausedFrame / scene.timing.fps) * 1000;
+  }
+});
+
+scrubber.addEventListener("input", () => {
+  playing = false;
+  toggle.textContent = "PLAY";
+  pausedFrame = Number(scrubber.value);
+  paint(pausedFrame);
+});
+
+debugButton.addEventListener("click", () => {
+  debug = !debug;
+  renderer.setDebug(debug);
+  debugButton.textContent = debug ? "HIDE TOUCH" : "SHOW TOUCH";
+});
+
+paint(0);
+requestAnimationFrame(animate);

package/examples/string-touch/index.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="OddlyAlive deterministic string-touch physics demo"
+    />
+    <title>OddlyAlive — Make anything feel alive</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <header>
+        <a class="wordmark" href="../" aria-label="OddlyAlive home">
+          <span class="mark"></span>
+          OddlyAlive
+        </a>
+        <p>Deterministic object motion</p>
+      </header>
+
+      <section class="stage" aria-label="String touch physics demo">
+        <div class="poster">
+          <div class="poster-copy">
+            <div>
+              <p class="eyebrow">OPEN SOURCE PHYSICS · ALPHA 01</p>
+              <h1>MAKE<br />ANYTHING<br /><em>FEEL ALIVE.</em></h1>
+            </div>
+            <p class="caption">
+              No hand. No magnetic keyframes.<br />
+              Just pressure, friction, load and release.
+            </p>
+          </div>
+          <svg
+            id="motion"
+            viewBox="0 0 960 540"
+            role="img"
+            aria-label="Letters hanging from flexible strings move under an invisible touch"
+          ></svg>
+          <div class="folio">OA—001</div>
+          <div id="loading" class="loading">SIMULATING 240HZ PHYSICS…</div>
+        </div>
+      </section>
+
+      <footer>
+        <div class="controls">
+          <button id="toggle" type="button">PAUSE</button>
+          <input
+            id="scrubber"
+            aria-label="Animation playhead"
+            type="range"
+            min="0"
+            max="384"
+            value="0"
+          />
+          <button id="debug" type="button">SHOW TOUCH</button>
+        </div>
+        <dl class="metrics">
+          <div><dt>solver</dt><dd>XPBD</dd></div>
+          <div><dt>step</dt><dd>240Hz</dd></div>
+          <div><dt>grip</dt><dd id="grip">—</dd></div>
+          <div><dt>fingerprint</dt><dd id="fingerprint">—</dd></div>
+        </dl>
+      </footer>
+    </main>
+
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>