@openvidstudio/mcp-server 0.1.0

package/templates/default/openvidstudio-core/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/templates/default/openvidstudio-core/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/templates/default/openvidstudio-core/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/templates/default/openvidstudio-core/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/templates/default/openvidstudio-core/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>
+  );
+};

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

@@ -0,0 +1,142 @@
+// Kinetic typography: word-staggered title slams + caption bars.
+// Mask/clip reveals only, plain opacity fades are banned (STYLE.md).
+
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { pop, SPRING, staggerDelay, tween, E } from "./motion";
+import { Blip } from "./sfx";
+import { color } from "./tokens";
+
+// System-safe fallback stack, not the @remotion/google-fonts network loader: that loader fetches
+// from fonts.gstatic.com at render time, which hangs the whole render (30s timeout, then a fatal
+// crash-loop) with no internet. Same visual family, no network dependency.
+const uiFamily = "Inter, -apple-system, Segoe UI, Roboto, sans-serif";
+
+/** Big title: each word slams in with a spring + clip wipe. */
+export const TitleSlam: React.FC<{
+  text: string;
+  at: number;
+  fontSize?: number;
+  color?: string;
+  glowColor?: string;
+  align?: "center" | "left";
+  sfx?: boolean;
+}> = ({
+  text,
+  at,
+  fontSize = 120,
+  color: textColor = color.textPrimary,
+  glowColor,
+  align = "center",
+  sfx = true,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const words = text.split(" ");
+  if (frame < at) return null;
+  return (
+    <div
+      style={{
+        display: "flex",
+        gap: fontSize * 0.28,
+        justifyContent: align === "center" ? "center" : "flex-start",
+        flexWrap: "wrap",
+        fontFamily: uiFamily,
+        fontWeight: 900,
+        fontSize,
+        letterSpacing: "-0.03em",
+        color: textColor,
+        textShadow: glowColor
+          ? `0 0 24px ${glowColor}66, 0 0 80px ${glowColor}33`
+          : undefined,
+      }}
+    >
+      {words.map((w, i) => {
+        const d = at + staggerDelay(i, 4);
+        const s = pop(frame, fps, d, SPRING.pop);
+        const wipe = tween(frame, [d, d + 6], [100, 0], E.snap);
+        return (
+          <span
+            key={i}
+            style={{
+              display: "inline-block",
+              transform: `scale(${0.7 + s * 0.3}) translateY(${(1 - s) * 40}px)`,
+              clipPath: `inset(0 ${wipe}% 0 0)`,
+            }}
+          >
+            {w}
+          </span>
+        );
+      })}
+      {sfx ? words.map((_, i) => <Blip key={i} at={at + staggerDelay(i, 4)} volume={0.18} />) : null}
+    </div>
+  );
+};
+
+/** Bottom caption bar: single line, word-stagger clip reveal, auto-out. */
+export const Caption: React.FC<{
+  text: string;
+  at: number;
+  out?: number;
+  fontSize?: number;
+}> = ({ text, at, out, fontSize = 34 }) => {
+  const frame = useCurrentFrame();
+  const words = text.split(" ");
+  if (frame < at || (out !== undefined && frame > out + 10)) return null;
+  const exit =
+    out !== undefined ? tween(frame, [out, out + 10], [0, 1], E.snap) : 0;
+  return (
+    <div
+      style={{
+        position: "absolute",
+        bottom: 84,
+        left: 0,
+        right: 0,
+        display: "flex",
+        justifyContent: "center",
+        transform: `translateY(${exit * 24}px)`,
+        opacity: 1 - exit,
+      }}
+    >
+      <div
+        style={{
+          fontFamily: uiFamily,
+          fontWeight: 500,
+          fontSize,
+          color: color.textPrimary,
+          // glassmorphism caption bar, opaque enough to read over white browser-chrome
+          // recordings (was 0.45, washed out against BrowserFrame's white body)
+          background: "rgba(12,15,22,0.82)",
+          backdropFilter: "blur(18px) saturate(1.3)",
+          WebkitBackdropFilter: "blur(18px) saturate(1.3)",
+          border: "1px solid rgba(255,255,255,0.12)",
+          boxShadow: "0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08)",
+          borderRadius: 14,
+          padding: `${fontSize * 0.45}px ${fontSize * 0.9}px`,
+          display: "flex",
+          gap: fontSize * 0.26,
+          flexWrap: "wrap",
+          justifyContent: "center",
+          maxWidth: 1400,
+        }}
+      >
+        {words.map((w, i) => {
+          const d = at + staggerDelay(i, 2);
+          const wipe = tween(frame, [d, d + 5], [100, 0], E.snap);
+          return (
+            <span
+              key={i}
+              style={{
+                clipPath: `inset(0 ${wipe}% 0 0)`,
+                display: "inline-block",
+                textShadow: "0 1px 3px rgba(0,0,0,0.6)",
+              }}
+            >
+              {w}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+};