@openvidstudio/mcp-server 0.1.0 → 1.4.0

package/templates/default/openvidstudio-core/src/pixel.tsx

@@ -0,0 +1,285 @@
+// The pixel-grid family: a 5x7 dot-matrix font, a logo assembler built from the same kind
+// of rect data extract_brand already parses out of an SVG, and the wipe transition that
+// pairs with both. Ported from reference/launch-video's lib/dots.tsx and the PixelWipe half
+// of lib/fx.tsx, generalized: no hardcoded video palette or logo file, pixel.json's shape
+// replaced by a plain array of { x, y, width, height, color } rects.
+
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
+import type { DesignSystem } from "./designSystem";
+import { E, jitter, pop, SPRING, tween } from "./motion";
+import { color } from "./tokens";
+
+const GLYPH_5X7: Record<string, string[]> = {
+  "0": ["01110", "10001", "10011", "10101", "11001", "10001", "01110"],
+  "1": ["00100", "01100", "00100", "00100", "00100", "00100", "01110"],
+  "2": ["01110", "10001", "00001", "00010", "00100", "01000", "11111"],
+  "3": ["11111", "00010", "00100", "00010", "00001", "10001", "01110"],
+  "4": ["00010", "00110", "01010", "10010", "11111", "00010", "00010"],
+  "5": ["11111", "10000", "11110", "00001", "00001", "10001", "01110"],
+  "6": ["00110", "01000", "10000", "11110", "10001", "10001", "01110"],
+  "7": ["11111", "00001", "00010", "00100", "01000", "01000", "01000"],
+  "8": ["01110", "10001", "10001", "01110", "10001", "10001", "01110"],
+  "9": ["01110", "10001", "10001", "01111", "00001", "00010", "01100"],
+  A: ["01110", "10001", "10001", "11111", "10001", "10001", "10001"],
+  B: ["11110", "10001", "10001", "11110", "10001", "10001", "11110"],
+  C: ["01110", "10001", "10000", "10000", "10000", "10001", "01110"],
+  D: ["11100", "10010", "10001", "10001", "10001", "10010", "11100"],
+  E: ["11111", "10000", "10000", "11110", "10000", "10000", "11111"],
+  F: ["11111", "10000", "10000", "11110", "10000", "10000", "10000"],
+  G: ["01110", "10001", "10000", "10111", "10001", "10001", "01111"],
+  H: ["10001", "10001", "10001", "11111", "10001", "10001", "10001"],
+  I: ["01110", "00100", "00100", "00100", "00100", "00100", "01110"],
+  J: ["00111", "00010", "00010", "00010", "00010", "10010", "01100"],
+  K: ["10001", "10010", "10100", "11000", "10100", "10010", "10001"],
+  L: ["10000", "10000", "10000", "10000", "10000", "10000", "11111"],
+  M: ["10001", "11011", "10101", "10101", "10001", "10001", "10001"],
+  N: ["10001", "10001", "11001", "10101", "10011", "10001", "10001"],
+  O: ["01110", "10001", "10001", "10001", "10001", "10001", "01110"],
+  P: ["11110", "10001", "10001", "11110", "10000", "10000", "10000"],
+  Q: ["01110", "10001", "10001", "10001", "10101", "10010", "01101"],
+  R: ["11110", "10001", "10001", "11110", "10100", "10010", "10001"],
+  S: ["01111", "10000", "10000", "01110", "00001", "00001", "11110"],
+  T: ["11111", "00100", "00100", "00100", "00100", "00100", "00100"],
+  U: ["10001", "10001", "10001", "10001", "10001", "10001", "01110"],
+  V: ["10001", "10001", "10001", "10001", "10001", "01010", "00100"],
+  W: ["10001", "10001", "10001", "10101", "10101", "10101", "01010"],
+  X: ["10001", "10001", "01010", "00100", "01010", "10001", "10001"],
+  Y: ["10001", "10001", "10001", "01010", "00100", "00100", "00100"],
+  Z: ["11111", "00001", "00010", "00100", "01000", "10000", "11111"],
+  " ": ["00000", "00000", "00000", "00000", "00000", "00000", "00000"],
+  ".": ["00000", "00000", "00000", "00000", "00000", "01100", "01100"],
+  ":": ["00000", "01100", "01100", "00000", "01100", "01100", "00000"],
+  "-": ["00000", "00000", "00000", "11111", "00000", "00000", "00000"],
+  "/": ["00001", "00010", "00010", "00100", "01000", "01000", "10000"],
+  "%": ["11000", "11001", "00010", "00100", "01000", "10011", "00011"],
+  "→": ["00000", "00100", "00010", "11111", "00010", "00100", "00000"],
+};
+
+type DotPixel = { x: number; y: number; c: string; i: number };
+
+function layoutDots(text: string, colors: string[], solid?: string): { pixels: DotPixel[]; width: number } {
+  const pixels: DotPixel[] = [];
+  let cx = 0;
+  let li = 0;
+  for (const ch of text.toUpperCase()) {
+    const glyph = GLYPH_5X7[ch] ?? GLYPH_5X7[" "];
+    const col = solid ?? colors[li % colors.length];
+    glyph.forEach((row, y) =>
+      row.split("").forEach((bit, x) => {
+        if (bit === "1") pixels.push({ x: cx + x, y, c: col, i: pixels.length });
+      }),
+    );
+    cx += ch === " " ? 4 : 6;
+    if (ch !== " ") li++;
+  }
+  return { pixels, width: cx - 1 };
+}
+
+/** The four-color cycle DotText/PixelWipe fall back to when no explicit palette is given. */
+const defaultCycle = (): string[] => [color.accent, color.accentAlt, color.success, color.warn];
+
+/**
+ * 5x7 dot-matrix text, built pixel by pixel instead of drawn with a font file -- the same
+ * "ground truth" bias as the rest of this library, just applied to type instead of capture.
+ * `build="wipe"` sweeps left to right, `build="scatter"` flies pixels in from random
+ * offsets, `build="none"` renders flat once `at` has passed.
+ */
+export const DotText: React.FC<{
+  text: string;
+  at: number;
+  /** px per cell */
+  px?: number;
+  /** a fixed palette, cycled per character, or "cycle" for the design/token default four */
+  colors?: string[] | "cycle";
+  /** overrides `colors` with one flat color for every pixel */
+  solid?: string;
+  build?: "scatter" | "wipe" | "none";
+  /** frame the exit starts */
+  out?: number;
+  glow?: number;
+  seed?: number;
+}> = ({ text, at, px = 14, colors = "cycle", solid, build = "wipe", out, glow = 0.6, seed = 3 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const resolvedColors = colors === "cycle" ? defaultCycle() : colors;
+  const { pixels, width } = layoutDots(text, resolvedColors, solid);
+  const cell = px;
+  const size = px * 0.8;
+  return (
+    <div style={{ position: "relative", width: width * cell, height: 7 * cell }}>
+      {pixels.map((p) => {
+        const r = jitter(p.i, seed);
+        const d = build === "wipe" ? at + p.x * 0.55 + r * 4 : build === "scatter" ? at + r * 14 : at;
+        const s = build === "none" ? (frame >= at ? 1 : 0) : pop(frame, fps, d, SPRING.pop);
+        if (frame < d) return null;
+        const scatter = build === "scatter" ? 1 - s : 0;
+        const o = out !== undefined ? tween(frame, [out + r * 10, out + r * 10 + 8], [0, 1], E.snap) : 0;
+        if (o >= 1) return null;
+        const dx = scatter * (jitter(p.i, seed + 7) - 0.5) * 900;
+        const dy = scatter * (jitter(p.i, seed + 11) - 0.5) * 600;
+        return (
+          <div
+            key={p.i}
+            style={{
+              position: "absolute",
+              left: p.x * cell,
+              top: p.y * cell,
+              width: size,
+              height: size,
+              borderRadius: size * 0.18,
+              background: p.c,
+              transform: `translate(${dx}px, ${dy - o * 30}px) scale(${Math.max(0, Math.min(1.15, s)) * (1 - o)})`,
+              boxShadow: glow ? `0 0 ${size * 1.2 * glow}px ${p.c}88` : undefined,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+/**
+ * One filled shape a pixel-grid logo is built from -- deliberately the same field names
+ * `extractSvgShapes` (packages/mcp-server/src/tools/extractBrand.ts) already produces for a
+ * rect it finds in a logo SVG, so that tool's output can be handed to `PixelLogo` as-is
+ * (it carries a couple of extra extraction-time fields, `area`/`hasBox`, which `PixelLogo`
+ * simply ignores). Wiring extract_brand to call this is a future integration; this is just
+ * making the shapes it already has line up with what renders them.
+ */
+export type PixelShape = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+};
+
+/**
+ * Assembles a pixel-grid logo from its own rect shapes, each flying in from a ring around
+ * the mark (`build="scatter"`) or rendered flat (`build="none"`). The center and spread of
+ * that ring are computed from the shapes' own bounding box, so this works for any pixel-grid
+ * logo, not just one fixed layout.
+ */
+export const PixelLogo: React.FC<{
+  shapes: PixelShape[];
+  at: number;
+  /** output px per source (viewBox) unit */
+  scale?: number;
+  build?: "scatter" | "none";
+  glow?: number;
+  /** frame the exit starts */
+  out?: number;
+  seed?: number;
+  style?: React.CSSProperties;
+}> = ({ shapes, at, scale = 1, build = "scatter", glow = 0.9, out, seed = 5, style }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  if (shapes.length === 0) return null;
+
+  const minX = Math.min(...shapes.map((s) => s.x));
+  const minY = Math.min(...shapes.map((s) => s.y));
+  const maxX = Math.max(...shapes.map((s) => s.x + s.width));
+  const maxY = Math.max(...shapes.map((s) => s.y + s.height));
+  const centerX = (minX + maxX) / 2;
+  const centerY = (minY + maxY) / 2;
+  const spread = Math.max(maxX - minX, maxY - minY) / 2 || 1;
+
+  if (build !== "none" && frame < at) return null;
+
+  return (
+    <div style={{ position: "relative", width: (maxX - minX) * scale, height: (maxY - minY) * scale, ...style }}>
+      {shapes.map((s, i) => {
+        const r = jitter(i, seed);
+        const dist = Math.hypot(s.x + s.width / 2 - centerX, s.y + s.height / 2 - centerY) / spread;
+        const d = at + dist * 10 + r * 6;
+        const popped = build === "none" ? 1 : Math.min(1.08, pop(frame, fps, d, SPRING.soft));
+        const k = build === "none" ? 0 : 1 - Math.min(1, popped);
+        const angle = jitter(i, seed + 4) * Math.PI * 2;
+        const radius = 700 + jitter(i, seed + 8) * 900;
+        const o = out !== undefined ? tween(frame, [out + r * 8, out + r * 8 + 10], [0, 1], E.whip) : 0;
+        const flash = tween(frame, [d + 4, d + 20], [1, 0], E.cinematic);
+        const w = s.width * scale;
+        const h = s.height * scale;
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: (s.x - minX) * scale,
+              top: (s.y - minY) * scale,
+              width: w,
+              height: h,
+              borderRadius: Math.min(w, h) * 0.16,
+              background: s.color,
+              opacity: 1 - o,
+              transform: `translate(${Math.cos(angle) * radius * k}px, ${Math.sin(angle) * radius * k}px) rotate(${k * 180 * (r - 0.5)}deg) scale(${0.4 + 0.6 * Math.min(1, popped) + flash * 0.25})`,
+              boxShadow: glow ? `0 0 ${Math.min(w, h) * (glow + flash * 1.5)}px ${s.color}${flash > 0.05 ? "cc" : "77"}` : undefined,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+/**
+ * Pixel wipe transition pair. mode "in": the frame starts fully covered by cells that
+ * clear. mode "out": cells cover the frame, finishing exactly at the scene's last frame.
+ * Call both ends of a cut with the same `cell`/`seed` so the out and the following in read
+ * as one continuous move across the cut rather than two unrelated effects.
+ *
+ * `design` (optional) only informs the default tint palette and background -- pixel-grid
+ * (`design.motif === "pixel-grid"`) is this transition's natural home, but nothing about its
+ * own mechanics depends on that motif, so it works as a standalone wipe for any project.
+ */
+export const PixelWipe: React.FC<{
+  mode: "in" | "out";
+  at?: number;
+  dur?: number;
+  cell?: number;
+  seed?: number;
+  bg?: string;
+  tint?: string[];
+  design?: DesignSystem;
+}> = ({ mode, at, dur = 12, cell = 60, seed = 1, bg, tint, design }) => {
+  const frame = useCurrentFrame();
+  const { width, height, durationInFrames } = useVideoConfig();
+  const bgColor = bg ?? design?.color.bg0 ?? color.bg0;
+  const tintColors = tint ?? (design ? [design.color.accent, design.color.accentAlt, design.color.success, design.color.warn] : defaultCycle());
+  const start = at ?? (mode === "in" ? 0 : durationInFrames - dur - 1);
+  if (frame < start - 1 || frame > start + dur + 2) {
+    if (mode === "out" && frame > start + dur) return <AbsoluteFill style={{ background: bgColor }} />;
+    return null;
+  }
+  const cols = Math.ceil(width / cell);
+  const rows = Math.ceil(height / cell);
+  const cells: React.ReactNode[] = [];
+  for (let y = 0; y < rows; y++) {
+    for (let x = 0; x < cols; x++) {
+      const i = y * cols + x;
+      const diag = (x / cols) * 0.55 + (y / rows) * 0.25 + jitter(i, seed) * 0.35;
+      const t0 = start + diag * dur * 0.75;
+      const p = tween(frame, [t0, t0 + dur * 0.35], [0, 1], E.snap);
+      const cover = mode === "out" ? p : 1 - p;
+      if (cover <= 0.01) continue;
+      const tintHit = jitter(i, seed + 4) > 0.86 ? tintColors[i % tintColors.length] : bgColor;
+      const flicker = tintHit !== bgColor && cover > 0.2 && cover < 0.95;
+      cells.push(
+        <div
+          key={i}
+          style={{
+            position: "absolute",
+            left: x * cell,
+            top: y * cell,
+            width: cell + 1,
+            height: cell + 1,
+            background: flicker ? tintHit : bgColor,
+            transform: `scale(${cover})`,
+          }}
+        />,
+      );
+    }
+  }
+  return <AbsoluteFill style={{ pointerEvents: "none" }}>{cells}</AbsoluteFill>;
+};

package/templates/default/openvidstudio-core/src/sfx.tsx

@@ -1,37 +1,64 @@
-// SFX sequencer. All sounds live in public/sfx/ (generated by scripts/gen-sfx.sh).
+// SFX sequencer. All sounds live in public/sfx/, most generated by scripts/gen-sfx.sh.
+// The exceptions: typing-effect.mp3, a copyright-free recording committed as-is, and
+// bong/click_soft/drop, CC0 from Kenney. public/sfx/CREDITS.md says which is which.
 // Components emit sounds by rendering these helpers at computed frames, audio stays
 // perfectly in sync with visuals because both derive from the same frame math.
 
 import React from "react";
-import { Audio, Sequence, staticFile } from "remotion";
-import { jitter } from "./motion";
+import { Audio, Sequence, interpolate, staticFile } from "remotion";
 
-const KEYS = ["key_a.wav", "key_b.wav", "key_c.wav"];
+// typing-effect.mp3 is one continuous 8.1s recording of typing: a quiet lead-in, then steady keys.
+const TYPING_FILE = "sfx/typing-effect.mp3";
+const TYPING_SKIP = 12; // frames of lead-in to skip
+const TYPING_PASS = 8 * 30 - TYPING_SKIP - 8; // frames of steady typing per pass through the file
+const TYPING_GAP = 24; // a pause longer than this many frames starts a new typing run
+const TYPING_FADE = 5;
 
-export const KeySound: React.FC<{ at: number; seed?: number; volume?: number }> = ({
-  at,
-  seed = 0,
-  volume = 0.16,
-}) => (
-  <Sequence from={at} durationInFrames={6}>
-    <Audio
-      src={staticFile(`sfx/${KEYS[Math.floor(jitter(at, seed) * KEYS.length)]}`)}
-      volume={volume}
-    />
-  </Sequence>
-);
-
-/** One KeySound per typed character. charFrames = absolute frame each char appears. */
+/**
+ * Plays the typing recording under typed text. charFrames = absolute frame each char appears.
+ * Characters closer together than TYPING_GAP frames form one run; the recording plays across the
+ * run (looping in passes when the run is longer than the file), fading in and out so it never
+ * clicks. One continuous recording, not one sample per key, so typing does not sound like a metronome.
+ */
 export const TypingSfx: React.FC<{ charFrames: number[]; volume?: number }> = ({
   charFrames,
-  volume = 0.16,
-}) => (
-  <>
-    {charFrames.map((f, i) => (
-      <KeySound key={i} at={f} seed={i} volume={volume} />
-    ))}
-  </>
-);
+  volume = 1,
+}) => {
+  const frames = [...charFrames].sort((x, y) => x - y);
+  const runs: [number, number][] = [];
+  for (const f of frames) {
+    const last = runs[runs.length - 1];
+    if (last && f - last[1] <= TYPING_GAP) last[1] = f;
+    else runs.push([f, f]);
+  }
+  return (
+    <>
+      {runs.flatMap(([first, lastFrame], runIdx) => {
+        const start = first - 1;
+        const total = lastFrame - first + 6;
+        const passes = Math.ceil(total / TYPING_PASS);
+        return Array.from({ length: passes }, (_, p) => {
+          const len = Math.min(TYPING_PASS, total - p * TYPING_PASS);
+          return (
+            <Sequence key={runIdx + "-" + p} from={start + p * TYPING_PASS} durationInFrames={len}>
+              <Audio
+                src={staticFile(TYPING_FILE)}
+                startFrom={TYPING_SKIP}
+                volume={(f) =>
+                  volume *
+                  interpolate(f, [0, TYPING_FADE, len - TYPING_FADE, len], [0, 1, 1, 0], {
+                    extrapolateLeft: "clamp",
+                    extrapolateRight: "clamp",
+                  })
+                }
+              />
+            </Sequence>
+          );
+        });
+      })}
+    </>
+  );
+};
 
 export const Click: React.FC<{ at: number; volume?: number }> = ({
   at,
@@ -79,13 +106,33 @@ export const Bell: React.FC<{ at: number; volume?: number }> = ({
   </Sequence>
 );
 
-/** Enter key. Deeper and heavier than a letter key, for the end of a typed command. */
-export const EnterKey: React.FC<{ at: number; volume?: number }> = ({
+/** Rounder, quieter click than `Click`, for a cursor move that should not draw attention. */
+export const SoftClick: React.FC<{ at: number; volume?: number }> = ({
   at,
-  volume = 0.2,
+  volume = 0.35,
 }) => (
   <Sequence from={at} durationInFrames={8}>
-    <Audio src={staticFile("sfx/key_enter.wav")} volume={volume} />
+    <Audio src={staticFile("sfx/click_soft.wav")} volume={volume} />
+  </Sequence>
+);
+
+/** Warm mallet accent. A reveal that wants a note rather than a click. */
+export const Bong: React.FC<{ at: number; volume?: number }> = ({
+  at,
+  volume = 0.3,
+}) => (
+  <Sequence from={at} durationInFrames={12}>
+    <Audio src={staticFile("sfx/bong.wav")} volume={volume} />
+  </Sequence>
+);
+
+/** Low soft thud, for a card, panel, or stat landing in place. */
+export const Drop: React.FC<{ at: number; volume?: number }> = ({
+  at,
+  volume = 0.3,
+}) => (
+  <Sequence from={at} durationInFrames={12}>
+    <Audio src={staticFile("sfx/drop.wav")} volume={volume} />
   </Sequence>
 );
 

package/templates/default/openvidstudio-core/src/shots.ts

@@ -0,0 +1,114 @@
+// Shot vocabulary: the handful of camera moves a director actually asks for, as named presets.
+// A preset is plain data (zoom, where the camera starts and ends, tilt, easing, length, blur),
+// resolved by a pure function, so `<DirectedShot shot="whip" />` and a unit-style readout see
+// exactly the same numbers. Anything passed explicitly to DirectedShot wins over the preset.
+
+import { E } from "./motion";
+
+export type ShotName = "pushIn" | "pullOut" | "pan" | "whip" | "orbit" | "dutch" | "hold" | "drift";
+
+export const SHOT_NAMES: readonly ShotName[] = ["pushIn", "pullOut", "pan", "whip", "orbit", "dutch", "hold", "drift"];
+
+export interface ShotOptions {
+  /** The point of interest, in capture pixels. Defaults to the middle of the capture. */
+  focus?: { x: number; y: number };
+  /** Overrides the preset's zoom, relative to fitting the whole capture (1 = the whole capture). */
+  push?: number;
+  /** The capture's natural size in pixels. Default 1920x1080. */
+  captureWidth?: number;
+  captureHeight?: number;
+}
+
+export interface ResolvedShot {
+  /** Zoom at the start of the move, relative to fitting the whole capture. */
+  startScale: number;
+  /** Zoom at the end of the move, same units. */
+  endScale: number;
+  /** Where the camera is centred at the start, in capture pixels. DirectedShot clamps it inside the capture. */
+  startFocus: { x: number; y: number };
+  /** Where the camera is centred at the end, in capture pixels. */
+  endFocus: { x: number; y: number };
+  /** Rotation in degrees at the start of the move. */
+  startTilt: { x: number; y: number; z: number };
+  /** Rotation in degrees at the end of the move. */
+  tilt: { x: number; y: number; z: number };
+  easing: (t: number) => number;
+  /** How many frames the move runs when the caller does not say. */
+  moveFrames: number;
+  /** Whether the move should carry motion blur. Only the whip does. */
+  blur: boolean;
+}
+
+const level = { x: 0, y: 0, z: 0 };
+
+/**
+ * The numbers behind a shot name.
+ *
+ * Tilted shots (orbit, dutch, drift) start already zoomed or ramp their tilt from level, because a
+ * rotated plane shrinks the area it covers: rotateZ(3.5deg) on a full-frame capture shows empty
+ * stage in the corners unless the zoom is about 1.1 or more by then.
+ */
+export const resolveShot = (name: ShotName, options: ShotOptions = {}): ResolvedShot => {
+  const W = options.captureWidth ?? 1920;
+  const H = options.captureHeight ?? 1080;
+  const centre = { x: W / 2, y: H / 2 };
+  const focus = options.focus ?? centre;
+  const push = options.push;
+
+  switch (name) {
+    case "pushIn":
+      return {
+        startScale: 1, endScale: push ?? 1.4, startFocus: centre, endFocus: focus,
+        startTilt: level, tilt: level, easing: E.cinematic, moveFrames: 90, blur: false,
+      };
+    case "pullOut":
+      // Starts close on the point of interest and backs out to the whole capture.
+      return {
+        startScale: push ?? 1.5, endScale: 1, startFocus: focus, endFocus: centre,
+        startTilt: level, tilt: level, easing: E.cinematic, moveFrames: 90, blur: false,
+      };
+    case "pan": {
+      // Same zoom throughout; the camera slides sideways onto the focus.
+      const scale = push ?? 1.35;
+      return {
+        startScale: scale, endScale: scale, startFocus: { x: focus.x - W * 0.22, y: focus.y }, endFocus: focus,
+        startTilt: { x: 0, y: 2, z: 0 }, tilt: { x: 0, y: -2, z: 0 }, easing: E.cinematic, moveFrames: 75, blur: false,
+      };
+    }
+    case "whip": {
+      // A fast slide from well off to one side. Short, hard easing, with motion blur.
+      const scale = push ?? 1.5;
+      return {
+        startScale: scale, endScale: scale, startFocus: { x: focus.x - W * 0.5, y: focus.y }, endFocus: focus,
+        startTilt: level, tilt: level, easing: E.whip, moveFrames: 18, blur: true,
+      };
+    }
+    case "orbit":
+      // The camera swings around the focus: rotY crosses from one sign to the other.
+      return {
+        startScale: 1.15, endScale: push ?? 1.35, startFocus: centre, endFocus: focus,
+        startTilt: { x: 2, y: -5, z: 0 }, tilt: { x: 2, y: 5, z: 0 }, easing: E.cinematic, moveFrames: 120, blur: false,
+      };
+    case "dutch":
+      // A pushIn that rolls the horizon off level.
+      return {
+        startScale: 1, endScale: push ?? 1.35, startFocus: centre, endFocus: focus,
+        startTilt: level, tilt: { x: 0, y: 0, z: 3.5 }, easing: E.cinematic, moveFrames: 90, blur: false,
+      };
+    case "hold":
+      // The whole capture, with a 2% creep so the frame is never dead. For shots where the action is
+      // inside the frame: a cursor, typing, a counter.
+      return {
+        startScale: 1, endScale: push ?? 1.02, startFocus: centre, endFocus: centre,
+        startTilt: level, tilt: level, easing: E.drift, moveFrames: 60, blur: false,
+      };
+    case "drift":
+      // Ambient: a long, small move toward the focus with a sub-degree wander in the tilt.
+      return {
+        startScale: 1, endScale: push ?? 1.06,
+        startFocus: centre, endFocus: { x: centre.x + (focus.x - centre.x) * 0.25, y: centre.y + (focus.y - centre.y) * 0.25 },
+        startTilt: { x: -0.5, y: 0.7, z: -0.2 }, tilt: { x: 0.5, y: -0.7, z: 0.2 },
+        easing: E.drift, moveFrames: 150, blur: false,
+      };
+  }
+};

package/templates/default/openvidstudio-core/src/tokens.ts

@@ -1,4 +1,15 @@
 // Design tokens: single source for every scene. Per-video themes may override via themes/.
+//
+// These are mutable on purpose. extract_brand reads the target repo's own palette,
+// fonts and logo, writes src/brand.ts, and that module calls applyBrand() to overwrite
+// what is here. A video then looks like the product it is filming rather than like
+// openvidstudio, which is the difference between a demo that reads as the team's own
+// and one that reads as a template.
+//
+// Because these objects are mutated rather than replaced, anything that copies a value
+// out at module scope (const MONO = font.mono) captures the default and never sees the
+// brand. Read tokens inside the component instead. src/brand.ts is imported first in
+// Root.tsx so the override lands before any scene module evaluates.
 
 export const color = {
   // dark stage
@@ -18,12 +29,50 @@ export const color = {
   lightBg: "#F4F6F9",
   lightCard: "#FFFFFF",
   lightShadow: "rgba(15,23,42,0.12)",
-} as const;
+};
 
 export const font = {
   ui: "Inter",
   mono: "JetBrains Mono",
-} as const;
+};
+
+/**
+ * Font stacks, read at call time.
+ *
+ * These exist because the obvious thing (const MONO = `"${font.mono}", monospace`) runs
+ * at module scope, which is before src/brand.ts has applied anything, so a scene written
+ * that way silently keeps the openvidstudio defaults no matter what extract_brand found.
+ * Calling these inside the component reads the current value instead.
+ */
+export const monoStack = (): string => `"${font.mono}", ui-monospace, monospace`;
+export const uiStack = (): string => `"${font.ui}", system-ui, sans-serif`;
+
+/** The repo's own identity, as far as extract_brand could determine it. */
+export interface Brand {
+  color?: Partial<typeof color>;
+  font?: Partial<typeof font>;
+  /** staticFile path to a wordmark or logo the target repo already ships. */
+  logo?: string;
+  /** Where the values came from, so a wrong colour is traceable. */
+  source?: string;
+}
+
+export const brandAssets: { logo?: string; source?: string } = {};
+
+/**
+ * Overwrite the default tokens with a repo's own brand. Called by the generated
+ * src/brand.ts, which Root.tsx imports before anything else so the values are in place
+ * before scenes evaluate.
+ *
+ * Mutates rather than reassigns, because every scene imports these bindings directly and
+ * a reassignment would leave them pointing at the old object.
+ */
+export function applyBrand(brand: Brand): void {
+  if (brand.color) Object.assign(color, brand.color);
+  if (brand.font) Object.assign(font, brand.font);
+  if (brand.logo) brandAssets.logo = brand.logo;
+  if (brand.source) brandAssets.source = brand.source;
+}
 
 export const glow = (c: string, strength = 1) => ({
   textShadow: `0 0 ${8 * strength}px ${c}88, 0 0 ${24 * strength}px ${c}44`,

package/templates/default/openvidstudio-stem/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@openvidstudio/stem",
+  "version": "1.4.0",
+  "description": "Supernova mode: the Void + Spark design system and the STEM lesson primitives for openvidstudio.",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "type": "commonjs",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "public"
+  ],
+  "peerDependencies": {
+    "@openvidstudio/core": "^1.4.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "remotion": "4.0.536"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AnayDhawan/openvidstudio.git",
+    "directory": "packages/stem"
+  },
+  "homepage": "https://github.com/AnayDhawan/openvidstudio#readme",
+  "bugs": {
+    "url": "https://github.com/AnayDhawan/openvidstudio/issues"
+  },
+  "keywords": [
+    "remotion",
+    "video",
+    "stem",
+    "education",
+    "mcp"
+  ]
+}