@openvidstudio/core 0.1.0

package/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>
+  );
+};

package/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/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/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>
+  );
+};