@viralspin/mcp 0.2.0 → 0.2.2

package/engine/src/Assembly.tsx

@@ -1,330 +0,0 @@
-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",
-};

package/engine/src/KineticText.tsx

@@ -1,253 +0,0 @@
-import React from "react";
-import {
-  AbsoluteFill,
-  interpolate,
-  spring,
-  useCurrentFrame,
-  useVideoConfig,
-} from "remotion";
-
-export type KineticEffect = "typing" | "billboard_flip" | "isometric";
-export type KineticStyle = "terminal" | "cinematic" | "minimal";
-
-export interface CameraTransform {
-  rotateX: number;
-  rotateY: number;
-  rotateZ: number;
-  translateZ: number;
-}
-
-export interface KineticTextProps {
-  text: string;
-  effect: KineticEffect;
-  style: KineticStyle;
-  fontSize: number;
-  format: "9x16" | "16x9" | "1x1";
-  fps: number;
-  totalFrames: number;
-  camera: CameraTransform;
-}
-
-export const EFFECT_CAMERA_DEFAULTS: Record<KineticEffect, CameraTransform> = {
-  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 STYLE_THEMES = {
-  terminal:  { bg: "#0d1117",     text: "#00ff88", font: "'Courier New', 'Consolas', monospace", cursor: true,  vignette: false, scanlines: true  },
-  cinematic: { bg: "#000000",     text: "#ffffff", font: "'Inter', 'Segoe UI', sans-serif",      cursor: false, vignette: true,  scanlines: false },
-  minimal:   { bg: "transparent", text: "#ffffff", font: "'Inter', 'Segoe UI', sans-serif",      cursor: false, vignette: false, scanlines: false },
-};
-
-export const DEFAULT_KINETIC: KineticTextProps = {
-  text: "create_video_assembly --aroll talk.mp4",
-  effect: "typing",
-  style: "terminal",
-  fontSize: 72,
-  format: "9x16",
-  fps: 30,
-  totalFrames: 150,
-  camera: EFFECT_CAMERA_DEFAULTS.typing,
-};
-
-// ─── Typing effect ────────────────────────────────────────────────────────────
-const TypingText: React.FC<{
-  text: string;
-  frame: number;
-  totalFrames: number;
-  theme: typeof STYLE_THEMES.terminal;
-  fontSize: number;
-}> = ({ text, frame, totalFrames, theme, fontSize }) => {
-  const typingFrames = Math.floor(totalFrames * 0.72);
-  const visibleChars = Math.min(text.length, Math.floor((frame / typingFrames) * text.length));
-  const isTyping = visibleChars < text.length;
-  const showCursor = theme.cursor && (isTyping || frame % 30 < 20);
-
-  return (
-    <div style={{
-      fontFamily: theme.font,
-      fontSize,
-      fontWeight: 700,
-      color: theme.text,
-      lineHeight: 1.6,
-      whiteSpace: "pre-wrap",
-      wordBreak: "break-word",
-      maxWidth: "85%",
-      textShadow: theme.text === "#00ff88"
-        ? `0 0 20px ${theme.text}99, 0 0 7px ${theme.text}`
-        : "0 2px 14px rgba(0,0,0,0.9)",
-      letterSpacing: "0.02em",
-    }}>
-      {text.slice(0, visibleChars)}
-      {showCursor && (
-        <span style={{ opacity: frame % 15 < 9 ? 1 : 0 }}>▋</span>
-      )}
-    </div>
-  );
-};
-
-// ─── Billboard flip effect ────────────────────────────────────────────────────
-const BillboardFlipText: React.FC<{
-  text: string;
-  frame: number;
-  fps: number;
-  theme: typeof STYLE_THEMES.terminal;
-  fontSize: number;
-}> = ({ text, frame, fps, theme, fontSize }) => {
-  const words = text.split(/\s+/);
-  const stagger = 14;
-
-  return (
-    <div style={{
-      fontFamily: theme.font,
-      fontSize,
-      fontWeight: 700,
-      color: theme.text,
-      display: "flex",
-      flexWrap: "wrap",
-      gap: `${Math.round(fontSize * 0.28)}px`,
-      justifyContent: "center",
-      maxWidth: "85%",
-      textShadow: "0 2px 24px rgba(0,0,0,0.85)",
-    }}>
-      {words.map((word, i) => {
-        const elapsed = Math.max(0, frame - i * stagger);
-        const s = spring({ frame: elapsed, fps, config: { damping: 14, stiffness: 140, mass: 0.6 } });
-        const tz = interpolate(s, [0, 1], [-800, 0]);
-        const ry = interpolate(s, [0, 1], [90, 0]);
-        const opacity = interpolate(elapsed, [0, 6], [0, 1], { extrapolateRight: "clamp" });
-        return (
-          <span key={i} style={{
-            display: "inline-block",
-            transform: `translateZ(${tz}px) rotateY(${ry}deg)`,
-            opacity,
-          }}>
-            {word}
-          </span>
-        );
-      })}
-    </div>
-  );
-};
-
-// ─── Isometric extrude effect ─────────────────────────────────────────────────
-const IsometricText: React.FC<{
-  text: string;
-  frame: number;
-  fps: number;
-  theme: typeof STYLE_THEMES.terminal;
-  fontSize: number;
-}> = ({ text, frame, fps, theme, fontSize }) => {
-  const chars = text.split("");
-  const stagger = 3;
-  const shadowColor = theme.text === "#00ff88" ? "#006633" : "rgba(0,0,0,0.55)";
-
-  return (
-    <div style={{
-      fontFamily: theme.font,
-      fontSize,
-      fontWeight: 900,
-      color: theme.text,
-      display: "flex",
-      flexWrap: "wrap",
-      justifyContent: "center",
-      maxWidth: "85%",
-      letterSpacing: "0.06em",
-    }}>
-      {chars.map((char, i) => {
-        const elapsed = Math.max(0, frame - i * stagger);
-        const s = spring({ frame: elapsed, fps, config: { damping: 18, stiffness: 200, mass: 0.5 } });
-        const ty = interpolate(s, [0, 1], [80, 0]);
-        const opacity = interpolate(elapsed, [0, 8], [0, 1], { extrapolateRight: "clamp" });
-        return (
-          <span key={i} style={{
-            display: "inline-block",
-            transform: `translateY(${ty}px)`,
-            opacity,
-            textShadow: `0 5px 0 ${shadowColor}, 0 2px 12px rgba(0,0,0,0.7)`,
-          }}>
-            {char === " " ? " " : char}
-          </span>
-        );
-      })}
-    </div>
-  );
-};
-
-// ─── Main composition ─────────────────────────────────────────────────────────
-export const KineticText: React.FC<KineticTextProps> = ({
-  text,
-  effect,
-  style,
-  fontSize,
-  camera,
-}) => {
-  const frame = useCurrentFrame();
-  const { fps, durationInFrames } = useVideoConfig();
-  const theme = STYLE_THEMES[style];
-
-  // Camera eases from identity to target over first 60% of duration
-  const camP = interpolate(frame, [0, Math.floor(durationInFrames * 0.6)], [0, 1], {
-    extrapolateRight: "clamp",
-    // cubic ease-in-out
-    easing: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
-  });
-  const cameraTransform = [
-    `rotateX(${camera.rotateX * camP}deg)`,
-    `rotateY(${camera.rotateY * camP}deg)`,
-    `rotateZ(${camera.rotateZ * camP}deg)`,
-    `translateZ(${camera.translateZ * camP}px)`,
-  ].join(" ");
-
-  const prefix = style === "terminal" ? "$ " : "";
-
-  const textNode = (() => {
-    if (effect === "typing") {
-      return (
-        <TypingText
-          text={prefix + text}
-          frame={frame}
-          totalFrames={durationInFrames}
-          theme={theme}
-          fontSize={fontSize}
-        />
-      );
-    }
-    if (effect === "billboard_flip") {
-      return <BillboardFlipText text={text} frame={frame} fps={fps} theme={theme} fontSize={fontSize} />;
-    }
-    return <IsometricText text={text} frame={frame} fps={fps} theme={theme} fontSize={fontSize} />;
-  })();
-
-  return (
-    <AbsoluteFill style={{ background: theme.bg, perspective: "1200px" }}>
-      {/* CRT scanlines for terminal style */}
-      {theme.scanlines && (
-        <AbsoluteFill style={{
-          backgroundImage: "repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 4px)",
-          pointerEvents: "none",
-          zIndex: 10,
-        }} />
-      )}
-      {/* Radial vignette for cinematic style */}
-      {theme.vignette && (
-        <AbsoluteFill style={{
-          background: "radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,0.8) 100%)",
-          pointerEvents: "none",
-          zIndex: 10,
-        }} />
-      )}
-      {/* 3D camera layer — no overflow:hidden here, that flattens Z-space */}
-      <AbsoluteFill style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        transformStyle: "preserve-3d",
-        transform: cameraTransform,
-      }}>
-        {textNode}
-      </AbsoluteFill>
-    </AbsoluteFill>
-  );
-};

