@viralspin/mcp 0.1.0 → 0.2.0

package/engine/kinetic.mjs

@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+/**
+ * Kinetic text renderer — no A-roll, no B-roll, no transcription.
+ *   node kinetic.mjs --text "..." [--effect typing|billboard_flip|isometric]
+ *                    [--style terminal|cinematic|minimal] [--format 9x16|16x9|1x1]
+ *                    [--font-size <px>] [--duration-sec <n>]
+ *                    [--camera-rx <deg>] [--camera-ry <deg>] [--camera-rz <deg>] [--camera-tz <px>]
+ *                    [--out <path>]
+ * Writes props JSON, calls Remotion render for the KineticText composition, prints RESULT:<path>.
+ */
+import { fileURLToPath } from "node:url";
+import fs from "node:fs";
+import path from "node:path";
+import { spawnSync } from "node:child_process";
+
+const ENGINE = path.dirname(fileURLToPath(import.meta.url));
+const PUBLIC = path.join(ENGINE, "public");
+const OUT_DIR = path.join(ENGINE, "out");
+
+fs.mkdirSync(PUBLIC, { recursive: true });
+fs.mkdirSync(OUT_DIR, { recursive: true });
+
+const argv = process.argv.slice(2);
+const one = (flag, def) => { const i = argv.indexOf(flag); return i >= 0 && argv[i + 1] ? argv[i + 1] : def; };
+
+const text = one("--text", "");
+if (!text) { console.error("ERROR: --text is required"); process.exit(1); }
+
+const effect    = one("--effect",      "typing");
+const style     = one("--style",       "terminal");
+const format    = one("--format",      "9x16");
+const fontSizeArg = one("--font-size", null);
+const durationSecArg = one("--duration-sec", null);
+const cameraRx  = parseFloat(one("--camera-rx", null) ?? "NaN");
+const cameraRy  = parseFloat(one("--camera-ry", null) ?? "NaN");
+const cameraRz  = parseFloat(one("--camera-rz", null) ?? "NaN");
+const cameraTz  = parseFloat(one("--camera-tz", null) ?? "NaN");
+const outArg    = one("--out", null);
+
+const fps = 30;
+
+// Auto-size: ~3 frames per char + 45 frame tail (1.5s hold at end)
+const totalFrames = durationSecArg
+  ? Math.round(parseFloat(durationSecArg) * fps)
+  : Math.max(60, Math.ceil(text.length * 3 + 45));
+
+// Default font size by format
+const defaultFontSize = format === "16x9" ? 96 : 72;
+const fontSize = fontSizeArg ? parseInt(fontSizeArg, 10) : defaultFontSize;
+
+// Per-effect camera defaults
+const CAMERA_DEFAULTS = {
+  typing:         { rotateX: 8,  rotateY: 0,   rotateZ: 0,   translateZ: -120 },
+  billboard_flip: { rotateX: 0,  rotateY: 0,   rotateZ: 0,   translateZ: 0    },
+  isometric:      { rotateX: 55, rotateY: 0,   rotateZ: -45, translateZ: -80  },
+};
+const defaults = CAMERA_DEFAULTS[effect] ?? CAMERA_DEFAULTS.typing;
+
+const camera = {
+  rotateX:   isNaN(cameraRx) ? defaults.rotateX   : cameraRx,
+  rotateY:   isNaN(cameraRy) ? defaults.rotateY   : cameraRy,
+  rotateZ:   isNaN(cameraRz) ? defaults.rotateZ   : cameraRz,
+  translateZ: isNaN(cameraTz) ? defaults.translateZ : cameraTz,
+};
+
+const timestamp = Date.now();
+const out = path.resolve(outArg ?? path.join(OUT_DIR, `kinetic_${timestamp}.mp4`));
+fs.mkdirSync(path.dirname(out), { recursive: true });
+
+const props = { text, effect, style, fontSize, format, fps, totalFrames, camera };
+const propsFile = path.join(PUBLIC, "kineticProps.json");
+fs.writeFileSync(propsFile, JSON.stringify(props, null, 2));
+
+process.stderr.write(`[kinetic] text="${text.slice(0, 60)}" effect=${effect} style=${style} format=${format} frames=${totalFrames}\n`);
+
+const entry = path.join(ENGINE, "src", "index.ts");
+const cmd = `npx remotion render "${entry}" KineticText "${out}" "--props=${propsFile}" "--public-dir=${PUBLIC}"`;
+const r = spawnSync(cmd, { cwd: ENGINE, shell: true, stdio: "inherit" });
+if (r.status !== 0) {
+  console.error(`[kinetic] remotion render failed (exit ${r.status})`);
+  process.exit(1);
+}
+
+console.log("RESULT:" + out);

