oddlyalive 0.2.0-alpha.2

package/examples/string-touch/scene.json

@@ -0,0 +1,73 @@
+{
+  "$schema": "../../schemas/scene.schema.json",
+  "version": 1,
+  "type": "strand-field",
+  "name": "OddlyAlive — String Touch",
+  "seed": 11,
+  "canvas": {
+    "width": 960,
+    "height": 540
+  },
+  "timing": {
+    "duration": 6.4,
+    "fps": 60,
+    "substeps": 4,
+    "preRoll": 2
+  },
+  "field": {
+    "columns": 23,
+    "rows": 16,
+    "originX": 330,
+    "originY": 112,
+    "spacingX": 24,
+    "spacingY": 20
+  },
+  "material": {
+    "gravity": 480,
+    "linearDrag": 0.92,
+    "quadraticDrag": 0.0023,
+    "lengthCompliance": 0.0000011,
+    "compressionCompliance": 0.00052,
+    "bendCompliance": 0.00062,
+    "maxStretch": 1.045
+  },
+  "contact": {
+    "radiusX": 53,
+    "radiusY": 33,
+    "maxStaticGrip": 8,
+    "captureStartRow": 6,
+    "captureEndRow": 14
+  },
+  "gesture": {
+    "type": "touch-path",
+    "points": [
+      { "time": 0.48, "x": -60, "y": 326, "pressure": 0 },
+      { "time": 0.59, "x": 30, "y": 329, "pressure": 0.3 },
+      { "time": 0.74, "x": 265, "y": 338, "pressure": 0.86 },
+      { "time": 1.08, "x": 402, "y": 360, "pressure": 1 },
+      { "time": 1.48, "x": 565, "y": 386, "pressure": 0.98 },
+      { "time": 1.88, "x": 805, "y": 397, "pressure": 1 },
+      { "time": 2.14, "x": 914, "y": 376, "pressure": 0.97 },
+      { "time": 2.28, "x": 944, "y": 367, "pressure": 0.94 },
+      { "time": 2.44, "x": 906, "y": 376, "pressure": 0.96 },
+      { "time": 2.7, "x": 800, "y": 408, "pressure": 0.92 },
+      { "time": 3, "x": 665, "y": 424, "pressure": 0.8 },
+      { "time": 3.29, "x": 520, "y": 416, "pressure": 0.61 },
+      { "time": 3.58, "x": 390, "y": 392, "pressure": 0.34 },
+      { "time": 3.84, "x": 250, "y": 370, "pressure": 0.12 },
+      { "time": 4.08, "x": 120, "y": 356, "pressure": 0.03 },
+      { "time": 4.32, "x": 40, "y": 351, "pressure": 0 }
+    ]
+  },
+  "payload": {
+    "text": "ODDLY ALIVE  •  MAKE ANYTHING FEEL ALIVE  •  ",
+    "fontFamily": "ui-monospace, SFMono-Regular, Menlo, monospace",
+    "fontSize": 12
+  },
+  "render": {
+    "background": "#f0e7d3",
+    "ink": "#20201d",
+    "accent": "#ec5b36",
+    "filament": "rgba(32, 32, 29, 0.34)"
+  }
+}

package/examples/string-touch/styles.css