package/engine/src/Root.tsx

@@ -1,39 +0,0 @@
-import { Composition } from "remotion";
-import { Assembly, DEFAULT_EDIT, EditData } from "./Assembly";
-import { KineticText, DEFAULT_KINETIC, KineticTextProps } from "./KineticText";
-
-const dimsFor = (fmt: EditData["format"]) =>
-  fmt === "1x1" ? { width: 1080, height: 1080 } : fmt === "16x9" ? { width: 1920, height: 1080 } : { width: 1080, height: 1920 };
-
-export const RemotionRoot: React.FC = () => {
-  return (
-    <>
-      <Composition
-        id="Assembly"
-        component={Assembly}
-        durationInFrames={DEFAULT_EDIT.totalFrames}
-        fps={DEFAULT_EDIT.fps}
-        {...dimsFor(DEFAULT_EDIT.format)}
-        defaultProps={DEFAULT_EDIT}
-        calculateMetadata={({ props }) => ({
-          durationInFrames: props.totalFrames,
-          fps: props.fps,
-          ...dimsFor(props.format),
-        })}
-      />
-      <Composition
-        id="KineticText"
-        component={KineticText}
-        durationInFrames={DEFAULT_KINETIC.totalFrames}
-        fps={DEFAULT_KINETIC.fps}
-        {...dimsFor(DEFAULT_KINETIC.format)}
-        defaultProps={DEFAULT_KINETIC}
-        calculateMetadata={({ props }: { props: KineticTextProps }) => ({
-          durationInFrames: props.totalFrames,
-          fps: props.fps,
-          ...dimsFor(props.format),
-        })}
-      />
-    </>
-  );
-};

package/engine/src/index.ts

@@ -1,4 +0,0 @@
-import { registerRoot } from "remotion";
-import { RemotionRoot } from "./Root";
-
-registerRoot(RemotionRoot);

package/engine/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "jsx": "react-jsx",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-    "lib": ["ESNext", "DOM"]
-  },
-  "include": ["src"]
-}