oddlyalive 0.2.0-alpha.2

package/scripts/verify-demo-videos.mjs

@@ -0,0 +1,138 @@
+import { createHash } from "node:crypto";
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const expected = [
+  {
+    label: "overview",
+    path: "videos/oddlyalive-demos/renders/oddlyalive-demos-overview.mp4",
+    duration: 32,
+    frames: 1920
+  },
+  {
+    label: "string-touch",
+    path: "videos/oddlyalive-demos/renders/demos/01-string-touch.mp4",
+    duration: 6.4,
+    frames: 384
+  },
+  {
+    label: "crystal-mobile",
+    path: "videos/oddlyalive-demos/renders/demos/02-crystal-mobile.mp4",
+    duration: 6.4,
+    frames: 384
+  },
+  {
+    label: "ball-lab",
+    path: "videos/oddlyalive-demos/renders/demos/03-ball-lab.mp4",
+    duration: 6.4,
+    frames: 384
+  },
+  {
+    label: "football-kick",
+    path: "videos/oddlyalive-demos/renders/demos/04-football-kick.mp4",
+    duration: 6.4,
+    frames: 384
+  },
+  {
+    label: "shoe-splash",
+    path: "videos/oddlyalive-demos/renders/demos/05-shoe-splash.mp4",
+    duration: 6.4,
+    frames: 384
+  }
+];
+
+function run(command, args) {
+  const result = spawnSync(command, args, {
+    cwd: root,
+    encoding: "utf8"
+  });
+  if (result.status !== 0) {
+    throw new Error(
+      `${command} failed:\n${result.stderr || result.stdout || "unknown error"}`
+    );
+  }
+  return result.stdout;
+}
+
+function almostEqual(actual, expectedValue, tolerance = 0.001) {
+  return Math.abs(actual - expectedValue) <= tolerance;
+}
+
+function assert(condition, message) {
+  if (!condition) throw new Error(message);
+}
+
+const rows = [];
+
+for (const item of expected) {
+  const absolutePath = resolve(root, item.path);
+  const probe = JSON.parse(
+    run("ffprobe", [
+      "-v",
+      "error",
+      "-show_streams",
+      "-show_format",
+      "-of",
+      "json",
+      absolutePath
+    ])
+  );
+  const videoStreams = probe.streams.filter(
+    (stream) => stream.codec_type === "video"
+  );
+  const audioStreams = probe.streams.filter(
+    (stream) => stream.codec_type === "audio"
+  );
+
+  assert(videoStreams.length === 1, `${item.label}: expected one video stream`);
+  assert(audioStreams.length === 0, `${item.label}: expected no audio stream`);
+
+  const video = videoStreams[0];
+  const [fpsNumerator, fpsDenominator] = video.avg_frame_rate
+    .split("/")
+    .map(Number);
+  const fps = fpsNumerator / fpsDenominator;
+  const duration = Number(probe.format.duration);
+  const frameCount = Number(video.nb_frames);
+
+  assert(video.codec_name === "h264", `${item.label}: codec is not H.264`);
+  assert(video.profile === "High", `${item.label}: H.264 profile is not High`);
+  assert(video.pix_fmt === "yuv420p", `${item.label}: pixel format is not yuv420p`);
+  assert(video.width === 1920, `${item.label}: width is not 1920`);
+  assert(video.height === 1080, `${item.label}: height is not 1080`);
+  assert(almostEqual(fps, 60), `${item.label}: frame rate is not 60 fps`);
+  assert(
+    almostEqual(duration, item.duration),
+    `${item.label}: duration ${duration} does not match ${item.duration}`
+  );
+  assert(
+    frameCount === item.frames,
+    `${item.label}: frame count ${frameCount} does not match ${item.frames}`
+  );
+
+  run("ffmpeg", [
+    "-hide_banner",
+    "-loglevel",
+    "error",
+    "-i",
+    absolutePath,
+    "-f",
+    "null",
+    "-"
+  ]);
+
+  const bytes = readFileSync(absolutePath);
+  rows.push({
+    file: item.path,
+    seconds: duration.toFixed(1),
+    frames: frameCount,
+    mebibytes: (bytes.byteLength / 1024 / 1024).toFixed(2),
+    sha256: createHash("sha256").update(bytes).digest("hex")
+  });
+}
+
+console.table(rows);
+console.log("PASS: all demo videos match the encoding contract and decode cleanly.");

