@openvidstudio/core 0.1.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@openvidstudio/core",
+  "version": "0.1.0",
+  "description": "Camera rig, motion, SFX, look pass, and scene components shared by every openvidstudio video project.",
+  "license": "Apache-2.0",
+  "type": "commonjs",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "scripts",
+    "public"
+  ],
+  "dependencies": {
+    "@remotion/google-fonts": "^4.0.490"
+  },
+  "peerDependencies": {
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "remotion": "4.0.490"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.7",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "remotion": "4.0.490",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AnayDhawan/openvidstudio.git",
+    "directory": "packages/core"
+  },
+  "homepage": "https://github.com/AnayDhawan/openvidstudio#readme",
+  "bugs": {
+    "url": "https://github.com/AnayDhawan/openvidstudio/issues"
+  },
+  "keywords": [
+    "remotion",
+    "video",
+    "demo-video",
+    "screencast",
+    "mcp"
+  ]
+}

package/scripts/gen-sfx.sh

@@ -0,0 +1,74 @@
+#!/bin/bash
+# Generate synthesized UI SFX into public/sfx/ (no licensing, fully reproducible).
+# Swap any file for a real recorded pack later, sfx.tsx API stays identical.
+set -e
+cd "$(dirname "$0")/.."
+mkdir -p public/sfx
+
+# Mechanical key thocks: filtered brown-noise bursts, 3 pitch variations
+ffmpeg -v error -y -f lavfi -i "anoisesrc=d=0.06:c=brown:a=0.9" \
+  -af "highpass=f=180,lowpass=f=2400,afade=t=in:d=0.004,afade=t=out:st=0.025:d=0.035,volume=3.2" \
+  public/sfx/key_a.wav
+ffmpeg -v error -y -f lavfi -i "anoisesrc=d=0.055:c=brown:a=0.9:seed=7" \
+  -af "highpass=f=200,lowpass=f=1900,afade=t=in:d=0.004,afade=t=out:st=0.022:d=0.033,volume=3.4" \
+  public/sfx/key_b.wav
+ffmpeg -v error -y -f lavfi -i "anoisesrc=d=0.065:c=brown:a=0.9:seed=23" \
+  -af "highpass=f=160,lowpass=f=2900,afade=t=in:d=0.004,afade=t=out:st=0.028:d=0.037,volume=3.0" \
+  public/sfx/key_c.wav
+
+# Click: sharp short tick
+ffmpeg -v error -y -f lavfi -i "anoisesrc=d=0.03:c=white:a=0.8" \
+  -af "highpass=f=1400,lowpass=f=6500,afade=t=in:d=0.002,afade=t=out:st=0.01:d=0.02,volume=2.2" \
+  public/sfx/click.wav
+
+# Whoosh: bandpassed pink noise swell
+ffmpeg -v error -y -f lavfi -i "anoisesrc=d=0.55:c=pink:a=0.8" \
+  -af "bandpass=f=650:w=500,afade=t=in:d=0.18,afade=t=out:st=0.25:d=0.3,volume=2.6" \
+  public/sfx/whoosh.wav
+
+# Blip: soft sine tick for UI reveals
+ffmpeg -v error -y -f lavfi -i "sine=frequency=740:duration=0.07" \
+  -af "afade=t=in:d=0.008,afade=t=out:st=0.03:d=0.04,volume=0.9" \
+  public/sfx/blip.wav
+
+# Success: rising two-tone
+ffmpeg -v error -y \
+  -f lavfi -i "sine=frequency=660:duration=0.09" \
+  -f lavfi -i "sine=frequency=990:duration=0.14" \
+  -filter_complex "[0]afade=t=out:st=0.05:d=0.04[a];[1]afade=t=in:d=0.01,afade=t=out:st=0.08:d=0.06[b];[a][b]concat=n=2:v=0:a=1,volume=0.9" \
+  public/sfx/success.wav
+
+echo "SFX generated:"
+ls public/sfx/
+
+# Bell: struck metallic tone, harmonic stack with a long decay
+ffmpeg -v error -y \
+  -f lavfi -i "sine=frequency=1568:duration=1.6" \
+  -f lavfi -i "sine=frequency=2350:duration=1.6" \
+  -f lavfi -i "sine=frequency=3136:duration=1.6" \
+  -filter_complex "[0]volume=1.0[a];[1]volume=0.45[b];[2]volume=0.22[c];[a][b][c]amix=inputs=3:normalize=0,afade=t=in:d=0.004,afade=t=out:st=0.12:d=1.45,volume=1.2" \
+  public/sfx/bell.wav
+
+# Enter key: deeper, heavier thock than a letter key
+ffmpeg -v error -y -f lavfi -i "anoisesrc=d=0.085:c=brown:a=0.95:seed=41" \
+  -af "highpass=f=110,lowpass=f=1500,afade=t=in:d=0.004,afade=t=out:st=0.03:d=0.05,volume=3.6" \
+  public/sfx/key_enter.wav
+
+# Music bed: slow ambient pad, two detuned sines under a filtered noise wash.
+# Synthesized rather than licensed, so a generated video carries no third-party
+# audio rights. 60s, loop it for longer videos.
+ffmpeg -v error -y \
+  -f lavfi -i "sine=frequency=110:duration=60" \
+  -f lavfi -i "sine=frequency=164.81:duration=60" \
+  -f lavfi -i "sine=frequency=220.5:duration=60" \
+  -f lavfi -i "anoisesrc=d=60:c=pink:a=0.06" \
+  -filter_complex "\
+    [0]volume=0.34,tremolo=f=0.11:d=0.30[p1];\
+    [1]volume=0.20,tremolo=f=0.13:d=0.26[p2];\
+    [2]volume=0.13,tremolo=f=0.17:d=0.35[p3];\
+    [3]lowpass=f=900,volume=0.5[air];\
+    [p1][p2][p3][air]amix=inputs=4:normalize=0,\
+    lowpass=f=2600,afade=t=in:d=3,afade=t=out:st=56:d=4,volume=0.5" \
+  -c:a libmp3lame -q:a 5 public/sfx/music-bed.mp3
+
+echo "generated: $(ls public/sfx | wc -l) files in public/sfx/"

