@openvidstudio/mcp-server 0.1.0

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

@@ -0,0 +1,128 @@
+// Shared CTA scene: glass repo card (informational, no star action, reads as
+// self-promo otherwise) → dip to a modest title card.
+
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
+import { CinematicScene } from "./CinematicScene";
+import { TitleSlam, Caption } from "./KineticText";
+import { Layer } from "./camera";
+import { E, pop, tween } from "./motion";
+import { Whoosh } from "./sfx";
+import { color } from "./tokens";
+
+const { fontFamily: uiFamily } = loadInter("normal", {
+  weights: ["500", "700", "900"],
+  subsets: ["latin"],
+});
+
+const DIP_AT = 150;
+
+export const RepoCta: React.FC<{
+  owner: string;
+  name: string;
+  description: string;
+  chips: string[];
+  titleText: string;
+  durationInFrames?: number;
+}> = ({ owner, name, description, chips, titleText, durationInFrames = 270 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const cardIn = pop(frame, fps, 8);
+  const dip = tween(frame, [DIP_AT, DIP_AT + 16], [0, 1], E.cinematic);
+  const endFade = tween(frame, [durationInFrames - 18, durationInFrames], [0, 1], E.cinematic);
+
+  return (
+    <CinematicScene
+      camera={[
+        { frame: 0, x: 960, y: 540, scale: 1.0 },
+        { frame: durationInFrames, x: 960, y: 530, scale: 1.12, easing: E.drift },
+      ]}
+      overlay={
+        <>
+          <div style={{ position: "absolute", inset: 0, background: "#07090E", opacity: dip, pointerEvents: "none" }} />
+          {frame >= DIP_AT + 14 ? (
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 26,
+              }}
+            >
+              <TitleSlam text={titleText} at={DIP_AT + 16} fontSize={76} color={color.textPrimary} glowColor={color.accent} />
+              <Caption text={`github.com/${owner}/${name}`} at={DIP_AT + 38} fontSize={28} />
+            </div>
+          ) : null}
+          <div style={{ position: "absolute", inset: 0, background: "#000", opacity: endFade, pointerEvents: "none" }} />
+        </>
+      }
+    >
+      <Layer depth={0.65} maxBlur={16}>
+        <div
+          style={{
+            position: "absolute",
+            left: 560,
+            top: 180,
+            width: 800,
+            height: 800,
+            borderRadius: "50%",
+            background: `radial-gradient(circle, ${color.accent}2e 0%, transparent 65%)`,
+          }}
+        />
+      </Layer>
+
+      <Layer depth={0}>
+        <div
+          style={{
+            position: "absolute",
+            left: 560,
+            top: 350,
+            width: 800,
+            transform: `scale(${0.85 + cardIn * 0.15}) translateY(${(1 - cardIn) * 60}px)`,
+            opacity: Math.min(1, cardIn * 1.3),
+            borderRadius: 18,
+            background: "rgba(21,26,36,0.5)",
+            backdropFilter: "blur(20px) saturate(1.3)",
+            WebkitBackdropFilter: "blur(20px) saturate(1.3)",
+            border: "1px solid rgba(255,255,255,0.12)",
+            boxShadow: "0 30px 90px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08)",
+            padding: 36,
+            fontFamily: uiFamily,
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
+            <div
+              style={{
+                width: 52,
+                height: 52,
+                borderRadius: 26,
+                background: `linear-gradient(135deg, ${color.accent} 0%, ${color.accentAlt} 100%)`,
+              }}
+            />
+            <div style={{ fontSize: 30, fontWeight: 700, color: color.textPrimary }}>
+              {owner} <span style={{ color: color.textSecondary }}>/</span> {name}
+            </div>
+          </div>
+          <div style={{ marginTop: 20, fontSize: 23, color: color.textSecondary, lineHeight: 1.5 }}>
+            {description}
+          </div>
+          <div style={{ display: "flex", gap: 24, marginTop: 22, fontSize: 19, color: color.textSecondary }}>
+            {chips.map((c, i) => (
+              <span key={i} style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                {i === 0 ? <span style={{ width: 12, height: 12, borderRadius: 6, background: "#3178C6" }} /> : null}
+                {c}
+              </span>
+            ))}
+          </div>
+        </div>
+      </Layer>
+
+      <Whoosh at={0} volume={0.22} />
+      <Whoosh at={DIP_AT} volume={0.3} />
+    </CinematicScene>
+  );
+};

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

@@ -0,0 +1,263 @@
+// TerminalReplay: DOM-rendered terminal with typed commands, staggered output reveals,
+// blinking cursor, and frame-exact typing SFX. Never screen-recorded HTML (STYLE.md).
+// Content must fit the window height (auto-scroll: v2).
+
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont as loadMono } from "@remotion/google-fonts/JetBrainsMono";
+import { E, jitter, tween } from "./motion";
+import { Blip, TypingSfx } from "./sfx";
+import { color, font, glow, panelShadow, radius } from "./tokens";
+
+const { fontFamily: monoFamily } = loadMono("normal", {
+  weights: ["400", "700"],
+  subsets: ["latin"],
+});
+
+export type TermLine = {
+  text: string;
+  color?: string;
+  glow?: boolean;
+  bold?: boolean;
+};
+
+export type TermStep =
+  | { type: "cmd"; text: string }
+  | { type: "out"; lines: TermLine[]; stagger?: number; preDelay?: number }
+  | { type: "pause"; frames: number };
+
+type ResolvedCmd = {
+  type: "cmd";
+  text: string;
+  start: number;
+  charFrames: number[];
+  end: number;
+};
+type ResolvedOut = {
+  type: "out";
+  lines: TermLine[];
+  lineFrames: number[];
+  start: number;
+  end: number;
+};
+type Resolved = ResolvedCmd | ResolvedOut;
+
+export const computeTerminalTimeline = (
+  steps: TermStep[],
+  fps: number,
+  cps = 16,
+) => {
+  const fpc = fps / cps;
+  const items: Resolved[] = [];
+  let t = 0;
+  for (const s of steps) {
+    if (s.type === "pause") {
+      t += s.frames;
+    } else if (s.type === "cmd") {
+      const charFrames = Array.from({ length: s.text.length }, (_, i) =>
+        Math.round(t + i * fpc + jitter(i, 9) * fpc * 0.6),
+      );
+      const end = (charFrames[charFrames.length - 1] ?? t) + Math.round(fps * 0.25);
+      items.push({ type: "cmd", text: s.text, start: t, charFrames, end });
+      t = end;
+    } else {
+      const preDelay = s.preDelay ?? Math.round(fps * 0.3);
+      const stagger = s.stagger ?? 3;
+      const lineFrames = s.lines.map((_, j) => t + preDelay + j * stagger);
+      const end = (lineFrames[lineFrames.length - 1] ?? t) + Math.round(fps * 0.2);
+      items.push({ type: "out", lines: s.lines, lineFrames, start: t, end });
+      t = end;
+    }
+  }
+  return { items, totalFrames: t };
+};
+
+const LineReveal: React.FC<{
+  at: number;
+  children: React.ReactNode;
+}> = ({ at, children }) => {
+  const frame = useCurrentFrame();
+  if (frame < at) return null;
+  const p = tween(frame, [at, at + 7], [0, 1], E.snap);
+  return (
+    <div
+      style={{
+        clipPath: `inset(0 ${(1 - p) * 100}% 0 0)`,
+        transform: `translateY(${(1 - p) * 6}px)`,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const TerminalReplay: React.FC<{
+  steps: TermStep[];
+  title?: string;
+  width?: number;
+  fontSize?: number;
+  cps?: number;
+  /** render SFX for typing/reveals (default true) */
+  sfx?: boolean;
+  /** show a fresh blinking prompt after all output is done (default true) */
+  trailingPrompt?: boolean;
+}> = ({
+  steps,
+  title = "Project",
+  width = 1280,
+  fontSize = 26,
+  cps = 16,
+  sfx = true,
+  trailingPrompt = true,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const { items, totalFrames } = computeTerminalTimeline(steps, fps, cps);
+
+  const lastCmd = [...items].reverse().find((i) => i.type === "cmd") as
+    | ResolvedCmd
+    | undefined;
+  const typingActive =
+    lastCmd && frame >= lastCmd.start && frame <= lastCmd.end;
+  const cursorOn = Math.floor(frame / 8) % 2 === 0 || typingActive;
+  // cursor sits on the command line only while typing (+ a short beat after);
+  // once output streams, it disappears; a fresh prompt appears at the end.
+  const showCmdCursor = lastCmd && frame <= lastCmd.end + 12;
+  const trailingAt = totalFrames + 14;
+
+  return (
+    <div
+      style={{
+        width,
+        borderRadius: radius.window,
+        background: "#10141D",
+        border: `1px solid ${color.panelBorder}`,
+        boxShadow: panelShadow(true),
+        overflow: "hidden",
+        fontFamily: monoFamily,
+      }}
+    >
+      {/* chrome */}
+      <div
+        style={{
+          height: 52,
+          display: "flex",
+          alignItems: "center",
+          padding: "0 20px",
+          background: "#151A24",
+          borderBottom: `1px solid ${color.panelBorder}`,
+        }}
+      >
+        <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,
+            textAlign: "center",
+            color: color.textSecondary,
+            fontSize: fontSize * 0.62,
+            fontFamily: font.ui,
+          }}
+        >
+          {title}
+        </div>
+        <div style={{ width: 62 }} />
+      </div>
+      {/* body */}
+      <div
+        style={{
+          padding: `${fontSize * 1.1}px ${fontSize * 1.3}px`,
+          fontSize,
+          lineHeight: 1.75,
+          color: color.textPrimary,
+        }}
+      >
+        {items.map((item, idx) => {
+          if (frame < item.start) return null;
+          if (item.type === "cmd") {
+            const visible = item.charFrames.filter((f) => f <= frame).length;
+            const isCurrent = item === lastCmd;
+            // slash-command prefix (e.g. "/components") renders accent+bold
+            const prefixMatch = item.text.match(/^\/\S+/);
+            const prefixLen = prefixMatch ? prefixMatch[0].length : 0;
+            return (
+              <div key={idx} style={{ whiteSpace: "pre-wrap" }}>
+                <span style={{ color: color.accent, fontWeight: 700 }}>
+                  {"❯ "}
+                </span>
+                {prefixLen > 0 ? (
+                  <span style={{ color: color.accentAlt, fontWeight: 700 }}>
+                    {item.text.slice(0, Math.min(visible, prefixLen))}
+                  </span>
+                ) : null}
+                <span>{item.text.slice(Math.min(visible, prefixLen), visible)}</span>
+                {isCurrent && showCmdCursor && cursorOn ? (
+                  <span
+                    style={{
+                      display: "inline-block",
+                      width: fontSize * 0.55,
+                      height: fontSize * 1.05,
+                      background: color.textPrimary,
+                      verticalAlign: "text-bottom",
+                      marginLeft: 2,
+                    }}
+                  />
+                ) : null}
+              </div>
+            );
+          }
+          return (
+            <div key={idx}>
+              {item.lines.map((l, j) => (
+                <LineReveal key={j} at={item.lineFrames[j]}>
+                  <span
+                    style={{
+                      whiteSpace: "pre-wrap",
+                      color: l.color ?? color.textSecondary,
+                      fontWeight: l.bold ? 700 : 400,
+                      ...(l.glow ? glow(l.color ?? color.accent) : {}),
+                    }}
+                  >
+                    {l.text}
+                  </span>
+                </LineReveal>
+              ))}
+            </div>
+          );
+        })}
+        {trailingPrompt && frame >= trailingAt ? (
+          <div>
+            <span style={{ color: color.accent, fontWeight: 700 }}>{"❯ "}</span>
+            {cursorOn ? (
+              <span
+                style={{
+                  display: "inline-block",
+                  width: fontSize * 0.55,
+                  height: fontSize * 1.05,
+                  background: color.textPrimary,
+                  verticalAlign: "text-bottom",
+                }}
+              />
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+      {/* SFX */}
+      {sfx
+        ? items.map((item, idx) =>
+            item.type === "cmd" ? (
+              <TypingSfx key={`sfx-${idx}`} charFrames={item.charFrames} />
+            ) : (
+              <Blip key={`sfx-${idx}`} at={item.lineFrames[0]} />
+            ),
+          )
+        : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,141 @@
+// Camera rig: renders children on an oversized "stage" and moves a virtual camera over it.
+// The camera is defined by keyframes (focal point on stage + zoom + tilt). Between keyframes,
+// values interpolate with a cinematic easing per segment. Layers can opt into parallax + DoF blur.
+
+import React, { createContext, useContext } from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { E, tween } from "./motion";
+
+export type CamKeyframe = {
+  frame: number;
+  /** focal point on the stage, in stage px, this point lands at frame center */
+  x: number;
+  y: number;
+  /** zoom: 1 = stage px == output px; 1.6 = 160% close-up */
+  scale: number;
+  rotX?: number;
+  rotY?: number;
+  rotZ?: number;
+  /** easing INTO this keyframe (from the previous one) */
+  easing?: (t: number) => number;
+};
+
+type CamState = Required<Omit<CamKeyframe, "easing" | "frame">>;
+
+const CameraContext = createContext<CamState | null>(null);
+
+const resolve = (kfs: CamKeyframe[], frame: number): CamState => {
+  const sorted = [...kfs].sort((a, b) => a.frame - b.frame);
+  const first = sorted[0];
+  const last = sorted[sorted.length - 1];
+  const base = (k: CamKeyframe): CamState => ({
+    x: k.x,
+    y: k.y,
+    scale: k.scale,
+    rotX: k.rotX ?? 0,
+    rotY: k.rotY ?? 0,
+    rotZ: k.rotZ ?? 0,
+  });
+  if (frame <= first.frame) return base(first);
+  if (frame >= last.frame) return base(last);
+  let a = first;
+  let b = sorted[1];
+  for (let i = 1; i < sorted.length; i++) {
+    if (sorted[i].frame >= frame) {
+      a = sorted[i - 1];
+      b = sorted[i];
+      break;
+    }
+  }
+  const ease = b.easing ?? E.cinematic;
+  const A = base(a);
+  const B = base(b);
+  const lerp = (ka: number, kb: number) =>
+    tween(frame, [a.frame, b.frame], [ka, kb], ease);
+  return {
+    x: lerp(A.x, B.x),
+    y: lerp(A.y, B.y),
+    scale: lerp(A.scale, B.scale),
+    rotX: lerp(A.rotX, B.rotX),
+    rotY: lerp(A.rotY, B.rotY),
+    rotZ: lerp(A.rotZ, B.rotZ),
+  };
+};
+
+export const CameraRig: React.FC<{
+  keyframes: CamKeyframe[];
+  /** stage size in px; content is laid out at this size, camera crops into it */
+  stageWidth?: number;
+  stageHeight?: number;
+  children: React.ReactNode;
+}> = ({ keyframes, stageWidth = 1920, stageHeight = 1080, children }) => {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const cam = resolve(keyframes, frame);
+
+  return (
+    <CameraContext.Provider value={cam}>
+      <div
+        style={{
+          width,
+          height,
+          overflow: "hidden",
+          perspective: 1400,
+          perspectiveOrigin: "50% 50%",
+        }}
+      >
+        <div
+          style={{
+            width: stageWidth,
+            height: stageHeight,
+            transformOrigin: "0 0",
+            transformStyle: "preserve-3d",
+            transform: [
+              `translate(${width / 2}px, ${height / 2}px)`,
+              `rotateX(${cam.rotX}deg)`,
+              `rotateY(${cam.rotY}deg)`,
+              `rotateZ(${cam.rotZ}deg)`,
+              `scale(${cam.scale})`,
+              `translate(${-cam.x}px, ${-cam.y}px)`,
+            ].join(" "),
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </CameraContext.Provider>
+  );
+};
+
+export const useCamera = () => useContext(CameraContext);
+
+/**
+ * Parallax + depth-of-field layer. depth 0 = focal plane (sharp, no parallax).
+ * Positive depth = "behind" (moves less, blurred). Negative = foreground (moves more, blurred).
+ */
+export const Layer: React.FC<{
+  depth?: number;
+  /** max blur in px applied at |depth| = 1 */
+  maxBlur?: number;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}> = ({ depth = 0, maxBlur = 10, style, children }) => {
+  const cam = useCamera();
+  const parallax = 0.06; // fraction of camera offset transferred per unit depth
+  const dx = cam ? (cam.x - 960) * depth * parallax : 0;
+  const dy = cam ? (cam.y - 540) * depth * parallax : 0;
+  const blur = Math.abs(depth) * maxBlur;
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        transform: `translate(${dx}px, ${dy}px)`,
+        filter: blur > 0.2 ? `blur(${blur.toFixed(1)}px)` : undefined,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,60 @@
+// @openvidstudio/core: public API. Everything a video project needs to build
+// scenes in the openvidstudio house style: camera rig, motion helpers, SFX,
+// look pass, design tokens, and the shared scene/UI components.
+
+// Camera + layers
+export { CameraRig, Layer, useCamera } from "./camera";
+export type { CamKeyframe } from "./camera";
+
+// Motion helpers
+export { E, SPRING, tween, pop, jitter, staggerDelay } from "./motion";
+
+// SFX
+export {
+  KeySound,
+  TypingSfx,
+  Click,
+  Whoosh,
+  Blip,
+  SuccessChime,
+  Bell,
+  EnterKey,
+  MusicBed,
+} from "./sfx";
+
+// Look pass
+export { FilmGrain, Vignette, ColorGrade, LookPass } from "./look";
+
+// Design tokens
+export { color, font, glow, panelShadow, radius } from "./tokens";
+
+// Scene wrapper
+export { CinematicScene } from "./CinematicScene";
+
+// Device / UI frames
+export { BrowserFrame } from "./DeviceFrame";
+
+// Kinetic typography
+export { TitleSlam, Caption } from "./KineticText";
+
+// Terminal replay
+export {
+  TerminalReplay,
+  computeTerminalTimeline,
+} from "./TerminalReplay";
+export type { TermLine, TermStep } from "./TerminalReplay";
+
+// Code panel
+export { CodePanel } from "./CodePanel";
+export type { Token, CodeLine } from "./CodePanel";
+
+// Checklist panel
+export { ChecklistPanel } from "./ChecklistPanel";
+export type { ChecklistItem } from "./ChecklistPanel";
+
+// Cursor actor
+export { CursorActor } from "./CursorActor";
+export type { CursorKeyframe } from "./CursorActor";
+
+// Repo CTA scene
+export { RepoCta } from "./RepoCta";

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

@@ -0,0 +1,90 @@
+// Global look pass: film grain (animated), vignette, subtle color grade.
+// Always rendered by CinematicScene on top of scene content. Cheap on purpose:
+// grain = static SVG-turbulence tile jittered per frame; vignette/grade = gradient overlays.
+
+import React from "react";
+import { useCurrentFrame } from "remotion";
+import { jitter } from "./motion";
+
+// 256px noise tile as inline SVG (no binary assets needed)
+const NOISE_TILE =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    `<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'>` +
+      `<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>` +
+      `<feColorMatrix type='saturate' values='0'/></filter>` +
+      `<rect width='256' height='256' filter='url(#n)'/></svg>`,
+  );
+
+export const FilmGrain: React.FC<{ opacity?: number }> = ({
+  opacity = 0.05,
+}) => {
+  const frame = useCurrentFrame();
+  const ox = Math.floor(jitter(frame, 1) * 256);
+  const oy = Math.floor(jitter(frame, 2) * 256);
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        backgroundImage: `url("${NOISE_TILE}")`,
+        backgroundRepeat: "repeat",
+        backgroundPosition: `${ox}px ${oy}px`,
+        opacity,
+        mixBlendMode: "overlay",
+      }}
+    />
+  );
+};
+
+export const Vignette: React.FC<{ strength?: number }> = ({
+  strength = 0.32,
+}) => (
+  <div
+    style={{
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+      background: `radial-gradient(ellipse 75% 65% at 50% 48%, transparent 55%, rgba(0,0,0,${strength}) 100%)`,
+    }}
+  />
+);
+
+/** Subtle grade: cool shadows, slight warm lift top-left (warm/cool contrast per STYLE.md). */
+export const ColorGrade: React.FC<{ warmth?: number }> = ({
+  warmth = 0.06,
+}) => (
+  <>
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        background: `linear-gradient(135deg, rgba(255,170,90,${warmth}) 0%, transparent 45%)`,
+        mixBlendMode: "soft-light",
+      }}
+    />
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        background: `linear-gradient(315deg, rgba(60,110,255,${warmth * 1.2}) 0%, transparent 50%)`,
+        mixBlendMode: "soft-light",
+      }}
+    />
+  </>
+);
+
+export const LookPass: React.FC<{
+  grain?: number;
+  vignette?: number;
+  warmth?: number;
+}> = ({ grain = 0.05, vignette = 0.32, warmth = 0.06 }) => (
+  <>
+    <ColorGrade warmth={warmth} />
+    <FilmGrain opacity={grain} />
+    <Vignette strength={vignette} />
+  </>
+);