package/engine/prompts.mjs

@@ -0,0 +1,94 @@
+// "Secret sauce" prompts for the local video-assembly engine.
+//
+// These BUILTIN strings are the editable source of truth surfaced in the admin
+// dashboard LLM Prompt Store under the "LOCAL VIDEO ASSEMBLY" section
+// (keys local_assembly.*). At runtime the MCP tool fetches the active rows from
+// the backend and hands them to the engine in the VIRALSPIN_ASSEMBLY_PROMPTS env
+// var (a JSON map key→value_text). Anything missing, blank, or malformed falls
+// back to the BUILTIN below, so an offline run — or a misnamed/deactivated row —
+// still produces a video.
+//
+// Templated prompts use {{double_brace}} tokens (filled by fill() in the engine)
+// so the literal single-brace JSON in their output spec is never disturbed.
+
+export const BUILTIN = {
+  "local_assembly.transcribe":
+    "Transcribe this short spoken clip accurately (a creator talking to camera). " +
+    'Return ONLY JSON: {"segments":[{"start_ms":int,"end_ms":int,"text":str}]}. ' +
+    "Break into natural phrases. Best-guess unclear words; do not invent content. " +
+    "ALSO include significant NON-SPEECH audio as their own segments, with the sound in parentheses — " +
+    "e.g. (coughing), (laughing), (sighing), (music), (silence). These give the editor context.",
+
+  "local_assembly.frame_analysis":
+    "Framing a vertical 9:16 social video from this (often horizontal) source. Return ONLY JSON: " +
+    '{"subject":"person|product|scenery","rotate":0,"focal_x":0-1,"focal_y":0-1,' +
+    '"secondary_x":0-1|null,"secondary_y":0-1|null,"desc":"<=8 words","keywords":["..."]}. ' +
+    "rotate = CLOCKWISE degrees (0/90/180/270) to make it UPRIGHT (0 if already upright); give focal/secondary " +
+    "in coords AFTER that rotation. focal_x/y = center of the MAIN subject (a person's FACE) to keep in a tall 9:16 " +
+    "crop. secondary_x/y = a second notable element to reveal with a pan (sign/text/landmark/product) or null. " +
+    "keywords = 2-4 concrete nouns/themes.",
+
+  "local_assembly.album_ranking":
+    `A short video's narration says:\n"{{transcript_text}}"\n\nWe have these B-roll ALBUMS (folder name + file count):\n` +
+    `{{albums_json}}\n\nRank how relevant each album is as B-roll for this narration, judging mainly by NAME. ` +
+    'Return ONLY JSON: {"weights":{"<album>":0.1-1.0},"note":"<one sentence>"}. Every album gets a weight.',
+
+  "local_assembly.style_inference":
+    `These are {{frame_count}} sampled frames from a short-form social video (aspect {{format}}, {{duration}}s, ` +
+    `~{{cuts_per_sec}} hard scene-cuts/sec). Infer its EDITING STYLE. Return ONLY JSON: ` +
+    '{"captions":bool,"hook":bool,"pops":bool,"pace":"fast|medium|slow","coverage":0-1,"note":"..."}. ' +
+    "captions=bold spoken-word subtitles burned in? hook=persistent headline/title overlay near top? " +
+    "pops=big animated keyword/number callouts? pace=overall energy. coverage=fraction showing B-roll vs talking head.",
+
+  "local_assembly.timeline_edit":
+    `You are a senior short-form editor cutting a HIGH-ENERGY vertical 9:16 Reel (bold captions, hook, pops, quick cuts).\n` +
+    `The A-roll is a person talking (their voice is the soundtrack). B-roll is a MIX of (a) GENERIC ` +
+    `lifestyle/aspirational footage (beach/travel/product) that does NOT literally depict the topic — ` +
+    `energetic punctuation; and (b) the CREATOR'S OWN PERSONAL photos that may genuinely depict the real ` +
+    `moments she describes (sick, recovering, hospital, pregnancy/childbirth, family). Match by content.\n\n` +
+    `TRANSCRIPT (ms):\n{{transcript_json}}\n\nB-ROLL CANDIDATES:\n{{candidates_json}}\n\n` +
+    `TOTAL: {{total_ms}} ms. USER DIRECTION: {{user_direction}}\n\n` +
+    `Produce THREE things:\n` +
+    `1. "hook": a punchy 4-8 word headline for the first ~3.5s + ONE "keyword" within it to highlight.\n` +
+    `2. "pops": 2-4 big keyword/number callouts that punch in ON the beat said. Each {"from_ms":int,"text":"SHORT UPPERCASE"}.\n` +
+    `3. "cuts": B-roll cutaways. RULES:\n` +
+    `   - PACING: {{pacing}}\n` +
+    `   - STRONGLY prefer video-kind assets; alternate dir 0/1. A cutaway must GENUINELY relate to the beat.\n` +
+    `   - TWO kinds of B-roll, match each candidate's CONTENT (desc/keywords) to the beat:\n` +
+    `       • GENERIC lifestyle/beach/travel/product → ONLY on posting/content/success/going-viral/lifestyle/aspiration lines. NEVER a generic clip on a specific physical-state line (sick, recovering, surgery, giving birth, coughing) — looks broken.\n` +
+    `       • The creator's OWN PERSONAL photos that GENUINELY depict the moment (visibly sick/in bed, hospital, pregnant/newborn, recovering, real family) → DO use these ON the matching personal line (a real sick photo on "you're sick, recovering" is GREAT; a beach photo is not).\n` +
+    `   - KEEP THE SPEAKER (no cutaway) on: non-speech beats like "(coughing)", the final line, abstract lines, and ANY beat where NO candidate (generic OR personal) genuinely fits. Staying on the speaker beats an irrelevant clip; don't force a cutaway to fill time.\n` +
+    `   - The clip opens with a COUGH before she speaks — keep the speaker there.\n` +
+    `   - Each broll_id at most twice; no overlaps; within total duration.\n` +
+    `   Each cut: {"broll_id":str,"from_ms":int,"dur_ms":int,"dir":0,"video":bool}.\n\n` +
+    `Return ONLY JSON: {"hook":{"text":str,"keyword":str},"pops":[...],"cuts":[...]}`,
+};
+
+let _overrides = null;
+/** Parse VIRALSPIN_ASSEMBLY_PROMPTS once. Any failure → empty (use builtins). */
+function overrides() {
+  if (_overrides) return _overrides;
+  _overrides = {};
+  const raw = process.env.VIRALSPIN_ASSEMBLY_PROMPTS;
+  if (raw) {
+    try {
+      const m = JSON.parse(raw);
+      for (const [k, v] of Object.entries(m)) {
+        if (typeof v === "string" && v.trim()) _overrides[k] = v;
+      }
+    } catch { /* malformed override blob → keep builtins */ }
+  }
+  return _overrides;
+}
+
+/** Admin-store override for `key` if present and non-empty, else the builtin. */
+export function prompt(key) {
+  return overrides()[key] ?? BUILTIN[key];
+}
+
+/** Replace {{token}} placeholders. Missing keys are left untouched. */
+export function fill(template, vars) {
+  let out = template;
+  for (const [k, v] of Object.entries(vars)) out = out.split(`{{${k}}}`).join(String(v));
+  return out;
+}