package/src/ChecklistPanel.tsx

@@ -0,0 +1,97 @@
+// GitHub-style Community Standards checklist panel. Items flip ✗ → ✓ at flipAt frames.
+
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
+import { pop, SPRING } from "./motion";
+import { Blip } from "./sfx";
+import { color, panelShadow, radius } from "./tokens";
+
+const { fontFamily: uiFamily } = loadInter("normal", {
+  weights: ["500", "700"],
+  subsets: ["latin"],
+});
+
+export type ChecklistItem = {
+  label: string;
+  /** absolute scene frame at which this item flips to ✓ (omit = stays ✗) */
+  flipAt?: number;
+};
+
+export const ChecklistPanel: React.FC<{
+  title?: string;
+  items: ChecklistItem[];
+  width?: number;
+  fontSize?: number;
+  sfx?: boolean;
+}> = ({
+  title = "Community Standards",
+  items,
+  width = 760,
+  fontSize = 27,
+  sfx = true,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  return (
+    <div
+      style={{
+        width,
+        borderRadius: radius.window,
+        background: "#10141D",
+        border: `1px solid ${color.panelBorder}`,
+        boxShadow: panelShadow(true),
+        fontFamily: uiFamily,
+        padding: `${fontSize}px ${fontSize * 1.2}px`,
+      }}
+    >
+      <div style={{ fontSize: fontSize * 1.15, fontWeight: 700, color: color.textPrimary, marginBottom: fontSize * 0.8 }}>
+        {title}
+      </div>
+      {items.map((item, i) => {
+        const flipped = item.flipAt !== undefined && frame >= item.flipAt;
+        const s = flipped ? pop(frame, fps, item.flipAt, SPRING.pop) : 1;
+        return (
+          <div
+            key={i}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: fontSize * 0.6,
+              padding: `${fontSize * 0.38}px 0`,
+              fontSize,
+              color: color.textSecondary,
+              borderBottom: i < items.length - 1 ? `1px solid ${color.panelBorder}55` : undefined,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: fontSize * 1.15,
+                height: fontSize * 1.15,
+                borderRadius: "50%",
+                fontWeight: 700,
+                fontSize: fontSize * 0.8,
+                transform: `scale(${0.7 + s * 0.3})`,
+                background: flipped ? `${color.success}22` : `${color.danger}22`,
+                color: flipped ? color.success : color.danger,
+                border: `1.5px solid ${flipped ? color.success : color.danger}`,
+                boxShadow: flipped ? `0 0 18px ${color.success}44` : undefined,
+              }}
+            >
+              {flipped ? "✓" : "✗"}
+            </span>
+            <span style={{ color: flipped ? color.textPrimary : color.textSecondary }}>{item.label}</span>
+          </div>
+        );
+      })}
+      {sfx
+        ? items
+            .filter((i) => i.flipAt !== undefined)
+            .map((i, k) => <Blip key={k} at={i.flipAt as number} volume={0.22} />)
+        : null}
+    </div>
+  );
+};

