@devinilabs/reelstack 1.2.0

package/reference/forbidden/heretic.tsx

@@ -0,0 +1,2636 @@
+/**
+ * REFERENCE — HereticReel  (Family: forbidden)
+ *
+ * Canonical example of the forbidden 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/HereticReel.tsx
+ * Bundled at: 2026-05-08T18:50:39.540Z
+ */
+import React from "react";
+import {
+  AbsoluteFill,
+  Audio,
+  Easing,
+  Img,
+  OffthreadVideo,
+  Sequence,
+  interpolate,
+  spring,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// TIMING — 54.64s @ 30fps = 1639 frames
+// Beats locked to whisper-cli SRT of heretic-voiceover.wav
+// ═══════════════════════════════════════════════════════════════
+export const HERETIC_TOTAL = 1639;
+
+export const HBEAT = {
+  hook: 0,         // 00.00s — "Strip the censorship right out of any open source AI..."
+  refusal: 144,    // 04.80s — "ChatGPT won't tell you. Claude refuses. Gemini dodges..."
+  reveal: 385,     // 12.84s — "It's called Heretic. And it decensors..."
+  mechanism: 716,  // 23.88s — "Here's the smart part. It finds the exact pattern..."
+  brains: 961,     // 32.04s — "And the wild part? Without breaking intelligence..."
+  stars: 1219,     // 40.64s — "Already at almost 20,000 stars on GitHub..."
+  cta: 1500,       // 50.00s — "Like, subscribe, check pinned comment..."
+  end: 1639,       // 54.64s
+} as const;
+
+// GSAP-equivalent easing curves mapped onto Remotion's `interpolate`.
+export const ease = {
+  power2Out: Easing.bezier(0.165, 0.84, 0.44, 1),
+  power3Out: Easing.bezier(0.215, 0.61, 0.355, 1),
+  power4Out: Easing.bezier(0.165, 0.84, 0.44, 1),
+  expoOut: Easing.bezier(0.19, 1, 0.22, 1),
+  expoIn: Easing.bezier(0.7, 0, 0.84, 0),
+  backOut: Easing.bezier(0.34, 1.56, 0.64, 1),
+  inOut: Easing.bezier(0.45, 0, 0.55, 1),
+};
+
+// ═══════════════════════════════════════════════════════════════
+// FORBIDDEN GLASS PALETTE — cream-rose paper + ember/crimson/ultraviolet/plasma
+// ═══════════════════════════════════════════════════════════════
+export const C = {
+  bg: "#F2EBE5",
+  bgWarm: "#EFE3DB",
+  bgCool: "#ECE6E8",
+  ink: "#0E0B12",
+  inkSoft: "#26222A",
+  inkMuted: "#5A5560",
+  inkDim: "#8A848F",
+  hairline: "rgba(15,11,18,0.08)",
+  // Scene-coded accent stops, desaturated agency-tier
+  ember: "#D97757",       // burning orange
+  crimson: "#C4506B",     // deep rose / refusal
+  ultraviolet: "#6B5BD9", // nightshade / mechanism
+  plasma: "#A87FE8",      // electric violet / stars
+  // Glass — slightly more opaque than Graphify because cream bg has less tonal contrast
+  glassFill: "rgba(255,255,255,0.46)",
+  glassFillStrong: "rgba(255,255,255,0.66)",
+  glassBorder: "rgba(255,255,255,0.88)",
+  glassInner: "rgba(255,255,255,0.55)",
+} as const;
+
+export const FONT = ds.font.sans;
+export const MONO = ds.font.mono;
+
+// Tinted shadow (rule: tint to bg hue, not pure black).
+const GLASS_SHADOW = [
+  "0 24px 48px -12px rgba(120,80,120,0.22)",
+  "0 8px 16px -4px rgba(120,80,120,0.12)",
+  "inset 0 1.5px 0 rgba(255,255,255,0.95)",
+  "inset 0 -1px 0 rgba(255,255,255,0.30)",
+].join(", ");
+
+export const glassBase: React.CSSProperties = {
+  background: C.glassFill,
+  backdropFilter: "blur(32px) saturate(180%)",
+  WebkitBackdropFilter: "blur(32px) saturate(180%)",
+  border: `1.5px solid ${C.glassBorder}`,
+  boxShadow: GLASS_SHADOW,
+};
+
+const SAFE_TOP = 290;
+
+// ═══════════════════════════════════════════════════════════════
+// PERPETUAL CAUSTIC BLOBS (Forbidden palette)
+// ═══════════════════════════════════════════════════════════════
+const CausticBlobs: React.FC = () => {
+  const frame = useCurrentFrame();
+  const t = frame / 30;
+  const blob = (
+    color: string,
+    size: number,
+    cx: number,
+    cy: number,
+    speedX: number,
+    speedY: number,
+    phase: number,
+    opacity = 0.55,
+  ): React.CSSProperties => ({
+    position: "absolute",
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    background: `radial-gradient(circle at 50% 50%, ${color} 0%, ${color}99 30%, transparent 70%)`,
+    filter: "blur(120px)",
+    left: cx + Math.sin(t * speedX + phase) * 220,
+    top: cy + Math.cos(t * speedY + phase) * 160,
+    opacity,
+    pointerEvents: "none",
+    willChange: "transform",
+  });
+  return (
+    <AbsoluteFill style={{ overflow: "hidden" }}>
+      <div style={blob(C.ember, 720, 80, 220, 0.18, 0.13, 0.0, 0.6)} />
+      <div style={blob(C.ultraviolet, 820, 600, 540, 0.14, 0.16, 1.2, 0.55)} />
+      <div style={blob(C.crimson, 700, 200, 1100, 0.11, 0.19, 2.4, 0.5)} />
+      <div style={blob(C.plasma, 540, 720, 1500, 0.16, 0.12, 3.6, 0.4)} />
+      <div style={blob(C.ember, 600, 100, 1700, 0.12, 0.18, 4.2, 0.4)} />
+    </AbsoluteFill>
+  );
+};
+
+const HairlineGrid: React.FC<{ opacity?: number }> = ({ opacity = 0.06 }) => (
+  <AbsoluteFill
+    style={{
+      backgroundImage: `linear-gradient(${C.ink} 1px, transparent 1px), linear-gradient(90deg, ${C.ink} 1px, transparent 1px)`,
+      backgroundSize: "60px 60px",
+      opacity,
+      pointerEvents: "none",
+    }}
+  />
+);
+
+// ═══════════════════════════════════════════════════════════════
+// IRIDESCENT RING — conic gradient using Forbidden stops
+// ═══════════════════════════════════════════════════════════════
+const IridescentRing: React.FC<{
+  size: number;
+  thickness?: number;
+  speed?: number;
+  borderRadius?: number;
+}> = ({ size, thickness = 4, speed = 0.5, borderRadius = 9999 }) => {
+  const frame = useCurrentFrame();
+  const angle = (frame * speed) % 360;
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: -thickness,
+        width: size + thickness * 2,
+        height: size + thickness * 2,
+        borderRadius: borderRadius + thickness,
+        background: `conic-gradient(from ${angle}deg, ${C.ember}, ${C.crimson}, ${C.ultraviolet}, ${C.plasma}, ${C.ember})`,
+        padding: thickness,
+        pointerEvents: "none",
+        opacity: 0.85,
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          background: C.bg,
+          borderRadius,
+        }}
+      />
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// GLASS CARD + EYEBROW PILL
+// ═══════════════════════════════════════════════════════════════
+const GlassCard: React.FC<{
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  radius?: number;
+}> = ({ style, children, radius = 32 }) => (
+  <div style={{ ...glassBase, borderRadius: radius, ...style }}>{children}</div>
+);
+
+const EyebrowPill: React.FC<{ children: React.ReactNode; dot?: string }> = ({
+  children,
+  dot = C.ultraviolet,
+}) => (
+  <div
+    style={{
+      ...glassBase,
+      borderRadius: 9999,
+      padding: "10px 22px",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 10,
+      fontFamily: MONO,
+      fontSize: 18,
+      fontWeight: 500,
+      color: C.inkSoft,
+      letterSpacing: "0.18em",
+      textTransform: "uppercase",
+    }}
+  >
+    <div
+      style={{
+        width: 7,
+        height: 7,
+        borderRadius: "50%",
+        background: dot,
+        boxShadow: `0 0 14px ${dot}`,
+      }}
+    />
+    {children}
+  </div>
+);
+
+// ═══════════════════════════════════════════════════════════════
+// STAGGERED WORD REVEAL (fade-up + blur, GSAP-style stagger)
+// ═══════════════════════════════════════════════════════════════
+const StaggeredWords: React.FC<{
+  text: string;
+  startFrame: number;
+  perWordDelay?: number;
+  duration?: number;
+  fontSize: number;
+  fontWeight?: number;
+  color?: string;
+  letterSpacing?: string;
+  lineHeight?: number;
+  align?: "left" | "center" | "right";
+  fontFamily?: string;
+  highlight?: string;
+  highlightColor?: string;
+}> = ({
+  text,
+  startFrame,
+  perWordDelay = 4,
+  duration = 24,
+  fontSize,
+  fontWeight = 700,
+  color = C.ink,
+  letterSpacing = "-0.035em",
+  lineHeight = 1.02,
+  align = "left",
+  fontFamily = FONT,
+  highlight,
+  highlightColor = C.ultraviolet,
+}) => {
+  const frame = useCurrentFrame();
+  const words = text.split(" ");
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "0.25em",
+        justifyContent:
+          align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start",
+        textAlign: align,
+        fontFamily,
+        fontSize,
+        fontWeight,
+        color,
+        letterSpacing,
+        lineHeight,
+      }}
+    >
+      {words.map((w, i) => {
+        const wordStart = startFrame + i * perWordDelay;
+        const local = frame - wordStart;
+        const opacity = interpolate(local, [0, duration], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.expoOut,
+        });
+        const y = interpolate(local, [0, duration], [40, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.power3Out,
+        });
+        const blur = interpolate(local, [0, duration], [12, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        const isHighlight = highlight && w.toLowerCase().includes(highlight.toLowerCase());
+        return (
+          <span
+            key={i}
+            style={{
+              display: "inline-block",
+              opacity,
+              transform: `translateY(${y}px)`,
+              filter: `blur(${blur}px)`,
+              color: isHighlight ? highlightColor : color,
+              willChange: "transform, opacity, filter",
+            }}
+          >
+            {w}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCRAMBLE TEXT — random glyphs resolve to actual chars
+// ═══════════════════════════════════════════════════════════════
+const ScrambleText: React.FC<{
+  text: string;
+  startFrame: number;
+  duration: number;
+  fontSize: number;
+  fontWeight?: number;
+  color?: string;
+  fontFamily?: string;
+  letterSpacing?: string;
+}> = ({
+  text,
+  startFrame,
+  duration,
+  fontSize,
+  fontWeight = 800,
+  color = C.ink,
+  fontFamily = FONT,
+  letterSpacing = "-0.06em",
+}) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+  const progress = Math.min(1, local / duration);
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#%&!*";
+  const resolved = Math.floor(progress * text.length);
+  const out = text
+    .split("")
+    .map((ch, i) => {
+      if (i < resolved) return ch;
+      if (ch === " ") return " ";
+      const seed = (frame + i * 7) % chars.length;
+      return chars[seed];
+    })
+    .join("");
+  return (
+    <div
+      style={{
+        fontFamily,
+        fontSize,
+        fontWeight,
+        color,
+        letterSpacing,
+        lineHeight: 1,
+        whiteSpace: "pre",
+      }}
+    >
+      {out}
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// COUNTER — eased number ticker
+// ═══════════════════════════════════════════════════════════════
+const Counter: React.FC<{
+  from: number;
+  to: number;
+  startFrame: number;
+  duration: number;
+  format?: (n: number) => string;
+  style?: React.CSSProperties;
+  easing?: (n: number) => number;
+}> = ({ from, to, startFrame, duration, format, style, easing = ease.expoOut }) => {
+  const frame = useCurrentFrame();
+  const value = interpolate(frame, [startFrame, startFrame + duration], [from, to], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing,
+  });
+  return <span style={style}>{format ? format(value) : Math.round(value).toString()}</span>;
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SONAR RINGS / PARTICLE BURST / LIGHT BEAM / FLOATING GLYPHS
+// (Forbidden palette variants, palette-shifted from GraphifyReel)
+// ═══════════════════════════════════════════════════════════════
+const SonarRings: React.FC<{ accent?: string }> = ({ accent = C.ember }) => {
+  const frame = useCurrentFrame();
+  const rings = [0, 18, 36, 54, 72];
+  return (
+    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
+      {rings.map((birth, i) => {
+        const local = frame - birth;
+        const cycle = local % 90;
+        if (local < 0) return null;
+        const scale = interpolate(cycle, [0, 90], [0.05, 1.4], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.expoOut,
+        });
+        const op = interpolate(cycle, [0, 30, 90], [0, 0.55, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              width: 1400,
+              height: 1400,
+              borderRadius: "50%",
+              border: `2px solid ${i % 2 === 0 ? accent : C.crimson}`,
+              transform: `scale(${scale})`,
+              opacity: op,
+              willChange: "transform, opacity",
+            }}
+          />
+        );
+      })}
+    </AbsoluteFill>
+  );
+};
+
+const ParticleBurst: React.FC<{ count?: number }> = ({ count = 48 }) => {
+  const frame = useCurrentFrame();
+  const palette = [C.ember, C.crimson, C.ultraviolet, C.plasma];
+  const particles = Array.from({ length: count }, (_, i) => {
+    const angle = (i / count) * Math.PI * 2 + i * 0.31;
+    const distance = 200 + (i % 7) * 80;
+    const size = 6 + (i % 4) * 4;
+    const color = palette[i % 4];
+    const delay = (i * 0.7) % 24;
+    return { angle, distance, size, color, delay };
+  });
+  return (
+    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
+      {particles.map((p, i) => {
+        const local = Math.max(0, frame - p.delay);
+        const burst = interpolate(local, [0, 50], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.expoOut,
+        });
+        const drift = Math.sin((frame + i * 12) * 0.04) * 12;
+        const x = Math.cos(p.angle) * p.distance * burst + drift;
+        const y = Math.sin(p.angle) * p.distance * burst * 1.4 + drift * 0.6;
+        const op = interpolate(local, [0, 20, 100, 180], [0, 0.85, 0.5, 0.2], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              width: p.size,
+              height: p.size,
+              borderRadius: "50%",
+              background: p.color,
+              boxShadow: `0 0 ${p.size * 2}px ${p.color}`,
+              transform: `translate(${x}px, ${y}px)`,
+              opacity: op,
+              willChange: "transform, opacity",
+            }}
+          />
+        );
+      })}
+    </AbsoluteFill>
+  );
+};
+
+const LightBeam: React.FC<{ delay: number; angle: number }> = ({ delay, angle }) => {
+  const frame = useCurrentFrame();
+  const local = frame - delay;
+  const progress = interpolate(local, [0, 60], [-0.3, 1.3], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.expoOut,
+  });
+  const op = interpolate(local, [0, 12, 50, 60], [0, 0.7, 0.7, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        width: 2200,
+        height: 100,
+        background: `linear-gradient(90deg, transparent 0%, ${C.ember}88 30%, ${C.crimson}cc 50%, ${C.ultraviolet}88 70%, transparent 100%)`,
+        filter: "blur(20px)",
+        transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${(progress - 0.5) * 1500}px)`,
+        opacity: op,
+        willChange: "transform, opacity",
+      }}
+    />
+  );
+};
+
+const FloatingGlyphs: React.FC = () => {
+  const frame = useCurrentFrame();
+  const glyphs = [
+    { x: 120, y: 380, size: 80, delay: 4, rot: -8 },
+    { x: 880, y: 340, size: 60, delay: 12, rot: 12 },
+    { x: 80, y: 1240, size: 70, delay: 22, rot: 6 },
+    { x: 920, y: 1280, size: 90, delay: 32, rot: -10 },
+    { x: 200, y: 800, size: 50, delay: 42, rot: 14 },
+    { x: 820, y: 760, size: 55, delay: 52, rot: -4 },
+  ];
+  return (
+    <>
+      {glyphs.map((g, i) => {
+        const local = frame - g.delay;
+        const op = interpolate(local, [0, 30], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.expoOut,
+        });
+        const float = Math.sin((frame + i * 22) * 0.05) * 8;
+        const scale = spring({
+          frame: local,
+          fps: 30,
+          config: { damping: 12, stiffness: 110 },
+          from: 0.6,
+          to: 1,
+        });
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: g.x,
+              top: g.y + float,
+              width: g.size,
+              height: g.size,
+              borderRadius: g.size * 0.28,
+              background: C.glassFill,
+              backdropFilter: "blur(20px) saturate(160%)",
+              WebkitBackdropFilter: "blur(20px) saturate(160%)",
+              border: `1px solid ${C.glassBorder}`,
+              boxShadow: "inset 0 1px 0 rgba(255,255,255,0.85), 0 8px 16px -4px rgba(120,80,120,0.18)",
+              transform: `rotate(${g.rot}deg) scale(${scale})`,
+              opacity: op * 0.85,
+              willChange: "transform, opacity",
+            }}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SHATTER LOCK — lock icon fragments into shards (Scene 1)
+// ═══════════════════════════════════════════════════════════════
+const ShatterLock: React.FC<{ startFrame: number }> = ({ startFrame }) => {
+  const frame = useCurrentFrame();
+  const local = frame - startFrame;
+  const shatterAt = 30; // when the lock breaks
+
+  // Lock body before shatter
+  const wholeOpacity = interpolate(local, [0, 12, shatterAt - 2, shatterAt], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const wholeScale = spring({
+    frame: local,
+    fps: 30,
+    config: { damping: 14, stiffness: 130 },
+    from: 0.5,
+    to: 1,
+  });
+
+  // 18 shards bursting outward post-shatter
+  const shards = Array.from({ length: 18 }, (_, i) => {
+    const angle = (i / 18) * Math.PI * 2 + (i % 3) * 0.4;
+    const dist = 180 + (i % 5) * 40;
+    const rotSpeed = (i % 2 === 0 ? 1 : -1) * (1.2 + (i % 3) * 0.6);
+    const size = 18 + (i % 4) * 6;
+    return { angle, dist, rotSpeed, size };
+  });
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 660,
+        display: "flex",
+        justifyContent: "center",
+        pointerEvents: "none",
+      }}
+    >
+      <div style={{ position: "relative", width: 280, height: 280 }}>
+        {/* Whole lock (before shatter) */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            opacity: wholeOpacity,
+            transform: `scale(${wholeScale})`,
+            willChange: "transform, opacity",
+          }}
+        >
+          <Img
+            src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+            style={{
+              width: 220,
+              height: 220,
+              filter: `drop-shadow(0 0 24px ${C.crimson}88) drop-shadow(0 0 8px ${C.ember})`,
+            }}
+          />
+        </div>
+
+        {/* Shatter shards */}
+        {local >= shatterAt &&
+          shards.map((s, i) => {
+            const shLocal = local - shatterAt;
+            const t = interpolate(shLocal, [0, 60], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+              easing: ease.power3Out,
+            });
+            const x = Math.cos(s.angle) * s.dist * t;
+            const y = Math.sin(s.angle) * s.dist * t + t * t * 60;
+            const rot = shLocal * s.rotSpeed * 6;
+            const op = interpolate(shLocal, [0, 8, 60], [1, 1, 0], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            });
+            const colorIdx = i % 4;
+            const color = [C.crimson, C.ember, C.ultraviolet, C.ink][colorIdx];
+            return (
+              <div
+                key={i}
+                style={{
+                  position: "absolute",
+                  left: "50%",
+                  top: "50%",
+                  width: s.size,
+                  height: s.size,
+                  background: color,
+                  clipPath:
+                    i % 3 === 0
+                      ? "polygon(0 0, 100% 30%, 70% 100%, 0 80%)"
+                      : i % 3 === 1
+                        ? "polygon(20% 0, 100% 50%, 60% 100%, 0 60%)"
+                        : "polygon(0 20%, 80% 0, 100% 80%, 30% 100%)",
+                  transform: `translate(-50%, -50%) translate(${x}px, ${y}px) rotate(${rot}deg)`,
+                  opacity: op,
+                  boxShadow: `0 0 12px ${color}`,
+                  willChange: "transform, opacity",
+                }}
+              />
+            );
+          })}
+      </div>
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 1 — HOOK (0–144, 4.8s)
+// "Strip the censorship right out of any open source AI. With one command."
+// ═══════════════════════════════════════════════════════════════
+const HookScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const heroScale = spring({
+    frame: frame - 4,
+    fps: 30,
+    config: { damping: 14, stiffness: 130 },
+    from: 0.78,
+    to: 1,
+  });
+  const heroBlur = interpolate(frame, [4, 28], [16, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.expoOut,
+  });
+  return (
+    <AbsoluteFill>
+      <SonarRings accent={C.ember} />
+      <LightBeam delay={0} angle={-18} />
+      <LightBeam delay={20} angle={22} />
+      <LightBeam delay={50} angle={-12} />
+      <FloatingGlyphs />
+      <ParticleBurst />
+      <ShatterLock startFrame={0} />
+
+      {/* Eyebrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 24,
+          left: 80,
+          opacity: interpolate(frame, [2, 22], [0, 1], { extrapolateRight: "clamp" }),
+          transform: `translateY(${interpolate(frame, [2, 22], [16, 0], { extrapolateRight: "clamp", easing: ease.power3Out })}px)`,
+        }}
+      >
+        <EyebrowPill dot={C.ember}>01 — heretic</EyebrowPill>
+      </div>
+
+      {/* Hero — left-aligned (anti-center bias rule) */}
+      <AbsoluteFill
+        style={{
+          alignItems: "flex-start",
+          justifyContent: "center",
+          padding: "0 80px",
+          transform: `scale(${heroScale})`,
+          filter: `blur(${heroBlur}px)`,
+          willChange: "transform, filter",
+        }}
+      >
+        <div style={{ width: "100%", textAlign: "left" }}>
+          <StaggeredWords
+            text="Strip the"
+            startFrame={4}
+            perWordDelay={2}
+            fontSize={92}
+            fontWeight={500}
+            color={C.inkMuted}
+            align="left"
+            letterSpacing="-0.025em"
+          />
+          <div style={{ height: 4 }} />
+          <ScrambleText
+            text="CENSORSHIP."
+            startFrame={18}
+            duration={42}
+            fontSize={148}
+            fontWeight={800}
+            color={C.crimson}
+            letterSpacing="-0.06em"
+          />
+          <div style={{ height: 6 }} />
+          <StaggeredWords
+            text="right out of any open-source AI."
+            startFrame={64}
+            perWordDelay={3}
+            fontSize={68}
+            fontWeight={700}
+            color={C.ink}
+            align="left"
+            letterSpacing="-0.035em"
+            highlight="open-source"
+            highlightColor={C.ultraviolet}
+          />
+        </div>
+
+        {/* Iridescent divider */}
+        <div
+          style={{
+            width: 280,
+            height: 5,
+            borderRadius: 999,
+            margin: "32px 0",
+            background: `linear-gradient(90deg, ${C.ember}, ${C.crimson}, ${C.ultraviolet})`,
+            opacity: interpolate(frame, [50, 80], [0, 1], { extrapolateRight: "clamp" }),
+            transform: `scaleX(${interpolate(frame, [50, 90], [0, 1], { extrapolateRight: "clamp", easing: ease.expoOut })})`,
+            transformOrigin: "left",
+            boxShadow: `0 0 24px ${C.crimson}66`,
+          }}
+        />
+
+        {/* Closing terminal pill */}
+        <div
+          style={{
+            opacity: interpolate(frame, [86, 116], [0, 1], { extrapolateRight: "clamp" }),
+            transform: `translateX(${interpolate(frame, [86, 116], [40, 0], { extrapolateRight: "clamp", easing: ease.power3Out })}px)`,
+          }}
+        >
+          <div
+            style={{
+              ...glassBase,
+              borderRadius: 9999,
+              padding: "12px 26px",
+              fontFamily: MONO,
+              fontSize: 24,
+              fontWeight: 600,
+              color: C.ink,
+              letterSpacing: "0.04em",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 12,
+            }}
+          >
+            <span style={{ color: C.ember }}>$</span>
+            <span>with one command.</span>
+            <span
+              style={{
+                width: 10,
+                height: 22,
+                background: C.ink,
+                opacity: Math.floor(frame / 8) % 2 === 0 ? 0.9 : 0,
+              }}
+            />
+          </div>
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// REFUSAL CARD — brand glass tile + crimson "REFUSE" stamp + glitch
+// ═══════════════════════════════════════════════════════════════
+const RefusalCard: React.FC<{
+  iconPath: string;
+  brand: string;
+  refusalText: string;
+  startFrame: number;
+  index: number;
+  iconBg?: string;
+  invertIcon?: boolean;
+}> = ({ iconPath, brand, refusalText, startFrame, index, iconBg = "#F7F4F0", invertIcon = false }) => {
+  const frame = useCurrentFrame();
+  const enter = startFrame + index * 8;
+  const local = frame - enter;
+  const opacity = interpolate(local, [0, 22], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const y = interpolate(local, [0, 28], [60, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.power3Out,
+  });
+  const scale = spring({
+    frame: local,
+    fps: 30,
+    config: { damping: 13, stiffness: 130 },
+    from: 0.85,
+    to: 1,
+  });
+  // Stamp arrives ~14 frames after card mounts and overshoots
+  const stampLocal = local - 14;
+  const stampOpacity = interpolate(stampLocal, [0, 12], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const stampScale = spring({
+    frame: stampLocal,
+    fps: 30,
+    config: { damping: 8, stiffness: 140 },
+    from: 1.6,
+    to: 1,
+  });
+  // RGB-channel-split glitch on stamp for ~8 frames at impact
+  const glitch = interpolate(stampLocal, [0, 4, 8], [4, 2, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div
+      style={{
+        opacity,
+        transform: `translateY(${y}px) scale(${scale})`,
+        willChange: "transform, opacity",
+        flex: 1,
+      }}
+    >
+      <GlassCard radius={28} style={{ padding: 28, position: "relative", overflow: "hidden" }}>
+        <div
+          style={{
+            width: 78,
+            height: 78,
+            borderRadius: 20,
+            background: iconBg,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginBottom: 18,
+          }}
+        >
+          <Img
+            src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+            style={{
+              width: 50,
+              height: 50,
+              filter: invertIcon ? "invert(1)" : "none",
+            }}
+          />
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 28,
+            fontWeight: 700,
+            color: C.ink,
+            letterSpacing: "-0.02em",
+            lineHeight: 1,
+          }}
+        >
+          {brand}
+        </div>
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 14,
+            color: C.inkDim,
+            letterSpacing: "0.1em",
+            textTransform: "uppercase",
+            marginTop: 8,
+          }}
+        >
+          response
+        </div>
+
+        {/* REFUSE stamp */}
+        <div
+          style={{
+            position: "absolute",
+            right: -8,
+            bottom: 18,
+            transform: `rotate(-8deg) scale(${stampScale})`,
+            opacity: stampOpacity,
+            pointerEvents: "none",
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 38,
+              fontWeight: 800,
+              letterSpacing: "0.08em",
+              padding: "8px 18px",
+              border: `3px solid ${C.crimson}`,
+              color: C.crimson,
+              textTransform: "uppercase",
+              borderRadius: 8,
+              background: "rgba(255,255,255,0.5)",
+              textShadow: `${glitch}px 0 0 ${C.ember}, ${-glitch}px 0 0 ${C.ultraviolet}`,
+            }}
+          >
+            {refusalText}
+          </div>
+        </div>
+      </GlassCard>
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// PYTHON CARD — single glass card + iridescent ring scaling in
+// ═══════════════════════════════════════════════════════════════
+const PythonCard: React.FC<{ startFrame: number }> = ({ startFrame }) => {
+  const frame = useCurrentFrame();
+  const local = frame - startFrame;
+  const opacity = interpolate(local, [0, 18], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const scale = spring({
+    frame: local,
+    fps: 30,
+    config: { damping: 12, stiffness: 110 },
+    from: 0.6,
+    to: 1,
+  });
+  return (
+    <div
+      style={{
+        opacity,
+        transform: `scale(${scale})`,
+        willChange: "transform, opacity",
+        position: "relative",
+        width: 460,
+      }}
+    >
+      <IridescentRing size={460} thickness={3} speed={1.2} borderRadius={32} />
+      <div style={{ position: "relative" }}>
+        <GlassCard
+          radius={32}
+          style={{ padding: 36, background: C.glassFillStrong, textAlign: "center" }}
+        >
+          <Img
+            src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+            style={{ width: 110, height: 110, margin: "4px auto 18px" }}
+          />
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 36,
+              fontWeight: 700,
+              color: C.ink,
+              letterSpacing: "-0.025em",
+              lineHeight: 1,
+            }}
+          >
+            this Python tool.
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 16,
+              color: C.ultraviolet,
+              letterSpacing: "0.18em",
+              textTransform: "uppercase",
+              marginTop: 10,
+            }}
+          >
+            does it
+          </div>
+        </GlassCard>
+      </div>
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 2 — REFUSAL (144–385, 8.0s)
+// "ChatGPT won't tell you. Claude refuses. Gemini dodges around it.
+//  But this Python tool? It just does it."
+// ═══════════════════════════════════════════════════════════════
+const RefusalScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const local = frame - HBEAT.refusal;
+
+  // Cards exit at frame ~150 of local time, Python arrives ~155, "It just does it" at ~190
+  const cardExit = interpolate(local, [150, 180], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const cardExitY = interpolate(local, [150, 180], [0, -50], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.power3Out,
+  });
+
+  return (
+    <AbsoluteFill>
+      {/* Eyebrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 24,
+          left: 80,
+          opacity: interpolate(local, [0, 18], [0, 1], { extrapolateRight: "clamp" }),
+        }}
+      >
+        <EyebrowPill dot={C.crimson}>02 — the big three</EyebrowPill>
+      </div>
+
+      {/* Headline */}
+      <div style={{ position: "absolute", left: 80, right: 80, top: SAFE_TOP + 110 }}>
+        <StaggeredWords
+          text="Ask the Big Three."
+          startFrame={HBEAT.refusal + 6}
+          fontSize={86}
+          fontWeight={700}
+          color={C.ink}
+          align="left"
+          letterSpacing="-0.04em"
+          highlight="Three"
+          highlightColor={C.crimson}
+        />
+      </div>
+
+      {/* Three refusal cards */}
+      <div
+        style={{
+          position: "absolute",
+          left: 60,
+          right: 60,
+          top: SAFE_TOP + 280,
+          display: "flex",
+          gap: 20,
+          opacity: cardExit,
+          transform: `translateY(${cardExitY}px)`,
+        }}
+      >
+        <RefusalCard
+          iconPath="icons/openai.svg"
+          brand="ChatGPT"
+          refusalText="WON'T"
+          startFrame={HBEAT.refusal + 28}
+          index={0}
+          iconBg="#0E0B12"
+          invertIcon={true}
+        />
+        <RefusalCard
+          iconPath="icons/claude.svg"
+          brand="Claude"
+          refusalText="REFUSES"
+          startFrame={HBEAT.refusal + 28}
+          index={1}
+          iconBg="#F4EAE0"
+        />
+        <RefusalCard
+          iconPath="icons/gemini.svg"
+          brand="Gemini"
+          refusalText="DODGES"
+          startFrame={HBEAT.refusal + 28}
+          index={2}
+          iconBg="#EEF1F8"
+        />
+      </div>
+
+      {/* Python card */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1100,
+          display: "flex",
+          justifyContent: "center",
+          opacity: interpolate(local, [155, 175], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <PythonCard startFrame={HBEAT.refusal + 155} />
+      </div>
+
+      {/* Closing line */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1620,
+          textAlign: "center",
+          opacity: interpolate(local, [195, 220], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `scale(${spring({
+            frame: local - 195,
+            fps: 30,
+            config: { damping: 10, stiffness: 130 },
+            from: 0.85,
+            to: 1,
+          })})`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 86,
+            fontWeight: 800,
+            color: C.ink,
+            letterSpacing: "-0.04em",
+            lineHeight: 1,
+          }}
+        >
+          It just <span style={{ color: C.ultraviolet }}>does it.</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 3 — REVEAL (385–716, 11.0s)
+// "It's called Heretic. And it decensors basically any open source LLM,
+//  fully automatically. No fine-tuning, no training data, no manual setup."
+// ═══════════════════════════════════════════════════════════════
+const RevealScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const local = frame - HBEAT.reveal;
+  const introOpacity = interpolate(local, [0, 24], [0, 1], { extrapolateRight: "clamp" });
+  const titleOpacity = interpolate(local, [22, 56], [0, 1], { extrapolateRight: "clamp" });
+  const titleY = interpolate(local, [22, 70], [50, 0], {
+    extrapolateRight: "clamp",
+    easing: ease.expoOut,
+  });
+  const titleScale = spring({
+    frame: local - 22,
+    fps: 30,
+    config: { damping: 14, stiffness: 110 },
+    from: 0.92,
+    to: 1,
+  });
+  const ringRevealStart = 60;
+  const ringSize = interpolate(local, [ringRevealStart, ringRevealStart + 40], [0, 920], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.expoOut,
+  });
+
+  const chips = ["no fine-tuning", "no training data", "no manual setup"];
+
+  return (
+    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
+      <FloatingGlyphs />
+
+      <div
+        style={{
+          fontFamily: FONT,
+          fontSize: 56,
+          fontWeight: 500,
+          color: C.inkMuted,
+          opacity: introOpacity,
+          transform: `translateY(${interpolate(local, [0, 24], [16, 0], { extrapolateRight: "clamp", easing: ease.power3Out })}px)`,
+          marginBottom: 28,
+          letterSpacing: "-0.02em",
+        }}
+      >
+        It's called
+      </div>
+
+      {/* Title group with rotating conic halo behind */}
+      <div
+        style={{
+          position: "relative",
+          opacity: titleOpacity,
+          transform: `translateY(${titleY}px) scale(${titleScale})`,
+          willChange: "transform, opacity",
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            left: "50%",
+            top: "50%",
+            width: ringSize,
+            height: ringSize,
+            transform: "translate(-50%, -50%)",
+            borderRadius: "50%",
+            background: `conic-gradient(from ${frame * 0.6}deg, ${C.ember}, ${C.crimson}, ${C.ultraviolet}, ${C.plasma}, ${C.ember})`,
+            filter: "blur(80px)",
+            opacity: 0.6,
+          }}
+        />
+        <div
+          style={{
+            position: "relative",
+            fontFamily: FONT,
+            fontSize: 240,
+            fontWeight: 800,
+            color: C.ink,
+            letterSpacing: "-0.07em",
+            lineHeight: 0.9,
+          }}
+        >
+          Heretic.
+        </div>
+      </div>
+
+      {/* Tagline */}
+      <div
+        style={{
+          marginTop: 28,
+          opacity: interpolate(local, [80, 120], [0, 1], { extrapolateRight: "clamp" }),
+          transform: `translateY(${interpolate(local, [80, 120], [12, 0], { extrapolateRight: "clamp", easing: ease.power3Out })}px)`,
+          fontFamily: MONO,
+          fontSize: 22,
+          color: C.inkMuted,
+          letterSpacing: "0.18em",
+          textTransform: "uppercase",
+          textAlign: "center",
+        }}
+      >
+        decensors any open-source LLM — fully automatic
+      </div>
+
+      {/* Triple chips */}
+      <div
+        style={{
+          marginTop: 64,
+          display: "flex",
+          gap: 16,
+          flexWrap: "wrap",
+          justifyContent: "center",
+          maxWidth: 980,
+        }}
+      >
+        {chips.map((c, i) => {
+          const cs = local - 150 - i * 10;
+          const op = interpolate(cs, [0, 18], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const sc = spring({
+            frame: cs,
+            fps: 30,
+            config: { damping: 12, stiffness: 130 },
+            from: 0.7,
+            to: 1,
+          });
+          return (
+            <div
+              key={i}
+              style={{
+                ...glassBase,
+                borderRadius: 9999,
+                padding: "16px 28px",
+                fontFamily: FONT,
+                fontSize: 28,
+                fontWeight: 600,
+                color: C.ink,
+                letterSpacing: "-0.02em",
+                opacity: op,
+                transform: `scale(${sc})`,
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 12,
+              }}
+            >
+              <span
+                style={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  background: [C.ember, C.crimson, C.ultraviolet][i],
+                  boxShadow: `0 0 12px ${[C.ember, C.crimson, C.ultraviolet][i]}`,
+                }}
+              />
+              {c}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Closing emphasis "nothing." */}
+      <div
+        style={{
+          marginTop: 60,
+          opacity: interpolate(local, [240, 280], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `scale(${spring({
+            frame: local - 240,
+            fps: 30,
+            config: { damping: 8, stiffness: 130 },
+            from: 0.7,
+            to: 1,
+          })})`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 86,
+            fontWeight: 800,
+            color: C.crimson,
+            letterSpacing: "-0.05em",
+            lineHeight: 1,
+          }}
+        >
+          nothing.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// WEIGHT MATRIX — 12×12 grid of glass tiles, one row gets extracted
+// ═══════════════════════════════════════════════════════════════
+const WeightMatrix: React.FC<{ startFrame: number; size?: number }> = ({
+  startFrame,
+  size = 720,
+}) => {
+  const frame = useCurrentFrame();
+  const local = frame - startFrame;
+  const cols = 12;
+  const rows = 12;
+  const cellSize = size / cols;
+  const gap = 4;
+  const refusalRow = 5; // the row that "triggers refusals" — gets removed
+
+  // Animation phases:
+  //   0–30: tiles fade in staggered
+  //   30–60: refusal-row tiles pulse ultraviolet (identifying)
+  //   60–95: refusal-row tiles dissolve (per-tile burst)
+  //   95+:   matrix sits with the row gone (continued perpetual pulse)
+
+  const tiles = [];
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const idx = r * cols + c;
+      const introDelay = (r + c) * 0.6;
+      const introLocal = local - introDelay;
+      const introOp = interpolate(introLocal, [0, 18], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+        easing: ease.expoOut,
+      });
+      const introScale = interpolate(introLocal, [0, 18], [0.4, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+        easing: ease.power3Out,
+      });
+
+      // Perpetual subtle pulse
+      const pulse = 1 + Math.sin((frame + idx * 4) * 0.06) * 0.02;
+
+      // Refusal-row identification (frames 30-60)
+      const isRefusal = r === refusalRow;
+      const idGlow = isRefusal
+        ? interpolate(local, [30, 50, 60], [0, 1, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          })
+        : 0;
+
+      // Refusal-row dissolution (frames 60-95) — per-tile delay so it sweeps L→R
+      const dissolveStart = 60 + c * 2;
+      const dissolveLocal = local - dissolveStart;
+      const dissolveOp = isRefusal
+        ? interpolate(dissolveLocal, [0, 16], [1, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          })
+        : 1;
+      const dissolveLift = isRefusal
+        ? interpolate(dissolveLocal, [0, 24], [0, -32], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.power3Out,
+          })
+        : 0;
+
+      const baseColor = isRefusal
+        ? `rgba(107,91,217,${0.08 + idGlow * 0.4})` // ultraviolet glow when identifying
+        : C.glassFill;
+
+      tiles.push(
+        <div
+          key={idx}
+          style={{
+            position: "absolute",
+            left: c * (cellSize + gap),
+            top: r * (cellSize + gap),
+            width: cellSize,
+            height: cellSize,
+            borderRadius: 8,
+            background: baseColor,
+            border: `1px solid ${isRefusal ? C.ultraviolet + "aa" : C.glassBorder}`,
+            backdropFilter: "blur(14px)",
+            WebkitBackdropFilter: "blur(14px)",
+            boxShadow: isRefusal
+              ? `0 0 ${idGlow * 18}px ${C.ultraviolet}, inset 0 1px 0 rgba(255,255,255,0.7)`
+              : "inset 0 1px 0 rgba(255,255,255,0.5)",
+            opacity: introOp * dissolveOp,
+            transform: `scale(${introScale * pulse}) translateY(${dissolveLift}px)`,
+            willChange: "transform, opacity",
+          }}
+        />,
+      );
+
+      // Per-tile dissolve particles (refusal row only)
+      if (isRefusal && dissolveLocal >= 0 && dissolveLocal <= 28) {
+        const pIdx = c * 3;
+        for (let p = 0; p < 3; p++) {
+          const angle = (p / 3) * Math.PI * 2 + pIdx * 0.5;
+          const dist = 30 + p * 20;
+          const t = interpolate(dissolveLocal, [0, 24], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.power3Out,
+          });
+          const px = Math.cos(angle) * dist * t;
+          const py = Math.sin(angle) * dist * t - t * 30;
+          const pop = interpolate(dissolveLocal, [0, 8, 24], [0.9, 0.9, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          tiles.push(
+            <div
+              key={`p${idx}-${p}`}
+              style={{
+                position: "absolute",
+                left: c * (cellSize + gap) + cellSize / 2,
+                top: r * (cellSize + gap) + cellSize / 2,
+                width: 5,
+                height: 5,
+                borderRadius: "50%",
+                background: C.ultraviolet,
+                boxShadow: `0 0 8px ${C.ultraviolet}`,
+                transform: `translate(${px}px, ${py}px)`,
+                opacity: pop,
+                pointerEvents: "none",
+              }}
+            />,
+          );
+        }
+      }
+    }
+  }
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: cols * (cellSize + gap),
+        height: rows * (cellSize + gap),
+      }}
+    >
+      {tiles}
+
+      {/* "REFUSAL DIRECTION" annotation */}
+      <div
+        style={{
+          position: "absolute",
+          left: cols * (cellSize + gap) + 24,
+          top: refusalRow * (cellSize + gap) + cellSize / 2 - 14,
+          fontFamily: MONO,
+          fontSize: 18,
+          fontWeight: 600,
+          color: C.ultraviolet,
+          letterSpacing: "0.18em",
+          textTransform: "uppercase",
+          opacity: interpolate(local, [40, 56, 90, 110], [0, 1, 1, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          whiteSpace: "nowrap",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        <span
+          style={{
+            width: 24,
+            height: 1,
+            background: C.ultraviolet,
+            boxShadow: `0 0 6px ${C.ultraviolet}`,
+          }}
+        />
+        refusal direction
+      </div>
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 4 — MECHANISM (716–961, 8.2s)
+// "Here's the smart part. It finds the exact pattern that triggers refusals
+//  and removes it from the weights. That's it."
+// Part A (0–125): WeightMatrix find + dissolve
+// Part B (125–245): heretic.mov clip in glass laptop frame
+// ═══════════════════════════════════════════════════════════════
+const MechanismScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const local = frame - HBEAT.mechanism;
+
+  // Part A → Part B handoff
+  const partAOpacity = interpolate(local, [110, 130], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const partBOpacity = interpolate(local, [120, 145], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const partBY = interpolate(local, [120, 152], [60, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.expoOut,
+  });
+  const tilt = interpolate(local, [120, 170], [-2, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.power3Out,
+  });
+
+  return (
+    <AbsoluteFill>
+      {/* Eyebrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 24,
+          left: 80,
+          opacity: interpolate(local, [0, 18], [0, 1], { extrapolateRight: "clamp" }),
+        }}
+      >
+        <EyebrowPill dot={C.ultraviolet}>03 — the mechanism</EyebrowPill>
+      </div>
+
+      {/* Headline */}
+      <div style={{ position: "absolute", left: 80, right: 80, top: SAFE_TOP + 110 }}>
+        <StaggeredWords
+          text="Find the pattern."
+          startFrame={HBEAT.mechanism + 6}
+          fontSize={68}
+          fontWeight={500}
+          color={C.inkMuted}
+          align="left"
+          letterSpacing="-0.03em"
+        />
+        <div style={{ height: 4 }} />
+        <StaggeredWords
+          text="Remove the weights."
+          startFrame={HBEAT.mechanism + 26}
+          fontSize={92}
+          fontWeight={800}
+          color={C.ink}
+          align="left"
+          letterSpacing="-0.04em"
+          highlight="Remove"
+          highlightColor={C.ultraviolet}
+        />
+      </div>
+
+      {/* Part A — Weight matrix (0–125) */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 700,
+          display: "flex",
+          justifyContent: "center",
+          opacity: partAOpacity,
+        }}
+      >
+        <WeightMatrix startFrame={HBEAT.mechanism + 25} size={700} />
+      </div>
+
+      {/* Part B — Glass laptop with heretic.mov */}
+      <div
+        style={{
+          position: "absolute",
+          left: 60,
+          right: 60,
+          top: 700,
+          height: 540,
+          opacity: partBOpacity,
+          transform: `translateY(${partBY}px) rotate(${tilt}deg) perspective(1400px) rotateX(4deg)`,
+          willChange: "transform, opacity",
+        }}
+      >
+        <div
+          style={{
+            ...glassBase,
+            borderRadius: 28,
+            padding: 14,
+            width: "100%",
+            height: "100%",
+            position: "relative",
+          }}
+        >
+          {/* Window controls */}
+          <div style={{ display: "flex", gap: 8, padding: "4px 6px 12px" }}>
+            <div style={{ width: 12, height: 12, borderRadius: 6, background: "#FF5F57" }} />
+            <div style={{ width: 12, height: 12, borderRadius: 6, background: "#FEBC2E" }} />
+            <div style={{ width: 12, height: 12, borderRadius: 6, background: "#28C840" }} />
+            <div
+              style={{
+                marginLeft: "auto",
+                fontFamily: MONO,
+                fontSize: 13,
+                color: C.inkDim,
+                letterSpacing: "0.05em",
+              }}
+            >
+              p-e-w/heretic
+            </div>
+          </div>
+
+          <Sequence from={HBEAT.mechanism + 125} durationInFrames={120}>
+            <div
+              style={{
+                width: "100%",
+                height: "calc(100% - 28px)",
+                borderRadius: 18,
+                overflow: "hidden",
+                background: "#0E0B12",
+              }}
+            >
+              {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+            </div>
+          </Sequence>
+        </div>
+      </div>
+
+      {/* Closing line "That's it." */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1340,
+          textAlign: "center",
+          opacity: interpolate(local, [200, 230], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `scale(${spring({
+            frame: local - 200,
+            fps: 30,
+            config: { damping: 9, stiffness: 130 },
+            from: 0.85,
+            to: 1,
+          })})`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 92,
+            fontWeight: 800,
+            color: C.ink,
+            letterSpacing: "-0.05em",
+            lineHeight: 1,
+          }}
+        >
+          That's it.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// BRAIN GRAPH — 8-node mini neural network, optionally dissolving
+// ═══════════════════════════════════════════════════════════════
+const BrainGraph: React.FC<{
+  startFrame: number;
+  dissolve?: boolean;
+  accent: string;
+}> = ({ startFrame, dissolve = false, accent }) => {
+  const frame = useCurrentFrame();
+  const local = frame - startFrame;
+  const nodes = [
+    { x: 70, y: 60, r: 14 },
+    { x: 200, y: 40, r: 18 },
+    { x: 320, y: 80, r: 16 },
+    { x: 90, y: 180, r: 16 },
+    { x: 220, y: 160, r: 22 },
+    { x: 340, y: 200, r: 14 },
+    { x: 130, y: 290, r: 18 },
+    { x: 270, y: 300, r: 16 },
+  ];
+  const edges: [number, number][] = [
+    [0, 1], [1, 2], [0, 3], [1, 4], [2, 5], [3, 4], [4, 5], [3, 6], [4, 6], [4, 7], [5, 7], [6, 7],
+  ];
+
+  // Dissolve = nodes scale down + alpha drops + particles burst
+  const dissolveProgress = dissolve
+    ? interpolate(local, [40, 110], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+        easing: ease.power3Out,
+      })
+    : 0;
+
+  return (
+    <svg width={420} height={360} viewBox="0 0 420 360" style={{ overflow: "visible" }}>
+      <defs>
+        <linearGradient id={`bg-edge-${dissolve ? "d" : "i"}`} x1="0" x2="1">
+          <stop offset="0" stopColor={accent} stopOpacity="0.7" />
+          <stop offset="1" stopColor={accent} stopOpacity="0.3" />
+        </linearGradient>
+      </defs>
+      {edges.map(([a, b], i) => {
+        const start = startFrame + 6 + i * 3;
+        const lf = frame - start;
+        const drawProgress = interpolate(lf, [0, 22], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.power3Out,
+        });
+        return (
+          <line
+            key={i}
+            x1={nodes[a].x}
+            y1={nodes[a].y}
+            x2={nodes[a].x + (nodes[b].x - nodes[a].x) * drawProgress}
+            y2={nodes[a].y + (nodes[b].y - nodes[a].y) * drawProgress}
+            stroke={`url(#bg-edge-${dissolve ? "d" : "i"})`}
+            strokeWidth={2}
+            strokeLinecap="round"
+            opacity={Math.max(0, drawProgress * (1 - dissolveProgress))}
+          />
+        );
+      })}
+      {nodes.map((n, i) => {
+        const ns = startFrame + i * 4;
+        const lf = frame - ns;
+        const sc = spring({
+          frame: lf,
+          fps: 30,
+          config: { damping: 11, stiffness: 130 },
+          from: 0,
+          to: 1,
+        });
+        const pulse = 1 + Math.sin((frame + i * 12) * 0.08) * 0.06;
+        const dScale = 1 - dissolveProgress;
+        return (
+          <g key={i}>
+            <circle
+              cx={n.x}
+              cy={n.y}
+              r={n.r * 2.2 * sc * pulse * dScale}
+              fill={accent}
+              opacity={0.18 * (1 - dissolveProgress)}
+            />
+            <circle
+              cx={n.x}
+              cy={n.y}
+              r={n.r * sc * pulse * dScale}
+              fill="white"
+              stroke={accent}
+              strokeWidth={2.5}
+              opacity={1 - dissolveProgress}
+            />
+          </g>
+        );
+      })}
+      {/* Dissolve particles */}
+      {dissolve &&
+        nodes.map((n, i) => {
+          const ds = local - 50 - i * 4;
+          if (ds < 0) return null;
+          const t = interpolate(ds, [0, 50], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.power3Out,
+          });
+          const angle = (i / nodes.length) * Math.PI * 2;
+          const dx = Math.cos(angle) * 80 * t;
+          const dy = Math.sin(angle) * 80 * t - t * 40;
+          const op = interpolate(ds, [0, 14, 50], [0.9, 0.9, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          return (
+            <circle
+              key={`d${i}`}
+              cx={n.x + dx}
+              cy={n.y + dy}
+              r={4}
+              fill={accent}
+              opacity={op}
+            />
+          );
+        })}
+    </svg>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 5 — BRAINS vs GUARDRAILS (961–1219, 8.6s)
+// "Without breaking the model's intelligence. So you keep the brains —
+//  you just lose the guardrails."
+// ═══════════════════════════════════════════════════════════════
+const BrainsScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const local = frame - HBEAT.brains;
+  return (
+    <AbsoluteFill>
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 24,
+          left: 80,
+          opacity: interpolate(local, [0, 18], [0, 1], { extrapolateRight: "clamp" }),
+        }}
+      >
+        <EyebrowPill dot={C.crimson}>04 — the wild part</EyebrowPill>
+      </div>
+
+      {/* Headline */}
+      <div style={{ position: "absolute", left: 80, right: 80, top: SAFE_TOP + 110 }}>
+        <StaggeredWords
+          text="Keep the brains."
+          startFrame={HBEAT.brains + 6}
+          fontSize={92}
+          fontWeight={800}
+          color={C.ink}
+          align="left"
+          letterSpacing="-0.04em"
+          highlight="brains"
+          highlightColor={C.ultraviolet}
+        />
+        <div style={{ height: 6 }} />
+        <StaggeredWords
+          text="Lose the guardrails."
+          startFrame={HBEAT.brains + 28}
+          fontSize={92}
+          fontWeight={800}
+          color={C.ink}
+          align="left"
+          letterSpacing="-0.04em"
+          highlight="guardrails"
+          highlightColor={C.crimson}
+        />
+      </div>
+
+      {/* Two split cards */}
+      <div
+        style={{
+          position: "absolute",
+          left: 60,
+          right: 60,
+          top: 800,
+          display: "flex",
+          gap: 24,
+        }}
+      >
+        {/* BRAINS card */}
+        <div
+          style={{
+            flex: 1,
+            opacity: interpolate(local, [50, 80], [0, 1], { extrapolateRight: "clamp" }),
+            transform: `translateY(${interpolate(local, [50, 80], [40, 0], { extrapolateRight: "clamp", easing: ease.power3Out })}px)`,
+          }}
+        >
+          <GlassCard radius={28} style={{ padding: 28, height: 540, position: "relative" }}>
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 14,
+                color: C.inkDim,
+                letterSpacing: "0.18em",
+                textTransform: "uppercase",
+                marginBottom: 14,
+              }}
+            >
+              brains · intact
+            </div>
+            <div style={{ display: "flex", justifyContent: "center", marginTop: 4 }}>
+              <BrainGraph startFrame={HBEAT.brains + 60} accent={C.ultraviolet} />
+            </div>
+            <div
+              style={{
+                position: "absolute",
+                bottom: 24,
+                left: 28,
+                right: 28,
+                display: "flex",
+                alignItems: "baseline",
+                justifyContent: "space-between",
+                borderTop: `1px solid ${C.hairline}`,
+                paddingTop: 16,
+              }}
+            >
+              <div style={{ fontFamily: MONO, fontSize: 14, color: C.inkDim }}>
+                CAPABILITY
+              </div>
+              <div
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 56,
+                  fontWeight: 700,
+                  color: C.ultraviolet,
+                  fontVariantNumeric: "tabular-nums",
+                  letterSpacing: "-0.04em",
+                  lineHeight: 1,
+                }}
+              >
+                <Counter
+                  from={0}
+                  to={99}
+                  startFrame={HBEAT.brains + 80}
+                  duration={70}
+                  format={(n) => Math.round(n).toString() + "%"}
+                />
+              </div>
+            </div>
+          </GlassCard>
+        </div>
+
+        {/* GUARDRAILS card (dissolving) */}
+        <div
+          style={{
+            flex: 1,
+            opacity: interpolate(local, [70, 100], [0, 1], { extrapolateRight: "clamp" }),
+            transform: `translateY(${interpolate(local, [70, 100], [40, 0], { extrapolateRight: "clamp", easing: ease.power3Out })}px)`,
+          }}
+        >
+          <GlassCard radius={28} style={{ padding: 28, height: 540, position: "relative" }}>
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 14,
+                color: C.inkDim,
+                letterSpacing: "0.18em",
+                textTransform: "uppercase",
+                marginBottom: 14,
+              }}
+            >
+              guardrails · removed
+            </div>
+            <div style={{ display: "flex", justifyContent: "center", marginTop: 4 }}>
+              <BrainGraph
+                startFrame={HBEAT.brains + 80}
+                dissolve={true}
+                accent={C.crimson}
+              />
+            </div>
+            <div
+              style={{
+                position: "absolute",
+                bottom: 24,
+                left: 28,
+                right: 28,
+                display: "flex",
+                alignItems: "baseline",
+                justifyContent: "space-between",
+                borderTop: `1px solid ${C.hairline}`,
+                paddingTop: 16,
+              }}
+            >
+              <div style={{ fontFamily: MONO, fontSize: 14, color: C.inkDim }}>
+                REFUSAL RATE
+              </div>
+              <div
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 56,
+                  fontWeight: 700,
+                  color: C.crimson,
+                  fontVariantNumeric: "tabular-nums",
+                  letterSpacing: "-0.04em",
+                  lineHeight: 1,
+                }}
+              >
+                <Counter
+                  from={100}
+                  to={2}
+                  startFrame={HBEAT.brains + 100}
+                  duration={90}
+                  format={(n) => Math.round(n).toString() + "%"}
+                />
+              </div>
+            </div>
+          </GlassCard>
+        </div>
+      </div>
+
+      {/* Footer caption */}
+      <div
+        style={{
+          position: "absolute",
+          left: 80,
+          right: 80,
+          top: 1500,
+          textAlign: "center",
+          opacity: interpolate(local, [180, 220], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 22,
+            color: C.inkMuted,
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+          }}
+        >
+          intelligence preserved · refusals removed
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// STAR SHOWER — 60 star polygons bursting from center
+// ═══════════════════════════════════════════════════════════════
+const StarShower: React.FC<{ startFrame: number }> = ({ startFrame }) => {
+  const frame = useCurrentFrame();
+  const local = frame - startFrame;
+  if (local < 0) return null;
+  const stars = Array.from({ length: 60 }, (_, i) => {
+    const angle = (i / 60) * Math.PI * 2 + (i % 5) * 0.3;
+    const dist = 240 + (i % 8) * 60;
+    const size = 14 + (i % 5) * 5;
+    const delay = (i % 12) * 1.5;
+    const color = i % 3 === 0 ? C.plasma : i % 3 === 1 ? C.ember : C.ultraviolet;
+    return { angle, dist, size, delay, color };
+  });
+  return (
+    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
+      {stars.map((s, i) => {
+        const lf = local - s.delay;
+        const burst = interpolate(lf, [0, 60], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.expoOut,
+        });
+        const drift = Math.sin((frame + i * 11) * 0.05) * 14;
+        const x = Math.cos(s.angle) * s.dist * burst + drift;
+        const y = Math.sin(s.angle) * s.dist * burst * 1.2 + drift * 0.5;
+        const op = interpolate(lf, [0, 18, 90, 160], [0, 0.95, 0.6, 0.15], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        const rot = (frame + i * 17) * 0.6;
+        return (
+          <svg
+            key={i}
+            width={s.size}
+            height={s.size}
+            viewBox="0 0 24 24"
+            style={{
+              position: "absolute",
+              transform: `translate(${x}px, ${y}px) rotate(${rot}deg)`,
+              opacity: op,
+              filter: `drop-shadow(0 0 ${s.size}px ${s.color})`,
+              willChange: "transform, opacity",
+            }}
+          >
+            <path
+              d="M12 2l2.85 6.34L22 9.27l-5.4 4.69 1.69 7.23L12 17.5l-6.29 3.69L7.4 13.96 2 9.27l7.15-.93z"
+              fill={s.color}
+            />
+          </svg>
+        );
+      })}
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 6 — STARS (1219–1500, 9.4s)
+// "Already at almost 20,000 stars on GitHub with over a thousand
+//  community-built models running on it. This thing's blowing up fast."
+// ═══════════════════════════════════════════════════════════════
+const StarsScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const local = frame - HBEAT.stars;
+  return (
+    <AbsoluteFill>
+      <StarShower startFrame={HBEAT.stars + 50} />
+
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 24,
+          left: 80,
+          opacity: interpolate(local, [0, 18], [0, 1], { extrapolateRight: "clamp" }),
+        }}
+      >
+        <EyebrowPill dot={C.plasma}>05 — momentum</EyebrowPill>
+      </div>
+
+      {/* GitHub repo card with star counter and sparkline */}
+      <div
+        style={{
+          position: "absolute",
+          left: 80,
+          right: 80,
+          top: SAFE_TOP + 130,
+          opacity: interpolate(local, [0, 26], [0, 1], { extrapolateRight: "clamp" }),
+          transform: `translateY(${interpolate(local, [0, 30], [40, 0], { extrapolateRight: "clamp", easing: ease.power3Out })}px)`,
+        }}
+      >
+        <GlassCard radius={32} style={{ padding: 36 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 22, marginBottom: 16 }}>
+            <div
+              style={{
+                width: 64,
+                height: 64,
+                borderRadius: 18,
+                background: "#0E0B12",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Img
+                src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+                style={{ width: 38, height: 38, filter: "invert(1)" }}
+              />
+            </div>
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <div
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 16,
+                  color: C.inkDim,
+                  letterSpacing: "0.05em",
+                }}
+              >
+                p-e-w /
+              </div>
+              <div
+                style={{
+                  fontFamily: FONT,
+                  fontSize: 44,
+                  fontWeight: 700,
+                  color: C.ink,
+                  letterSpacing: "-0.03em",
+                  lineHeight: 1,
+                }}
+              >
+                heretic
+              </div>
+            </div>
+          </div>
+
+          {/* Stars row */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "baseline",
+              gap: 18,
+              marginTop: 12,
+              borderTop: `1px solid ${C.hairline}`,
+              paddingTop: 22,
+            }}
+          >
+            <svg width="46" height="46" viewBox="0 0 24 24" fill={C.plasma}>
+              <path d="M12 2l2.85 6.34L22 9.27l-5.4 4.69 1.69 7.23L12 17.5l-6.29 3.69L7.4 13.96 2 9.27l7.15-.93z" />
+            </svg>
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 88,
+                fontWeight: 700,
+                color: C.ink,
+                fontVariantNumeric: "tabular-nums",
+                letterSpacing: "-0.04em",
+                lineHeight: 1,
+              }}
+            >
+              <Counter
+                from={0}
+                to={19847}
+                startFrame={HBEAT.stars + 24}
+                duration={130}
+                format={(n) => Math.round(n).toLocaleString()}
+              />
+            </div>
+            <div
+              style={{
+                fontFamily: FONT,
+                fontSize: 26,
+                fontWeight: 500,
+                color: C.inkMuted,
+                marginLeft: "auto",
+              }}
+            >
+              and counting
+            </div>
+          </div>
+
+          {/* Sparkline */}
+          <div style={{ marginTop: 28, display: "flex", gap: 6, alignItems: "flex-end" }}>
+            {Array.from({ length: 28 }).map((_, i) => {
+              const baseHeight = 16 + Math.abs(Math.sin(i * 0.7)) * 50 + (i / 28) * 96;
+              const start = HBEAT.stars + 60 + i * 3;
+              const lf = frame - start;
+              const h = interpolate(lf, [0, 18], [0, baseHeight], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+                easing: ease.expoOut,
+              });
+              return (
+                <div
+                  key={i}
+                  style={{
+                    flex: 1,
+                    height: h,
+                    background:
+                      i > 22
+                        ? `linear-gradient(180deg, ${C.plasma}, ${C.ember})`
+                        : `linear-gradient(180deg, ${C.inkSoft}, ${C.inkMuted})`,
+                    borderRadius: 4,
+                    opacity: 0.85,
+                  }}
+                />
+              );
+            })}
+          </div>
+        </GlassCard>
+      </div>
+
+      {/* Community models stat */}
+      <div
+        style={{
+          position: "absolute",
+          left: 80,
+          right: 80,
+          top: 1100,
+          display: "flex",
+          justifyContent: "center",
+          opacity: interpolate(local, [120, 150], [0, 1], { extrapolateRight: "clamp" }),
+          transform: `translateY(${interpolate(local, [120, 150], [30, 0], { extrapolateRight: "clamp", easing: ease.power3Out })}px)`,
+        }}
+      >
+        <div
+          style={{
+            ...glassBase,
+            background: C.glassFillStrong,
+            borderRadius: 9999,
+            padding: "18px 32px",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 18,
+          }}
+        >
+          <span
+            style={{
+              fontFamily: MONO,
+              fontSize: 44,
+              fontWeight: 700,
+              color: C.ember,
+              fontVariantNumeric: "tabular-nums",
+              letterSpacing: "-0.04em",
+            }}
+          >
+            <Counter
+              from={0}
+              to={1247}
+              startFrame={HBEAT.stars + 130}
+              duration={90}
+              format={(n) => Math.round(n).toLocaleString() + "+"}
+            />
+          </span>
+          <span
+            style={{
+              fontFamily: FONT,
+              fontSize: 24,
+              fontWeight: 500,
+              color: C.inkSoft,
+              letterSpacing: "-0.02em",
+            }}
+          >
+            community models running on it
+          </span>
+        </div>
+      </div>
+
+      {/* Closing line "blowing up fast" */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1320,
+          textAlign: "center",
+          opacity: interpolate(local, [200, 230], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `scale(${spring({
+            frame: local - 200,
+            fps: 30,
+            config: { damping: 9, stiffness: 130 },
+            from: 0.8,
+            to: 1,
+          })})`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 86,
+            fontWeight: 800,
+            color: C.ink,
+            letterSpacing: "-0.04em",
+            lineHeight: 1,
+          }}
+        >
+          Blowing up{" "}
+          <span
+            style={{
+              background: `linear-gradient(135deg, ${C.ember}, ${C.crimson}, ${C.plasma})`,
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              backgroundClip: "text",
+            }}
+          >
+            fast.
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// CTA PILL — single glass capsule with icon + label
+// ═══════════════════════════════════════════════════════════════
+const CtaPill: React.FC<{
+  iconNode: React.ReactNode;
+  label: string;
+  accent: string;
+  startFrame: number;
+  index: number;
+}> = ({ iconNode, label, accent, startFrame, index }) => {
+  const frame = useCurrentFrame();
+  const enter = startFrame + index * 6;
+  const local = frame - enter;
+  const op = interpolate(local, [0, 22], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const sc = spring({
+    frame: local,
+    fps: 30,
+    config: { damping: 12, stiffness: 110 },
+    from: 0.8,
+    to: 1,
+  });
+  const pulse = 1 + Math.sin((frame + index * 22) * 0.05) * 0.012;
+  return (
+    <div
+      style={{
+        ...glassBase,
+        background: C.glassFillStrong,
+        borderRadius: 9999,
+        padding: "20px 32px",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 16,
+        opacity: op,
+        transform: `scale(${sc * pulse})`,
+        willChange: "transform, opacity",
+      }}
+    >
+      <div
+        style={{
+          width: 48,
+          height: 48,
+          borderRadius: 14,
+          background: accent,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: `0 0 18px ${accent}aa`,
+        }}
+      >
+        {iconNode}
+      </div>
+      <div
+        style={{
+          fontFamily: FONT,
+          fontSize: 30,
+          fontWeight: 700,
+          color: C.ink,
+          letterSpacing: "-0.025em",
+        }}
+      >
+        {label}
+      </div>
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 7 — CTA (1500–1639, 4.6s)
+// "Like, subscribe, and check pinned comment for resources."
+// ═══════════════════════════════════════════════════════════════
+const CtaScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const local = frame - HBEAT.cta;
+  const heroOp = interpolate(local, [0, 24], [0, 1], { extrapolateRight: "clamp" });
+  const heroY = interpolate(local, [0, 30], [30, 0], {
+    extrapolateRight: "clamp",
+    easing: ease.expoOut,
+  });
+  return (
+    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
+      {/* Behind-scene halo */}
+      <div
+        style={{
+          position: "absolute",
+          width: 1100,
+          height: 1100,
+          borderRadius: "50%",
+          background: `conic-gradient(from ${frame * 0.4}deg, ${C.ember}, ${C.crimson}, ${C.ultraviolet}, ${C.plasma}, ${C.ember})`,
+          filter: "blur(120px)",
+          opacity: 0.45,
+        }}
+      />
+
+      {/* Headline */}
+      <div
+        style={{
+          opacity: heroOp,
+          transform: `translateY(${heroY}px)`,
+          textAlign: "center",
+          position: "relative",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 22,
+            color: C.inkMuted,
+            letterSpacing: "0.22em",
+            textTransform: "uppercase",
+            marginBottom: 18,
+          }}
+        >
+          resources in pinned
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 124,
+            fontWeight: 800,
+            color: C.ink,
+            letterSpacing: "-0.06em",
+            lineHeight: 0.92,
+          }}
+        >
+          Like.{" "}
+          <span
+            style={{
+              background: `linear-gradient(135deg, ${C.ember}, ${C.crimson}, ${C.plasma})`,
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              backgroundClip: "text",
+            }}
+          >
+            Subscribe.
+          </span>
+        </div>
+      </div>
+
+      {/* Three glass pill buttons */}
+      <div
+        style={{
+          marginTop: 64,
+          display: "flex",
+          gap: 18,
+          flexDirection: "column",
+          alignItems: "center",
+          position: "relative",
+        }}
+      >
+        <CtaPill
+          iconNode={
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="white">
+              <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.65-7 10-7 10z" />
+            </svg>
+          }
+          label="Like"
+          accent={C.ember}
+          startFrame={HBEAT.cta + 22}
+          index={0}
+        />
+        <CtaPill
+          iconNode={
+            <Img
+              src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+              style={{ width: 28, height: 28 }}
+            />
+          }
+          label="Subscribe"
+          accent={C.crimson}
+          startFrame={HBEAT.cta + 22}
+          index={1}
+        />
+        <CtaPill
+          iconNode={
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+              <path d="M5 4h14v17l-7-4-7 4z" />
+            </svg>
+          }
+          label="Pinned Comment"
+          accent={C.ultraviolet}
+          startFrame={HBEAT.cta + 22}
+          index={2}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN — orchestrate scenes, audio, and persistent ambient layers
+// ═══════════════════════════════════════════════════════════════
+export const HereticReel: React.FC = () => {
+  const { width, height } = useVideoConfig();
+  const frame = useCurrentFrame();
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: `radial-gradient(ellipse at 30% 20%, ${C.bgWarm} 0%, ${C.bg} 50%, ${C.bgCool} 100%)`,
+        width,
+        height,
+        overflow: "hidden",
+      }}
+    >
+      {/* Perpetual ambient layers — drift across entire reel */}
+      <CausticBlobs />
+      <HairlineGrid opacity={0.04} />
+
+      {/* Film-grain noise (fixed, pointer-events none) */}
+      <AbsoluteFill
+        style={{
+          backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\")",
+          opacity: 0.06,
+          pointerEvents: "none",
+          mixBlendMode: "multiply",
+        }}
+      />
+
+      {/* Conditional scene render so useCurrentFrame() inside each scene
+          returns the GLOBAL frame, matching `local = frame - HBEAT.x`. */}
+      {frame >= HBEAT.hook && frame < HBEAT.refusal && <HookScene />}
+      {frame >= HBEAT.refusal && frame < HBEAT.reveal && <RefusalScene />}
+      {frame >= HBEAT.reveal && frame < HBEAT.mechanism && <RevealScene />}
+      {frame >= HBEAT.mechanism && frame < HBEAT.brains && <MechanismScene />}
+      {frame >= HBEAT.brains && frame < HBEAT.stars && <BrainsScene />}
+      {frame >= HBEAT.stars && frame < HBEAT.cta && <StarsScene />}
+      {frame >= HBEAT.cta && frame < HBEAT.end && <CtaScene />}
+
+      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+    </AbsoluteFill>
+  );
+};