@devinilabs/reelstack 1.2.0

package/reference/warm/mempalace.tsx

@@ -0,0 +1,2909 @@
+/**
+ * REFERENCE — MemPalaceReel  (Family: warm)
+ *
+ * Canonical example of the warm family's motion vocabulary, frame-locked
+ * BEAT structure, and scene choreography. Bundled with ReelStack v1.1.1+
+ * for STUDY and pattern adaptation.
+ *
+ * Asset imports stripped (look for REFERENCE-STRIP markers). Bring your own
+ * voiceover, brand SVGs, captures.
+ *
+ * License: study + adapt patterns OK. Verbatim re-publication as your own
+ * template NOT OK. See ReelStack LICENSE.
+ *
+ * Source: my-video/src/MemPalaceReel.tsx
+ * Bundled at: 2026-05-08T18:50:39.538Z
+ */
+import React from "react";
+import {
+  AbsoluteFill,
+  Audio,
+  Easing,
+  Img,
+  OffthreadVideo,
+  Sequence,
+  interpolate,
+  spring,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════════════════
+// CONSTANTS — 9:16 reel, 30 fps, ~84 s
+// ═══════════════════════════════════════════════════════════════════════════
+
+const H = 1920;
+
+// IG safe zones per project memory: top ~280, bottom ~410
+const SAFE_TOP = 280;
+const SAFE_BOT_Y = 1510;
+
+export const MEMPALACE_TOTAL = 2520;
+
+const SCENES = {
+  S1: { from: 0, dur: 225 },     // 7.5s — cold-open hook
+  S2: { from: 225, dur: 330 },   // 11s  — pain (Gone.)
+  S3: { from: 555, dur: 225 },   // 7.5s — Mem0 / "AI decides" wall
+  S4: { from: 780, dur: 135 },   // 4.5s — MemPalace flip
+  S5: { from: 915, dur: 480 },   // 16s  — Architecture (Aristotle/Cicero, wings/rooms/drawers)
+  S6: { from: 1395, dur: 420 },  // 14s  — Hook magic + screen recording
+  S7: { from: 1815, dur: 390 },  // 13s  — Social proof
+  S8: { from: 2205, dur: 315 },  // 10.5s— CTA
+} as const;
+
+// Palette — dark zinc base + warm parchment palace + emerald success.
+// One accent rule (palace gold) keeps the LLM-generic look out.
+const C = {
+  bg: "#09090b",
+  bgLift: "#111114",
+  surface: "#15151c",
+  border: "rgba(255,255,255,0.08)",
+  borderLoud: "rgba(255,255,255,0.16)",
+  fg: "#fafafa",
+  fgSoft: "#d4d4d8",
+  fgMuted: "#9f9fa9",
+  fgDim: "#6b6b75",
+
+  // Palace warm tones
+  paper: "#efe7d6",
+  paperWarm: "#e7dcc4",
+  paperDeep: "#d8c8a0",
+  ink: "#1a1410",
+  inkSoft: "#3a2f24",
+  gold: "#b8893d",
+  goldDeep: "#8a6429",
+  goldGlow: "rgba(184,137,61,0.22)",
+
+  // Tech accents
+  emerald: "#00d294",
+  emeraldDeep: "#00875a",
+  indigo: "#625fff",
+  red: "#ef4444",
+  redDeep: "#7f1d1d",
+} as const;
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+const SERIF = "ui-serif, 'Iowan Old Style', 'Charter', 'Source Serif Pro', Georgia, serif";
+
+// ═══════════════════════════════════════════════════════════════════════════
+// MOTION HELPERS — GSAP-style timeline ergonomics on top of Remotion springs
+// ═══════════════════════════════════════════════════════════════════════════
+
+type SpringKind = "smooth" | "snappy" | "gentle" | "bouncy" | "glass";
+
+const sp = (
+  frame: number,
+  fps: number,
+  delaySec: number,
+  kind: SpringKind = "snappy",
+) =>
+  spring({ frame, fps, delay: Math.round(delaySec * fps), config: ds.spring[kind] });
+
+const fadeIn = (f: number, at: number, len = 12) =>
+  interpolate(f, [at, at + len], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+const fadeOut = (f: number, at: number, len = 12) =>
+  interpolate(f, [at, at + len], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+// GSAP power3.out feel
+const expoOut = Easing.bezier(0.16, 1, 0.3, 1);
+
+// "tween" — like gsap.to({duration, ease}) — clamp by default
+const tween = (
+  f: number,
+  startFrame: number,
+  durFrames: number,
+  from: number,
+  to: number,
+  easing: ReturnType<typeof Easing.bezier> = expoOut,
+) =>
+  interpolate(f, [startFrame, startFrame + durFrames], [from, to], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing,
+  });
+
+// Letter-by-letter stagger helper — returns per-char {opacity, y}
+const letterStagger = (
+  chars: string,
+  frame: number,
+  fps: number,
+  startSec: number,
+  perCharSec = 0.04,
+) =>
+  chars.split("").map((ch, i) => {
+    const s = sp(frame, fps, startSec + i * perCharSec, "snappy");
+    return {
+      ch,
+      opacity: interpolate(s, [0, 0.4], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+      }),
+      y: interpolate(s, [0, 1], [40, 0]),
+      scale: interpolate(s, [0, 0.6, 1], [0.85, 1.05, 1]),
+    };
+  });
+
+// ═══════════════════════════════════════════════════════════════════════════
+// BACKGROUNDS
+// ═══════════════════════════════════════════════════════════════════════════
+
+const NoiseGrain: React.FC<{ opacity?: number }> = ({ opacity = 0.06 }) => (
+  <AbsoluteFill
+    style={{
+      pointerEvents: "none",
+      opacity,
+      mixBlendMode: "overlay",
+      backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>")`,
+    }}
+  />
+);
+
+const Vignette: React.FC<{ frame: number; tone?: "dark" | "warm" }> = ({
+  frame,
+  tone = "dark",
+}) => {
+  const pulse = 0.42 + Math.sin(frame * 0.012) * 0.05;
+  const col =
+    tone === "warm"
+      ? `rgba(80,55,15,${pulse})`
+      : `rgba(0,0,0,${pulse})`;
+  return (
+    <AbsoluteFill
+      style={{
+        background: `radial-gradient(ellipse at 50% 50%, transparent 38%, ${col} 100%)`,
+      }}
+    />
+  );
+};
+
+const DarkBg: React.FC<{ frame: number; tint?: "indigo" | "emerald" | "red" }> = ({
+  frame,
+  tint = "indigo",
+}) => {
+  const drift = (Math.sin(frame * 0.0028) + 1) * 0.5;
+  const drift2 = (Math.cos(frame * 0.0021) + 1) * 0.5;
+  const tintRgb =
+    tint === "indigo"
+      ? "98,95,255"
+      : tint === "emerald"
+        ? "0,210,148"
+        : "239,68,68";
+  return (
+    <AbsoluteFill>
+      <div style={{ width: "100%", height: "100%", background: C.bg }} />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 800px 1000px at ${20 + drift * 60}% ${15 + drift2 * 40}%, rgba(${tintRgb},0.10) 0%, transparent 60%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 700px 900px at ${85 - drift * 55}% ${78 + drift2 * 15}%, rgba(${tintRgb},0.05) 0%, transparent 55%)`,
+        }}
+      />
+      {/* fine grid */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)`,
+          backgroundSize: "72px 72px",
+          maskImage: "radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%)",
+          WebkitMaskImage: "radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%)",
+        }}
+      />
+      <NoiseGrain />
+      <Vignette frame={frame} tone="dark" />
+    </AbsoluteFill>
+  );
+};
+
+const PaperBg: React.FC<{ frame: number }> = ({ frame }) => {
+  const drift = (Math.sin(frame * 0.0025) + 1) * 0.5;
+  return (
+    <AbsoluteFill>
+      <div style={{ width: "100%", height: "100%", background: C.paper }} />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 900px 1200px at ${30 + drift * 40}% 20%, rgba(255,245,220,0.7) 0%, transparent 60%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 700px 700px at 80% 90%, ${C.paperDeep} 0%, transparent 55%)`,
+          opacity: 0.55,
+        }}
+      />
+      {/* horizontal blueprint lines */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `linear-gradient(rgba(58,47,36,0.06) 1px, transparent 1px)`,
+          backgroundSize: "100% 56px",
+          maskImage: "linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%)",
+          WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%)",
+        }}
+      />
+      {/* paper grain */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          opacity: 0.18,
+          mixBlendMode: "multiply",
+          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.72'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.55'/></svg>")`,
+        }}
+      />
+      <Vignette frame={frame} tone="warm" />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// REUSABLE PRIMITIVES
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Pill: React.FC<{
+  children: React.ReactNode;
+  bg: string;
+  fg: string;
+  border?: string;
+  dot?: string;
+  mono?: boolean;
+  size?: number;
+}> = ({ children, bg, fg, border, dot, mono = true, size = 22 }) => (
+  <div
+    style={{
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 12,
+      padding: "12px 22px",
+      borderRadius: 9999,
+      background: bg,
+      border: border ? `1px solid ${border}` : undefined,
+      color: fg,
+      fontFamily: mono ? MONO : FONT,
+      fontSize: size,
+      fontWeight: 600,
+      letterSpacing: "0.08em",
+    }}
+  >
+    {dot ? (
+      <span
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: 999,
+          background: dot,
+          boxShadow: `0 0 12px ${dot}`,
+        }}
+      />
+    ) : null}
+    {children}
+  </div>
+);
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 1 — COLD OPEN HOOK
+// "Your Claude Code forgets your entire project every session.
+//  This 1-line install gives it permanent memory — and it's free."
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene1: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Terminal window slides up
+  const winSpring = sp(frame, fps, 0.05, "snappy");
+  const winY = interpolate(winSpring, [0, 1], [60, 0]);
+  const winOp = interpolate(winSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Typewriter — "How do we handle auth tokens?"
+  const typed = "> How do we handle auth tokens?";
+  const startTypeF = 12;
+  const charPerFrame = 1.4;
+  const charsShown = Math.max(
+    0,
+    Math.min(typed.length, Math.floor((frame - startTypeF) * charPerFrame)),
+  );
+
+  // After ~2.6s — single deterministic glitch beat instead of per-frame strobe
+  const expireAt = 78;
+  // Two short dropouts at expireAt+2 and expireAt+10, each lasting 2 frames.
+  // Looks like a CRT signal hiccup, not a flickering bulb.
+  const inDropout =
+    (frame >= expireAt + 2 && frame < expireAt + 4) ||
+    (frame >= expireAt + 10 && frame < expireAt + 12);
+  const flicker = inDropout ? 0.55 : 1;
+  const expiredOp = fadeIn(frame, expireAt + 18, 8);
+  const expiredY = interpolate(frame, [expireAt + 18, expireAt + 30], [10, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Headline slam — at 4.0s (frame 120)
+  const slamAt = 120;
+  const slamSpring = sp(frame, fps, slamAt / fps, "bouncy");
+  const slamScale = interpolate(slamSpring, [0, 0.6, 1], [0.7, 1.06, 1]);
+
+  // Two lines of headline letter-stagger
+  const line1 = "FORGETS EVERY";
+
+  // Line 2 — "SESSION." gradient slam, animated as a single unit
+  // (gradient + WebkitBackgroundClip do not propagate to per-letter child spans,
+  //  so we don't split it letter-by-letter)
+  const line2Spring = sp(frame, fps, slamAt / fps + 0.22, "bouncy");
+  const line2Op = interpolate(line2Spring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const line2Y = interpolate(line2Spring, [0, 1], [50, 0]);
+  const line2Scale = interpolate(line2Spring, [0, 0.55, 1], [0.7, 1.1, 1]);
+
+  // CTA strip — "1-line install · permanent memory · free"
+  const stripOp = fadeIn(frame, 165);
+  const stripY = interpolate(frame, [165, 185], [16, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const exit = fadeOut(frame, SCENES.S1.dur - 16, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="red" />
+
+      {/* TOP CONTEXT TAG */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: fadeIn(frame, 0, 10),
+        }}
+      >
+        <Pill
+          bg="rgba(239,68,68,0.10)"
+          fg="#fca5a5"
+          border="rgba(239,68,68,0.35)"
+          dot={C.red}
+        >
+          AMNESIA · CTX RESET
+        </Pill>
+      </div>
+
+      {/* TERMINAL WINDOW */}
+      <div
+        style={{
+          position: "absolute",
+          left: 60,
+          right: 60,
+          top: 460,
+          opacity: winOp * flicker,
+          transform: `translateY(${winY}px)`,
+        }}
+      >
+        <div
+          style={{
+            background: C.surface,
+            border: `1px solid ${C.borderLoud}`,
+            borderRadius: 22,
+            overflow: "hidden",
+            boxShadow:
+              "0 30px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08)",
+          }}
+        >
+          {/* title bar */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              padding: "16px 22px",
+              background: "rgba(255,255,255,0.03)",
+              borderBottom: `1px solid ${C.border}`,
+            }}
+          >
+            <div style={{ width: 12, height: 12, borderRadius: 999, background: "#ff5f57" }} />
+            <div style={{ width: 12, height: 12, borderRadius: 999, background: "#febc2e" }} />
+            <div style={{ width: 12, height: 12, borderRadius: 999, background: "#28c840" }} />
+            <div
+              style={{
+                marginLeft: 18,
+                fontFamily: MONO,
+                fontSize: 18,
+                color: C.fgMuted,
+                letterSpacing: "0.05em",
+              }}
+            >
+              claude-code · ~/project
+            </div>
+          </div>
+
+          {/* body */}
+          <div
+            style={{
+              padding: "32px 28px 60px",
+              fontFamily: MONO,
+              fontSize: 30,
+              lineHeight: 1.6,
+              color: C.fgSoft,
+              minHeight: 380,
+            }}
+          >
+            <div style={{ color: C.fgDim, marginBottom: 10 }}>
+              [session-7423] connected
+            </div>
+            <div>
+              {typed.slice(0, charsShown)}
+              {/* cursor — visible only while typing; hides once context is lost */}
+              {frame < expireAt ? (
+                <span
+                  style={{
+                    display: "inline-block",
+                    width: 14,
+                    height: 30,
+                    marginLeft: 4,
+                    background: C.fg,
+                    verticalAlign: "-4px",
+                    // Slower, eased blink: ~530ms cycle, smooth opacity not hard cut
+                    opacity:
+                      0.35 +
+                      0.65 *
+                        Math.pow(
+                          Math.cos((frame * Math.PI) / 16),
+                          2,
+                        ),
+                  }}
+                />
+              ) : null}
+            </div>
+            {/* expired line */}
+            {frame >= expireAt + 6 ? (
+              <div
+                style={{
+                  marginTop: 22,
+                  opacity: expiredOp,
+                  transform: `translateY(${expiredY}px)`,
+                  color: C.red,
+                  fontWeight: 600,
+                  fontSize: 26,
+                  letterSpacing: "0.04em",
+                }}
+              >
+                ✗ context lost · 0 memory carried over
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      {/* HEADLINE SLAM */}
+      {frame >= slamAt - 4 ? (
+        <div
+          style={{
+            position: "absolute",
+            top: 1010,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            padding: "0 50px",
+            transform: `scale(${slamScale})`,
+          }}
+        >
+          {/* line 1 */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "nowrap",
+              gap: 0,
+              fontSize: 100,
+              fontWeight: 800,
+              color: C.fg,
+              letterSpacing: "-0.05em",
+              lineHeight: 0.95,
+              whiteSpace: "nowrap",
+            }}
+          >
+            {letterStagger(line1, frame, fps, slamAt / fps, 0.025).map((s, i) => (
+              <span
+                key={`l1-${i}`}
+                style={{
+                  display: "inline-block",
+                  opacity: s.opacity,
+                  transform: `translateY(${s.y}px) scale(${s.scale})`,
+                  width: s.ch === " " ? 24 : "auto",
+                }}
+              >
+                {s.ch === " " ? "\u00A0" : s.ch}
+              </span>
+            ))}
+          </div>
+          {/* line 2 — gradient slam (animated as single span) */}
+          <div
+            style={{
+              marginTop: 4,
+              opacity: line2Op,
+              transform: `translateY(${line2Y}px) scale(${line2Scale})`,
+              fontSize: 184,
+              fontWeight: 800,
+              letterSpacing: "-0.06em",
+              lineHeight: 0.95,
+              background: `linear-gradient(135deg, ${C.red} 0%, #fb7185 100%)`,
+              WebkitBackgroundClip: "text",
+              backgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              filter: "drop-shadow(0 0 32px rgba(239,68,68,0.45))",
+            }}
+          >
+            SESSION.
+          </div>
+        </div>
+      ) : null}
+
+      {/* INSTALL CTA STRIP */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: H - SAFE_BOT_Y + 50,
+          display: "flex",
+          justifyContent: "center",
+          opacity: stripOp,
+          transform: `translateY(${stripY}px)`,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 18,
+            padding: "20px 30px",
+            background: "rgba(255,255,255,0.05)",
+            border: `1px solid ${C.borderLoud}`,
+            borderRadius: 999,
+            backdropFilter: "blur(20px)",
+            fontFamily: MONO,
+            fontSize: 26,
+            fontWeight: 600,
+            color: C.fg,
+            letterSpacing: "0.04em",
+          }}
+        >
+          <span style={{ color: C.emerald }}>$</span>
+          <span>1 line · permanent memory · free</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 2 — WHAT'S LOST
+// "every decision, every back-and-forth, every reason behind your reasoning?
+//  Gone. The second you start a new session."
+// ═══════════════════════════════════════════════════════════════════════════
+
+const FloatingMemoryCard: React.FC<{
+  frame: number;
+  index: number;
+  startFrame: number;
+  shredAt: number;
+  label: string;
+  body: string;
+  x: number;
+  y: number;
+  rot: number;
+  tint: string;
+}> = ({ frame, index, startFrame, shredAt, label, body, x, y, rot, tint }) => {
+  // Enter
+  const enterT = tween(frame, startFrame + index * 8, 24, 0, 1);
+  const op = enterT;
+  const fy = (Math.sin((frame + index * 14) * 0.04) - 0.5) * 8;
+
+  // Shred
+  const shredT = tween(frame, shredAt, 22, 0, 1);
+  const shredOp = 1 - shredT;
+  const shredX = shredT * (60 + index * 14) * (index % 2 === 0 ? 1 : -1);
+  const shredY = shredT * 90;
+  const shredScale = 1 - shredT * 0.18;
+  const shredBlur = shredT * 6;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: x,
+        top: y + fy,
+        width: 540,
+        opacity: op * shredOp,
+        transform: `translate(${shredX}px, ${shredY}px) rotate(${rot + shredT * (index % 2 === 0 ? 6 : -6)}deg) scale(${shredScale})`,
+        filter: `blur(${shredBlur}px)`,
+      }}
+    >
+      <div
+        style={{
+          background: C.surface,
+          border: `1px solid ${C.border}`,
+          borderRadius: 18,
+          padding: "20px 22px",
+          fontFamily: FONT,
+          color: C.fgSoft,
+          boxShadow: "0 20px 60px -10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05)",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            marginBottom: 12,
+          }}
+        >
+          <div
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: 999,
+              background: tint,
+              boxShadow: `0 0 10px ${tint}`,
+            }}
+          />
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 17,
+              color: tint,
+              letterSpacing: "0.1em",
+              fontWeight: 600,
+            }}
+          >
+            {label}
+          </div>
+        </div>
+        <div style={{ fontSize: 27, fontWeight: 500, lineHeight: 1.35, color: C.fg }}>
+          {body}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Scene2: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 14);
+  const titleY = interpolate(frame, [0, 18], [22, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // 4 cards stagger in across ~1s
+  // Shred at frame ~210 (when "Gone." hits)
+  const shredAt = 210;
+
+  // GONE slam
+  const goneAt = 220;
+  const goneSpring = sp(frame, fps, goneAt / fps, "bouncy");
+  const goneOp = interpolate(goneSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const goneScale = interpolate(goneSpring, [0, 0.5, 1], [0.5, 1.15, 1]);
+  const goneRot = interpolate(goneSpring, [0, 1], [-6, -2]);
+  const goneShake = goneOp * Math.sin(frame * 0.6) * 1.5;
+
+  // sub line
+  const subOp = fadeIn(frame, 270);
+  const subY = interpolate(frame, [270, 295], [18, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const exit = fadeOut(frame, SCENES.S2.dur - 16, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="red" />
+
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP - 10,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+          padding: "0 60px",
+        }}
+      >
+        <Pill bg="rgba(255,255,255,0.05)" fg={C.fgSoft} border={C.border}>
+          WHAT'S LOST AT SESSION RESET
+        </Pill>
+        <div
+          style={{
+            marginTop: 28,
+            fontSize: 78,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.04em",
+            lineHeight: 1.02,
+          }}
+        >
+          Every decision.<br />
+          <span style={{ color: C.fgMuted, fontWeight: 600 }}>
+            Every back-and-forth.
+          </span><br />
+          <span style={{ color: C.fgDim, fontWeight: 600 }}>
+            Every reason behind it.
+          </span>
+        </div>
+      </div>
+
+      {/* FLOATING MEMORY CARDS */}
+      <FloatingMemoryCard
+        frame={frame}
+        index={0}
+        startFrame={50}
+        shredAt={shredAt}
+        label="DECISION · 14:32"
+        body={"\u201CWe chose Postgres over\nDynamo because of joins.\u201D"}
+        x={120}
+        y={830}
+        rot={-3}
+        tint={C.indigo}
+      />
+      <FloatingMemoryCard
+        frame={frame}
+        index={1}
+        startFrame={50}
+        shredAt={shredAt}
+        label="REASONING · 14:48"
+        body={"\u201CRetry on 502 only — 503\nmeans pool is exhausted.\u201D"}
+        x={420}
+        y={970}
+        rot={4}
+        tint={C.emerald}
+      />
+      <FloatingMemoryCard
+        frame={frame}
+        index={2}
+        startFrame={50}
+        shredAt={shredAt}
+        label="BACK-AND-FORTH · 15:11"
+        body={"\u201CDon\u2019t mock the DB in\ntests \u2014 burned us last Q.\u201D"}
+        x={130}
+        y={1110}
+        rot={2}
+        tint="#fcbb00"
+      />
+      <FloatingMemoryCard
+        frame={frame}
+        index={3}
+        startFrame={50}
+        shredAt={shredAt}
+        label="CONSTRAINT · 15:24"
+        body={"\u201CMobile freeze starts\nThu \u2014 critical merges only.\u201D"}
+        x={420}
+        y={1255}
+        rot={-2}
+        tint="#fb7185"
+      />
+
+      {/* GONE. — slam */}
+      {frame >= goneAt - 4 ? (
+        <div
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 1340,
+            textAlign: "center",
+            opacity: goneOp,
+          }}
+        >
+          <div
+            style={{
+              display: "inline-block",
+              fontSize: 240,
+              fontWeight: 800,
+              letterSpacing: "-0.07em",
+              color: C.fg,
+              transform: `scale(${goneScale}) rotate(${goneRot}deg) translateX(${goneShake}px)`,
+              filter: "drop-shadow(0 0 60px rgba(239,68,68,0.45))",
+            }}
+          >
+            <span style={{ color: C.red }}>GONE</span>
+            <span style={{ color: C.fg }}>.</span>
+          </div>
+        </div>
+      ) : null}
+
+      {/* sub */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1420,
+          textAlign: "center",
+          opacity: subOp,
+          transform: `translateY(${subY}px)`,
+          fontSize: 30,
+          fontWeight: 500,
+          color: C.fgMuted,
+          letterSpacing: "-0.01em",
+        }}
+      >
+        the second you start a new session
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 3 — MEM0 / "AI DECIDES" WALL
+// "Mem zero charges nineteen a month. But they all hit the same wall —
+//  they let AI decide what's worth keeping."
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene3: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Pricing card flip in
+  const cardSpring = sp(frame, fps, 0.1, "snappy");
+  const cardScale = interpolate(cardSpring, [0, 1], [0.88, 1]);
+  const cardOp = interpolate(cardSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const cardY = interpolate(cardSpring, [0, 1], [40, 0]);
+
+  // Price counter — counts up from 0 to 19
+  const priceCount = Math.round(tween(frame, 12, 30, 0, 19));
+
+  // Title
+  const titleOp = fadeIn(frame, 0, 12);
+
+  // VS divider
+  const dividerOp = fadeIn(frame, 70);
+
+  // Right card — "AI decides" with strikethrough
+  const rightSpring = sp(frame, fps, 2.4, "snappy");
+  const rightOp = interpolate(rightSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const rightY = interpolate(rightSpring, [0, 1], [40, 0]);
+
+  // Strikethrough draws on top of "AI DECIDES"
+  const strikeAt = 105;
+  const strikeT = tween(frame, strikeAt, 18, 0, 1);
+
+  // "SAME WALL" — bricks build up
+  const wallStartAt = 140;
+  const exit = fadeOut(frame, SCENES.S3.dur - 16, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="red" />
+
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: titleOp,
+          padding: "0 60px",
+        }}
+      >
+        <Pill bg="rgba(239,68,68,0.10)" fg="#fca5a5" border="rgba(239,68,68,0.30)">
+          THE SAME CEILING
+        </Pill>
+        <div
+          style={{
+            marginTop: 24,
+            fontSize: 64,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.035em",
+            lineHeight: 1.05,
+          }}
+        >
+          They charge you,<br />
+          then <span style={{ color: C.red }}>throw most of it away.</span>
+        </div>
+      </div>
+
+      {/* PRICING CARD */}
+      <div
+        style={{
+          position: "absolute",
+          top: 720,
+          left: 80,
+          width: 420,
+          opacity: cardOp,
+          transform: `translateY(${cardY}px) scale(${cardScale})`,
+        }}
+      >
+        <div
+          style={{
+            background: C.surface,
+            border: `1px solid ${C.borderLoud}`,
+            borderRadius: 24,
+            padding: "32px 30px",
+            boxShadow:
+              "0 30px 60px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06)",
+            fontFamily: FONT,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 18,
+              color: C.fgMuted,
+              letterSpacing: "0.12em",
+              fontWeight: 600,
+            }}
+          >
+            MEM0 · BASIC
+          </div>
+          <div
+            style={{
+              marginTop: 18,
+              display: "flex",
+              alignItems: "baseline",
+              gap: 6,
+            }}
+          >
+            <span style={{ fontSize: 38, color: C.fgMuted, fontWeight: 600 }}>$</span>
+            <span
+              style={{
+                fontSize: 124,
+                fontWeight: 800,
+                letterSpacing: "-0.06em",
+                color: C.fg,
+                lineHeight: 0.9,
+              }}
+            >
+              {priceCount}
+            </span>
+            <span style={{ fontSize: 30, color: C.fgMuted, marginLeft: 6 }}>/mo</span>
+          </div>
+          <div
+            style={{
+              marginTop: 18,
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+            }}
+          >
+            {["AI-curated retention", "What it deems important", "Vendor lock-in"].map(
+              (txt, i) => {
+                const lineT = tween(frame, 50 + i * 8, 18, 0, 1);
+                return (
+                  <div
+                    key={txt}
+                    style={{
+                      opacity: lineT,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 12,
+                      fontSize: 22,
+                      color: C.fgSoft,
+                      fontFamily: MONO,
+                    }}
+                  >
+                    <Img
+                      src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+                      style={{ width: 22, height: 22, filter: "brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(2900%) hue-rotate(335deg)" }}
+                    />
+                    {txt}
+                  </div>
+                );
+              },
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* VS DIVIDER */}
+      <div
+        style={{
+          position: "absolute",
+          top: 840,
+          left: 510,
+          width: 60,
+          opacity: dividerOp,
+          textAlign: "center",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontWeight: 800,
+            fontSize: 30,
+            color: C.fgMuted,
+            letterSpacing: "0.1em",
+          }}
+        >
+          ·
+        </div>
+      </div>
+
+      {/* RIGHT — "AI DECIDES" stamp */}
+      <div
+        style={{
+          position: "absolute",
+          top: 760,
+          right: 80,
+          width: 420,
+          opacity: rightOp,
+          transform: `translateY(${rightY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 18,
+            color: "#fca5a5",
+            letterSpacing: "0.12em",
+            fontWeight: 600,
+            marginBottom: 18,
+          }}
+        >
+          THE WALL
+        </div>
+        <div
+          style={{
+            position: "relative",
+            display: "inline-block",
+            fontSize: 96,
+            fontWeight: 800,
+            color: C.fg,
+            letterSpacing: "-0.04em",
+            lineHeight: 0.95,
+          }}
+        >
+          AI DECIDES<br />
+          <span style={{ color: C.fgDim }}>WHAT TO KEEP.</span>
+          {/* Red strike line */}
+          <svg
+            width={400}
+            height={220}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: -10,
+              pointerEvents: "none",
+              overflow: "visible",
+            }}
+          >
+            <line
+              x1={20}
+              y1={30}
+              x2={20 + strikeT * 380}
+              y2={30 + strikeT * 170}
+              stroke={C.red}
+              strokeWidth={10}
+              strokeLinecap="round"
+              style={{
+                filter: `drop-shadow(0 0 10px rgba(239,68,68,0.6))`,
+              }}
+            />
+          </svg>
+        </div>
+      </div>
+
+      {/* Wall bricks at bottom */}
+      <div
+        style={{
+          position: "absolute",
+          left: 60,
+          right: 60,
+          top: 1280,
+          height: 230,
+          display: "grid",
+          gridTemplateColumns: "repeat(8, 1fr)",
+          gridTemplateRows: "repeat(4, 1fr)",
+          gap: 6,
+        }}
+      >
+        {Array.from({ length: 32 }).map((_, i) => {
+          const t = tween(frame, wallStartAt + i * 1.6, 14, 0, 1);
+          const offsetRow = Math.floor(i / 8) % 2 === 0 ? 0 : 14;
+          return (
+            <div
+              key={i}
+              style={{
+                background: `rgba(${48 + (i % 4) * 4},${28 + (i % 3) * 2},${28 + (i % 5) * 3},${0.85 * t})`,
+                border: `1px solid rgba(239,68,68,${0.18 * t})`,
+                borderRadius: 4,
+                opacity: t,
+                transform: `translate(${offsetRow}px, ${(1 - t) * -14}px)`,
+              }}
+            />
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 4 — MEMPALACE FLIP
+// "MemPalace flipped it. It saves everything. No AI deciding."
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene4: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Hard cut to PaperBg — feels like flipping a coin from dark to light
+  // Logo emerges with bouncy spring
+  const logoSpring = sp(frame, fps, 0.05, "bouncy");
+  const logoScale = interpolate(logoSpring, [0, 0.55, 1], [0.3, 1.1, 1]);
+  const logoOp = interpolate(logoSpring, [0, 0.45], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const logoRot = interpolate(logoSpring, [0, 1], [-180, 0]);
+
+  // Wordmark letter-by-letter
+  const wordChars = "MEMPALACE";
+
+  // Underline
+  const underlineT = tween(frame, 50, 20, 0, 1);
+
+  // Tagline: SAVES EVERYTHING
+  const taglineOp = fadeIn(frame, 75);
+  const taglineY = interpolate(frame, [75, 95], [16, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT }}>
+      <PaperBg frame={frame} />
+
+      {/* Crest / seal */}
+      <div
+        style={{
+          position: "absolute",
+          top: 540,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: logoOp,
+          transform: `scale(${logoScale}) rotate(${logoRot}deg)`,
+        }}
+      >
+        <svg width={260} height={260} viewBox="0 0 200 200">
+          {/* outer ring */}
+          <circle cx={100} cy={100} r={92} fill="none" stroke={C.gold} strokeWidth={3} />
+          <circle cx={100} cy={100} r={84} fill="none" stroke={C.goldDeep} strokeWidth={1.2} strokeDasharray="2 6" />
+          {/* pediment */}
+          <path
+            d="M40 110 L100 50 L160 110 Z"
+            fill="none"
+            stroke={C.goldDeep}
+            strokeWidth={3}
+          />
+          {/* columns */}
+          <rect x={56} y={110} width={8} height={42} fill={C.goldDeep} />
+          <rect x={84} y={110} width={8} height={42} fill={C.goldDeep} />
+          <rect x={108} y={110} width={8} height={42} fill={C.goldDeep} />
+          <rect x={136} y={110} width={8} height={42} fill={C.goldDeep} />
+          {/* base */}
+          <rect x={48} y={154} width={104} height={6} fill={C.goldDeep} />
+          {/* steps */}
+          <rect x={42} y={162} width={116} height={3} fill={C.gold} />
+          {/* pediment dot */}
+          <circle cx={100} cy={84} r={4} fill={C.gold} />
+        </svg>
+      </div>
+
+      {/* Wordmark */}
+      <div
+        style={{
+          position: "absolute",
+          top: 820,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          fontFamily: SERIF,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            fontSize: 140,
+            fontWeight: 700,
+            color: C.ink,
+            letterSpacing: "-0.04em",
+            lineHeight: 1,
+          }}
+        >
+          {letterStagger(wordChars, frame, fps, 0.4, 0.04).map((s, i) => (
+            <span
+              key={`w-${i}`}
+              style={{
+                display: "inline-block",
+                opacity: s.opacity,
+                transform: `translateY(${s.y}px) scale(${s.scale})`,
+              }}
+            >
+              {s.ch}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Underline */}
+      <div
+        style={{
+          position: "absolute",
+          top: 985,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <div
+          style={{
+            width: underlineT * 540,
+            height: 4,
+            background: `linear-gradient(90deg, transparent, ${C.gold}, transparent)`,
+            borderRadius: 999,
+          }}
+        />
+      </div>
+
+      {/* Tagline */}
+      <div
+        style={{
+          position: "absolute",
+          top: 1080,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: taglineOp,
+          transform: `translateY(${taglineY}px)`,
+          padding: "0 80px",
+        }}
+      >
+        <div
+          style={{
+            fontSize: 70,
+            fontWeight: 700,
+            color: C.ink,
+            letterSpacing: "-0.03em",
+            lineHeight: 1.05,
+          }}
+        >
+          Saves <span style={{ color: C.goldDeep, fontStyle: "italic", fontFamily: SERIF }}>everything.</span>
+        </div>
+        <div
+          style={{
+            marginTop: 14,
+            fontSize: 36,
+            color: C.inkSoft,
+            fontWeight: 500,
+          }}
+        >
+          No AI deciding.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 5 — ARCHITECTURE
+// "ancient Greek memory palace technique. Aristotle used it. Cicero used it.
+//  Projects become wings. Topics become rooms. Every memory lives word-for-word
+//  in a drawer Claude can open on demand."
+// ═══════════════════════════════════════════════════════════════════════════
+
+const ArchitectureDiagram: React.FC<{ frame: number; fps: number }> = ({
+  frame,
+}) => {
+  // Build layered hierarchy: PALACE → WINGS → ROOMS → DRAWERS
+  // Reveal layer by layer with stagger.
+  const sFacade = tween(frame, 80, 30, 0, 1);
+  const sWings = tween(frame, 130, 26, 0, 1);
+  const sRooms = tween(frame, 180, 28, 0, 1);
+  const sDrawers = tween(frame, 240, 32, 0, 1);
+  const sLines = tween(frame, 200, 26, 0, 1);
+
+  // Subtle window-glow pulse — gives the buildings a "living" feel
+  const winPulse = 0.78 + Math.sin(frame * 0.05) * 0.18;
+  // Animated dash-flow on connectors (signal traveling down the hierarchy)
+  const dashOffset = -(frame * 0.6) % 16;
+
+  // Wing data
+  const wings = [
+    { cx: 160, label: "claude-code" },
+    { cx: 460, label: "my-saas" },
+    { cx: 760, label: "agent-sdk" },
+  ];
+  // Room data
+  const rooms = [
+    { cx: 160, label: "auth" },
+    { cx: 460, label: "billing" },
+    { cx: 760, label: "ui-design" },
+  ];
+  // Drawers — each drawer carries a real memory snippet (echoes Scene 2)
+  // 4 cards × 156 wide + 3 × 18 gap = 678 → centered in 920 (margin 121)
+  const drawers = [
+    { cx: 121, time: "14:32", body: "postgres > dynamo", tag: "joins" },
+    { cx: 295, time: "14:48", body: "retry 502 only", tag: "503 = pool" },
+    { cx: 469, time: "15:11", body: "no DB mocks", tag: "burned us" },
+    { cx: 643, time: "15:24", body: "mobile freeze Thu", tag: "critical" },
+  ];
+
+  return (
+    <svg
+      width={920}
+      height={820}
+      viewBox="0 0 920 820"
+      style={{ position: "absolute", left: 80, top: 580 }}
+    >
+      <defs>
+        {/* Pediment marble gradient */}
+        <linearGradient id="marble" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={C.paper} />
+          <stop offset="100%" stopColor={C.paperDeep} />
+        </linearGradient>
+        {/* Column shading: lit on left, shadow on right */}
+        <linearGradient id="column" x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0%" stopColor={C.paper} />
+          <stop offset="55%" stopColor={C.paperWarm} />
+          <stop offset="100%" stopColor={C.paperDeep} />
+        </linearGradient>
+        {/* Building front shading */}
+        <linearGradient id="wall" x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0%" stopColor={C.paper} />
+          <stop offset="100%" stopColor={C.paperWarm} />
+        </linearGradient>
+        {/* Roof front face */}
+        <linearGradient id="roof" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={C.gold} />
+          <stop offset="100%" stopColor={C.goldDeep} />
+        </linearGradient>
+        {/* Lit window — gold light glowing from inside */}
+        <radialGradient id="window-glow" cx="0.5" cy="0.5" r="0.7">
+          <stop offset="0%" stopColor="#f9e1a8" />
+          <stop offset="60%" stopColor={C.gold} />
+          <stop offset="100%" stopColor={C.goldDeep} />
+        </radialGradient>
+        {/* Plaque shading */}
+        <linearGradient id="plaque" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={C.paper} />
+          <stop offset="100%" stopColor={C.paperDeep} />
+        </linearGradient>
+        {/* Drawer body */}
+        <linearGradient id="drawer-body" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={C.paperWarm} />
+          <stop offset="100%" stopColor={C.paperDeep} />
+        </linearGradient>
+        {/* Connector stroke */}
+        <linearGradient id="connector" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={C.gold} stopOpacity="0.85" />
+          <stop offset="100%" stopColor={C.goldDeep} stopOpacity="0.55" />
+        </linearGradient>
+
+        {/* Soft cast-shadow filter */}
+        <filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
+          <feGaussianBlur in="SourceAlpha" stdDeviation="2.4" />
+          <feOffset dx="0" dy="3" result="offset" />
+          <feComponentTransfer>
+            <feFuncA type="linear" slope="0.35" />
+          </feComponentTransfer>
+          <feMerge>
+            <feMergeNode />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      {/* Corner ornaments — small classical filigree */}
+      <g opacity={sFacade * 0.45} fill={C.goldDeep}>
+        <circle cx={6} cy={6} r={2.5} />
+        <circle cx={20} cy={6} r={1.2} />
+        <circle cx={6} cy={20} r={1.2} />
+        <circle cx={914} cy={6} r={2.5} />
+        <circle cx={900} cy={6} r={1.2} />
+        <circle cx={914} cy={20} r={1.2} />
+      </g>
+
+      {/* ─────────────────  PALACE FACADE  ───────────────── */}
+      <g
+        opacity={sFacade}
+        transform={`translate(${360}, ${10 + (1 - sFacade) * 20})`}
+      >
+        {/* Soft platform shadow */}
+        <ellipse cx={100} cy={210} rx={130} ry={5} fill="rgba(26,20,16,0.18)" />
+
+        {/* Stepped base — three tiers, widening toward bottom */}
+        <rect x={-10} y={195} width={220} height={11} fill={C.goldDeep} />
+        <rect x={-4} y={186} width={208} height={9} fill={C.gold} />
+        <rect x={2} y={178} width={196} height={8} fill={C.goldDeep} />
+
+        {/* 5 columns with subtle shading (lit left / shadow right) */}
+        {[18, 56, 94, 132, 170].map((x) => (
+          <g key={x}>
+            {/* Capital (top flare) */}
+            <rect x={x - 2} y={94} width={18} height={5} fill={C.goldDeep} />
+            {/* Shaft */}
+            <rect
+              x={x}
+              y={99}
+              width={14}
+              height={76}
+              fill="url(#column)"
+              stroke={C.goldDeep}
+              strokeWidth={1}
+            />
+            {/* Vertical fluting line */}
+            <line
+              x1={x + 7}
+              y1={102}
+              x2={x + 7}
+              y2={172}
+              stroke={C.goldDeep}
+              strokeOpacity="0.35"
+              strokeWidth={0.8}
+            />
+            {/* Base */}
+            <rect x={x - 2} y={175} width={18} height={3} fill={C.goldDeep} />
+          </g>
+        ))}
+
+        {/* Architrave (horizontal beam above columns) */}
+        <rect x={2} y={84} width={196} height={11} fill={C.goldDeep} />
+        <rect x={6} y={86} width={188} height={1.5} fill={C.gold} />
+
+        {/* Pediment (triangular gable) */}
+        <path
+          d="M2 84 L100 4 L198 84 Z"
+          fill="url(#marble)"
+          stroke={C.goldDeep}
+          strokeWidth={2}
+        />
+        {/* Inner pediment line — echoes the silhouette */}
+        <path
+          d="M16 80 L100 12 L184 80"
+          fill="none"
+          stroke={C.gold}
+          strokeOpacity="0.55"
+          strokeWidth={1}
+        />
+        {/* Acroteria (small ornaments on pediment corners) */}
+        <circle cx={2} cy={84} r={3} fill={C.goldDeep} />
+        <circle cx={198} cy={84} r={3} fill={C.goldDeep} />
+        <circle cx={100} cy={4} r={3.5} fill={C.goldDeep} />
+
+        {/* Central medallion / laurel */}
+        <circle cx={100} cy={56} r={11} fill={C.paper} stroke={C.goldDeep} strokeWidth={1.4} />
+        <circle cx={100} cy={56} r={6} fill={C.goldDeep} opacity={0.18} />
+        <path
+          d="M94 56 L106 56 M100 50 L100 62"
+          stroke={C.goldDeep}
+          strokeWidth={1.2}
+        />
+
+        {/* Label below */}
+        <text
+          x={100}
+          y={234}
+          fill={C.inkSoft}
+          fontFamily={MONO}
+          fontSize={15}
+          fontWeight={700}
+          letterSpacing="0.22em"
+          textAnchor="middle"
+        >
+          THE PALACE
+        </text>
+      </g>
+
+      {/* ─────  Curved bezier connectors — palace → wings  ───── */}
+      <g
+        fill="none"
+        stroke="url(#connector)"
+        strokeWidth={1.6}
+        strokeDasharray="4 6"
+        strokeDashoffset={dashOffset}
+        opacity={sLines * 0.85}
+      >
+        <path d="M460 220 C460 270, 200 270, 160 320" />
+        <path d="M460 220 C460 280, 460 280, 460 320" />
+        <path d="M460 220 C460 270, 720 270, 760 320" />
+      </g>
+
+      {/* ─────────────────  WINGS  ───────────────── */}
+      {wings.map((wing) => (
+        <g
+          key={wing.label}
+          opacity={sWings}
+          transform={`translate(${wing.cx}, ${330 + (1 - sWings) * 16})`}
+        >
+          {/* Ground shadow */}
+          <ellipse cx={6} cy={142} rx={92} ry={4} fill="rgba(26,20,16,0.18)" />
+
+          {/* Right side panel — perspective hint (back face peeking) */}
+          <path d="M76 0 L88 6 L88 134 L76 140 Z" fill={C.paperDeep} />
+
+          {/* Roof — front face + side shadow */}
+          <path d="M-82 0 L0 -34 L82 0 Z" fill="url(#roof)" stroke={C.goldDeep} strokeWidth={1.4} />
+          <path d="M82 0 L88 6 L0 -28 L0 -34 Z" fill={C.goldDeep} opacity={0.85} />
+          {/* Roof crest line */}
+          <line x1={0} y1={-34} x2={0} y2={-30} stroke={C.paperDeep} strokeWidth={1.5} />
+
+          {/* Building wall — front face */}
+          <rect
+            x={-78}
+            y={0}
+            width={156}
+            height={136}
+            fill="url(#wall)"
+            stroke={C.goldDeep}
+            strokeWidth={1.6}
+          />
+
+          {/* Cornice line under roof */}
+          <line x1={-78} y1={6} x2={78} y2={6} stroke={C.goldDeep} strokeOpacity="0.4" strokeWidth={0.8} />
+
+          {/* Two LIT windows with radial gold glow */}
+          {[-42, 42].map((wx) => (
+            <g key={wx} transform={`translate(${wx - 18}, 22)`} opacity={winPulse}>
+              {/* Frame */}
+              <rect width={36} height={36} rx={1} fill="url(#window-glow)" stroke={C.goldDeep} strokeWidth={1.4} />
+              {/* Mullions */}
+              <line x1={18} y1={0} x2={18} y2={36} stroke={C.goldDeep} strokeOpacity="0.7" strokeWidth={1.1} />
+              <line x1={0} y1={18} x2={36} y2={18} stroke={C.goldDeep} strokeOpacity="0.7" strokeWidth={1.1} />
+              {/* Sill */}
+              <rect x={-2} y={36} width={40} height={2.4} fill={C.goldDeep} />
+            </g>
+          ))}
+
+          {/* Door */}
+          <rect x={-12} y={88} width={24} height={48} fill={C.inkSoft} stroke={C.goldDeep} strokeWidth={1.2} />
+          <circle cx={6} cy={113} r={1.6} fill={C.gold} />
+          {/* Step under door */}
+          <rect x={-16} y={134} width={32} height={2.4} fill={C.goldDeep} />
+
+          {/* Roof-side small chimney (right) */}
+          <rect x={36} y={-18} width={6} height={10} fill={C.goldDeep} />
+
+          {/* Foundation line */}
+          <line x1={-86} y1={138} x2={94} y2={138} stroke={C.goldDeep} strokeWidth={1} />
+
+          {/* Label below */}
+          <text
+            x={4}
+            y={166}
+            fill={C.inkSoft}
+            fontFamily={MONO}
+            fontSize={13}
+            fontWeight={700}
+            letterSpacing="0.16em"
+            textAnchor="middle"
+          >
+            WING · {wing.label}
+          </text>
+        </g>
+      ))}
+
+      {/* ─────  Connectors — middle wing → rooms  ───── */}
+      <g
+        fill="none"
+        stroke="url(#connector)"
+        strokeWidth={1.4}
+        strokeDasharray="3 5"
+        strokeDashoffset={dashOffset * 0.7}
+        opacity={sLines * 0.75}
+      >
+        <path d="M460 502 C460 540, 200 540, 160 568" />
+        <path d="M460 502 C460 545, 460 545, 460 568" />
+        <path d="M460 502 C460 540, 720 540, 760 568" />
+      </g>
+
+      {/* ─────────────────  ROOMS — engraved nameplates  ───────────────── */}
+      {rooms.map((room, i) => (
+        <g
+          key={room.label}
+          opacity={sRooms}
+          transform={`translate(${room.cx}, ${574 + (1 - sRooms) * 12})`}
+        >
+          {/* Drop shadow */}
+          <ellipse cx={0} cy={70} rx={88} ry={3} fill="rgba(26,20,16,0.16)" />
+          {/* Plaque body */}
+          <rect
+            x={-92}
+            y={0}
+            width={184}
+            height={66}
+            rx={6}
+            fill="url(#plaque)"
+            stroke={C.goldDeep}
+            strokeWidth={1.8}
+          />
+          {/* Inner inset border */}
+          <rect
+            x={-86}
+            y={5}
+            width={172}
+            height={56}
+            rx={4}
+            fill="none"
+            stroke={C.gold}
+            strokeOpacity="0.6"
+            strokeWidth={0.8}
+          />
+          {/* Tiny corner studs */}
+          {[
+            [-82, 10],
+            [82, 10],
+            [-82, 56],
+            [82, 56],
+          ].map(([x, y]) => (
+            <circle key={`${x}-${y}`} cx={x} cy={y} r={1.6} fill={C.goldDeep} />
+          ))}
+          {/* Room name in serif italic */}
+          <text
+            x={0}
+            y={40}
+            fill={C.ink}
+            fontFamily={SERIF}
+            fontSize={26}
+            fontWeight={600}
+            textAnchor="middle"
+            fontStyle="italic"
+          >
+            {room.label}
+          </text>
+          {/* Gold underscore ornament */}
+          <line x1={-22} y1={50} x2={22} y2={50} stroke={C.goldDeep} strokeWidth={1.4} />
+          <circle cx={0} cy={50} r={2} fill={C.goldDeep} />
+          {/* Tiny mono label below plaque */}
+          <text
+            x={0}
+            y={86}
+            fill={C.inkSoft}
+            fontFamily={MONO}
+            fontSize={11}
+            fontWeight={700}
+            letterSpacing="0.22em"
+            textAnchor="middle"
+          >
+            ROOM · {String(i + 1).padStart(2, "0")}
+          </text>
+        </g>
+      ))}
+
+      {/* ─────  Connectors — middle room → drawers (target each drawer cx + 78 mid)  ───── */}
+      <g
+        fill="none"
+        stroke="url(#connector)"
+        strokeWidth={1.2}
+        strokeDasharray="2 4"
+        strokeDashoffset={dashOffset * 0.5}
+        opacity={sLines * 0.65}
+      >
+        <path d="M460 670 C460 690, 220 690, 199 712" />
+        <path d="M460 670 C460 695, 373 695, 373 712" />
+        <path d="M460 670 C460 695, 547 695, 547 712" />
+        <path d="M460 670 C460 690, 700 690, 721 712" />
+      </g>
+
+      {/* ─────────────────  DRAWERS — readable memory cards  ───────────────── */}
+      <g opacity={sDrawers}>
+        {drawers.map((d, i) => (
+          <g
+            key={d.time}
+            transform={`translate(${d.cx}, ${712 + (1 - sDrawers) * 8})`}
+          >
+            {/* Shadow */}
+            <ellipse cx={78} cy={92} rx={76} ry={3} fill="rgba(26,20,16,0.18)" />
+            {/* Drawer body */}
+            <rect
+              x={0}
+              y={0}
+              width={156}
+              height={88}
+              rx={5}
+              fill="url(#drawer-body)"
+              stroke={C.goldDeep}
+              strokeWidth={1.5}
+            />
+            {/* Top tab — gold strip */}
+            <rect x={0} y={0} width={156} height={20} rx={5} fill={C.goldDeep} />
+            <rect x={0} y={14} width={156} height={6} fill={C.goldDeep} />
+            {/* Tab inner highlight */}
+            <line x1={4} y1={3} x2={152} y2={3} stroke={C.gold} strokeOpacity="0.7" strokeWidth={0.8} />
+            {/* Time label inside tab */}
+            <text
+              x={10}
+              y={14}
+              fill={C.paper}
+              fontFamily={MONO}
+              fontSize={10}
+              fontWeight={700}
+              letterSpacing="0.1em"
+            >
+              {d.time}
+            </text>
+            {/* Two pull rings */}
+            <circle cx={56} cy={11} r={2.4} fill={C.paper} opacity={0.55} />
+            <circle cx={108} cy={11} r={2.4} fill={C.paper} opacity={0.55} />
+            {/* Memory body — primary line */}
+            <text
+              x={10}
+              y={44}
+              fill={C.ink}
+              fontFamily={MONO}
+              fontSize={12}
+              fontWeight={700}
+            >
+              {d.body}
+            </text>
+            {/* Memory body — secondary tag */}
+            <text
+              x={10}
+              y={64}
+              fill={C.inkSoft}
+              fontFamily={MONO}
+              fontSize={10}
+              fontWeight={500}
+              opacity={0.85}
+            >
+              · {d.tag}
+            </text>
+            {/* Bottom hairline */}
+            <line x1={6} y1={78} x2={150} y2={78} stroke={C.goldDeep} strokeOpacity="0.35" strokeWidth={0.8} />
+            {/* Index marker */}
+            <text
+              x={148}
+              y={64}
+              fill={C.goldDeep}
+              fontFamily={MONO}
+              fontSize={9}
+              fontWeight={700}
+              textAnchor="end"
+              opacity={0.55}
+            >
+              #{String(i + 1).padStart(2, "0")}
+            </text>
+          </g>
+        ))}
+        {/* Caption beneath drawer row */}
+        <g transform="translate(460, 815)">
+          <line x1={-80} y1={0} x2={-26} y2={0} stroke={C.goldDeep} strokeOpacity="0.4" strokeWidth={1} />
+          <line x1={26} y1={0} x2={80} y2={0} stroke={C.goldDeep} strokeOpacity="0.4" strokeWidth={1} />
+          <text
+            x={0}
+            y={5}
+            fill={C.inkSoft}
+            fontFamily={MONO}
+            fontSize={13}
+            fontWeight={700}
+            letterSpacing="0.22em"
+            textAnchor="middle"
+          >
+            DRAWERS · MEMORIES
+          </text>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+const Scene5: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Pill in top
+  const pillOp = fadeIn(frame, 0, 14);
+
+  // Aristotle / Cicero quote block — type each name in
+  const aristotleOp = fadeIn(frame, 12);
+  const ciceroOp = fadeIn(frame, 30);
+
+  // Headline
+  const headOp = fadeIn(frame, 48, 18);
+  const headY = interpolate(frame, [48, 70], [22, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // bottom caption — "word-for-word"
+  const capOp = fadeIn(frame, 320);
+  const capY = interpolate(frame, [320, 350], [16, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const exit = fadeOut(frame, SCENES.S5.dur - 16, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <PaperBg frame={frame} />
+
+      {/* Pill */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP - 20,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: pillOp,
+        }}
+      >
+        <Pill bg="rgba(184,137,61,0.14)" fg={C.goldDeep} border="rgba(184,137,61,0.40)">
+          ANCIENT GREEK · 500 BC
+        </Pill>
+      </div>
+
+      {/* Quote attributions */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 40,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          fontFamily: SERIF,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            gap: 48,
+            fontSize: 38,
+            color: C.inkSoft,
+            fontStyle: "italic",
+          }}
+        >
+          <span style={{ opacity: aristotleOp }}>
+            <span style={{ color: C.gold }}>—&nbsp;</span>Aristotle
+          </span>
+          <span style={{ opacity: ciceroOp }}>
+            <span style={{ color: C.gold }}>—&nbsp;</span>Cicero
+          </span>
+        </div>
+        <div
+          style={{
+            marginTop: 4,
+            fontSize: 22,
+            color: C.inkSoft,
+            opacity: aristotleOp * 0.7,
+            fontFamily: MONO,
+            letterSpacing: "0.12em",
+          }}
+        >
+          USED THIS · 2,400 YEARS
+        </div>
+      </div>
+
+      {/* Headline */}
+      <div
+        style={{
+          position: "absolute",
+          top: 460,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          padding: "0 60px",
+          opacity: headOp,
+          transform: `translateY(${headY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontSize: 64,
+            fontWeight: 700,
+            color: C.ink,
+            letterSpacing: "-0.035em",
+            lineHeight: 1.0,
+          }}
+        >
+          Your projects become<br />
+          <span style={{ fontFamily: SERIF, fontStyle: "italic", color: C.goldDeep }}>
+            a building you can walk.
+          </span>
+        </div>
+      </div>
+
+      {/* Architecture diagram */}
+      <ArchitectureDiagram frame={frame} fps={fps} />
+
+      {/* Bottom caption — "word-for-word" */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1410,
+          textAlign: "center",
+          opacity: capOp,
+          transform: `translateY(${capY}px)`,
+          padding: "0 60px",
+        }}
+      >
+        <div
+          style={{
+            display: "inline-block",
+            padding: "20px 32px",
+            background: "rgba(26,20,16,0.06)",
+            border: `1px solid rgba(184,137,61,0.30)`,
+            borderRadius: 16,
+            fontFamily: MONO,
+            fontSize: 28,
+            color: C.ink,
+            fontWeight: 600,
+            letterSpacing: "-0.01em",
+          }}
+        >
+          word-for-word · <span style={{ color: C.goldDeep }}>open on demand</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 6 — THE HOOK MAGIC (with screen recording)
+// "There's a hook that fires right before context compaction.
+//  this setup already saved it. Locally."
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene6: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Title
+  const titleOp = fadeIn(frame, 0, 14);
+  const titleY = interpolate(frame, [0, 18], [22, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Hook diagram pop in
+  const hookSpring = sp(frame, fps, 1.5, "snappy");
+  const hookOp = interpolate(hookSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const hookY = interpolate(hookSpring, [0, 1], [40, 0]);
+
+  // Locally pill — 7s
+  const localOp = fadeIn(frame, 230);
+  const localY = interpolate(frame, [230, 255], [22, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Pulse on the hook arrow
+  const pulse = (Math.sin(frame * 0.18) + 1) * 0.5;
+
+  const exit = fadeOut(frame, SCENES.S6.dur - 16, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="emerald" />
+
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP - 8,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+          padding: "0 60px",
+        }}
+      >
+        <Pill bg="rgba(0,210,148,0.10)" fg={C.emerald} border="rgba(0,210,148,0.35)" dot={C.emerald}>
+          THE PRE-COMPACTION HOOK
+        </Pill>
+        <div
+          style={{
+            marginTop: 22,
+            fontSize: 60,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.035em",
+            lineHeight: 1.05,
+          }}
+        >
+          Fires the second Claude<br />
+          is <span style={{ color: C.emerald }}>about to forget.</span>
+        </div>
+      </div>
+
+      {/* Hook flow diagram */}
+      <Sequence from={50} durationInFrames={SCENES.S6.dur}>
+        <AbsoluteFill style={{ opacity: hookOp, transform: `translateY(${hookY}px)` }}>
+          <HookFlowDiagram frame={frame - 50} pulse={pulse} />
+        </AbsoluteFill>
+      </Sequence>
+
+      {/* Screen recording */}
+      <Sequence from={120} durationInFrames={SCENES.S6.dur - 120}>
+        <ScreenRecording />
+      </Sequence>
+
+      {/* Bottom locally pill */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: H - SAFE_BOT_Y + 40,
+          display: "flex",
+          justifyContent: "center",
+          gap: 16,
+          opacity: localOp,
+          transform: `translateY(${localY}px)`,
+        }}
+      >
+        <Pill bg="rgba(0,210,148,0.12)" fg={C.emerald} border="rgba(0,210,148,0.40)" dot={C.emerald} size={24}>
+          SAVED LOCALLY · 0 NETWORK
+        </Pill>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+const HookFlowDiagram: React.FC<{ frame: number; pulse: number }> = ({
+  frame,
+  pulse,
+}) => {
+  // 3-step pipe diagram: [CTX FULL] → [HOOK FIRES] → [SAVED]
+  const t1 = tween(frame, 0, 16, 0, 1);
+  const t2 = tween(frame, 24, 16, 0, 1);
+  const t3 = tween(frame, 50, 16, 0, 1);
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 540,
+        left: 60,
+        right: 60,
+        display: "flex",
+        flexDirection: "column",
+        gap: 18,
+      }}
+    >
+      {/* Row 1 — CTX FULL */}
+      <div
+        style={{
+          opacity: t1,
+          transform: `translateY(${(1 - t1) * 14}px)`,
+          background: C.surface,
+          border: `1px solid ${C.borderLoud}`,
+          borderRadius: 18,
+          padding: "20px 24px",
+          display: "flex",
+          alignItems: "center",
+          gap: 16,
+          fontFamily: MONO,
+          color: C.fgSoft,
+        }}
+      >
+        <div
+          style={{
+            width: 12,
+            height: 12,
+            borderRadius: 999,
+            background: "#fcbb00",
+            boxShadow: "0 0 14px rgba(252,187,0,0.45)",
+          }}
+        />
+        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "0.04em" }}>
+          context window · 98% full
+        </div>
+        <div
+          style={{
+            marginLeft: "auto",
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            color: "#fcbb00",
+            fontSize: 18,
+            fontWeight: 600,
+          }}
+        >
+          <span style={{ width: 80, height: 6, borderRadius: 999, background: "rgba(255,255,255,0.06)", overflow: "hidden", display: "inline-block" }}>
+            <span
+              style={{
+                display: "block",
+                width: "98%",
+                height: "100%",
+                background: "linear-gradient(90deg, #fcbb00, #ef4444)",
+              }}
+            />
+          </span>
+        </div>
+      </div>
+
+      {/* Arrow + HOOK */}
+      <div
+        style={{
+          opacity: t2,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 10,
+          transform: `translateY(${(1 - t2) * 14}px)`,
+        }}
+      >
+        <div
+          style={{
+            width: 4,
+            height: 36,
+            background: `linear-gradient(${C.fgDim}, ${C.emerald})`,
+            borderRadius: 999,
+          }}
+        />
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            padding: "16px 28px",
+            background: `linear-gradient(135deg, rgba(0,210,148,0.18), rgba(0,135,90,0.12))`,
+            border: `1px solid rgba(0,210,148,${0.4 + pulse * 0.3})`,
+            borderRadius: 999,
+            fontFamily: MONO,
+            color: C.emerald,
+            fontWeight: 700,
+            fontSize: 24,
+            letterSpacing: "0.05em",
+            boxShadow: `0 0 ${30 + pulse * 30}px rgba(0,210,148,${0.18 + pulse * 0.12})`,
+          }}
+        >
+          {/* Inline hook icon — emerald, no external file */}
+          <svg width={26} height={26} viewBox="0 0 24 24" fill="none">
+            <path
+              d="M12 3 L12 13 A4 4 0 1 1 8 17"
+              stroke={C.emerald}
+              strokeWidth={2.4}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <circle cx={12} cy={3} r={1.6} fill={C.emerald} />
+          </svg>
+          PRE-COMPACTION HOOK FIRES
+        </div>
+        <div
+          style={{
+            width: 4,
+            height: 36,
+            background: `linear-gradient(${C.emerald}, ${C.fgDim})`,
+            borderRadius: 999,
+          }}
+        />
+      </div>
+
+      {/* SAVED */}
+      <div
+        style={{
+          opacity: t3,
+          transform: `translateY(${(1 - t3) * 14}px)`,
+          background: `linear-gradient(135deg, rgba(0,210,148,0.08), rgba(0,135,90,0.04))`,
+          border: `1px solid rgba(0,210,148,0.35)`,
+          borderRadius: 18,
+          padding: "20px 24px",
+          display: "flex",
+          alignItems: "center",
+          gap: 16,
+          fontFamily: MONO,
+          color: C.fg,
+        }}
+      >
+        <Img
+          src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+          style={{
+            width: 28,
+            height: 28,
+            filter: "brightness(0) saturate(100%) invert(72%) sepia(76%) saturate(363%) hue-rotate(95deg) brightness(91%) contrast(86%)",
+          }}
+        />
+        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "0.04em" }}>
+          memory persisted · ~/.mempalace/
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Screen recording placed in stylized terminal frame
+const ScreenRecording: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // mempalace.mov is 7.15s × 60fps = 545 native frames; we'll loop using OffthreadVideo
+  const op = fadeIn(frame, 0, 18);
+  const enterY = interpolate(frame, [0, 24], [40, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        opacity: op,
+        transform: `translateY(${enterY}px)`,
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: 1010,
+          left: 80,
+          right: 80,
+          height: 460,
+          borderRadius: 22,
+          overflow: "hidden",
+          background: C.surface,
+          border: `1px solid ${C.borderLoud}`,
+          boxShadow:
+            "0 30px 80px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06)",
+        }}
+      >
+        {/* title bar */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            padding: "14px 20px",
+            background: "rgba(255,255,255,0.04)",
+            borderBottom: `1px solid ${C.border}`,
+          }}
+        >
+          <div style={{ width: 11, height: 11, borderRadius: 999, background: "#ff5f57" }} />
+          <div style={{ width: 11, height: 11, borderRadius: 999, background: "#febc2e" }} />
+          <div style={{ width: 11, height: 11, borderRadius: 999, background: "#28c840" }} />
+          <div
+            style={{
+              marginLeft: 14,
+              fontFamily: MONO,
+              fontSize: 16,
+              color: C.fgMuted,
+              letterSpacing: "0.05em",
+            }}
+          >
+            ~/.mempalace · live
+          </div>
+          <div
+            style={{
+              marginLeft: "auto",
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              fontFamily: MONO,
+              fontSize: 14,
+              color: C.emerald,
+              letterSpacing: "0.1em",
+              fontWeight: 600,
+            }}
+          >
+            <span
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: 999,
+                background: C.emerald,
+                boxShadow: `0 0 8px ${C.emerald}`,
+              }}
+            />
+            REC
+          </div>
+        </div>
+        {/* video */}
+        <div style={{ position: "relative", width: "100%", height: "100%", background: "#000" }}>
+          {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+          {/* subtle scanline overlay for "screen rec" feel */}
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              backgroundImage: `repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px)`,
+              pointerEvents: "none",
+              mixBlendMode: "overlay",
+            }}
+          />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 7 — SOCIAL PROOF
+// "Zero-Human Company · 79 employees · USC professor · locally · 0 API · 0 sub · MIT"
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene7: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Pill in
+  const titleOp = fadeIn(frame, 0, 14);
+  const titleY = interpolate(frame, [0, 18], [22, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // 79 counter
+  const seventyNineCount = Math.round(tween(frame, 30, 40, 0, 79));
+
+  // Stagger the 6 stat cards
+  const cards = [
+    {
+      kicker: "DEPLOYED AT",
+      head: "Zero-Human Co.",
+      sub: `${seventyNineCount} employees`,
+      tint: C.emerald,
+      delay: 0.5,
+      mono: false,
+    },
+    {
+      kicker: "ARCHITECTURE",
+      head: "USC professor",
+      sub: "blessed",
+      tint: "#fcbb00",
+      delay: 1.0,
+      mono: false,
+    },
+    {
+      kicker: "RUNTIME",
+      head: "100% local",
+      sub: "no cloud",
+      tint: C.emerald,
+      delay: 1.5,
+      mono: false,
+    },
+    {
+      kicker: "API CALLS",
+      head: "0",
+      sub: "zero outbound",
+      tint: C.emerald,
+      delay: 2.0,
+      mono: true,
+    },
+    {
+      kicker: "SUBSCRIPTION",
+      head: "$0",
+      sub: "forever",
+      tint: C.emerald,
+      delay: 2.5,
+      mono: true,
+    },
+    {
+      kicker: "LICENSE",
+      head: "MIT",
+      sub: "fork it",
+      tint: C.indigo,
+      delay: 3.0,
+      mono: true,
+    },
+  ];
+
+  const exit = fadeOut(frame, SCENES.S7.dur - 16, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="emerald" />
+
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP - 8,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+          padding: "0 60px",
+        }}
+      >
+        <Pill bg="rgba(0,210,148,0.10)" fg={C.emerald} border="rgba(0,210,148,0.35)" dot={C.emerald}>
+          SHIPPED · APPROVED · OPEN
+        </Pill>
+        <div
+          style={{
+            marginTop: 22,
+            fontSize: 64,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.035em",
+            lineHeight: 1.05,
+          }}
+        >
+          Already in production.<br />
+          <span style={{ color: C.fgMuted }}>Reviewed.</span>
+          <span style={{ color: C.fg }}> Free.</span>
+        </div>
+      </div>
+
+      {/* Stat grid 2x3 */}
+      <div
+        style={{
+          position: "absolute",
+          top: 660,
+          left: 60,
+          right: 60,
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: 16,
+        }}
+      >
+        {cards.map((c, i) => {
+          const cs = sp(frame, fps, c.delay, "snappy");
+          const op = interpolate(cs, [0, 0.4], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const y = interpolate(cs, [0, 1], [40, 0]);
+          return (
+            <div
+              key={c.kicker}
+              style={{
+                opacity: op,
+                transform: `translateY(${y}px)`,
+                background: C.surface,
+                border: `1px solid ${C.borderLoud}`,
+                borderRadius: 22,
+                padding: "26px 26px",
+                position: "relative",
+                overflow: "hidden",
+                boxShadow: "0 18px 50px -10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05)",
+              }}
+            >
+              {/* tint bar */}
+              <div
+                style={{
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                  bottom: 0,
+                  width: 4,
+                  background: c.tint,
+                }}
+              />
+              <div
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 14,
+                  color: c.tint,
+                  letterSpacing: "0.16em",
+                  fontWeight: 600,
+                }}
+              >
+                {c.kicker}
+              </div>
+              <div
+                style={{
+                  marginTop: 10,
+                  fontSize: c.mono ? 84 : 44,
+                  fontFamily: c.mono ? MONO : FONT,
+                  fontWeight: c.mono ? 700 : 700,
+                  color: C.fg,
+                  letterSpacing: "-0.04em",
+                  lineHeight: 1,
+                }}
+              >
+                {c.head}
+              </div>
+              <div
+                style={{
+                  marginTop: 10,
+                  fontSize: 22,
+                  color: C.fgMuted,
+                  fontWeight: 500,
+                  letterSpacing: "-0.01em",
+                }}
+              >
+                {c.sub}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 8 — CTA
+// "Comment 'AI' below and I'll share the official GitHub repo plus
+//  the Claude Code setup. Once Claude actually remembers what you taught it...
+//  you're done with every other memory tool."
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene8: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Headline letters
+  const head = "COMMENT";
+
+  // 'AI' — gradient + WebkitBackgroundClip do not propagate to per-letter
+  // child spans, so animate as a single unit via parent transform
+  const aiSpring = sp(frame, fps, 0.55, "bouncy");
+  const aiOp = interpolate(aiSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const aiY = interpolate(aiSpring, [0, 1], [50, 0]);
+  const aiScale = interpolate(aiSpring, [0, 0.55, 1], [0.7, 1.1, 1]);
+
+  // Big CTA in
+  const subOp = fadeIn(frame, 36);
+  const subY = interpolate(frame, [36, 60], [22, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // payload chips
+  const c1 = sp(frame, fps, 1.6, "snappy");
+  const c2 = sp(frame, fps, 1.9, "snappy");
+
+  // closer line
+  const closerOp = fadeIn(frame, 96);
+  const closerY = interpolate(frame, [96, 124], [22, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // arrow bounce — points to comment area
+  const arrowAt = 150;
+  const arrowOp = fadeIn(frame, arrowAt, 12);
+  const arrowBounce = (Math.sin((frame - arrowAt) * 0.18) + 1) * 0.5;
+  const arrowY = arrowBounce * 14;
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT }}>
+      <DarkBg frame={frame} tint="indigo" />
+
+      {/* Top context */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP - 10,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: fadeIn(frame, 0, 12),
+        }}
+      >
+        <Pill bg="rgba(98,95,255,0.12)" fg="#a4b3ff" border="rgba(98,95,255,0.40)" dot={C.indigo}>
+          GET THE REPO
+        </Pill>
+      </div>
+
+      {/* Big "COMMENT 'AI'" */}
+      <div
+        style={{
+          position: "absolute",
+          top: 480,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          padding: "0 50px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            fontSize: 156,
+            fontWeight: 800,
+            color: C.fg,
+            letterSpacing: "-0.06em",
+            lineHeight: 0.95,
+          }}
+        >
+          {letterStagger(head, frame, fps, 0.05, 0.04).map((s, i) => (
+            <span
+              key={`h-${i}`}
+              style={{
+                display: "inline-block",
+                opacity: s.opacity,
+                transform: `translateY(${s.y}px) scale(${s.scale})`,
+              }}
+            >
+              {s.ch}
+            </span>
+          ))}
+        </div>
+        <div
+          style={{
+            marginTop: 16,
+            fontSize: 240,
+            fontWeight: 800,
+            letterSpacing: "-0.07em",
+            lineHeight: 0.92,
+            background: `linear-gradient(135deg, ${C.indigo} 0%, #a4b3ff 100%)`,
+            WebkitBackgroundClip: "text",
+            backgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            filter: `drop-shadow(0 0 40px rgba(98,95,255,0.45))`,
+            opacity: aiOp,
+            transform: `translateY(${aiY}px) scale(${aiScale})`,
+            transformOrigin: "center",
+          }}
+        >
+          'AI'
+        </div>
+      </div>
+
+      {/* Sub: "I'll DM you the repo" */}
+      <div
+        style={{
+          position: "absolute",
+          top: 980,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: subOp,
+          transform: `translateY(${subY}px)`,
+          padding: "0 70px",
+        }}
+      >
+        <div
+          style={{
+            fontSize: 36,
+            color: C.fgSoft,
+            fontWeight: 500,
+            letterSpacing: "-0.01em",
+            lineHeight: 1.3,
+          }}
+        >
+          and I'll send you the repo +<br />
+          one-line setup
+        </div>
+      </div>
+
+      {/* Payload chips */}
+      <div
+        style={{
+          position: "absolute",
+          top: 1130,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          gap: 14,
+        }}
+      >
+        <div
+          style={{
+            opacity: interpolate(c1, [0, 0.4], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }),
+            transform: `translateY(${interpolate(c1, [0, 1], [20, 0])}px) scale(${interpolate(c1, [0, 0.6, 1], [0.9, 1.04, 1])})`,
+          }}
+        >
+          <div
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 12,
+              padding: "14px 22px",
+              background: "rgba(255,255,255,0.06)",
+              border: `1px solid ${C.borderLoud}`,
+              borderRadius: 999,
+              fontFamily: MONO,
+              fontSize: 22,
+              color: C.fg,
+              fontWeight: 600,
+            }}
+          >
+            <Img
+              src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+              style={{ width: 22, height: 22, filter: "brightness(0) invert(1)" }}
+            />
+            github repo
+          </div>
+        </div>
+        <div
+          style={{
+            opacity: interpolate(c2, [0, 0.4], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }),
+            transform: `translateY(${interpolate(c2, [0, 1], [20, 0])}px) scale(${interpolate(c2, [0, 0.6, 1], [0.9, 1.04, 1])})`,
+          }}
+        >
+          <div
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 12,
+              padding: "14px 22px",
+              background: "rgba(98,95,255,0.10)",
+              border: `1px solid rgba(98,95,255,0.40)`,
+              borderRadius: 999,
+              fontFamily: MONO,
+              fontSize: 22,
+              color: "#a4b3ff",
+              fontWeight: 600,
+            }}
+          >
+            <Img
+              src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+              style={{
+                width: 22,
+                height: 22,
+                filter: "brightness(0) saturate(100%) invert(70%) sepia(15%) saturate(2300%) hue-rotate(214deg) brightness(108%) contrast(101%)",
+              }}
+            />
+            claude-code setup
+          </div>
+        </div>
+      </div>
+
+      {/* Closer */}
+      <div
+        style={{
+          position: "absolute",
+          top: 1280,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          padding: "0 80px",
+          opacity: closerOp,
+          transform: `translateY(${closerY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontSize: 32,
+            fontFamily: SERIF,
+            fontStyle: "italic",
+            color: C.fgMuted,
+            letterSpacing: "-0.01em",
+            lineHeight: 1.35,
+          }}
+        >
+          Once Claude remembers what you taught it…<br />
+          <span style={{ color: C.fg, fontWeight: 600 }}>
+            you're done with every other memory tool.
+          </span>
+        </div>
+      </div>
+
+      {/* Arrow pointing down to comment field */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: H - SAFE_BOT_Y - 60,
+          display: "flex",
+          justifyContent: "center",
+          opacity: arrowOp,
+          transform: `translateY(${arrowY}px)`,
+        }}
+      >
+        <svg width={92} height={92} viewBox="0 0 92 92">
+          <defs>
+            <linearGradient id="arr-grad" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={C.indigo} />
+              <stop offset="100%" stopColor="#a4b3ff" />
+            </linearGradient>
+          </defs>
+          <circle cx={46} cy={46} r={42} fill="rgba(98,95,255,0.12)" stroke="rgba(98,95,255,0.4)" strokeWidth={1.5} />
+          <path
+            d="M46 22 L46 64 M28 50 L46 68 L64 50"
+            stroke="url(#arr-grad)"
+            strokeWidth={5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        </svg>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// COMPOSITION ROOT
+// ═══════════════════════════════════════════════════════════════════════════
+
+export const MemPalaceReel: React.FC = () => {
+  return (
+    <AbsoluteFill style={{ background: C.bg }}>
+      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+
+      <Sequence from={SCENES.S1.from} durationInFrames={SCENES.S1.dur}>
+        <Scene1 />
+      </Sequence>
+      <Sequence from={SCENES.S2.from} durationInFrames={SCENES.S2.dur}>
+        <Scene2 />
+      </Sequence>
+      <Sequence from={SCENES.S3.from} durationInFrames={SCENES.S3.dur}>
+        <Scene3 />
+      </Sequence>
+      <Sequence from={SCENES.S4.from} durationInFrames={SCENES.S4.dur}>
+        <Scene4 />
+      </Sequence>
+      <Sequence from={SCENES.S5.from} durationInFrames={SCENES.S5.dur}>
+        <Scene5 />
+      </Sequence>
+      <Sequence from={SCENES.S6.from} durationInFrames={SCENES.S6.dur}>
+        <Scene6 />
+      </Sequence>
+      <Sequence from={SCENES.S7.from} durationInFrames={SCENES.S7.dur}>
+        <Scene7 />
+      </Sequence>
+      <Sequence from={SCENES.S8.from} durationInFrames={SCENES.S8.dur}>
+        <Scene8 />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};