package/src/CinematicScene.tsx

@@ -0,0 +1,53 @@
+// Mandatory wrapper for every scene (STYLE.md): dark radial stage + camera rig + look pass.
+// Content renders on an oversized stage; camera keyframes drive the shot.
+
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { CameraRig, CamKeyframe } from "./camera";
+import { LookPass } from "./look";
+import { color } from "./tokens";
+
+export const CinematicScene: React.FC<{
+  camera: CamKeyframe[];
+  stageWidth?: number;
+  stageHeight?: number;
+  /** dark (default) or light stage */
+  variant?: "dark" | "light";
+  grain?: number;
+  vignette?: number;
+  /** screen-space layer (captions, title cards, dips/fades), NOT camera-transformed */
+  overlay?: React.ReactNode;
+  children: React.ReactNode;
+}> = ({
+  camera,
+  stageWidth = 1920,
+  stageHeight = 1080,
+  variant = "dark",
+  grain = 0.05,
+  vignette = 0.32,
+  overlay,
+  children,
+}) => {
+  const bg =
+    variant === "dark"
+      ? `radial-gradient(ellipse 90% 80% at 50% 40%, ${color.bg1} 0%, ${color.bg0} 100%)`
+      : color.lightBg;
+  return (
+    <AbsoluteFill style={{ background: bg }}>
+      <CameraRig
+        keyframes={camera}
+        stageWidth={stageWidth}
+        stageHeight={stageHeight}
+      >
+        {children}
+      </CameraRig>
+      {overlay ? (
+        <div style={{ position: "absolute", inset: 0 }}>{overlay}</div>
+      ) : null}
+      <LookPass
+        grain={grain}
+        vignette={variant === "light" ? vignette * 0.5 : vignette}
+      />
+    </AbsoluteFill>
+  );
+};

package/src/CodePanel.tsx