package/skills/oddlyalive/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: oddlyalive
+description: Create, modify, simulate, and validate deterministic physics-driven object animations with the OddlyAlive CLI and scene recipes. Use when a user asks to make an object feel naturally touched, tugged, plucked, kicked, dropped, shaken, or otherwise animated through physical behavior; to build a strand-field animation; or to turn a prompt into an OddlyAlive scene, demo, or render-ready project.
+---
+
+# OddlyAlive
+
+Use AI to author physical intent. Use the deterministic solver to author motion.
+
+## Route the request
+
+1. Identify the object family and interaction.
+2. Route to the closest implemented recipe:
+   - `string-touch` for strings, garlands, hanging text, and flexible strands;
+   - `crystal-mobile` for weighted pendants and independent hanging objects;
+   - `ball-lab` for round bodies with different bounce/friction materials;
+   - `football-kick` for a timed hit, kick, or throw impulse;
+   - `shoe-splash` for a single prop disturbing a stylized water surface.
+3. Do not disguise unsupported rigid-body or cloth behavior as a strand scene.
+   State that the recipe is not implemented or add the correct solver first.
+4. Read [references/scene-schema.md](references/scene-schema.md) when creating or
+   changing scene JSON.
+5. Read [references/object-models.md](references/object-models.md) when deciding
+   which physical model a new object needs.
+
+## Start from a recipe
+
+Create a starter:
+
+```bash
+npx oddlyalive list
+npx oddlyalive new my-motion --preset football-kick
+```
+
+Read [references/recipes.md](references/recipes.md) before selecting parameters.
+Edit the generated `scene.json`. Preserve a fixed simulation rate and seed.
+For strand touch, express contact as a time-ordered pressure path and never
+author per-strand release timestamps.
+
+Validate before visual review:
+
+```bash
+npx oddlyalive inspect examples/football-kick/scene.json
+npx oddlyalive simulate examples/football-kick/scene.json
+npm test
+```
+
+Run the reference demo:
+
+```bash
+npx oddlyalive play
+```
+
+Inspect the opening, first contact/impact, maximum displacement, rebounds, and
+final settle. Check the solver-specific diagnostics and confirm that no renderer
+mutates simulation state.
+
+## Generate video
+
+Keep OddlyAlive as the simulation source. When MP4 or motion-graphic delivery is
+requested, use the environment's HyperFrames workflow to drive the playhead and
+render deterministic frames. Do not replace simulation with wall-clock animation.
+
+## Extend the engine
+
+Add a new recipe only when its physical model is explicit. Keep the solver
+renderer-neutral, expose diagnostics, seed every material variation, add a
+determinism test, and ship one visually inspectable example.

package/skills/oddlyalive/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "OddlyAlive"
+  short_description: "Create natural, physics-driven object motion"
+  default_prompt: "Use $oddlyalive to turn this object idea into a deterministic physics-driven animation."

package/skills/oddlyalive/references/object-models.md

@@ -0,0 +1,25 @@
+# Object model selection
+
+| Requested object | Start with | Required behavior |
+|---|---|---|
+| strings, garlands, necklaces | strand XPBD | length, bend, friction, peel |
+| crystal pendants, simple hanging charms | weighted strands | terminal mass, lag, overswing |
+| flower stems | articulated strands (planned) | bend limits, attached petals |
+| flags, curtains, fabric | cloth XPBD | surface shear and collision |
+| balls | rigid circles | collision, restitution, friction, spin |
+| blocks, rackets, signs | rigid shapes + joints (planned) | angular inertia, hinges, springs |
+| stylized water ripple | damped 1D wave | surface propagation, drag, buoyancy |
+| full water, smoke, sand | particles or fluid model (planned) | neighborhood interaction |
+| walking | articulated skeleton + IK (planned) | contacts, balance, joint limits |
+
+Map interaction language to physics:
+
+- `touch`, `drag`: kinematic contact shape plus pressure
+- `pluck`: short static capture followed by rapid pressure loss
+- `kick`, `hit`: impulse at a contact point
+- `drop`: gravity with an initial pose
+- `shake`: moving or rotating kinematic support
+- `throw`: initial linear and angular velocity
+
+Do not use an LLM to invent frame transforms. Let it select the model and bounded
+parameters; let the solver produce the motion.

package/skills/oddlyalive/references/recipes.md