@@ -0,0 +1,273 @@
+:root {
+  color-scheme: dark;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  background: #121211;
+  color: #f4f0e8;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  background:
+    radial-gradient(circle at 50% 18%, #2c2924 0, transparent 38rem),
+    #121211;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+main {
+  width: min(1180px, calc(100vw - 40px));
+  margin: 0 auto;
+  padding: 28px 0 34px;
+}
+
+header,
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+header {
+  min-height: 42px;
+  margin-bottom: 22px;
+  color: #a9a49a;
+  font-size: 12px;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+}
+
+header p {
+  margin: 0;
+}
+
+.wordmark {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+  color: #f4f0e8;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  text-decoration: none;
+  text-transform: none;
+}
+
+.mark {
+  width: 13px;
+  height: 13px;
+  border: 2px solid #ec5b36;
+  border-radius: 50%;
+  box-shadow: inset 4px 0 0 #ec5b36;
+}
+
+.stage {
+  overflow: hidden;
+  border: 1px solid #3a3731;
+  border-radius: 4px;
+  background: #1b1a18;
+  box-shadow: 0 30px 90px rgb(0 0 0 / 45%);
+}
+
+.poster {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background:
+    linear-gradient(rgb(32 32 29 / 2%), rgb(32 32 29 / 2%)),
+    #f0e7d3;
+  color: #20201d;
+}
+
+.poster::after {
+  position: absolute;
+  inset: 0;
+  z-index: 8;
+  pointer-events: none;
+  content: "";
+  opacity: 0.16;
+  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;
+  inset: 35px 40px auto 40px;
+  z-index: 4;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  pointer-events: none;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: #746f65;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(28px, 3.7vw, 56px);
+  font-weight: 900;
+  letter-spacing: -0.075em;
+  line-height: 0.79;
+}
+
+h1 em {
+  color: #ec5b36;
+  font-style: normal;
+}
+
+.caption {
+  margin: 0;
+  padding-top: 4px;
+  color: #746f65;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: clamp(7px, 0.8vw, 11px);
+  line-height: 1.5;
+  text-align: right;
+}
+
+#motion {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.folio {
+  position: absolute;
+  right: 38px;
+  bottom: 28px;
+  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: 48px;
+  z-index: 10;
+  padding: 5px 7px;
+  background: #20201d;
+  color: #f0e7d3;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 8px;
+  letter-spacing: 0.12em;
+}
+
+footer {
+  gap: 30px;
+  padding: 18px 0 0;
+}
+
+.controls {
+  display: flex;
+  flex: 1;
+  gap: 12px;
+  align-items: center;
+}
+
+button {
+  min-width: 96px;
+  padding: 8px 10px;
+  border: 1px solid #49453e;
+  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: #ec5b36;
+  color: #fff;
+}
+
+input[type="range"] {
+  width: min(360px, 36vw);
+  accent-color: #ec5b36;
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  gap: 24px;
+  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;
+}
+
+@media (max-width: 760px) {
+  main {
+    width: min(100% - 20px, 1180px);
+    padding-top: 14px;
+  }
+
+  header {
+    margin-bottom: 12px;
+  }
+
+  header p,
+  .caption,
+  .metrics {
+    display: none;
+  }
+
+  footer {
+    padding-top: 12px;
+  }
+
+  .controls {
+    width: 100%;
+  }
+
+  input[type="range"] {
+    width: 100%;
+  }
+
+  .poster-copy {
+    inset: 20px 22px auto;
+  }
+}

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "oddlyalive",
+  "version": "0.2.0-alpha.2",
+  "description": "Deterministic, physics-driven object motion from simple scene recipes.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thevibefounder/OddlyAlive.git"
+  },
+  "homepage": "https://thevibefounder.com/os/oddlyalive/",
+  "bugs": {
+    "url": "https://github.com/thevibefounder/OddlyAlive/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha"
+  },
+  "bin": {
+    "oddlyalive": "./bin/oddlyalive.js"
+  },
+  "exports": {
+    ".": "./src/index.js",
+    "./scene": "./src/scene.js",
+    "./strands": "./src/strands.js",
+    "./rigid": "./src/rigid-balls.js",
+    "./waves": "./src/surface-wave.js"
+  },
+  "files": [
+    "assets",
+    "bin",
+    "docs/ARCHITECTURE.md",
+    "docs/DEMO-VIDEOS.md",
+    "docs/QUICKSTART.md",
+    "docs/ROADMAP.md",
+    "examples",
+    "schemas",
+    "scripts",
+    "skills",
+    "src",
+    "tests",
+    "videos/oddlyalive-demos/BRIEF.md",
+    "videos/oddlyalive-demos/DEMO-PLAN.md",
+    "videos/oddlyalive-demos/README.md",
+    "videos/oddlyalive-demos/app.js",
+    "videos/oddlyalive-demos/hyperframes.json",
+    "videos/oddlyalive-demos/index.html",
+    "videos/oddlyalive-demos/meta.json",
+    "videos/oddlyalive-demos/package-lock.json",
+    "videos/oddlyalive-demos/package.json",
+    "videos/oddlyalive-demos/prepare-assets.mjs",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md",
+    "LICENSE",
+    "README.md",
+    "SECURITY.md"
+  ],
+  "scripts": {
+    "start": "node ./bin/oddlyalive.js play",
+    "demo": "node ./bin/oddlyalive.js play",
+    "inspect": "node ./bin/oddlyalive.js inspect ./examples/string-touch/scene.json",
+    "simulate": "node ./bin/oddlyalive.js simulate ./examples/string-touch/scene.json",
+    "fixtures:update": "node ./scripts/update-visual-fixtures.mjs",
+    "test:visual": "node --test ./tests/visual-fixtures.test.js",
+    "demos:render": "sh ./scripts/render-demo-videos.sh",
+    "demos:verify": "node ./scripts/verify-demo-videos.mjs",
+    "test": "node --test",
+    "check": "npm run test && npm run inspect && npm pack --dry-run --cache ./.oddlyalive/npm-cache"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "keywords": [
+    "animation",
+    "creative-coding",
+    "deterministic",
+    "motion",
+    "physics",
+    "svg",
+    "xpbd"
+  ]
+}