@@ -0,0 +1,122 @@
+// Code panel: manually-tokenized lines (no highlighter dep), optional scroll + row highlight.
+
+import React from "react";
+import { color, glow, panelShadow, radius } from "./tokens";
+
+// System-safe fallbacks, avoid @remotion/google-fonts' network fetch (hangs render offline).
+const monoFamily = "JetBrains Mono, Consolas, Menlo, monospace";
+const uiFamily = "Inter, -apple-system, Segoe UI, Roboto, sans-serif";
+
+export type Token = { t: string; c?: "kw" | "str" | "fn" | "cm" | "num" | "plain" };
+export type CodeLine = Token[];
+
+const TOKEN_COLORS: Record<NonNullable<Token["c"]>, string> = {
+  kw: "#C792EA",
+  str: "#8BD49C",
+  fn: "#82AAFF",
+  cm: "#5B6572",
+  num: "#F78C6C",
+  plain: "#D6DEEB",
+};
+
+export const CodePanel: React.FC<{
+  title: string;
+  lines: CodeLine[];
+  width?: number;
+  height?: number;
+  fontSize?: number;
+  /** px translateY applied to code body (drive with a tween for scrolling) */
+  scroll?: number;
+  /** 0-based line indexes to highlight with an accent row + glow */
+  highlight?: number[];
+}> = ({
+  title,
+  lines,
+  width = 860,
+  height = 640,
+  fontSize = 22,
+  scroll = 0,
+  highlight = [],
+}) => {
+  return (
+    <div
+      style={{
+        width,
+        height,
+        borderRadius: radius.window,
+        background: "#10141D",
+        border: `1px solid ${color.panelBorder}`,
+        boxShadow: panelShadow(true),
+        overflow: "hidden",
+      }}
+    >
+      <div
+        style={{
+          height: 48,
+          display: "flex",
+          alignItems: "center",
+          padding: "0 18px",
+          gap: 10,
+          background: "#151A24",
+          borderBottom: `1px solid ${color.panelBorder}`,
+          fontFamily: uiFamily,
+          fontSize: 16,
+          color: color.textSecondary,
+        }}
+      >
+        <div style={{ display: "flex", gap: 8 }}>
+          {["#FF5F57", "#FEBC2E", "#28C840"].map((c) => (
+            <div key={c} style={{ width: 12, height: 12, borderRadius: 6, background: c }} />
+          ))}
+        </div>
+        <span style={{ marginLeft: 8 }}>{title}</span>
+      </div>
+      <div style={{ height: height - 48, overflow: "hidden" }}>
+      <div style={{ padding: `${fontSize * 0.7}px 0`, transform: `translateY(${-scroll}px)` }}>
+        {lines.map((line, i) => {
+          const hl = highlight.includes(i);
+          return (
+            <div
+              key={i}
+              style={{
+                display: "flex",
+                fontFamily: monoFamily,
+                fontSize,
+                lineHeight: 1.65,
+                background: hl ? `${color.accent}1A` : undefined,
+                borderLeft: hl ? `3px solid ${color.accent}` : "3px solid transparent",
+              }}
+            >
+              <span
+                style={{
+                  width: fontSize * 2.4,
+                  textAlign: "right",
+                  paddingRight: fontSize * 0.8,
+                  color: "#3A4252",
+                  userSelect: "none",
+                  flexShrink: 0,
+                }}
+              >
+                {i + 1}
+              </span>
+              <span style={{ whiteSpace: "pre" }}>
+                {line.map((tok, j) => (
+                  <span
+                    key={j}
+                    style={{
+                      color: TOKEN_COLORS[tok.c ?? "plain"],
+                      ...(hl && tok.c === "str" ? glow(color.accent, 0.6) : {}),
+                    }}
+                  >
+                    {tok.t}
+                  </span>
+                ))}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+      </div>
+    </div>
+  );
+};

package/src/CursorActor.tsx

@@ -0,0 +1,90 @@
+// Cursor as an actor (STYLE.md rule 4): oversized macOS cursor gliding between keyframes
+// with cinematic easing, click = press-scale + expanding ring + click SFX.
+
+import React from "react";
+import { useCurrentFrame } from "remotion";
+import { E, tween } from "./motion";
+import { Click } from "./sfx";
+import { color } from "./tokens";
+
+export type CursorKeyframe = { frame: number; x: number; y: number };
+
+export const CursorActor: React.FC<{
+  path: CursorKeyframe[];
+  /** frames at which a click happens (ring + press + sfx) */
+  clicks?: number[];
+  scale?: number;
+  sfx?: boolean;
+}> = ({ path, clicks = [], scale = 1.6, sfx = true }) => {
+  const frame = useCurrentFrame();
+  const sorted = [...path].sort((a, b) => a.frame - b.frame);
+  if (frame < sorted[0].frame) return null;
+
+  let x = sorted[sorted.length - 1].x;
+  let y = sorted[sorted.length - 1].y;
+  for (let i = 1; i < sorted.length; i++) {
+    if (sorted[i].frame >= frame) {
+      const a = sorted[i - 1];
+      const b = sorted[i];
+      x = tween(frame, [a.frame, b.frame], [a.x, b.x], E.cinematic);
+      y = tween(frame, [a.frame, b.frame], [a.y, b.y], E.cinematic);
+      break;
+    }
+  }
+
+  // press scale near a click
+  const press = clicks.reduce((acc, c) => {
+    if (frame >= c && frame <= c + 8) {
+      return Math.min(acc, 1 - 0.18 * Math.sin(((frame - c) / 8) * Math.PI));
+    }
+    return acc;
+  }, 1);
+
+  return (
+    <>
+      {/* click rings */}
+      {clicks.map((c, i) => {
+        if (frame < c || frame > c + 22) return null;
+        const p = tween(frame, [c, c + 22], [0, 1], E.snap);
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: x - 60 * p,
+              top: y - 60 * p,
+              width: 120 * p,
+              height: 120 * p,
+              borderRadius: "50%",
+              border: `3px solid ${color.accent}`,
+              opacity: 1 - p,
+              boxShadow: `0 0 24px ${color.accent}66`,
+            }}
+          />
+        );
+      })}
+      {/* macOS arrow cursor */}
+      <svg
+        width={28 * scale}
+        height={40 * scale}
+        viewBox="0 0 28 40"
+        style={{
+          position: "absolute",
+          left: x,
+          top: y,
+          transform: `scale(${press})`,
+          transformOrigin: "top left",
+          filter: "drop-shadow(0 4px 10px rgba(0,0,0,0.5))",
+        }}
+      >
+        <path
+          d="M2 2 L2 32 L10 25 L15 37 L20 35 L15 23 L26 23 Z"
+          fill="#FFFFFF"
+          stroke="#000000"
+          strokeWidth={2}
+        />
+      </svg>
+      {sfx ? clicks.map((c, i) => <Click key={i} at={c} />) : null}
+    </>
+  );
+};

package/src/DeviceFrame.tsx

@@ -0,0 +1,74 @@
+// Browser window frame (macOS chrome + URL pill) hosting arbitrary DOM content.
+
+import React from "react";
+import { color, panelShadow, radius } from "./tokens";
+
+// System-safe fallback, avoids @remotion/google-fonts' network fetch (hangs render offline).
+const uiFamily = "Inter, -apple-system, Segoe UI, Roboto, sans-serif";
+
+export const BrowserFrame: React.FC<{
+  url: string;
+  width?: number;
+  height?: number;
+  dark?: boolean;
+  children: React.ReactNode;
+}> = ({ url, width = 1360, height = 850, dark = true, children }) => {
+  const chrome = dark ? "#151A24" : "#EDF0F4";
+  const body = dark ? "#0E1219" : "#FFFFFF";
+  const border = dark ? color.panelBorder : "#D8DEE7";
+  const text = dark ? color.textSecondary : "#5B6572";
+  return (
+    <div
+      style={{
+        width,
+        height,
+        borderRadius: radius.window,
+        background: body,
+        border: `1px solid ${border}`,
+        boxShadow: panelShadow(dark),
+        overflow: "hidden",
+        fontFamily: uiFamily,
+      }}
+    >
+      <div
+        style={{
+          height: 56,
+          display: "flex",
+          alignItems: "center",
+          gap: 16,
+          padding: "0 20px",
+          background: chrome,
+          borderBottom: `1px solid ${border}`,
+        }}
+      >
+        <div style={{ display: "flex", gap: 10 }}>
+          {["#FF5F57", "#FEBC2E", "#28C840"].map((c) => (
+            <div key={c} style={{ width: 14, height: 14, borderRadius: 7, background: c }} />
+          ))}
+        </div>
+        <div
+          style={{
+            flex: 1,
+            maxWidth: 640,
+            margin: "0 auto",
+            height: 34,
+            borderRadius: 17,
+            background: dark ? "#0E1219" : "#FFFFFF",
+            border: `1px solid ${border}`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 17,
+            color: text,
+          }}
+        >
+          {url}
+        </div>
+        <div style={{ width: 62 }} />
+      </div>
+      <div style={{ position: "relative", width: "100%", height: height - 56, overflow: "hidden" }}>
+        {children}
+      </div>
+    </div>
+  );
+};