@@ -0,0 +1,27 @@
+# Built-in recipes
+
+| Preset | Scene type | Change these first |
+|---|---|---|
+| `string-touch` | `strand-field` | payload text, touch path, drag, compliance |
+| `crystal-mobile` | `strand-field` | terminal mass, cord length, touch path |
+| `ball-lab` | `rigid-balls` | radius, mass, restitution, friction |
+| `football-kick` | `rigid-balls` | impulse, mass, restitution, turf friction |
+| `shoe-splash` | `surface-wave` | drop pose, coupling, damping, buoyancy |
+
+Run any recipe:
+
+```bash
+npx oddlyalive play ball-lab
+```
+
+Create a local project:
+
+```bash
+npx oddlyalive new my-world --preset shoe-splash
+cd my-world
+npm start
+```
+
+The reference scenes use 60fps with four substeps. Keep that 240Hz solver rate
+unless tests demonstrate that a different rate remains stable. Use `inspect` to
+validate the scene and `simulate` to record its deterministic fingerprint.

package/skills/oddlyalive/references/scene-schema.md

@@ -0,0 +1,84 @@
+# Scene schema
+
+## Required identity
+
+- `version`: currently `1`
+- `type`: `strand-field`, `rigid-balls`, or `surface-wave`
+- `name`: human-readable scene label
+- `seed`: finite number controlling material variation
+
+## Canvas and timing
+
+- `canvas.width`, `canvas.height`: logical render dimensions
+- `timing.duration`: seconds, `0.1–60`
+- `timing.fps`: sampled output frames per second
+- `timing.substeps`: simulation steps per output frame
+- `timing.preRoll`: seconds of pressure-free settling before frame zero
+
+Keep `fps × substeps` fixed. The reference strand feel uses `60 × 4 = 240Hz`.
+
+## Strand field
+
+- `field.columns`, `field.rows`: particle grid dimensions
+- `field.originX`, `field.originY`: first payload particle
+- `field.spacingX`, `field.spacingY`: rest layout
+
+Each column is an independent strand. Rows are connected vertically with length
+and bend constraints.
+
+## Material
+
+- `gravity`: downward acceleration
+- `linearDrag`, `quadraticDrag`: air resistance
+- `lengthCompliance`: stretch softness
+- `compressionCompliance`: compression softness
+- `bendCompliance`: resistance across two links
+- `maxStretch`: per-projection hard ratio
+
+Avoid tuning all values simultaneously. Change gravity and drag for weight,
+compliance for softness, then contact values for touch.
+
+## Contact
+
+- `radiusX`, `radiusY`: invisible elliptical fingertip
+- `maxStaticGrip`: upper bound on simultaneous `STICK` strands
+- `captureStartRow`, `captureEndRow`: eligible rows
+
+The state machine is `FREE → STICK → SLIP → COOLDOWN`. Load and seeded friction
+must cause release. Never add a release timestamp array.
+
+## Gesture
+
+`gesture.points` is a strictly time-ordered list:
+
+```json
+{ "time": 1.08, "x": 210, "y": 360, "pressure": 1 }
+```
+
+Use pressure only for normal force. Use trajectory and speed for direction and
+energy. Begin and end at zero pressure.
+
+## Payload and render
+
+- `payload.text`, `fontFamily`, `fontSize`
+- `render.background`, `ink`, `accent`, `filament`
+
+These values belong to the reference SVG renderer. They must not change physics.
+
+## Rigid balls
+
+- `world`: gravity, air drag, floor and horizontal bounds, ground friction
+- `bodies[]`: radius, mass, restitution, friction, velocity, angle and spin
+- `impulses[]`: ordered time, target body, linear impulse and optional angular
+  impulse
+
+Use impulses for a kick or hit. Do not author the resulting arc.
+
+## Surface wave
+
+- `surface`: horizontal extent, rest height, sample count, speed, damping and
+  object-to-surface coupling
+- `world`: gravity, air drag, water drag and buoyancy
+- `body`: one rigid prop with size, mass, pose, velocity and restitution
+
+This is a stylized 1D surface recipe. Do not claim volumetric fluid behavior.

package/src/crystal-renderer.js

