@openvidstudio/mcp-server 1.3.1 → 1.4.0

package/templates/default/openvidstudio-stem/src/VectorField.tsx

@@ -0,0 +1,231 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { E, tween } from "@openvidstudio/core";
+import { SUBJECT_ACCENT } from "./designSystem";
+import { lineWeight, useAxes, type AxesGeometry, type Box } from "./graph";
+import type { Point } from "./paths";
+
+export interface VectorFieldProps {
+  /** The field: a graph point to the vector there, `[fx, fy]`, y up. Return `[0, 0]` where it is undefined. */
+  field: (x: number, y: number) => [number, number];
+  /** Where the field is drawn, graph units. Used when the field is not inside an <Axes>. Default [-1, 1]. */
+  xRange?: [number, number];
+  yRange?: [number, number];
+  /** Where it is drawn, composition px, when not inside an <Axes> (inside one, the Axes' box is used). Default: a box sized to the frame. */
+  box?: Box;
+  /** Arrows per row and column. `rows` default: as many as keep the cells square. Default 7 columns. */
+  grid?: { columns: number; rows?: number };
+  /**
+   * Pixels per unit of field magnitude. An arrow is exactly `|f| * scale` px from tail to tip (no
+   * caps, no normalising, unless `normalize` or `maxLength` is given). Default: the longest arrow on the grid is 80% of a cell.
+   */
+  scale?: number;
+  /** Draw every arrow this many px long, direction only. Arrow length then no longer says anything about |f|. */
+  normalize?: number;
+  /** Cap arrows at this many px. A capped arrow is shorter than `|f| * scale`. */
+  maxLength?: number;
+  /** Also trace field lines (streamlines) from the seeds, drawn on after the arrows. Default false. */
+  fieldLines?: boolean;
+  /** Where field lines start, in graph units. Each is traced both ways. Default: every other grid point. */
+  seeds?: [number, number][];
+  /** Colour of the arrows. Default the physics accent. */
+  color?: string;
+  /** Colour of the field lines. Default the physics ember. */
+  lineColor?: string;
+  /** Composition frame the arrows start to grow. Default 0. */
+  at?: number;
+  /** Frames the field lines take to draw on, after the arrows. Default 45. */
+  lineDuration?: number;
+}
+
+/** Frames the arrows take to grow to full length. */
+export const FIELD_ARROW_FRAMES = 20;
+
+function defaultBox(width: number, height: number): Box {
+  const x = Math.round(width * 0.14);
+  return height > width
+    ? { x, y: Math.round(height * 0.3), width: width - 2 * x, height: Math.round(width * 0.78) }
+    : { x, y: Math.round(height * 0.14), width: width - 2 * x, height: Math.round(height * 0.66) };
+}
+
+function ownGeometry(box: Box, xRange: [number, number], yRange: [number, number], weight: number, accent: string): AxesGeometry {
+  const xs = xRange[1] - xRange[0];
+  const ys = yRange[1] - yRange[0];
+  return {
+    box,
+    xRange,
+    yRange,
+    weight,
+    accent,
+    toScreen: (x, y) => ({ x: box.x + ((x - xRange[0]) / xs) * box.width, y: box.y + box.height - ((y - yRange[0]) / ys) * box.height }),
+    toWorld: (px, py) => ({ x: xRange[0] + ((px - box.x) / box.width) * xs, y: yRange[0] + ((box.y + box.height - py) / box.height) * ys }),
+  };
+}
+
+export interface VectorFieldGrid {
+  /** Graph coordinates of the grid point. */
+  world: Point;
+  /** Where the arrow's tail is, composition px. */
+  screen: Point;
+  /** Arrow length at full growth, px. */
+  length: number;
+  /** Unit direction on screen (x right, y down). */
+  dir: Point;
+}
+
+/** The grid points, and the arrow drawn at each. Cell centres, so the grid never sits on an axis edge. */
+export function vectorFieldGrid(g: AxesGeometry, props: Pick<VectorFieldProps, "field" | "grid" | "scale" | "normalize" | "maxLength">): { cells: VectorFieldGrid[]; scale: number } {
+  const columns = Math.max(1, Math.round(props.grid?.columns ?? 7));
+  const cellW = g.box.width / columns;
+  const rows = Math.max(1, Math.round(props.grid?.rows ?? g.box.height / cellW));
+  const cellH = g.box.height / rows;
+  const raw: { world: Point; screen: Point; mag: number; dir: Point }[] = [];
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < columns; c++) {
+      const screen = { x: g.box.x + (c + 0.5) * cellW, y: g.box.y + (r + 0.5) * cellH };
+      const world = g.toWorld(screen.x, screen.y);
+      const [fx, fy] = props.field(world.x, world.y);
+      const mag = Math.hypot(fx, fy);
+      raw.push({ world, screen, mag: Number.isFinite(mag) ? mag : 0, dir: mag > 0 && Number.isFinite(mag) ? { x: fx / mag, y: -fy / mag } : { x: 0, y: 0 } });
+    }
+  }
+  const biggest = Math.max(1e-12, ...raw.map((a) => a.mag));
+  const scale = props.scale ?? (0.8 * Math.min(cellW, cellH)) / biggest;
+  const cells = raw.map((a) => {
+    let length = props.normalize !== undefined ? (a.mag > 0 ? props.normalize : 0) : a.mag * scale;
+    if (props.maxLength !== undefined) length = Math.min(length, props.maxLength);
+    return { world: a.world, screen: a.screen, length, dir: a.dir };
+  });
+  return { cells, scale };
+}
+
+/** One streamline through a seed (graph coordinates), as composition px points that run along the field. */
+export function traceFieldLine(g: AxesGeometry, field: VectorFieldProps["field"], seed: [number, number], step: number, maxSteps = 500): Point[] {
+  const b = g.box;
+  const inside = (p: Point) => p.x >= b.x && p.x <= b.x + b.width && p.y >= b.y && p.y <= b.y + b.height;
+  const dirAt = (p: Point): Point | null => {
+    const w = g.toWorld(p.x, p.y);
+    const [fx, fy] = field(w.x, w.y);
+    const m = Math.hypot(fx, fy);
+    if (!(m > 1e-12) || !Number.isFinite(m)) return null;
+    return { x: fx / m, y: -fy / m };
+  };
+  const walk = (start: Point, sign: number): Point[] => {
+    const out: Point[] = [];
+    let p = start;
+    let prev: Point | null = null;
+    for (let i = 0; i < maxSteps; i++) {
+      const k1 = dirAt(p);
+      if (!k1) break;
+      const at = (q: Point, k: Point, h: number): Point => ({ x: q.x + sign * k.x * h, y: q.y + sign * k.y * h });
+      const k2 = dirAt(at(p, k1, step / 2));
+      const k3 = k2 && dirAt(at(p, k2, step / 2));
+      const k4 = k3 && dirAt(at(p, k3, step));
+      if (!k2 || !k3 || !k4) break;
+      const d = { x: (k1.x + 2 * k2.x + 2 * k3.x + k4.x) / 6, y: (k1.y + 2 * k2.y + 2 * k3.y + k4.y) / 6 };
+      // A turn of more than 90 degrees in one step means the line ran into a source, sink or zero.
+      if (prev && d.x * prev.x + d.y * prev.y < 0) break;
+      prev = d;
+      const next = { x: p.x + sign * d.x * step, y: p.y + sign * d.y * step };
+      if (!inside(next)) break;
+      // Stepping over a source or a sink would turn the line round: stop short of it.
+      const dn = dirAt(next);
+      if (dn && dn.x * d.x + dn.y * d.y < 0) break;
+      out.push(next);
+      p = next;
+      // A closed line (an orbit) stops when it comes back to where it began.
+      if (i > 10 && Math.hypot(p.x - start.x, p.y - start.y) < step * 0.75) break;
+    }
+    return out;
+  };
+  const s = g.toScreen(seed[0], seed[1]);
+  if (!inside(s)) return [];
+  const back = walk(s, -1).reverse();
+  const fwd = walk(s, 1);
+  return [...back, s, ...fwd];
+}
+
+const Arrow: React.FC<{ from: Point; dir: Point; length: number; color: string; weight: number; dataset: Record<string, string> }> = ({ from, dir, length, color, weight, dataset }) => {
+  if (length <= 0) return null;
+  const head = Math.min(weight * 5, length * 0.6);
+  const tip = { x: from.x + dir.x * length, y: from.y + dir.y * length };
+  const base = { x: from.x + dir.x * (length - head), y: from.y + dir.y * (length - head) };
+  const half = head * 0.55;
+  const left = { x: base.x - dir.y * half, y: base.y + dir.x * half };
+  const right = { x: base.x + dir.y * half, y: base.y - dir.x * half };
+  return (
+    <g {...dataset}>
+      <line x1={from.x} y1={from.y} x2={base.x} y2={base.y} stroke={color} strokeWidth={weight} />
+      <polygon points={`${tip.x},${tip.y} ${left.x},${left.y} ${right.x},${right.y}`} fill={color} />
+    </g>
+  );
+};
+
+/**
+ * Arrows on a grid for a vector field, the picture an electric or gravitational field lesson draws. Inside
+ * an <Axes> it uses that mapping; on its own it takes a `box` and ranges. Each arrow starts at its grid
+ * point and is exactly `|f| * scale` px long unless `normalize` or `maxLength` says otherwise. With
+ * `fieldLines`, streamlines are traced from the seeds by integrating the field (deterministic) and drawn
+ * on after the arrows. Arrows and lines follow the field's direction in px: (fx, -fy), whatever the axes' scales. A pure function of the frame.
+ */
+export const VectorField: React.FC<VectorFieldProps> = (props) => {
+  const { field, xRange = [-1, 1], yRange = [-1, 1], box, fieldLines = false, seeds, color, lineColor, at = 0, lineDuration = 45 } = props;
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  let inAxes: AxesGeometry | null = null;
+  try {
+    inAxes = useAxes();
+  } catch {
+    inAxes = null;
+  }
+  const weight = lineWeight(width, height);
+  const tone = SUBJECT_ACCENT.physics;
+  const g = inAxes ?? ownGeometry(box ?? defaultBox(width, height), xRange, yRange, weight, tone.accent);
+  const { cells } = vectorFieldGrid(g, props);
+  const grow = tween(frame, [at, at + FIELD_ARROW_FRAMES], [0, 1], E.cinematic);
+  const lineP = fieldLines ? tween(frame, [at + FIELD_ARROW_FRAMES, at + FIELD_ARROW_FRAMES + lineDuration], [0, 1], E.sine) : 0;
+
+  const columns = Math.max(1, Math.round(props.grid?.columns ?? 7));
+  const seedList: [number, number][] =
+    seeds ?? cells.filter((_, i) => Math.floor(i / columns) % 2 === 0 && (i % columns) % 2 === 0).map((c) => [c.world.x, c.world.y] as [number, number]);
+  const step = Math.max(2, Math.min(g.box.width, g.box.height) / 120);
+  const lines = fieldLines && lineP > 0 ? seedList.map((s) => traceFieldLine(g, field, s, step)).filter((l) => l.length >= 2) : [];
+  const partial = (pts: Point[]): Point[] => {
+    const m = lineP * (pts.length - 1);
+    const full = Math.floor(m);
+    const out = pts.slice(0, full + 1);
+    if (full < pts.length - 1 && m > full) {
+      const a = pts[full];
+      const b = pts[full + 1];
+      out.push({ x: a.x + (b.x - a.x) * (m - full), y: a.y + (b.y - a.y) * (m - full) });
+    }
+    return out;
+  };
+  const arrowColor = color ?? tone.accent;
+  const streamColor = lineColor ?? tone.accentAlt;
+
+  return (
+    <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }} data-ovs-vectorfield="">
+      <svg width={width} height={height} style={{ position: "absolute", left: 0, top: 0 }}>
+        {lines.map((pts, i) => {
+          const shown = partial(pts);
+          return (
+            <path
+              key={i}
+              data-ovs-fieldline=""
+              d={shown.map((p, j) => `${j === 0 ? "M" : "L"}${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(" ")}
+              fill="none"
+              stroke={streamColor}
+              strokeWidth={weight * 1.2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          );
+        })}
+        {cells.map((c, i) => (
+          <Arrow key={i} from={c.screen} dir={c.dir} length={c.length * grow} color={arrowColor} weight={weight * 1.6} dataset={{ "data-ovs-arrow": "", "data-ovs-gx": String(c.world.x), "data-ovs-gy": String(c.world.y) }} />
+        ))}
+      </svg>
+    </div>
+  );
+};

package/templates/default/openvidstudio-stem/src/Wave.tsx

@@ -0,0 +1,234 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { E, tween } from "@openvidstudio/core";
+import { SUBJECT_ACCENT, VOID, bodyStack, displayStack } from "./designSystem";
+import { lineWeight, type Box } from "./graph";
+import { Spark } from "./Spark";
+import type { Path, Point } from "./paths";
+
+export interface WaveLabels {
+  /** A bracket exactly one wavelength wide, from one crest to the next. Default true. */
+  wavelength?: boolean;
+  /** An arrow from the rest line to a crest, exactly `amplitude` px long. Default true. */
+  amplitude?: boolean;
+  /** A marker at the left edge of the wave, with the phase written out. Default true. */
+  phase?: boolean;
+}
+
+export interface WaveProps {
+  /** "travelling" moves along; "standing" has fixed nodes and antinodes that oscillate. Default "travelling". */
+  mode?: "travelling" | "standing";
+  /** Crest to crest, in px. Default a third of the box width. */
+  wavelength?: number;
+  /** Rest line to crest, in px. The drawn height of a crest is exactly this. Default 8% of the shorter side. */
+  amplitude?: number;
+  /** Travelling only: how far a crest moves per frame, in px. Exactly this. Default one wavelength per 60 frames. */
+  speed?: number;
+  /** Standing only: frames for an antinode to go up, down and back. Default 90. */
+  period?: number;
+  /** Phase in radians. The displacement at the left edge of the box, at time zero, is `amplitude * cos(phase)`. Default 0. */
+  phase?: number;
+  /** Composition frame the wave starts to draw. Default 0. */
+  at?: number;
+  /** Where the wave lives. The rest line runs through the middle of the box. Default: the middle of the frame, inside the Reels safe zone. */
+  box?: Box;
+  /** Which labels to draw. `false` draws none, `true` (the default) draws all of them. */
+  labels?: boolean | WaveLabels;
+  /** Words for the labels. Defaults "λ", "A". */
+  wavelengthText?: string;
+  amplitudeText?: string;
+  /** "crest" rides a Spark on a crest (travelling) or an antinode (standing). Default: none. */
+  spark?: "crest";
+}
+
+/** Frames the wave takes to draw itself from left to right. */
+export const WAVE_REVEAL_FRAMES = 24;
+const LABEL_FADE_FRAMES = 10;
+
+export interface WaveFieldInput {
+  mode: "travelling" | "standing";
+  wavelength: number;
+  amplitude: number;
+  speed: number;
+  period: number;
+  phase: number;
+  /** Left edge of the wave, px. */
+  x0: number;
+}
+
+/**
+ * The maths of the wave, with no drawing. `t` is frames since the wave began. Displacement is upward positive.
+ * travelling: d = A cos(k (x - x0 - speed t) + phase), so a crest sits at x0 + speed t + (2 pi n - phase) / k
+ * standing:   d = A cos(k (x - x0) + phase) cos(2 pi t / period)
+ */
+export function waveField(w: WaveFieldInput) {
+  const k = (2 * Math.PI) / w.wavelength;
+  const displacement = (x: number, t: number): number =>
+    w.mode === "travelling" ? w.amplitude * Math.cos(k * (x - w.x0 - w.speed * t) + w.phase) : w.amplitude * Math.cos(k * (x - w.x0) + w.phase) * Math.cos((2 * Math.PI * t) / w.period);
+  /** x of the crest (travelling) or the antinode that is at full upward stretch at t = 0 (standing), as a function of n. */
+  const crestX = (n: number, t: number): number => w.x0 + (w.mode === "travelling" ? w.speed * t : 0) + (2 * Math.PI * n - w.phase) / k;
+  /** Antinodes (maximum swing, either direction) at x0 + (n pi - phase) / k. Standing waves only. */
+  const antinodeX = (n: number): number => w.x0 + (Math.PI * n - w.phase) / k;
+  /** Nodes (never move) at x0 + ((n + 1/2) pi - phase) / k. Standing waves only. */
+  const nodeX = (n: number): number => w.x0 + ((n + 0.5) * Math.PI - w.phase) / k;
+  const crestsIn = (from: number, to: number, t: number): number[] => {
+    const out: number[] = [];
+    const n0 = Math.ceil((k * (from - w.x0 - (w.mode === "travelling" ? w.speed * t : 0)) + w.phase) / (2 * Math.PI) - 1e-9);
+    for (let n = n0; crestX(n, t) <= to + 1e-9; n++) out.push(crestX(n, t));
+    return out;
+  };
+  return { k, displacement, crestX, antinodeX, nodeX, crestsIn };
+}
+
+const fmtPhase = (phase: number): string => {
+  const v = Number((phase / Math.PI).toFixed(2));
+  return v === 0 ? "φ = 0" : `φ = ${v}π`;
+};
+
+function useWaveParams(p: WaveProps) {
+  const { width, height } = useVideoConfig();
+  const S = Math.min(width, height);
+  const box = p.box ?? { x: Math.round(width * 0.08), y: Math.round(height * 0.38), width: Math.round(width * 0.84), height: Math.round(height * 0.24) };
+  const wavelength = p.wavelength ?? box.width / 3;
+  return {
+    width,
+    height,
+    S,
+    box,
+    input: {
+      mode: p.mode ?? "travelling",
+      wavelength,
+      amplitude: p.amplitude ?? Math.round(S * 0.08),
+      speed: p.speed ?? wavelength / 60,
+      period: p.period ?? 90,
+      phase: p.phase ?? 0,
+      x0: box.x,
+    } as WaveFieldInput,
+  };
+}
+
+/** Where the Spark rides at wave time t: a crest, kept inside the first wavelength or so of the box by wrapping. */
+function sparkPoint(input: WaveFieldInput, box: Box, t: number): Point {
+  const f = waveField(input);
+  const base = box.y + box.height / 2;
+  if (input.mode === "standing") {
+    const xc = box.x + box.width / 2;
+    const n = Math.ceil((f.k * (xc - input.x0) + input.phase) / (2 * Math.PI));
+    return { x: f.crestX(n, 0), y: base - f.displacement(f.crestX(n, 0), t) };
+  }
+  const lo = input.x0 + input.wavelength * 0.25;
+  const raw = input.x0 + input.speed * t - input.phase / f.k;
+  const x = lo + (((raw - lo) % input.wavelength) + input.wavelength) % input.wavelength;
+  return { x, y: base - f.displacement(x, t) };
+}
+
+/**
+ * A sine wave, travelling or standing, with the wavelength, amplitude and phase drawn on it: the picture a
+ * waves lesson explains. Every number drawn is exact. Crests are exactly `wavelength` px apart, a crest is
+ * exactly `amplitude` px above the rest line, and a travelling crest moves exactly `speed` px per frame.
+ * The curve is sampled at 24 or more points per wavelength, with a sample on every crest and trough.
+ * With `spark="crest"` the one Spark rides a crest. A pure function of the frame.
+ */
+export const Wave: React.FC<WaveProps> = (props) => {
+  const frame = useCurrentFrame();
+  const { width, height, S, box, input } = useWaveParams(props);
+  const at = props.at ?? 0;
+  const weight = lineWeight(width, height);
+  const labelPx = Math.round(S * 0.03);
+  const accent = SUBJECT_ACCENT.physics;
+  const t = frame - at;
+  if (t < 0) return null;
+  const field = waveField(input);
+  const base = box.y + box.height / 2;
+  const x1 = box.x + box.width;
+  const reveal = tween(frame, [at, at + WAVE_REVEAL_FRAMES], [0, 1], E.cinematic);
+  const xEnd = box.x + box.width * reveal;
+  const labelOpacity = tween(frame, [at + WAVE_REVEAL_FRAMES, at + WAVE_REVEAL_FRAMES + LABEL_FADE_FRAMES], [0, 1], E.cinematic);
+  const want = props.labels === undefined || props.labels === true ? { wavelength: true, amplitude: true, phase: true } : props.labels === false ? { wavelength: false, amplitude: false, phase: false } : { wavelength: props.labels.wavelength ?? true, amplitude: props.labels.amplitude ?? true, phase: props.labels.phase ?? true };
+
+  // Sample positions: a regular lattice that has a point on every extremum, plus both ends.
+  const perWave = Math.max(24, 2 * Math.ceil(input.wavelength / 4));
+  const step = input.wavelength / perWave;
+  const origin = field.crestX(0, input.mode === "travelling" ? t : 0);
+  const first = Math.ceil((box.x - origin) / step - 1e-9);
+  const xs: number[] = [box.x];
+  for (let i = first; origin + i * step < xEnd - 1e-9; i++) if (origin + i * step > box.x + 1e-9) xs.push(origin + i * step);
+  if (xEnd > box.x) xs.push(xEnd);
+  const pts = xs.map((x) => ({ x, y: base - field.displacement(x, t) }));
+  const d = pts.map((q, i) => `${i === 0 ? "M" : "L"}${q.x.toFixed(3)} ${q.y.toFixed(3)}`).join(" ");
+
+  const crests = input.mode === "travelling" ? field.crestsIn(box.x, x1, t) : [];
+  const nodes: number[] = [];
+  const antinodes: number[] = [];
+  if (input.mode === "standing") {
+    for (let n = -200; n <= 200; n++) {
+      const nx = field.nodeX(n);
+      if (nx >= box.x - 1e-9 && nx <= xEnd + 1e-9) nodes.push(nx);
+      const ax = field.antinodeX(n);
+      if (ax >= box.x - 1e-9 && ax <= xEnd + 1e-9) antinodes.push(ax);
+    }
+  }
+
+  // The crest the labels hang on: the first one at or after a quarter wavelength in, one wavelength wide bracket.
+  const anchor = sparkPoint(input, box, t).x;
+  const bracketY = base - input.amplitude - S * 0.05;
+  const showLabels = labelOpacity > 0;
+  const sparkPath: Path = (local) => sparkPoint(input, box, local + WAVE_REVEAL_FRAMES);
+
+  return (
+    <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }} data-ovs-wave-root="">
+      <svg width={width} height={height} style={{ position: "absolute", left: 0, top: 0 }}>
+        <line data-ovs-baseline="" x1={box.x} y1={base} x2={x1} y2={base} stroke={VOID.textDim} strokeWidth={weight} strokeDasharray={`${weight * 2.5} ${weight * 2}`} />
+        <path
+          data-ovs-wave={input.mode}
+          data-ovs-wavelength={input.wavelength}
+          data-ovs-amplitude={input.amplitude}
+          data-ovs-speed={input.speed}
+          data-ovs-baseline-y={base}
+          data-ovs-crests={crests.map((c) => c.toFixed(3)).join(",")}
+          d={d}
+          fill="none"
+          stroke={accent.accent}
+          strokeWidth={weight * 1.6}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+        {nodes.map((nx, i) => (
+          <circle key={`n${i}`} data-ovs-node={nx.toFixed(3)} cx={nx} cy={base} r={weight * 2} fill={VOID.base} stroke={VOID.text} strokeWidth={weight} />
+        ))}
+        {showLabels && (
+          <g opacity={labelOpacity}>
+            {want.wavelength && (
+              <g data-ovs-label="wavelength" data-ovs-x1={anchor.toFixed(3)} data-ovs-x2={(anchor + input.wavelength).toFixed(3)}>
+                <line x1={anchor} y1={bracketY} x2={anchor + input.wavelength} y2={bracketY} stroke={accent.accentAlt} strokeWidth={weight} />
+                <line x1={anchor} y1={bracketY - weight * 3} x2={anchor} y2={bracketY + weight * 3} stroke={accent.accentAlt} strokeWidth={weight} />
+                <line x1={anchor + input.wavelength} y1={bracketY - weight * 3} x2={anchor + input.wavelength} y2={bracketY + weight * 3} stroke={accent.accentAlt} strokeWidth={weight} />
+                <text x={anchor + input.wavelength / 2} y={bracketY - labelPx * 0.5} textAnchor="middle" fontSize={labelPx} fill={accent.accentAlt} fontFamily={displayStack()} fontWeight={700}>{props.wavelengthText ?? "λ"}</text>
+              </g>
+            )}
+            {want.amplitude && (
+              <g data-ovs-label="amplitude" data-ovs-length={input.amplitude}>
+                <line data-ovs-amplitude-line="" x1={anchor} y1={base} x2={anchor} y2={base - input.amplitude} stroke={VOID.text} strokeWidth={weight} />
+                <polygon points={`${anchor},${base - input.amplitude} ${anchor - weight * 2.2},${base - input.amplitude + weight * 4.5} ${anchor + weight * 2.2},${base - input.amplitude + weight * 4.5}`} fill={VOID.text} />
+                <text x={anchor + weight * 4} y={base - input.amplitude / 2 + labelPx * 0.35} fontSize={labelPx} fill={VOID.text} fontFamily={displayStack()} fontWeight={700}>{props.amplitudeText ?? "A"}</text>
+              </g>
+            )}
+            {want.phase && (
+              <g data-ovs-label="phase" data-ovs-phase={input.phase}>
+                <line x1={box.x} y1={base} x2={box.x} y2={base - field.displacement(box.x, t)} stroke={VOID.textDim} strokeWidth={weight} />
+                <circle cx={box.x} cy={base - field.displacement(box.x, t)} r={weight * 2.2} fill={VOID.textDim} />
+                <text x={box.x} y={base + input.amplitude + labelPx * 1.6} fontSize={labelPx} fill={VOID.textDim} fontFamily={bodyStack()}>{fmtPhase(input.phase)}</text>
+              </g>
+            )}
+          </g>
+        )}
+        {props.spark === "crest" && (() => {
+          const sp = sparkPoint(input, box, t);
+          return reveal >= 1 ? <circle data-ovs-crest-spark="" data-ovs-x={sp.x.toFixed(3)} data-ovs-y={sp.y.toFixed(3)} cx={sp.x} cy={sp.y} r={1} fill="none" /> : null;
+        })()}
+        {antinodes.length > 0 && <g data-ovs-antinodes={antinodes.map((a) => a.toFixed(3)).join(",")} />}
+      </svg>
+      {props.spark === "crest" && <Spark path={sparkPath} at={at + WAVE_REVEAL_FRAMES} trail={10} subject="physics" />}
+    </div>
+  );
+};

package/templates/default/openvidstudio-stem/src/index.ts

@@ -38,3 +38,24 @@ export { FreeBody, ARROW_GROW_FRAMES } from "./FreeBody";
 export type { FreeBodyProps, Force } from "./FreeBody";
 export { ArrayViz, useArrayViz } from "./ArrayViz";
 export type { ArrayVizProps, ArrayPointer, ArrayGeometry } from "./ArrayViz";
+
+export { LessonCaptions, captionChunks, captionInsets } from "./LessonCaptions";
+export type { LessonCaptionsProps } from "./LessonCaptions";
+
+export { Derivation, revealFrames, matchTerms, slotOpacity, DERIVATION_MOVE_FRAMES, DERIVATION_TERM_STAGGER, DERIVATION_STACK } from "./Derivation";
+export type { DerivationProps, DerivationStep } from "./Derivation";
+
+export { Wave, waveField, WAVE_REVEAL_FRAMES } from "./Wave";
+export type { WaveProps, WaveLabels, WaveFieldInput } from "./Wave";
+export { Orbit, orbitState, eccentricAnomaly, visViva, inverseSquare, ORBIT_ARROW_FRAMES } from "./Orbit";
+export type { OrbitProps, OrbitShape, OrbitState } from "./Orbit";
+export { VectorField, vectorFieldGrid, traceFieldLine, FIELD_ARROW_FRAMES } from "./VectorField";
+export type { VectorFieldProps, VectorFieldGrid } from "./VectorField";
+export { ComplexityCurve, complexityValue, COMPLEXITY_NAMES, COMPLEXITY_COLORS } from "./ComplexityCurve";
+export type { ComplexityCurveProps, ComplexityKind } from "./ComplexityCurve";
+export { MatrixGrid, matrixGridGeometry, interpolateMatrix, applyMatrix, defaultMatrixBox } from "./MatrixGrid";
+export type { MatrixGridProps, MatrixGridGeometry, Matrix2 } from "./MatrixGrid";
+export { TreeViz, treeLayout } from "./TreeViz";
+export type { TreeVizProps, TreeLayout, TreeNodeLayout, Traversal } from "./TreeViz";
+export { GraphViz, GRAPH_ROLES, GRAPH_ROLE_COLOR, adjacencyFrom, bfsOrder, bfsSteps, shortestPath, graphLayout } from "./GraphViz";
+export type { GraphVizProps, GraphNode, GraphStep, GraphRole, GraphLayout, Adjacency } from "./GraphViz";

package/templates/default/package.json

@@ -9,20 +9,20 @@
   "dependencies": {
     "@openvidstudio/core": "file:./openvidstudio-core",
     "@openvidstudio/stem": "file:./openvidstudio-stem",
-    "@remotion/cli": "4.0.534",
-    "@remotion/google-fonts": "4.0.534",
-    "@remotion/motion-blur": "4.0.534",
-    "@remotion/shapes": "4.0.534",
-    "@remotion/tailwind-v4": "4.0.534",
-    "@remotion/transitions": "4.0.534",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
-    "remotion": "4.0.534",
+    "@remotion/cli": "4.0.536",
+    "@remotion/google-fonts": "4.0.536",
+    "@remotion/motion-blur": "4.0.536",
+    "@remotion/shapes": "4.0.536",
+    "@remotion/tailwind-v4": "4.0.536",
+    "@remotion/transitions": "4.0.536",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "remotion": "4.0.536",
     "tailwindcss": "4.3.3"
   },
   "devDependencies": {
     "@types/react": "19.3.0",
-    "@types/web": "0.0.358",
+    "@types/web": "0.0.359",
     "typescript": "7.0.2"
   },
   "scripts": {