@openvidstudio/mcp-server 0.1.0 → 1.3.1

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

@@ -0,0 +1,294 @@
+// DirectedShot (C4): a nested camera rig that turns a flat capture into a directed move.
+// A screenshot or recording on its own is a rectangle. This pushes into the part that matters,
+// tilts the plane slightly so the move reads as depth, optionally softens everything away from
+// the focal point (off by default: blur smears the text a product video is selling), and lets
+// the cursor act inside the capture, all in the capture's own pixel space.
+//
+//   <DirectedShot
+//     src={staticFile("images/dashboard.png")}
+//     focus={{ x: 1180, y: 410 }}           // capture pixels
+//     push={1.5}                            // end zoom, relative to fitting the whole capture
+//     tilt={{ y: -5, x: 3 }}                // degrees at the end of the move
+//     move={{ from: 6, to: 84 }}            // frames the move runs over
+//     cursor={{ path: [...], clicks: [60] }}
+//   />
+//
+// It owns its own CameraRig, so it nests inside a CinematicScene (or anywhere else) without
+// touching that scene's camera.
+
+import React from "react";
+import { Img, useCurrentFrame, useVideoConfig } from "remotion";
+import { CameraRig, projectToScreen, resolveCamera } from "./camera";
+import type { CamKeyframe } from "./camera";
+import { CursorActor } from "./CursorActor";
+import type { CursorKeyframe } from "./CursorActor";
+import { E, tween } from "./motion";
+import {
+  DEFAULT_SHAKE_AMPLITUDE,
+  HANDHELD_ROLL_PER_PX,
+  SHAKE_ROLL_PER_PX,
+  useHandheld,
+  useImpactShake,
+} from "./handheld";
+import { resolveShot } from "./shots";
+import { MotionBlur } from "./motionBlur";
+import type { MotionBlurOptions } from "./motionBlur";
+import type { ShotName } from "./shots";
+
+/** A rectangle in capture pixels. */
+export interface CaptureRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface DirectedShotProps {
+  /** Image URL of the capture, usually staticFile("images/<beat>.png"). Use children for anything else. */
+  src?: string;
+  /** Anything laid out at captureWidth x captureHeight, used when `src` is not given. */
+  children?: React.ReactNode;
+  /** Natural size of the capture in pixels. Defaults to 1920x1080. */
+  captureWidth?: number;
+  captureHeight?: number;
+  /** The point in the capture, in capture pixels, that the move pushes into. Defaults to the middle. */
+  focus?: { x: number; y: number };
+  /** End zoom relative to fitting the whole capture in the box. 1 holds the full frame. Default 1.4. */
+  push?: number;
+  /**
+   * A named camera move (see shots.ts): pushIn, pullOut, pan, whip, orbit, dutch, hold, drift. It
+   * supplies the zoom, start and end position, tilt, easing and length. `push`, `tilt` and `move`
+   * given explicitly override the preset.
+   */
+  shot?: ShotName;
+  /** Rotation at the end of the move, in degrees. Small values (2 to 6) read as depth, larger ones as a gimmick. */
+  tilt?: { x?: number; y?: number; z?: number };
+  /** The frames, local to the scene, the move runs over. Default 0 to 90. */
+  move?: { from?: number; to?: number; easing?: (t: number) => number };
+  /**
+   * Blur in px applied away from the focal point. Default 0 (off): blur smears product text, so it
+   * is something to ask for, not something every shot pays for. Never put it on a shot whose text
+   * has to be read, or list those regions in `protect`.
+   */
+  depthOfField?: number;
+  /** Regions of the capture, in capture pixels, that stay sharp under `depthOfField`. Hard edged. */
+  protect?: CaptureRect[];
+  /** Rack focus: the sharp region slides from `focus` to this point, in capture pixels, across the move. */
+  rackTo?: { x: number; y: number };
+  /**
+   * Motion blur while the camera moves (and only then). `true` is a 180 degree shutter with 8
+   * samples; pass { shutterAngle, samples } to tune it. Default: on for the whip shot, off otherwise.
+   * Costs `samples` times the render work for the frames of the move.
+   */
+  blur?: boolean | MotionBlurOptions;
+  /** Handheld sway: the largest drift in px at 1080p. Default 0 (a locked-off camera). 3 to 8 reads as a person holding it. */
+  handheld?: number;
+  /** Local frames of impacts (a click, a slam, a beat): the shot jolts on each and settles within about 24 frames. */
+  shake?: number[];
+  /** Cursor path and click frames, in capture pixels. */
+  cursor?: { path: CursorKeyframe[]; clicks?: number[] };
+  /** The box the shot fills. Defaults to the composition frame. */
+  width?: number;
+  height?: number;
+  style?: React.CSSProperties;
+}
+
+// Keep the camera inside the capture: past an edge the viewer sees empty stage, which reads as
+// a mistake. When the capture is smaller than the window at this zoom there is no edge to hit,
+// so the camera simply centres.
+const clampCenter = (value: number, viewport: number, scale: number, size: number): number => {
+  const half = viewport / 2 / scale;
+  if (size <= half * 2) return size / 2;
+  return Math.min(Math.max(value, half), size - half);
+};
+
+export interface DirectedKeyframeOptions {
+  /** The box the shot fills, in px. */
+  W: number;
+  H: number;
+  captureWidth: number;
+  captureHeight: number;
+  focus?: { x: number; y: number };
+  push?: number;
+  tilt?: { x?: number; y?: number; z?: number };
+  move?: { from?: number; to?: number; easing?: (t: number) => number };
+  shot?: ShotName;
+}
+
+/**
+ * The two camera keyframes a DirectedShot renders with. Pure, so a readout or a test can ask where
+ * the camera is at any frame (with resolveCamera) without mounting the component. A shot name
+ * supplies the defaults; every explicit option wins over it.
+ */
+export const directedKeyframes = (o: DirectedKeyframeOptions): CamKeyframe[] => {
+  const { W, H, captureWidth, captureHeight } = o;
+  const centre = { x: captureWidth / 2, y: captureHeight / 2 };
+  const focus = o.focus ?? centre;
+  const plan = o.shot ? resolveShot(o.shot, { focus, push: o.push, captureWidth, captureHeight }) : null;
+
+  const fit = Math.min(W / captureWidth, H / captureHeight);
+  const startScale = fit * (plan ? plan.startScale : 1);
+  const endScale = fit * (plan ? plan.endScale : (o.push ?? 1.4));
+  const from = o.move?.from ?? 0;
+  const to = Math.max(from + 1, o.move?.to ?? (plan ? from + plan.moveFrames : 90));
+  const startAt = plan ? plan.startFocus : centre;
+  const endAt = plan ? plan.endFocus : focus;
+
+  return [
+    {
+      frame: from,
+      x: clampCenter(startAt.x, W, startScale, captureWidth),
+      y: clampCenter(startAt.y, H, startScale, captureHeight),
+      scale: startScale,
+      rotX: plan?.startTilt.x ?? 0,
+      rotY: plan?.startTilt.y ?? 0,
+      rotZ: plan?.startTilt.z ?? 0,
+    },
+    {
+      frame: to,
+      x: clampCenter(endAt.x, W, endScale, captureWidth),
+      y: clampCenter(endAt.y, H, endScale, captureHeight),
+      scale: endScale,
+      rotX: o.tilt?.x ?? plan?.tilt.x ?? 0,
+      rotY: o.tilt?.y ?? plan?.tilt.y ?? 0,
+      rotZ: o.tilt?.z ?? plan?.tilt.z ?? 0,
+      easing: o.move?.easing ?? plan?.easing,
+    },
+  ];
+};
+
+export const DirectedShot: React.FC<DirectedShotProps> = ({
+  src,
+  children,
+  captureWidth = 1920,
+  captureHeight = 1080,
+  focus: focusProp,
+  push,
+  tilt,
+  move,
+  shot,
+  depthOfField = 0,
+  protect,
+  rackTo,
+  blur,
+  handheld = 0,
+  shake,
+  cursor,
+  width,
+  height,
+  style,
+}) => {
+  const frame = useCurrentFrame();
+  const video = useVideoConfig();
+  const W = width ?? video.width;
+  const H = height ?? video.height;
+
+  // Sway and shake move the whole shot (picture, blur layer and cursor together) like a camera body.
+  // The hooks run every frame so the call order never changes; they return zeros when unused.
+  const sway = useHandheld(handheld);
+  const hit = useImpactShake(shake ?? []);
+  const shaken = handheld > 0 || (shake?.length ?? 0) > 0;
+  const shift = { x: sway.x + hit.x, y: sway.y + hit.y, rot: sway.rot + hit.rot };
+  // Scale up just enough that the largest possible shift never shows the edge of the box.
+  const k = H / 1080;
+  const reach =
+    handheld * k * (1 + (HANDHELD_ROLL_PER_PX * Math.max(W, H)) / 2 / 57.3) +
+    ((shake?.length ?? 0) > 0 ? DEFAULT_SHAKE_AMPLITUDE * k * (1 + (SHAKE_ROLL_PER_PX * Math.max(W, H)) / 2 / 57.3) : 0);
+  const overscan = 1 + (2 * reach) / Math.min(W, H);
+  const focus = focusProp ?? { x: captureWidth / 2, y: captureHeight / 2 };
+
+  const keyframes = directedKeyframes({ W, H, captureWidth, captureHeight, focus, push, tilt, move, shot });
+  const from = keyframes[0].frame;
+  const to = keyframes[1].frame;
+
+  // The sharp region starts on `focus` and, with rackTo, slides to it across the move.
+  const cam = resolveCamera(keyframes, frame);
+  const rack = rackTo ? tween(frame, [from, to], [0, 1], keyframes[1].easing ?? E.cinematic) : 0;
+  const sharpAt = rackTo
+    ? { x: focus.x + (rackTo.x - focus.x) * rack, y: focus.y + (rackTo.y - focus.y) * rack }
+    : focus;
+  const sharp = projectToScreen(cam, W, H, sharpAt.x, sharpAt.y);
+  const mask = `radial-gradient(ellipse ${Math.round(W * 0.34)}px ${Math.round(H * 0.4)}px at ${Math.round(sharp.x)}px ${Math.round(sharp.y)}px, transparent 0%, transparent 55%, #000 100%)`;
+
+  // Protected regions are holes in the blur layer. Each rect is projected corner by corner so the
+  // hole follows the picture through the move and through a tilt.
+  const holes = (protect ?? []).map((r) => {
+    const corners = [
+      projectToScreen(cam, W, H, r.x, r.y),
+      projectToScreen(cam, W, H, r.x + r.width, r.y),
+      projectToScreen(cam, W, H, r.x + r.width, r.y + r.height),
+      projectToScreen(cam, W, H, r.x, r.y + r.height),
+    ];
+    return `M${corners.map((c) => `${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(" L")} Z`;
+  });
+  const clip = holes.length ? `path(evenodd, "M0 0 H${W} V${H} H0 Z ${holes.join(" ")}")` : undefined;
+
+  const rig = (
+    <CameraRig keyframes={keyframes} stageWidth={captureWidth} stageHeight={captureHeight} viewportWidth={W} viewportHeight={H}>
+      {src ? (
+        <Img src={src} style={{ position: "absolute", left: 0, top: 0, width: captureWidth, height: captureHeight }} />
+      ) : (
+        children
+      )}
+    </CameraRig>
+  );
+  // Motion blur wraps the picture only; the cursor rig below stays out of it so the pointer
+  // keeps a crisp edge through a whip.
+  const blurOptions = blur ?? (shot ? resolveShot(shot).blur : false);
+  const picture = (
+    <>
+      {blurOptions ? (
+        <MotionBlur from={from} to={to} {...(typeof blurOptions === "object" ? blurOptions : {})}>
+          {rig}
+        </MotionBlur>
+      ) : (
+        rig
+      )}
+      {depthOfField > 0 ? (
+        <div
+          data-ovs-dof=""
+          style={{
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+            backdropFilter: `blur(${depthOfField}px)`,
+            WebkitBackdropFilter: `blur(${depthOfField}px)`,
+            maskImage: mask,
+            WebkitMaskImage: mask,
+            clipPath: clip,
+          }}
+        />
+      ) : null}
+      {/* The cursor rides a second rig with the same keyframes, above the blur layer. The camera is
+          a pure function of the frame, so it lands exactly where it would have inside the first rig,
+          and depth of field can never smear the one thing the viewer is following. */}
+      {cursor ? (
+        <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
+          <CameraRig keyframes={keyframes} stageWidth={captureWidth} stageHeight={captureHeight} viewportWidth={W} viewportHeight={H}>
+            <CursorActor path={cursor.path} clicks={cursor.clicks} />
+          </CameraRig>
+        </div>
+      ) : null}
+    </>
+  );
+
+  return (
+    <div data-ovs-directed-shot="" style={{ position: "relative", width: W, height: H, overflow: "hidden", ...style }}>
+      {shaken ? (
+        <div
+          data-ovs-handheld=""
+          style={{
+            position: "absolute",
+            inset: 0,
+            transformOrigin: "50% 50%",
+            transform: `translate(${shift.x}px, ${shift.y}px) rotate(${shift.rot}deg) scale(${overscan})`,
+          }}
+        >
+          {picture}
+        </div>
+      ) : (
+        picture
+      )}
+    </div>
+  );
+};

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

@@ -28,7 +28,8 @@ export const TitleSlam: React.FC<{
   color: textColor = color.textPrimary,
   glowColor,
   align = "center",
-  sfx = true,
+  // Off by default: a blip per word, four frames apart, is a rapid tick under every title.
+  sfx = false,
 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
@@ -73,59 +74,125 @@ export const TitleSlam: React.FC<{
   );
 };
 
-/** Bottom caption bar: single line, word-stagger clip reveal, auto-out. */
+export type CaptionPosition = "bottom" | "top" | "left" | "right" | "auto";
+export type CaptionRect = { x: number; y: number; width: number; height: number };
+
+/** Gap between a caption card and the frame edge, in px. */
+const CAPTION_MARGIN = 84;
+/** The whole word-by-word reveal finishes this many frames after `at`, however many words there are. */
+const CAPTION_SETTLE_FRAMES = 8;
+/** One word's wipe. */
+const CAPTION_WIPE_FRAMES = 5;
+
+/**
+ * Which edge a caption sits on and how wide its card may grow, for a composition of this size.
+ *
+ * "auto" looks at `avoid` (the part of the frame that carries the product, in composition px) and
+ * takes the edge with the most free room beside that rect, so the caption lands where it covers
+ * nothing. A side only counts if the card actually fits there; with no `avoid` it stays at the
+ * bottom. Ties go bottom, top, right, left.
+ */
+export const captionLayout = (
+  position: CaptionPosition,
+  avoid: CaptionRect | undefined,
+  videoWidth: number,
+  videoHeight: number,
+  fontSize: number,
+): { side: "bottom" | "top" | "left" | "right"; maxWidth: number } => {
+  const columnWidth = Math.min(640, 0.34 * videoWidth);
+  let side: "bottom" | "top" | "left" | "right" = position === "auto" ? "bottom" : position;
+  if (position === "auto" && avoid) {
+    const room = {
+      bottom: videoHeight - (avoid.y + avoid.height) - CAPTION_MARGIN,
+      top: avoid.y - CAPTION_MARGIN,
+      right: videoWidth - (avoid.x + avoid.width) - CAPTION_MARGIN,
+      left: avoid.x - CAPTION_MARGIN,
+    };
+    // Two lines of text plus padding, or a full column.
+    const need = { bottom: fontSize * 3.4, top: fontSize * 3.4, right: columnWidth, left: columnWidth };
+    const order = ["bottom", "top", "right", "left"] as const;
+    const fits = order.filter((s) => room[s] >= need[s]);
+    side = (fits.length ? fits : order).reduce((best, s) => (room[s] > room[best] ? s : best));
+  }
+  const sideways = side === "left" || side === "right";
+  return { side, maxWidth: sideways ? columnWidth : Math.min(1400, 0.9 * videoWidth) };
+};
+
+/**
+ * Caption card with a per-word clip reveal and an auto-out. Defaults to the bottom edge; `position`
+ * moves it to another edge and "auto" picks the edge farthest from `avoid` (composition px).
+ * Every word is fully revealed within 8 frames of `at`, whatever the word count, so a caption is
+ * never caught half-typed on a frame someone reviews.
+ */
 export const Caption: React.FC<{
   text: string;
   at: number;
   out?: number;
   fontSize?: number;
-}> = ({ text, at, out, fontSize = 34 }) => {
+  position?: CaptionPosition;
+  avoid?: CaptionRect;
+}> = ({ text, at, out, fontSize = 34, position = "bottom", avoid }) => {
   const frame = useCurrentFrame();
+  const { width: videoWidth, height: videoHeight } = useVideoConfig();
   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;
+  const { side, maxWidth } = captionLayout(position, avoid, videoWidth, videoHeight, fontSize);
+  // Stagger so the last word's wipe ends exactly at the settle frame; a short caption keeps the
+  // 2-frame stagger it always had.
+  const step = words.length > 1 ? Math.min(2, (CAPTION_SETTLE_FRAMES - CAPTION_WIPE_FRAMES) / (words.length - 1)) : 0;
+  const travel = exit * 24;
+  const anchor: React.CSSProperties =
+    side === "bottom"
+      ? { bottom: CAPTION_MARGIN, left: 0, right: 0, justifyContent: "center", transform: `translateY(${travel}px)` }
+      : side === "top"
+        ? { top: CAPTION_MARGIN, left: 0, right: 0, justifyContent: "center", transform: `translateY(${-travel}px)` }
+        : side === "left"
+          ? { top: 0, bottom: 0, left: CAPTION_MARGIN, alignItems: "center", transform: `translateX(${-travel}px)` }
+          : { top: 0, bottom: 0, right: CAPTION_MARGIN, alignItems: "center", justifyContent: "flex-end", transform: `translateX(${travel}px)` };
   return (
     <div
+      data-ovs-caption=""
+      data-ovs-caption-side={side}
       style={{
         position: "absolute",
-        bottom: 84,
-        left: 0,
-        right: 0,
         display: "flex",
-        justifyContent: "center",
-        transform: `translateY(${exit * 24}px)`,
         opacity: 1 - exit,
+        ...anchor,
       }}
     >
       <div
+        data-ovs-caption-card=""
         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)",
+          // Use the same mutable brand tokens as the caption text. A hardcoded dark bar
+          // makes a light brand's dark text unreadable after extract_brand runs.
+          background: color.panel,
           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)",
+          border: `1px solid ${color.panelBorder}`,
+          boxShadow: `0 8px 40px ${color.bg0}80`,
           borderRadius: 14,
           padding: `${fontSize * 0.45}px ${fontSize * 0.9}px`,
           display: "flex",
           gap: fontSize * 0.26,
           flexWrap: "wrap",
-          justifyContent: "center",
-          maxWidth: 1400,
+          justifyContent: side === "left" || side === "right" ? "flex-start" : "center",
+          boxSizing: "border-box",
+          maxWidth,
         }}
       >
         {words.map((w, i) => {
-          const d = at + staggerDelay(i, 2);
-          const wipe = tween(frame, [d, d + 5], [100, 0], E.snap);
+          const d = at + i * step;
+          const wipe = tween(frame, [d, d + CAPTION_WIPE_FRAMES], [100, 0], E.snap);
           return (
             <span
               key={i}
+              data-ovs-caption-word=""
               style={{
                 clipPath: `inset(0 ${wipe}% 0 0)`,
                 display: "inline-block",

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

@@ -0,0 +1,80 @@
+// LayeredShot: a DirectedShot whose picture is a stack of separate layers instead of one flat image.
+// When the capture side can split a page into a background plus the elements that float above it
+// (a header bar, a card, a modal), each element keeps its own depth, so a push and a tilt make
+// them slide against each other the way real objects at different distances do. At rest the stack
+// composites to the same picture as the flat capture, so nothing looks different until it moves.
+//
+//   <LayeredShot
+//     manifest={{ width: 1920, height: 1080, background: staticFile("images/bg.png"),
+//                 layers: [{ src: staticFile("images/card.png"), x: 900, y: 300, width: 400, height: 250, depth: -0.5 }] }}
+//     focus={{ x: 1100, y: 420 }}
+//     shot="pushIn"
+//   />
+
+import React from "react";
+import { Img } from "remotion";
+import { Layer } from "./camera";
+import { DirectedShot } from "./DirectedShot";
+import type { DirectedShotProps } from "./DirectedShot";
+
+/** One element of the capture, placed in capture pixels. depth > 0 is behind the focal plane, < 0 in front. */
+export interface ShotLayer {
+  src: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  depth: number;
+}
+
+/** The shape the capture side writes: the capture's size, the flat background and the layers over it. */
+export interface LayerManifest {
+  width: number;
+  height: number;
+  background: string;
+  layers: ShotLayer[];
+}
+
+export interface LayeredShotProps extends Omit<DirectedShotProps, "src" | "children"> {
+  /** The capture's layers. Alternatively give `background`, `layers` and the capture size separately. */
+  manifest?: LayerManifest;
+  background?: string;
+  layers?: ShotLayer[];
+  /** Depth of the background plane. Default 1: a notch behind the focal plane. */
+  backgroundDepth?: number;
+  /**
+   * Blur per unit of depth, in px. Default 0: the layers are real UI, and blurring text to suggest
+   * distance is how a product video ends up unreadable. Parallax already carries the depth.
+   */
+  maxBlur?: number;
+}
+
+export const LayeredShot: React.FC<LayeredShotProps> = ({
+  manifest,
+  background,
+  layers,
+  backgroundDepth = 1,
+  maxBlur = 0,
+  captureWidth,
+  captureHeight,
+  ...shot
+}) => {
+  const bg = manifest?.background ?? background;
+  const stack = manifest?.layers ?? layers ?? [];
+  const cw = manifest?.width ?? captureWidth ?? 1920;
+  const ch = manifest?.height ?? captureHeight ?? 1080;
+  return (
+    <DirectedShot {...shot} captureWidth={cw} captureHeight={ch}>
+      {bg ? (
+        <Layer depth={backgroundDepth} maxBlur={maxBlur}>
+          <Img src={bg} style={{ position: "absolute", left: 0, top: 0, width: cw, height: ch }} />
+        </Layer>
+      ) : null}
+      {stack.map((l, i) => (
+        <Layer key={i} depth={l.depth} maxBlur={maxBlur}>
+          <Img src={l.src} style={{ position: "absolute", left: l.x, top: l.y, width: l.width, height: l.height }} />
+        </Layer>
+      ))}
+    </DirectedShot>
+  );
+};

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

@@ -3,7 +3,7 @@
 
 import React from "react";
 import { useCurrentFrame, useVideoConfig } from "remotion";
-import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
+import "./localFonts";
 import { CinematicScene } from "./CinematicScene";
 import { TitleSlam, Caption } from "./KineticText";
 import { Layer } from "./camera";
@@ -11,10 +11,7 @@ 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 uiFamily = "Inter, system-ui, sans-serif";
 
 const DIP_AT = 150;
 
@@ -27,7 +24,15 @@ export const RepoCta: React.FC<{
   durationInFrames?: number;
 }> = ({ owner, name, description, chips, titleText, durationInFrames = 270 }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, width, height } = useVideoConfig();
+  // Everything is laid out from the frame centre, so the same card centres in 1920x1080 and in a
+  // 1080x1920 reel. At 1920x1080 these come out to the 560 / 350 / 180 the card has always had.
+  // The card sits 190px above centre in both: in a reel that puts it mid-way through the band
+  // the Instagram UI leaves clear (about 14% down to 78% down), not in the middle of the frame.
+  const cardW = Math.min(800, width - 160);
+  const cardLeft = (width - cardW) / 2;
+  const cardTop = Math.round(height / 2 - 190);
+  const glowSize = 800;
   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);
@@ -35,8 +40,8 @@ export const RepoCta: React.FC<{
   return (
     <CinematicScene
       camera={[
-        { frame: 0, x: 960, y: 540, scale: 1.0 },
-        { frame: durationInFrames, x: 960, y: 530, scale: 1.12, easing: E.drift },
+        { frame: 0, x: width / 2, y: height / 2, scale: 1.0 },
+        { frame: durationInFrames, x: width / 2, y: height / 2 - 10, scale: 1.12, easing: E.drift },
       ]}
       overlay={
         <>
@@ -65,10 +70,10 @@ export const RepoCta: React.FC<{
         <div
           style={{
             position: "absolute",
-            left: 560,
-            top: 180,
-            width: 800,
-            height: 800,
+            left: (width - glowSize) / 2,
+            top: cardTop - 170,
+            width: glowSize,
+            height: glowSize,
             borderRadius: "50%",
             background: `radial-gradient(circle, ${color.accent}2e 0%, transparent 65%)`,
           }}
@@ -77,11 +82,12 @@ export const RepoCta: React.FC<{
 
       <Layer depth={0}>
         <div
+          data-ovs-repo-card=""
           style={{
             position: "absolute",
-            left: 560,
-            top: 350,
-            width: 800,
+            left: cardLeft,
+            top: cardTop,
+            width: cardW,
             transform: `scale(${0.85 + cardIn * 0.15}) translateY(${(1 - cardIn) * 60}px)`,
             opacity: Math.min(1, cardIn * 1.3),
             borderRadius: 18,

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

@@ -4,15 +4,12 @@
 
 import React from "react";
 import { useCurrentFrame, useVideoConfig } from "remotion";
-import { loadFont as loadMono } from "@remotion/google-fonts/JetBrainsMono";
+import "./localFonts";
 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"],
-});
+const monoFamily = "JetBrains Mono, ui-monospace, monospace";
 
 export type TermLine = {
   text: string;