@openvidstudio/core 0.1.0

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

package/src/motion.ts

@@ -0,0 +1,50 @@
+// Easing + spring presets. Linear easing is banned (STYLE.md). Always pick from here.
+
+import { Easing, interpolate, spring } from "remotion";
+
+export const E = {
+  // default cinematic move: slow-out, soft landing
+  cinematic: Easing.bezier(0.33, 0.0, 0.13, 1.0),
+  // aggressive whip (cuts, fast pans)
+  whip: Easing.bezier(0.8, 0.0, 0.1, 1.0),
+  // gentle drift (ambient motion inside a shot)
+  drift: Easing.bezier(0.4, 0.0, 0.6, 1.0),
+  // snappy UI reaction (button press, blip reveal)
+  snap: Easing.bezier(0.2, 0.9, 0.25, 1.0),
+} as const;
+
+export const SPRING = {
+  soft: { damping: 26, stiffness: 90, mass: 1 },
+  pop: { damping: 14, stiffness: 160, mass: 0.8 },
+  heavy: { damping: 30, stiffness: 60, mass: 1.4 },
+} as const;
+
+/** interpolate with a mandatory named easing and clamped edges. */
+export const tween = (
+  frame: number,
+  range: [number, number],
+  out: [number, number],
+  easing: (t: number) => number = E.cinematic,
+) =>
+  interpolate(frame, range, out, {
+    easing,
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+/** spring entrance helper */
+export const pop = (
+  frame: number,
+  fps: number,
+  delay = 0,
+  config: { damping: number; stiffness: number; mass: number } = SPRING.pop,
+) => spring({ frame: frame - delay, fps, config });
+
+/** deterministic per-frame pseudo-random (for grain jitter etc.) */
+export const jitter = (frame: number, seed = 1) => {
+  const x = Math.sin(frame * 127.1 + seed * 311.7) * 43758.5453;
+  return x - Math.floor(x); // 0..1
+};
+
+/** stagger helper: frame offset for item i */
+export const staggerDelay = (i: number, step = 3) => i * step;

package/src/sfx.tsx

@@ -0,0 +1,106 @@
+// SFX sequencer. All sounds live in public/sfx/ (generated by scripts/gen-sfx.sh).
+// Components emit sounds by rendering these helpers at computed frames, audio stays
+// perfectly in sync with visuals because both derive from the same frame math.
+
+import React from "react";
+import { Audio, Sequence, staticFile } from "remotion";
+import { jitter } from "./motion";
+
+const KEYS = ["key_a.wav", "key_b.wav", "key_c.wav"];
+
+export const KeySound: React.FC<{ at: number; seed?: number; volume?: number }> = ({
+  at,
+  seed = 0,
+  volume = 0.16,
+}) => (
+  <Sequence from={at} durationInFrames={6}>
+    <Audio
+      src={staticFile(`sfx/${KEYS[Math.floor(jitter(at, seed) * KEYS.length)]}`)}
+      volume={volume}
+    />
+  </Sequence>
+);
+
+/** One KeySound per typed character. charFrames = absolute frame each char appears. */
+export const TypingSfx: React.FC<{ charFrames: number[]; volume?: number }> = ({
+  charFrames,
+  volume = 0.16,
+}) => (
+  <>
+    {charFrames.map((f, i) => (
+      <KeySound key={i} at={f} seed={i} volume={volume} />
+    ))}
+  </>
+);
+
+export const Click: React.FC<{ at: number; volume?: number }> = ({
+  at,
+  volume = 0.4,
+}) => (
+  <Sequence from={at} durationInFrames={8}>
+    <Audio src={staticFile("sfx/click.wav")} volume={volume} />
+  </Sequence>
+);
+
+export const Whoosh: React.FC<{ at: number; volume?: number }> = ({
+  at,
+  volume = 0.35,
+}) => (
+  <Sequence from={at} durationInFrames={20}>
+    <Audio src={staticFile("sfx/whoosh.wav")} volume={volume} />
+  </Sequence>
+);
+
+export const Blip: React.FC<{ at: number; volume?: number }> = ({
+  at,
+  volume = 0.3,
+}) => (
+  <Sequence from={at} durationInFrames={8}>
+    <Audio src={staticFile("sfx/blip.wav")} volume={volume} />
+  </Sequence>
+);
+
+export const SuccessChime: React.FC<{ at: number; volume?: number }> = ({
+  at,
+  volume = 0.35,
+}) => (
+  <Sequence from={at} durationInFrames={20}>
+    <Audio src={staticFile("sfx/success.wav")} volume={volume} />
+  </Sequence>
+);
+
+/** Struck bell, for a completion moment that wants more weight than a chime. */
+export const Bell: React.FC<{ at: number; volume?: number }> = ({
+  at,
+  volume = 0.3,
+}) => (
+  <Sequence from={at} durationInFrames={48}>
+    <Audio src={staticFile("sfx/bell.wav")} volume={volume} />
+  </Sequence>
+);
+
+/** Enter key. Deeper and heavier than a letter key, for the end of a typed command. */
+export const EnterKey: React.FC<{ at: number; volume?: number }> = ({
+  at,
+  volume = 0.2,
+}) => (
+  <Sequence from={at} durationInFrames={8}>
+    <Audio src={staticFile("sfx/key_enter.wav")} volume={volume} />
+  </Sequence>
+);
+
+/**
+ * Ambient bed under the whole composition.
+ *
+ * Synthesized by scripts/gen-sfx.sh rather than licensed, so a rendered video
+ * carries no third-party audio rights. The source is 60s; `durationInFrames` loops
+ * it to cover the composition.
+ */
+export const MusicBed: React.FC<{ durationInFrames: number; volume?: number }> = ({
+  durationInFrames,
+  volume = 0.16,
+}) => (
+  <Sequence from={0} durationInFrames={durationInFrames}>
+    <Audio src={staticFile("sfx/music-bed.mp3")} volume={volume} loop />
+  </Sequence>
+);

package/src/tokens.ts

@@ -0,0 +1,41 @@
+// Design tokens: single source for every scene. Per-video themes may override via themes/.
+
+export const color = {
+  // dark stage
+  bg0: "#0B0E14",
+  bg1: "#11151F",
+  panel: "#151A24",
+  panelBorder: "#232B3A",
+  textPrimary: "#E6EAF2",
+  textSecondary: "#8A94A6",
+  // accents
+  accent: "#4E9EFF",
+  accentAlt: "#9D6BFF",
+  success: "#3ECF8E",
+  warn: "#F5A623",
+  danger: "#F26D6D",
+  // light scenes
+  lightBg: "#F4F6F9",
+  lightCard: "#FFFFFF",
+  lightShadow: "rgba(15,23,42,0.12)",
+} as const;
+
+export const font = {
+  ui: "Inter",
+  mono: "JetBrains Mono",
+} as const;
+
+export const glow = (c: string, strength = 1) => ({
+  textShadow: `0 0 ${8 * strength}px ${c}88, 0 0 ${24 * strength}px ${c}44`,
+});
+
+export const panelShadow = (dark = true) =>
+  dark
+    ? "0 24px 80px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.4)"
+    : `0 24px 80px ${color.lightShadow}, 0 4px 16px rgba(15,23,42,0.08)`;
+
+export const radius = {
+  window: 12,
+  card: 10,
+  pill: 999,
+} as const;