@@ -0,0 +1,338 @@
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+function svgNode(name, attributes = {}) {
+  const node = document.createElementNS(SVG_NS, name);
+  for (const [key, value] of Object.entries(attributes)) {
+    node.setAttribute(key, String(value));
+  }
+  return node;
+}
+
+function pathThrough(points) {
+  if (points.length === 0) return "";
+  let path = `M ${points[0].x.toFixed(2)} ${points[0].y.toFixed(2)}`;
+  for (let index = 1; index < points.length - 1; index += 1) {
+    const point = points[index];
+    const next = points[index + 1];
+    path += ` Q ${point.x.toFixed(2)} ${point.y.toFixed(2)} ${((point.x + next.x) * 0.5).toFixed(2)} ${((point.y + next.y) * 0.5).toFixed(2)}`;
+  }
+  const last = points[points.length - 1];
+  path += ` T ${last.x.toFixed(2)} ${last.y.toFixed(2)}`;
+  return path;
+}
+
+function addGradient(defs, id, stops, attributes = {}) {
+  const gradient = svgNode("linearGradient", {
+    id,
+    x1: "0%",
+    y1: "0%",
+    x2: "100%",
+    y2: "100%",
+    ...attributes
+  });
+  for (const stop of stops) {
+    gradient.appendChild(svgNode("stop", stop));
+  }
+  defs.appendChild(gradient);
+}
+
+function createCrystal(column, size, color, gradientId, photoHref) {
+  const group = svgNode("g", { class: "oa-crystal" });
+  if (photoHref) {
+    const width = size * 2.7;
+    const height = width * 1.5;
+    group.appendChild(
+      svgNode("image", {
+        href: photoHref,
+        x: (-width * 0.5).toFixed(2),
+        y: "-4",
+        width: width.toFixed(2),
+        height: height.toFixed(2),
+        preserveAspectRatio: "xMidYMin meet",
+        decoding: "sync",
+        style: `filter:hue-rotate(${(column % 5) * 7 - 12}deg) saturate(${0.88 + (column % 3) * 0.09}) drop-shadow(2px 5px 3px rgba(34,26,14,0.25))`
+      })
+    );
+    return group;
+  }
+  const outline = `0,${-size} ${size * 0.72},${-size * 0.25} ${size * 0.5},${size * 0.66} 0,${size} ${-size * 0.5},${size * 0.66} ${-size * 0.72},${-size * 0.25}`;
+
+  group.append(
+    svgNode("ellipse", {
+      cx: 2.5,
+      cy: size + 5,
+      rx: size * 0.56,
+      ry: size * 0.18,
+      fill: "rgba(30,27,22,0.2)",
+      filter: "url(#oa-crystal-shadow)"
+    }),
+    svgNode("ellipse", {
+      cx: 0,
+      cy: -size - 4.5,
+      rx: size * 0.22,
+      ry: size * 0.11,
+      fill: "none",
+      stroke: "url(#oa-brass)",
+      "stroke-width": "2.1"
+    }),
+    svgNode("rect", {
+      x: -size * 0.23,
+      y: -size - 2.8,
+      width: size * 0.46,
+      height: size * 0.22,
+      rx: size * 0.08,
+      fill: "url(#oa-brass)",
+      stroke: "#5a431d",
+      "stroke-width": "0.6"
+    }),
+    svgNode("polygon", {
+      points: outline,
+      fill: `url(#${gradientId})`,
+      stroke: "#292720",
+      "stroke-width": "1.35",
+      "stroke-linejoin": "round"
+    }),
+    svgNode("polygon", {
+      points: `0,${-size} ${size * 0.17},${-size * 0.22} 0,${size} ${-size * 0.5},${size * 0.66} ${-size * 0.72},${-size * 0.25}`,
+      fill: "rgba(255,255,255,0.38)"
+    }),
+    svgNode("polygon", {
+      points: `0,${-size} ${size * 0.72},${-size * 0.25} ${size * 0.5},${size * 0.66} 0,${size} ${size * 0.17},${-size * 0.22}`,
+      fill: "rgba(29,36,41,0.13)"
+    }),
+    svgNode("polygon", {
+      points: `${-size * 0.72},${-size * 0.25} 0,${-size * 0.1} ${size * 0.72},${-size * 0.25} ${size * 0.5},${size * 0.66} 0,${size * 0.42} ${-size * 0.5},${size * 0.66}`,
+      fill: color,
+      opacity: "0.2"
+    }),
+    svgNode("path", {
+      d: `M ${-size * 0.72} ${-size * 0.25} L 0 ${-size * 0.1} L ${size * 0.72} ${-size * 0.25} M 0 ${-size} L 0 ${size} M ${-size * 0.5} ${size * 0.66} L 0 ${size * 0.42} L ${size * 0.5} ${size * 0.66}`,
+      stroke: "rgba(38,35,29,0.34)",
+      "stroke-width": "0.72",
+      fill: "none"
+    }),
+    svgNode("path", {
+      d: `M ${-size * 0.38} ${-size * 0.18} L ${-size * 0.04} ${-size * 0.52} M ${size * 0.08} ${size * 0.38} L ${size * 0.32} ${size * 0.12}`,
+      stroke: "rgba(255,255,255,0.86)",
+      "stroke-width": "1.1",
+      "stroke-linecap": "round"
+    }),
+    svgNode("circle", {
+      cx: -size * 0.25,
+      cy: -size * 0.34,
+      r: Math.max(0.8, size * 0.055),
+      fill: "rgba(255,255,255,0.95)"
+    })
+  );
+  return group;
+}
+
+function createBead(color, radius) {
+  const group = svgNode("g", { class: "oa-glass-bead" });
+  group.append(
+    svgNode("circle", {
+      r: radius + 0.8,
+      fill: "rgba(42,40,34,0.2)"
+    }),
+    svgNode("circle", {
+      r: radius,
+      fill: color,
+      stroke: "#3b382f",
+      "stroke-width": "0.75"
+    }),
+    svgNode("circle", {
+      cx: -radius * 0.34,
+      cy: -radius * 0.38,
+      r: Math.max(0.7, radius * 0.3),
+      fill: "rgba(255,255,255,0.72)"
+    }),
+    svgNode("circle", {
+      r: Math.max(0.45, radius * 0.17),
+      fill: "#554d3d"
+    })
+  );
+  return group;
+}
+
+export function createCrystalRenderer(svg, simulation, options = {}) {
+  const { scene, base, frames } = simulation;
+  if (!frames) {
+    throw new TypeError("The crystal renderer requires simulation frames.");
+  }
+
+  const { columns, rows } = scene.field;
+  const palette =
+    options.palette ?? ["#74b9b5", "#efc8c0", "#d98567", "#929ee5", "#e9b73e"];
+  const root = svgNode("g", { class: "oa-crystal-scene" });
+  const defs = svgNode("defs");
+
+  addGradient(defs, "oa-brass", [
+    { offset: "0%", "stop-color": "#6d4d18" },
+    { offset: "28%", "stop-color": "#e4bd62" },
+    { offset: "54%", "stop-color": "#fff0a5" },
+    { offset: "76%", "stop-color": "#a97625" },
+    { offset: "100%", "stop-color": "#4e3512" }
+  ]);
+  for (let column = 0; column < columns; column += 1) {
+    addGradient(defs, `oa-glass-${column}`, [
+      { offset: "0%", "stop-color": "#ffffff", "stop-opacity": "0.78" },
+      { offset: "24%", "stop-color": palette[column % palette.length], "stop-opacity": "0.55" },
+      { offset: "70%", "stop-color": palette[(column + 2) % palette.length], "stop-opacity": "0.9" },
+      { offset: "100%", "stop-color": "#354450", "stop-opacity": "0.36" }
+    ]);
+  }
+  const shadow = svgNode("filter", {
+    id: "oa-crystal-shadow",
+    x: "-50%",
+    y: "-50%",
+    width: "220%",
+    height: "240%"
+  });
+  shadow.appendChild(svgNode("feGaussianBlur", { stdDeviation: "2.4" }));
+  defs.appendChild(shadow);
+  root.appendChild(defs);
+
+  const railPath = `M ${base.anchorX[0] - 28} ${base.anchorY[0] - 9} Q ${scene.canvas.width / 2} ${base.anchorY[0] - 23} ${base.anchorX[columns - 1] + 28} ${base.anchorY[columns - 1] - 9}`;
+  const railGroup = svgNode("g", { class: "oa-crystal-rail" });
+  railGroup.append(
+    svgNode("path", {
+      d: railPath,
+      fill: "none",
+      stroke: "rgba(38,30,17,0.22)",
+      "stroke-width": "12",
+      "stroke-linecap": "round",
+      transform: "translate(0 4)",
+      filter: "url(#oa-crystal-shadow)"
+    }),
+    svgNode("path", {
+      d: railPath,
+      fill: "none",
+      stroke: "url(#oa-brass)",
+      "stroke-width": "9",
+      "stroke-linecap": "round"
+    }),
+    svgNode("path", {
+      d: railPath,
+      fill: "none",
+      stroke: "rgba(255,246,191,0.72)",
+      "stroke-width": "1.6",
+      "stroke-linecap": "round",
+      transform: "translate(0 -1.6)"
+    })
+  );
+
+  const cords = svgNode("g", {
+    class: "oa-crystal-cords",
+    fill: "none",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  });
+  const payloads = svgNode("g", {
+    class: "oa-crystal-payloads"
+  });
+  const hardware = svgNode("g", { class: "oa-crystal-hardware" });
+  root.append(railGroup, cords, payloads, hardware);
+  svg.appendChild(root);
+
+  const cordNodes = [];
+  const crystalNodes = [];
+  const beadNodes = [];
+
+  for (let column = 0; column < columns; column += 1) {
+    const under = svgNode("path", {
+      stroke: "rgba(42,36,25,0.62)",
+      "stroke-width": "1.45"
+    });
+    const shine = svgNode("path", {
+      stroke: "rgba(255,250,225,0.52)",
+      "stroke-width": "0.48",
+      transform: "translate(-0.45 0)"
+    });
+    cords.append(under, shine);
+    cordNodes.push({ under, shine });
+
+    const anchorX = base.anchorX[column];
+    const anchorY = base.anchorY[column] - 1;
+    hardware.append(
+      svgNode("circle", {
+        cx: anchorX,
+        cy: anchorY,
+        r: 3.55,
+        fill: "url(#oa-brass)",
+        stroke: "#4b3616",
+        "stroke-width": "0.9"
+      }),
+      svgNode("circle", {
+        cx: anchorX,
+        cy: anchorY,
+        r: 1.45,
+        fill: scene.render.background,
+        stroke: "#473717",
+        "stroke-width": "0.55"
+      }),
+      svgNode("path", {
+        d: `M ${anchorX - 2.2} ${anchorY + 4.5} q 2.2 3.2 4.4 0`,
+        fill: "none",
+        stroke: "#6f5630",
+        "stroke-width": "0.85",
+        "stroke-linecap": "round"
+      })
+    );
+
+    const crystal = createCrystal(
+      column,
+      15 + (column % 4) * 2.15,
+      palette[column % palette.length],
+      `oa-glass-${column}`,
+      options.pendantHref
+    );
+    payloads.appendChild(crystal);
+    crystalNodes.push(crystal);
+
+    const beads = [];
+    for (const row of [3, 7, 10]) {
+      if (row >= rows - 1) continue;
+      const bead = createBead(
+        palette[(column + row) % palette.length],
+        row === 7 ? 3.65 : 2.75
+      );
+      payloads.appendChild(bead);
+      beads.push({ row, node: bead });
+    }
+    beadNodes.push(beads);
+  }
+
+  function renderFrame(frameIndex) {
+    const frame = frames[Math.max(0, Math.min(frames.length - 1, frameIndex))];
+    for (let column = 0; column < columns; column += 1) {
+      const points = [
+        { x: base.anchorX[column], y: base.anchorY[column] }
+      ];
+      for (let row = 0; row < rows; row += 1) {
+        const index = row * columns + column;
+        points.push({
+          x: base.x[index] + frame.x[index],
+          y: base.y[index] + frame.y[index]
+        });
+      }
+      const cordPath = pathThrough(points);
+      cordNodes[column].under.setAttribute("d", cordPath);
+      cordNodes[column].shine.setAttribute("d", cordPath);
+
+      const terminalIndex = (rows - 1) * columns + column;
+      crystalNodes[column].setAttribute(
+        "transform",
+        `translate(${(base.x[terminalIndex] + frame.x[terminalIndex]).toFixed(2)} ${(base.y[terminalIndex] + frame.y[terminalIndex]).toFixed(2)}) rotate(${frame.rotation[terminalIndex].toFixed(2)})`
+      );
+      for (const bead of beadNodes[column]) {
+        const index = bead.row * columns + column;
+        bead.node.setAttribute(
+          "transform",
+          `translate(${(base.x[index] + frame.x[index]).toFixed(2)} ${(base.y[index] + frame.y[index]).toFixed(2)})`
+        );
+      }
+    }
+  }
+
+  return { renderFrame };
+}