package/engine/remotion.config.ts

@@ -0,0 +1,4 @@
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);

package/engine/src/Assembly.tsx

@@ -0,0 +1,330 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  Img,
+  OffthreadVideo,
+  Sequence,
+  interpolate,
+  spring,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+
+// ── caption style system ──────────────────────────────────────────────
+export type CaptionStyleId = "default" | "hormozi" | "glow_neon" | "minimalist" | "whiteboard";
+
+export const CAPTION_STYLE_LABELS: Record<CaptionStyleId, { label: string; desc: string }> = {
+  default:    { label: "Bold Pop",    desc: "White spring pop-in — clean & universal" },
+  hormozi:    { label: "Hormozi",     desc: "Word-by-word yellow highlight — high-energy talking-head" },
+  glow_neon:  { label: "Glow Neon",  desc: "Neon cyan pulse — dark aesthetic, music, gaming" },
+  minimalist: { label: "Minimalist", desc: "Lowercase fade-in — calm, educational, soft aesthetic" },
+  whiteboard: { label: "Whiteboard", desc: "Left-to-right reveal — explainers, how-to, tutorials" },
+};
+
+// ── editData schema (Remotion inputProps) ─────────────────────────────
+export type Cut = {
+  from: number; dur: number; file: string; video?: boolean; dir: 0 | 1;
+  focal: [number, number];
+  secondary?: [number, number] | null;
+  srcW?: number; srcH?: number;
+};
+export type Caption = { from: number; dur: number; text: string; y?: number };
+export type Pop = { from: number; dur: number; text: string };
+export type Hook = { from: number; dur: number; text: string; keyword: string };
+export type EditData = {
+  format: "9x16" | "1x1" | "16x9";
+  fps: number;
+  totalFrames: number;
+  aroll: string;
+  arollFocal: [number, number];
+  cuts: Cut[];
+  captions?: Caption[];
+  pops?: Pop[];
+  hook?: Hook | null;
+  captionStyle?: CaptionStyleId;
+};
+
+const CAP_FONT = "'Segoe UI', 'Arial Black', Impact, sans-serif";
+const pos = (f: [number, number]) => `${f[0] * 100}% ${f[1] * 100}%`;
+
+function arollSegments(cuts: Cut[], total: number) {
+  const segs: { from: number; to: number }[] = [];
+  let cursor = 0;
+  for (const c of [...cuts].sort((a, b) => a.from - b.from)) {
+    if (c.from > cursor) segs.push({ from: cursor, to: c.from });
+    cursor = Math.max(cursor, c.from + c.dur);
+  }
+  if (cursor < total) segs.push({ from: cursor, to: total });
+  return segs;
+}
+
+const ARoll: React.FC<{ data: EditData }> = ({ data }) => {
+  const frame = useCurrentFrame();
+  const segs = arollSegments(data.cuts, data.totalFrames);
+  const idx = segs.findIndex((s) => frame >= s.from && frame < s.to);
+  const seg = segs[idx] ?? segs[0] ?? { from: 0, to: data.totalFrames };
+  const p = interpolate(frame, [seg.from, seg.to], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const scale = idx % 2 === 0 ? 1.0 + 0.07 * p : 1.07 - 0.07 * p;
+  const volume = (f: number) => {
+    let v = 1;
+    for (const c of data.cuts) {
+      if (!c.video) continue;
+      v = Math.min(v, interpolate(f, [c.from - 8, c.from, c.from + c.dur, c.from + c.dur + 8], [1, 0.85, 0.85, 1],
+        { extrapolateLeft: "clamp", extrapolateRight: "clamp" }));
+    }
+    return v;
+  };
+  const o = pos(data.arollFocal);
+  return (
+    <AbsoluteFill style={{ overflow: "hidden", backgroundColor: "black" }}>
+      <div style={{ width: "100%", height: "100%", transform: `scale(${scale})`, transformOrigin: o }}>
+        <OffthreadVideo src={staticFile(data.aroll)} volume={volume} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: o }} />
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// B-roll: fill the frame (no blur bars), and EXPLICITLY position so the subject's focal point
+// maps to frame-center. Default motion pans so the subject ENDS centered; if there's a secondary
+// point of interest, start centered on the subject then pan toward it. Clamped to image edges.
+const PAN = 0.32;
+const ZOOM = 0.1;
+const clampN = (v: number, a: number, b: number) => Math.max(a, Math.min(b, v));
+
+const BrollLayer: React.FC<{ cut: Cut }> = ({ cut }) => {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const isVideo = !!cut.video;
+  const p = interpolate(frame, [0, cut.dur], [0, 1], { extrapolateRight: "clamp" });
+  const fade = interpolate(frame, [0, isVideo ? 5 : 3], [0, 1], { extrapolateRight: "clamp" });
+  const vol = (lf: number) => interpolate(lf, [0, 8, cut.dur - 8, cut.dur], [0, 0.25, 0.25, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+
+  const srcW = cut.srcW || width, srcH = cut.srcH || height;
+  const cover = Math.max(width / srcW, height / srcH);
+  const k = cover * (cut.dir === 0 ? 1 + ZOOM * p : 1 + ZOOM * (1 - p));
+  const fgW = srcW * k, fgH = srcH * k;
+
+  const [fx, fy] = cut.focal;
+  const sec = cut.secondary;
+  let sx, sy, ex, ey;
+  if (sec) { sx = fx; sy = fy; ex = fx + (sec[0] - fx) * PAN; ey = fy + (sec[1] - fy) * PAN * 0.7; }
+  else { const d = cut.dir === 0 ? 0.1 : -0.1; sx = clampN(fx + d, 0, 1); sy = fy; ex = fx; ey = fy; }
+  const cx = sx + (ex - sx) * p;
+  const cy = sy + (ey - sy) * p;
+
+  const left = clampN(width / 2 - cx * fgW, width - fgW, 0);
+  const top = clampN(height / 2 - cy * fgH, height - fgH, 0);
+  const style: React.CSSProperties = { width: "100%", height: "100%", objectFit: "cover" };
+
+  return (
+    <AbsoluteFill style={{ opacity: fade, backgroundColor: "black", overflow: "hidden" }}>
+      <div style={{ position: "absolute", left, top, width: fgW, height: fgH }}>
+        {isVideo
+          ? <OffthreadVideo src={staticFile(cut.file)} volume={vol} style={style} />
+          : <Img src={staticFile(cut.file)} style={style} />}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ── caption line — 5 switchable styles ───────────────────────────────
+const CaptionLine: React.FC<{ text: string; y: number; dur: number; captionStyle: CaptionStyleId }> = ({
+  text, y, dur, captionStyle,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // ── Hormozi: word-by-word yellow highlight with black pill ──────────
+  if (captionStyle === "hormozi") {
+    const words = text.split(/\s+/);
+    const activeIdx = Math.min(
+      words.length - 1,
+      Math.floor(interpolate(frame, [0, Math.max(1, dur)], [0, words.length], { extrapolateRight: "clamp" }))
+    );
+    const entryScale = 0.88 + 0.12 * spring({ frame, fps, config: { damping: 180, stiffness: 280, mass: 0.3 } });
+    return (
+      <AbsoluteFill>
+        <div style={{
+          position: "absolute", top: `${y * 100}%`, left: "50%",
+          transform: `translate(-50%, -50%) scale(${entryScale})`,
+          display: "flex", flexWrap: "wrap", justifyContent: "center",
+          gap: "6px", maxWidth: "88%",
+        }}>
+          {words.map((w, i) => {
+            const active = i === activeIdx;
+            return (
+              <span key={i} style={{
+                fontFamily: "'Arial Black', Impact, sans-serif",
+                fontWeight: 900,
+                fontSize: active ? 68 : 60,
+                color: active ? "#FFE01B" : "white",
+                textTransform: "uppercase",
+                background: active ? "rgba(0,0,0,0.88)" : "transparent",
+                padding: active ? "2px 10px 4px" : "2px 0",
+                borderRadius: 8,
+                textShadow: active ? "0 2px 0 rgba(0,0,0,0.4)" : "0 2px 10px rgba(0,0,0,.9)",
+                WebkitTextStroke: active ? undefined : "1.5px rgba(0,0,0,.5)",
+                lineHeight: 1.1,
+              }}>{w}</span>
+            );
+          })}
+        </div>
+      </AbsoluteFill>
+    );
+  }
+
+  // ── Glow Neon: pulsing cyan text shadow ─────────────────────────────
+  if (captionStyle === "glow_neon") {
+    const sp = spring({ frame, fps, config: { damping: 160, stiffness: 200, mass: 0.5 } });
+    const entryScale = 0.84 + 0.16 * sp;
+    const glowPulse = 0.7 + 0.3 * Math.sin(frame * 0.25);
+    const g = Math.round(12 + 8 * glowPulse);
+    return (
+      <AbsoluteFill>
+        <div style={{
+          position: "absolute", top: `${y * 100}%`, left: "50%",
+          transform: `translate(-50%, -50%) scale(${entryScale})`,
+          maxWidth: "86%", textAlign: "center",
+          fontFamily: "'Segoe UI', 'Arial Black', sans-serif",
+          fontWeight: 800, fontSize: 58,
+          color: "#00f7ff",
+          textShadow: `0 0 ${g}px #00f7ff, 0 0 ${g * 2}px rgba(0,247,255,0.5), 0 2px 8px rgba(0,0,0,0.9)`,
+          letterSpacing: 1.5, lineHeight: 1.1, textTransform: "uppercase",
+        }}>{text}</div>
+      </AbsoluteFill>
+    );
+  }
+
+  // ── Minimalist: lowercase clean fade ────────────────────────────────
+  if (captionStyle === "minimalist") {
+    const fadeIn  = interpolate(frame, [0, 8], [0, 1], { extrapolateRight: "clamp" });
+    const fadeOut = interpolate(frame, [Math.max(1, dur - 6), dur], [1, 0], { extrapolateLeft: "clamp" });
+    return (
+      <AbsoluteFill>
+        <div style={{
+          position: "absolute", top: `${y * 100}%`, left: "50%",
+          transform: "translate(-50%, -50%)",
+          opacity: Math.min(fadeIn, fadeOut),
+          maxWidth: "80%", textAlign: "center",
+          fontFamily: "'Segoe UI', 'Helvetica Neue', Arial, sans-serif",
+          fontWeight: 300, fontSize: 48,
+          color: "white",
+          textShadow: "0 1px 6px rgba(0,0,0,0.7)",
+          letterSpacing: 0.5, lineHeight: 1.15,
+        }}>{text.toLowerCase()}</div>
+      </AbsoluteFill>
+    );
+  }
+
+  // ── Whiteboard: clip-rect left-to-right reveal ──────────────────────
+  if (captionStyle === "whiteboard") {
+    const sp = spring({ frame, fps, config: { damping: 200, stiffness: 180, mass: 0.5 } });
+    const revealRatio = interpolate(frame, [0, Math.max(1, dur * 0.7)], [0, 1], { extrapolateRight: "clamp" });
+    const clipRight = Math.round((1 - revealRatio) * 100);
+    return (
+      <AbsoluteFill>
+        <div style={{
+          position: "absolute", top: `${y * 100}%`, left: "50%",
+          transform: `translate(-50%, -50%) scale(${0.9 + 0.1 * sp})`,
+          maxWidth: "84%", textAlign: "center",
+          fontFamily: "'Segoe UI', Arial, sans-serif",
+          fontWeight: 700, fontSize: 56,
+          color: "white",
+          textShadow: "0 2px 10px rgba(0,0,0,.85)",
+          clipPath: `inset(0 ${clipRight}% 0 0)`,
+          letterSpacing: 0.5, lineHeight: 1.1,
+        }}>{text}</div>
+      </AbsoluteFill>
+    );
+  }
+
+  // ── default: spring pop-in (bold white) ─────────────────────────────
+  const sp = spring({ frame, fps, config: { damping: 200, stiffness: 220, mass: 0.4 } });
+  const scale = 0.82 + 0.18 * sp;
+  return (
+    <AbsoluteFill>
+      <div style={{
+        position: "absolute", top: `${y * 100}%`, left: "50%",
+        transform: `translate(-50%, -50%) scale(${scale})`,
+        maxWidth: "84%", textAlign: "center",
+        fontFamily: CAP_FONT, fontWeight: 900, fontSize: 60, color: "white", lineHeight: 1.06,
+        textShadow: "0 3px 14px rgba(0,0,0,.9)", WebkitTextStroke: "2px rgba(0,0,0,.6)", letterSpacing: 0.3,
+      }}>{text}</div>
+    </AbsoluteFill>
+  );
+};
+
+// ── hook headline (top), with one keyword in a coral highlight box ────
+const HookOverlay: React.FC<{ hook: Hook }> = ({ hook }) => {
+  const frame = useCurrentFrame();
+  const fade = Math.min(
+    interpolate(frame, [0, 8], [0, 1], { extrapolateRight: "clamp" }),
+    interpolate(frame, [hook.dur - 12, hook.dur], [1, 0], { extrapolateLeft: "clamp" })
+  );
+  const kw = hook.keyword?.trim();
+  const i = kw ? hook.text.toLowerCase().indexOf(kw.toLowerCase()) : -1;
+  const before = i >= 0 ? hook.text.slice(0, i) : hook.text;
+  const word = i >= 0 ? hook.text.slice(i, i + kw.length) : "";
+  const after = i >= 0 ? hook.text.slice(i + kw.length) : "";
+  const base: React.CSSProperties = { fontFamily: CAP_FONT, fontWeight: 900, fontSize: 56, color: "white", lineHeight: 1.15, textShadow: "0 3px 12px rgba(0,0,0,.85)" };
+  return (
+    <AbsoluteFill style={{ justifyContent: "flex-start", alignItems: "center", paddingTop: "9%", opacity: fade }}>
+      <div style={{ ...base, maxWidth: "86%", textAlign: "center" }}>
+        {before}
+        {word && (
+          <span style={{ background: "#ff5a5f", color: "white", padding: "0 14px", borderRadius: 12, boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone" }}>{word}</span>
+        )}
+        {after}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ── big keyword pop-text (scale-punch) on emphasis beats ──────────────
+const PopText: React.FC<{ text: string }> = ({ text }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const sp = spring({ frame, fps, config: { damping: 11, stiffness: 130, mass: 0.6 } });
+  const scale = interpolate(sp, [0, 1], [0.35, 1]);
+  const rot = interpolate(sp, [0, 1], [-7, -3]);
+  return (
+    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
+      <div style={{
+        transform: `scale(${scale}) rotate(${rot}deg)`, maxWidth: "90%", textAlign: "center",
+        fontFamily: CAP_FONT, fontWeight: 900, fontSize: 104, color: "#ffe14d", textTransform: "uppercase",
+        textShadow: "0 5px 0 #c0392b, 0 10px 24px rgba(0,0,0,.6)", WebkitTextStroke: "3px #7a1f12", lineHeight: 0.95,
+      }}>{text}</div>
+    </AbsoluteFill>
+  );
+};
+
+export const Assembly: React.FC<EditData> = (data) => {
+  const cs = data.captionStyle ?? "default";
+  return (
+    <AbsoluteFill style={{ backgroundColor: "black" }}>
+      <ARoll data={data} />
+      {data.cuts.map((c, i) => (
+        <Sequence key={"cut" + i} from={c.from} durationInFrames={c.dur}>
+          <BrollLayer cut={c} />
+        </Sequence>
+      ))}
+      {(data.pops ?? []).map((p, i) => (
+        <Sequence key={"pop" + i} from={p.from} durationInFrames={p.dur}><PopText text={p.text} /></Sequence>
+      ))}
+      {data.hook && (
+        <Sequence from={data.hook.from} durationInFrames={data.hook.dur}><HookOverlay hook={data.hook} /></Sequence>
+      )}
+      {(data.captions ?? []).map((c, i) => (
+        <Sequence key={"cap" + i} from={c.from} durationInFrames={c.dur}>
+          <CaptionLine text={c.text} y={c.y ?? 0.58} dur={c.dur} captionStyle={cs} />
+        </Sequence>
+      ))}
+    </AbsoluteFill>
+  );
+};
+
+export const DEFAULT_EDIT: EditData = {
+  format: "9x16", fps: 30, totalFrames: 711, aroll: "aroll.mp4", arollFocal: [0.5, 0.38],
+  cuts: [], captions: [], pops: [], hook: null, captionStyle: "default",
+};