Blame for renderer/src/compositions/LaunchTrailer.tsx

import type { CSSProperties, ReactNode } from "react";
import { AbsoluteFill, Audio as SoundTrack, Easing, interpolate, random, Sequence, spring, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
import { theme } from "../theme";
import { Flare, WarpField } from "./LandingDemo";
import { Lockup } from "./Lockup";
import { LAUNCH_BPM, LAUNCH_SCENES, LAUNCH_SECONDS, type LaunchSceneId } from "./launchTimeline";

/** Launch trailer: a journey of knowledge through the galaxies of untapped potential.
 * One galaxy per feature, cut on the beat (see launchTimeline.ts, generated with the score),
 * narrated by Nora Vale, ending on "Notestack AI. Coming soon." 1920x1080, 30 fps. */

export const LAUNCH_FPS = 30;
const S = (seconds: number) => Math.round(seconds * LAUNCH_FPS);
export const LAUNCH_DURATION = S(LAUNCH_SECONDS);

const BLUE = theme.blue;
const WHITE = theme.white;
const BEAT = 60 / LAUNCH_BPM;
const XF = 0.3; // each scene fades in over the tail of the previous one
const ease = Easing.bezier(0.22, 1, 0.36, 1);
const clamp = { extrapolateLeft: "clamp", extrapolateRight: "clamp" } as const;

// ---------------------------------------------------------------- audio

const VO_WINDOWS: [number, number][] = LAUNCH_SCENES.filter((s) => s.vo !== null).map((s) => [
  S(s.start + (s.vo ?? 0)),
  S(s.start + (s.vo ?? 0) + (s.voLen ?? 0)),
]);
const MUSIC = 0.62;
const DUCKED = 0.24;

function musicVolume(frame: number): number {
  const ramp = 8;
  let level = MUSIC;
  for (const [a, b] of VO_WINDOWS) {
    if (frame >= a - ramp && frame <= b + ramp) {
      const into = interpolate(frame, [a - ramp, a, b, b + ramp], [0, 1, 1, 0], clamp);
      level = Math.min(level, MUSIC - (MUSIC - DUCKED) * into);
    }
  }
  return level;
}

// ---------------------------------------------------------------- shared pieces

/** 1 on each beat, decaying quickly. Scenes start on bar lines, so local time is beat aligned. */
function usePulse(sharp = 8) {
  const frame = useCurrentFrame();
  const t = frame / LAUNCH_FPS;
  return Math.exp(-(t % BEAT) * sharp);
}

/** A spiral galaxy with a white core; rotates slowly, drifts toward the camera over the scene. */
function Galaxy({ seed, x, y, size, tilt = 0.55, arms = 2, spin = 1, coreBoost = 0 }: {
  seed: string; x: number; y: number; size: number; tilt?: number; arms?: number; spin?: number; coreBoost?: number;
}) {
  const frame = useCurrentFrame();
  const rot = frame * 0.0035 * spin + random(`${seed}-rot`) * 6;
  const count = 520;
  const stars = [];
  for (let i = 0; i < count; i++) {
    const arm = i % arms;
    const u = Math.sqrt(random(`${seed}-u${i}`));
    const r = u * size;
    const theta = u * 5.2 + (arm * Math.PI * 2) / arms + rot + (random(`${seed}-j${i}`) - 0.5) * 0.7 * (1 - u * 0.4);
    const spread = (random(`${seed}-s${i}`) - 0.5) * size * 0.12;
    const px = Math.cos(theta) * (r + spread);
    const py = Math.sin(theta) * (r + spread) * tilt;
    const near = 1 - u;
    const fill = near > 0.55 ? WHITE : random(`${seed}-c${i}`) < 0.55 ? BLUE : "#9cc4ff";
    stars.push(<circle key={i} cx={px} cy={py} r={0.6 + random(`${seed}-r${i}`) * 1.8 * (0.5 + near)} fill={fill} opacity={0.35 + 0.65 * random(`${seed}-o${i}`)} />);
  }
  const core = 0.85 + coreBoost;
  return (
    <svg style={{ position: "absolute", left: x - size * 1.3, top: y - size * 1.3, overflow: "visible" }} width={size * 2.6} height={size * 2.6}>
      <defs>
        <radialGradient id={`${seed}-halo`}>
          <stop offset="0%" stopColor={BLUE} stopOpacity={0.35} />
          <stop offset="100%" stopColor={BLUE} stopOpacity={0} />
        </radialGradient>
        <radialGradient id={`${seed}-core`}>
          <stop offset="0%" stopColor={WHITE} stopOpacity={Math.min(1, core)} />
          <stop offset="18%" stopColor={WHITE} stopOpacity={0.45 * core} />
          <stop offset="45%" stopColor="#9cc4ff" stopOpacity={0.12 * core} />
          <stop offset="100%" stopColor={BLUE} stopOpacity={0} />
        </radialGradient>
      </defs>
      <g transform={`translate(${size * 1.3} ${size * 1.3})`}>
        <ellipse rx={size * 1.25} ry={size * 1.25 * tilt} fill={`url(#${seed}-halo)`} />
        {stars}
        <ellipse rx={size * 0.42} ry={size * 0.42 * Math.max(tilt, 0.7)} fill={`url(#${seed}-core)`} />
        <circle r={size * 0.035} fill={WHITE} style={{ filter: `drop-shadow(0 0 ${size * 0.06}px ${WHITE}) drop-shadow(0 0 ${size * 0.15}px ${BLUE})` }} />
      </g>
    </svg>
  );
}

/** Deep space backdrop: drifting stars and a faint far galaxy. */
function Space({ drift = 1, children }: { drift?: number; children?: ReactNode }) {
  const frame = useCurrentFrame();
  const { width, height } = useVideoConfig();
  const t = frame / LAUNCH_FPS;
  return (
    <AbsoluteFill style={{ backgroundColor: theme.black, overflow: "hidden" }}>
      <AbsoluteFill style={{ background: `radial-gradient(50% 40% at 70% 50%, ${BLUE}1f, transparent 70%), radial-gradient(35% 30% at 15% 85%, ${BLUE}14, transparent 70%)` }} />
      <svg width={width} height={height} style={{ position: "absolute" }}>
        {Array.from({ length: 260 }).map((_, i) => {
          const depth = 0.3 + random(`d${i}`) * 0.7;
          const x = (((random(`x${i}`) * width - t * 22 * depth * drift) % width) + width) % width;
          const y = random(`y${i}`) * height;
          const tw = 0.4 + 0.6 * Math.abs(Math.sin(t * (0.5 + random(`p${i}`)) + i));
          return <circle key={i} cx={x} cy={y} r={0.4 + depth * 1.4} fill={random(`b${i}`) < 0.2 ? "#9cc4ff" : WHITE} opacity={tw * depth} />;
        })}
      </svg>
      {children}
    </AbsoluteFill>
  );
}

const panel: CSSProperties = {
  border: "1px solid rgba(255,255,255,0.16)",
  borderRadius: 24,
  background: "rgba(0,0,0,0.7)",
  boxShadow: `0 0 60px ${BLUE}33, 0 0 2px ${BLUE}`,
  backdropFilter: "blur(2px)",
};

function useIn(delay: number, damping = 16) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  return spring({ frame: frame - delay, fps, config: { damping } });
}

function typed(text: string, frame: number, start: number, cps = 30): string {
  return text.slice(0, Math.max(0, Math.floor(((frame - start) / LAUNCH_FPS) * cps)));
}

// ---------------------------------------------------------------- journey HUD

const STOPS: { id: LaunchSceneId; short: string; name: string; line: string }[] = [
  { id: "sources", short: "Sources", name: "The Source Nebula", line: "Everything you made, glowing back at you." },
  { id: "research", short: "Research", name: "The Research Cluster", line: "The spark of a thought you forgot you had." },
  { id: "map", short: "Topic map", name: "The Constellation Field", line: "Drift through your own ideas. Stay a while." },
  { id: "voice", short: "Voice", name: "The Voice Pulsar", line: "It feels like you. Only braver." },
  { id: "audio", short: "Audio", name: "The Audio Belt", line: "Lean back. Let it wash over you." },
  { id: "video", short: "Studio", name: "The Studio Galaxy", line: "Color, motion, wonder. Watch it twice." },
  { id: "launchkit", short: "Launch Kit", name: "The Launch Kit Spiral", line: "Your heart races. The good kind of nervous." },
  { id: "launchpad", short: "Launchpad", name: "The Launchpad", line: "Three, two, one, and you are flying." },
  { id: "resurface", short: "Resurface", name: "The Evergreen Belt", line: "An old favorite, shining again." },
];

function Hud({ index }: { index: number }) {
  const frame = useCurrentFrame();
  const pulse = usePulse(10);
  const inn = useIn(2, 20);
  const travel = interpolate(frame, [0, 24], [index - 1, index], { ...clamp, easing: ease });
  const x0 = 360;
  const x1 = 1560;
  const px = (i: number) => x0 + ((x1 - x0) * i) / (STOPS.length - 1);
  return (
    <AbsoluteFill style={{ opacity: inn }}>
      <div style={{ position: "absolute", left: 80, top: 44 }}>
        <Lockup size={44} glow={0.6} />
      </div>
      <div style={{ position: "absolute", right: 80, top: 56, fontFamily: theme.mono, fontSize: 20, letterSpacing: 5, color: BLUE }}>
        GALAXY {String(index + 1).padStart(2, "0")} / {String(STOPS.length).padStart(2, "0")}
      </div>
      <svg width={1920} height={1080} style={{ position: "absolute" }}>
        <line x1={x0} y1={990} x2={x1} y2={990} stroke="rgba(255,255,255,0.18)" strokeWidth={2} strokeDasharray="6 8" />
        <line x1={x0} y1={990} x2={px(travel)} y2={990} stroke={BLUE} strokeWidth={3} style={{ filter: `drop-shadow(0 0 6px ${BLUE})` }} />
        {STOPS.map((s, i) => {
          const done = i <= index;
          const here = i === index;
          return (
            <g key={s.id}>
              <circle cx={px(i)} cy={990} r={here ? 9 + pulse * 3 : 6} fill={done ? (here ? WHITE : BLUE) : "#000"} stroke={done ? BLUE : "rgba(255,255,255,0.35)"} strokeWidth={2}
                style={here ? { filter: `drop-shadow(0 0 10px ${WHITE}) drop-shadow(0 0 18px ${BLUE})` } : undefined} />
              <text x={px(i)} y={1030} textAnchor="middle" fontFamily={theme.mono} fontSize={15} letterSpacing={2} fill={here ? WHITE : done ? "rgba(156,196,255,0.8)" : "rgba(255,255,255,0.35)"}>
                {s.short.toUpperCase()}
              </text>
            </g>
          );
        })}
        <circle cx={px(travel)} cy={990} r={4} fill={WHITE} />
      </svg>
    </AbsoluteFill>
  );
}

/** Frame for every feature stop: galaxy flying in on the right, name and line on the left, the visual on top. */
function Stop({ id, children }: { id: LaunchSceneId; children: ReactNode }) {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const index = STOPS.findIndex((s) => s.id === id);
  const stop = STOPS[index];
  const pulse = usePulse(9);
  const approach = interpolate(frame, [0, durationInFrames], [0.55, 1.08], { easing: Easing.out(Easing.quad) });
  const eyebrow = useIn(4, 18);
  const name = useIn(8, 15);
  const line = useIn(16, 20);
  const visual = useIn(10, 17);
  return (
    <Space drift={1.4}>
      <div style={{ position: "absolute", inset: 0, transform: `scale(${approach})`, transformOrigin: "1350px 520px" }}>
        <Galaxy seed={`g-${id}`} x={1350} y={520} size={430} tilt={0.42 + random(`t-${id}`) * 0.3} arms={2 + (index % 2)} coreBoost={pulse * 0.25} />
      </div>
      <AbsoluteFill style={{ background: "linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 38%, transparent 62%)" }} />
      <div style={{ position: "absolute", left: 120, top: 250, width: 700 }}>
        <p style={{ margin: 0, fontFamily: theme.mono, fontSize: 24, letterSpacing: 7, color: BLUE, opacity: eyebrow, transform: `translateX(${(1 - eyebrow) * -30}px)` }}>
          GALAXY {String(index + 1).padStart(2, "0")}
        </p>
        <h2 style={{ margin: "18px 0 0", fontFamily: theme.display, fontWeight: 700, fontSize: 92, lineHeight: 1.0, color: WHITE, opacity: name, transform: `translateY(${(1 - name) * 30}px)`, textShadow: `0 0 40px ${BLUE}88` }}>
          {stop.name}
        </h2>
        <p style={{ margin: "28px 0 0", fontFamily: theme.body, fontSize: 36, lineHeight: 1.35, color: "rgba(255,255,255,0.82)", opacity: line, transform: `translateY(${(1 - line) * 20}px)` }}>
          {stop.line}
        </p>
      </div>
      <div style={{ position: "absolute", left: 900, top: 190, width: 900, height: 660, opacity: visual, transform: `translateY(${(1 - visual) * 40}px) scale(${0.94 + visual * 0.06})` }}>
        {children}
      </div>
      <Hud index={index} />
    </Space>
  );
}

// ---------------------------------------------------------------- feature visuals (900 x 660 box)

/** A ringed planet, like the one in the logo: lit sphere, atmosphere, and a tilted ring whose far
 * side passes behind the body and near side in front. Drawn in its own layer above the orbits. */
function Planet({ cx, cy, r }: { cx: number; cy: number; r: number }) {
  const frame = useCurrentFrame();
  const tilt = -18;
  const rx = r * 1.75;
  const ry = r * 0.36;
  const shimmer = 0.75 + 0.25 * Math.sin(frame * 0.08);
  const ring = (half: "back" | "front") => (
    <path
      d={half === "back" ? `M ${-rx} 0 A ${rx} ${ry} 0 0 1 ${rx} 0` : `M ${rx} 0 A ${rx} ${ry} 0 0 1 ${-rx} 0`}
      fill="none"
      stroke={half === "back" ? "#9cc4ff" : WHITE}
      strokeOpacity={half === "back" ? 0.45 : 0.95}
      strokeWidth={r * 0.1}
      strokeLinecap="round"
    />
  );
  return (
    <svg width={900} height={660} style={{ position: "absolute", left: 0, top: 0, overflow: "visible", zIndex: 1 }}>
      <defs>
        <radialGradient id="planet-body" cx="36%" cy="32%" r="75%">
          <stop offset="0%" stopColor="#ffffff" />
          <stop offset="14%" stopColor="#bcd8ff" />
          <stop offset="42%" stopColor={BLUE} />
          <stop offset="78%" stopColor="#0b2f75" />
          <stop offset="100%" stopColor="#020a1c" />
        </radialGradient>
        <radialGradient id="planet-air" cx="50%" cy="50%" r="50%">
          <stop offset="78%" stopColor={BLUE} stopOpacity={0} />
          <stop offset="90%" stopColor={BLUE} stopOpacity={0.55} />
          <stop offset="100%" stopColor={BLUE} stopOpacity={0} />
        </radialGradient>
        <radialGradient id="planet-halo" cx="50%" cy="50%" r="50%">
          <stop offset="30%" stopColor={BLUE} stopOpacity={0.3} />
          <stop offset="100%" stopColor={BLUE} stopOpacity={0} />
        </radialGradient>
        <clipPath id="planet-clip">
          <circle r={r} />
        </clipPath>
      </defs>
      <g transform={`translate(${cx} ${cy})`}>
        <circle r={r * 2.4} fill="url(#planet-halo)" opacity={shimmer} />
        <g transform={`rotate(${tilt})`}>{ring("back")}</g>
        <circle r={r} fill="url(#planet-body)" />
        {/* Soft cloud bands, clipped to the sphere, drifting slowly. */}
        <g clipPath="url(#planet-clip)" opacity={0.22}>
          {[-0.45, -0.1, 0.3].map((y, i) => (
            <ellipse key={i} cx={((frame * 0.6 + i * 40) % (r * 2)) - r} cy={y * r} rx={r * 1.1} ry={r * 0.09} fill={WHITE} />
          ))}
        </g>
        {/* Night side. */}
        <circle r={r} fill="url(#planet-shadow)" />
        <radialGradient id="planet-shadow" cx="78%" cy="80%" r="70%">
          <stop offset="0%" stopColor="#000" stopOpacity={0.55} />
          <stop offset="100%" stopColor="#000" stopOpacity={0} />
        </radialGradient>
        <circle r={r * 1.14} fill="url(#planet-air)" />
        <g transform={`rotate(${tilt})`}>{ring("front")}</g>
      </g>
    </svg>
  );
}

function SourcesVisual() {
  const frame = useCurrentFrame();
  const kinds = ["Blog", "Newsletter", "Website", "Markdown", "PDF", "Substack", "Ghost", "WordPress"];
  const cx = 450;
  const cy = 330;
  const count = Math.round(interpolate(frame, [40, 240], [0, 248], { ...clamp, easing: ease }));
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <svg width={900} height={660} style={{ position: "absolute", overflow: "visible" }}>
        <ellipse cx={cx} cy={cy} rx={330} ry={130} fill="none" stroke={`${BLUE}88`} strokeWidth={2} strokeDasharray="4 10" />
        <ellipse cx={cx} cy={cy} rx={220} ry={86} fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth={1.5} />
      </svg>
      <Planet cx={cx} cy={cy} r={82} />

      {kinds.map((k, i) => {
        const arrive = interpolate(frame, [12 + i * 9, 50 + i * 9], [0, 1], { ...clamp, easing: ease });
        const ring = i % 2 ? 220 : 330;
        const ringY = i % 2 ? 86 : 130;
        const a = (i / kinds.length) * Math.PI * 2 + frame * 0.012;
        const tx = cx + Math.cos(a) * ring;
        const ty = cy + Math.sin(a) * ringY;
        const sx = cx + Math.cos(a) * 1100;
        const sy = cy + Math.sin(a) * 700;
        const x = sx + (tx - sx) * arrive;
        const y = sy + (ty - sy) * arrive;
        const front = Math.sin(a) > 0;
        return (
          <div key={k} style={{ position: "absolute", left: x, top: y, transform: `translate(-50%, -50%) scale(${front ? 1 : 0.82})`, opacity: arrive * (front ? 1 : 0.7), zIndex: front ? 2 : 0, padding: "12px 22px", borderRadius: 999, background: front ? "rgba(0,0,0,0.85)" : "rgba(0,0,0,0.6)", border: `1.5px solid ${front ? BLUE : "rgba(255,255,255,0.3)"}`, color: WHITE, fontFamily: theme.body, fontWeight: 600, fontSize: 24, whiteSpace: "nowrap", boxShadow: front ? `0 0 24px ${BLUE}66` : undefined }}>
            {k}
          </div>
        );
      })}
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, textAlign: "center", fontFamily: theme.mono, fontSize: 28, letterSpacing: 3, color: WHITE }}>
        <span style={{ color: BLUE }}>{count}</span> POSTS IN ORBIT
      </div>
    </div>
  );
}

function ResearchVisual() {
  const frame = useCurrentFrame();
  const q = "What have I said about pricing?";
  const answer = "You argue for charging early and raising prices with each new tier";
  const cite1 = useIn(62, 14);
  const cite2 = useIn(72, 14);
  const lines = useIn(80, 18);
  return (
    <div style={{ ...panel, position: "absolute", left: 40, right: 0, top: 20, padding: 36, display: "grid", gap: 22, alignContent: "start" }}>
      <div style={{ justifySelf: "end", padding: "14px 22px", borderRadius: 18, background: BLUE, color: WHITE, fontFamily: theme.body, fontSize: 28 }}>
        {typed(q, frame, 4, 34)}
        <span style={{ opacity: frame % 20 < 10 ? 1 : 0 }}>|</span>
      </div>
      <div style={{ fontFamily: theme.body, fontSize: 28, lineHeight: 1.5, color: WHITE, minHeight: 90 }}>
        {typed(answer, frame, 30, 40)}
        <span style={{ display: "inline-block", marginLeft: 10, padding: "0 10px", borderRadius: 8, background: BLUE, fontFamily: theme.mono, fontSize: 20, transform: `scale(${cite1})` }}>1</span>
        <span style={{ display: "inline-block", marginLeft: 8, padding: "0 10px", borderRadius: 8, background: BLUE, fontFamily: theme.mono, fontSize: 20, transform: `scale(${cite2})` }}>2</span>
      </div>
      <div style={{ opacity: lines, transform: `translateY(${(1 - lines) * 20}px)`, border: "1px solid rgba(255,255,255,0.14)", borderRadius: 16, padding: 20, fontFamily: theme.mono, fontSize: 19, lineHeight: 1.7 }}>
        <div style={{ color: BLUE, marginBottom: 6 }}>sources/blog/2024-03-11-price-early.md</div>
        {["12  Charge from day one. Free teaches", "13  people your work is worth nothing.", "14  Raise the price with every tier you", "15  add, not every year."].map((l, i) => (
          <div key={l} style={{ color: i < 3 ? WHITE : "rgba(255,255,255,0.55)", background: i < 3 ? `${BLUE}33` : undefined, borderLeft: i < 3 ? `3px solid ${BLUE}` : "3px solid transparent", paddingLeft: 12 }}>
            {l}
          </div>
        ))}
      </div>
    </div>
  );
}

function MapVisual() {
  const frame = useCurrentFrame();
  const pulse = usePulse(6);
  const nodes = [
    { x: 450, y: 320, r: 26, name: "Writing" },
    { x: 250, y: 200, r: 16, name: "Pricing" },
    { x: 660, y: 190, r: 20, name: "AI tools", rising: true },
    { x: 700, y: 430, r: 14, name: "Newsletters" },
    { x: 230, y: 470, r: 12, name: "Habits", dormant: true },
    { x: 470, y: 560, r: 15, name: "Audience" },
    { x: 120, y: 330, r: 9, name: "Design" },
    { x: 820, y: 300, r: 10, name: "Research" },
  ];
  const edges = [[0, 1], [0, 2], [0, 3], [0, 4], [0, 5], [1, 6], [2, 7], [3, 5], [2, 3], [1, 4]];
  return (
    <svg width={900} height={660} style={{ position: "absolute", overflow: "visible" }}>
      <defs>
        <radialGradient id="map-core">
          <stop offset="0%" stopColor={WHITE} stopOpacity={0.75} />
          <stop offset="20%" stopColor={WHITE} stopOpacity={0.3} />
          <stop offset="55%" stopColor={BLUE} stopOpacity={0.1} />
          <stop offset="100%" stopColor={BLUE} stopOpacity={0} />
        </radialGradient>
      </defs>
      <circle cx={450} cy={330} r={260 + pulse * 10} fill="url(#map-core)" />
      {edges.map(([a, b], i) => {
        const p = interpolate(frame, [18 + i * 5, 40 + i * 5], [0, 1], clamp);
        const A = nodes[a];
        const B = nodes[b];
        return <line key={i} x1={A.x} y1={A.y} x2={A.x + (B.x - A.x) * p} y2={A.y + (B.y - A.y) * p} stroke={WHITE} strokeOpacity={0.45} strokeWidth={2} />;
      })}
      {nodes.map((n, i) => {
        const s = spring({ frame: frame - 6 - i * 4, fps: LAUNCH_FPS, config: { damping: 12 } });
        return (
          <g key={n.name} opacity={Math.min(1, s)}>
            <circle cx={n.x} cy={n.y} r={n.r * 2.4 * s} fill={BLUE} opacity={0.25} />
            <circle cx={n.x} cy={n.y} r={n.r * 0.6 * s} fill={n.rising ? WHITE : n.dormant ? "rgba(255,255,255,0.45)" : "#9cc4ff"} style={n.rising ? { filter: `drop-shadow(0 0 12px ${WHITE})` } : undefined} />
            {n.dormant && <circle cx={n.x} cy={n.y} r={n.r + 8} fill="none" stroke={WHITE} strokeOpacity={0.6} strokeDasharray="3 5" strokeWidth={1.5} />}
            <text x={n.x} y={n.y + n.r + 30} textAnchor="middle" fontFamily={theme.body} fontWeight={600} fontSize={22} fill={WHITE} stroke="#000" strokeWidth={5} paintOrder="stroke">
              {n.name}
            </text>
          </g>
        );
      })}
      <g opacity={interpolate(frame, [80, 96], [0, 1], clamp)}>
        <rect x={700} y={100} width={190} height={46} rx={23} fill={WHITE} />
        <text x={795} y={131} textAnchor="middle" fontFamily={theme.mono} fontSize={20} fill="#000">RISING 2.4x</text>
      </g>
      <g opacity={interpolate(frame, [110, 126], [0, 1], clamp)}>
        <rect x={80} y={520} width={170} height={46} rx={23} fill="#000" stroke="rgba(255,255,255,0.6)" strokeDasharray="4 5" />
        <text x={165} y={551} textAnchor="middle" fontFamily={theme.mono} fontSize={20} fill={WHITE}>DORMANT</text>
      </g>
    </svg>
  );
}

function VoiceVisual() {
  const frame = useCurrentFrame();
  const traits = [["Tone", "warm, direct"], ["Openers", "a sharp question"], ["Rhythm", "short, punchy lines"], ["Avoids", "jargon, hype"]];
  const match = Math.round(interpolate(frame, [70, 140], [0, 96], { ...clamp, easing: ease }));
  return (
    <div style={{ ...panel, position: "absolute", left: 40, right: 0, top: 30, padding: 40, display: "grid", gap: 26, alignContent: "start" }}>
      <svg width={780} height={150}>
        {Array.from({ length: 60 }).map((_, i) => {
          const h = 16 + Math.abs(Math.sin(i * 0.55 + frame * 0.22) * Math.sin(i * 0.13 + frame * 0.07)) * 120;
          return <rect key={i} x={i * 13} y={75 - h / 2} width={7} height={h} rx={3.5} fill={i % 7 === 0 ? WHITE : BLUE} opacity={0.5 + 0.5 * (h / 136)} />;
        })}
      </svg>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        {traits.map(([k, v], i) => {
          const s = spring({ frame: frame - 20 - i * 10, fps: LAUNCH_FPS, config: { damping: 15 } });
          return (
            <div key={k} style={{ opacity: s, transform: `translateY(${(1 - s) * 16}px)`, border: `1px solid ${BLUE}88`, borderRadius: 14, padding: "14px 18px", fontFamily: theme.body, fontSize: 24, color: WHITE }}>
              <span style={{ fontFamily: theme.mono, fontSize: 18, color: BLUE, letterSpacing: 2 }}>{k.toUpperCase()}</span>
              <br />
              {v}
            </div>
          );
        })}
      </div>
      <div style={{ fontFamily: theme.mono, fontSize: 28, color: WHITE, letterSpacing: 2 }}>
        VOICE MATCH <span style={{ color: BLUE }}>{match}%</span>
      </div>
    </div>
  );
}

function AudioVisual() {
  const frame = useCurrentFrame();
  const speaker = Math.floor(frame / 36) % 2;
  const lines = ["So the big idea here is simple.", "Charge early. It changes who shows up.", "And it is all from their own posts.", "Every line, cited."];
  const host = (label: string, active: boolean, x: number) => (
    <div style={{ position: "absolute", left: x, top: 120, width: 170, height: 170, borderRadius: "50%", display: "grid", placeItems: "center", background: active ? WHITE : "#000", color: active ? "#000" : WHITE, border: `3px solid ${BLUE}`, fontFamily: theme.display, fontWeight: 700, fontSize: 64, boxShadow: active ? `0 0 0 ${10 + Math.sin(frame * 0.5) * 6}px ${BLUE}55, 0 0 60px ${BLUE}` : undefined }}>
      {label}
    </div>
  );
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      {host("A", speaker === 0, 60)}
      {host("B", speaker === 1, 670)}
      <svg width={900} height={660} style={{ position: "absolute" }}>
        {Array.from({ length: 36 }).map((_, i) => {
          const h = 10 + Math.abs(Math.sin(i * 0.8 + frame * 0.35) * Math.cos(i * 0.21 - frame * 0.1)) * 150;
          return <rect key={i} x={265 + i * 10.5} y={205 - h / 2} width={6} height={h} rx={3} fill={BLUE} opacity={0.85} />;
        })}
      </svg>
      <div style={{ ...panel, position: "absolute", left: 60, right: 50, top: 400, padding: "26px 32px", fontFamily: theme.body, fontSize: 32, color: WHITE }}>
        <span style={{ fontFamily: theme.mono, fontSize: 20, color: BLUE, letterSpacing: 3 }}>HOST {speaker ? "B" : "A"}</span>
        <br />
        {lines[Math.floor(frame / 36) % lines.length]}
      </div>
    </div>
  );
}

function VideoVisual() {
  const frame = useCurrentFrame();
  const card = (delay: number, style: CSSProperties, label: string, body: ReactNode) => {
    const s = spring({ frame: frame - delay, fps: LAUNCH_FPS, config: { damping: 14 } });
    return (
      <div style={{ ...panel, position: "absolute", overflow: "hidden", opacity: s, transform: `translateY(${(1 - s) * 80}px) rotate(${(1 - s) * 4}deg)`, ...style }}>
        <div style={{ position: "absolute", inset: 0, background: `radial-gradient(80% 60% at 50% 110%, ${BLUE}55, transparent 70%)` }} />
        <div style={{ position: "absolute", left: 18, top: 14, fontFamily: theme.mono, fontSize: 16, letterSpacing: 3, color: BLUE }}>{label}</div>
        <div style={{ position: "absolute", inset: "50px 22px 22px", display: "grid", placeItems: "center", textAlign: "center", color: WHITE, fontFamily: theme.display, fontWeight: 600 }}>{body}</div>
      </div>
    );
  };
  const play = <div style={{ width: 0, height: 0, borderLeft: `34px solid ${WHITE}`, borderTop: "20px solid transparent", borderBottom: "20px solid transparent" }} />;
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      {card(4, { left: 40, top: 60, width: 250, height: 444 }, "SHORT 9:16", <div style={{ fontSize: 34, lineHeight: 1.15 }}>Your archive already is a podcast</div>)}
      {card(14, { left: 320, top: 40, width: 520, height: 292 }, "EXPLAINER 16:9", <div style={{ display: "grid", gap: 16, placeItems: "center" }}>{play}<span style={{ fontSize: 30 }}>Why pricing early works</span></div>)}
      {card(24, { left: 320, top: 360, width: 250, height: 250 }, "AUDIOGRAM 1:1",
        <svg width={200} height={120}>{Array.from({ length: 16 }).map((_, i) => { const h = 12 + Math.abs(Math.sin(i + frame * 0.3)) * 90; return <rect key={i} x={i * 12.5} y={60 - h / 2} width={7} height={h} rx={3} fill={i % 4 ? BLUE : WHITE} />; })}</svg>)}
      {card(34, { left: 590, top: 360, width: 250, height: 250 }, "QUOTE CARD", <div style={{ fontSize: 26, lineHeight: 1.25 }}>"Free teaches people your work is worth nothing."</div>)}
    </div>
  );
}

function LaunchKitVisual() {
  const frame = useCurrentFrame();
  const items = [["X THREAD", "1/7  Most writers undercharge. Here is why."], ["LINKEDIN", "I raised my prices three times last year."], ["SUBSTACK NOTES", "Charge from day one. Seriously."], ["BLUESKY", "Pricing is a signal, not a number."], ["SEO PACK", "Title, meta, slug, keywords, links"], ["CAROUSEL", "8 slides: How to price your writing"]];
  return (
    <div style={{ position: "absolute", inset: "20px 0 0 30px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
      {items.map(([k, v], i) => {
        const s = spring({ frame: frame - 8 - i * S(BEAT), fps: LAUNCH_FPS, config: { damping: 13 } });
        return (
          <div key={k} style={{ ...panel, opacity: Math.min(1, s), transform: `translateY(${(1 - s) * 60}px) scale(${0.9 + 0.1 * s})`, padding: "22px 24px", minHeight: 160 }}>
            <div style={{ fontFamily: theme.mono, fontSize: 18, letterSpacing: 3, color: BLUE }}>{k}</div>
            <div style={{ marginTop: 12, fontFamily: theme.body, fontSize: 26, lineHeight: 1.35, color: WHITE }}>{v}</div>
          </div>
        );
      })}
    </div>
  );
}

function LaunchpadVisual() {
  const frame = useCurrentFrame();
  const days = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
  const posts: [number, number, string][] = [[0, 0, "X"], [1, 1, "LinkedIn"], [2, 0, "Bluesky"], [3, 2, "X"], [4, 1, "Notes"], [5, 0, "LinkedIn"], [6, 2, "X"]];
  const lift = interpolate(frame, [120, 200], [0, 1], { ...clamp, easing: Easing.in(Easing.cubic) });
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <div style={{ ...panel, position: "absolute", left: 30, top: 20, width: 620, padding: 26 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 10 }}>
          {days.map((d) => (
            <div key={d} style={{ fontFamily: theme.mono, fontSize: 16, color: "rgba(255,255,255,0.6)", textAlign: "center" }}>{d}</div>
          ))}
          {Array.from({ length: 21 }).map((_, cell) => {
            const col = cell % 7;
            const row = Math.floor(cell / 7);
            const post = posts.find(([c, r]) => c === col && r === row);
            const s = post ? spring({ frame: frame - 10 - posts.indexOf(post) * 8, fps: LAUNCH_FPS, config: { damping: 12 } }) : 0;
            const sent = post && frame > 90 + posts.indexOf(post) * 5;
            return (
              <div key={cell} style={{ height: 96, borderRadius: 12, border: "1px solid rgba(255,255,255,0.12)", display: "grid", placeItems: "center" }}>
                {post && (
                  <div style={{ transform: `scale(${s})`, padding: "6px 8px", borderRadius: 8, background: sent ? WHITE : BLUE, color: sent ? "#000" : WHITE, fontFamily: theme.body, fontWeight: 600, fontSize: 15 }}>
                    {post[2]}
                  </div>
                )}
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 18, fontFamily: theme.mono, fontSize: 20, letterSpacing: 2, color: frame > 100 ? WHITE : "rgba(255,255,255,0.6)" }}>
          {frame > 100 ? "7 POSTS LIVE" : "7 POSTS SCHEDULED"}
        </div>
      </div>
      <svg width={260} height={660} style={{ position: "absolute", left: 660, top: 0, overflow: "visible" }}>
        <g transform={`translate(130 ${470 - lift * 700})`}>
          <path d={`M -14 60 Q 0 ${120 + lift * 260} 14 60 Z`} fill={WHITE} opacity={0.5 + lift * 0.5} style={{ filter: `drop-shadow(0 0 16px ${BLUE})` }} />
          <path d="M 0 -80 C 34 -40 34 20 24 60 L -24 60 C -34 20 -34 -40 0 -80 Z" fill={WHITE} />
          <circle cx={0} cy={-18} r={12} fill={BLUE} />
          <path d="M -24 30 L -46 70 L -22 58 Z M 24 30 L 46 70 L 22 58 Z" fill={BLUE} />
        </g>
        <line x1={40} y1={560} x2={220} y2={560} stroke="rgba(255,255,255,0.4)" strokeWidth={3} />
      </svg>
    </div>
  );
}

function ResurfaceVisual() {
  const frame = useCurrentFrame();
  const years = [2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026];
  const rise = interpolate(frame, [30, 80], [0, 1], { ...clamp, easing: ease });
  const score = Math.round(interpolate(frame, [60, 110], [0, 92], clamp));
  const x = (i: number) => 60 + i * 110;
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <svg width={900} height={660} style={{ position: "absolute" }}>
        <line x1={40} y1={560} x2={860} y2={560} stroke="rgba(255,255,255,0.3)" strokeWidth={2} />
        {years.map((y, i) => (
          <g key={y}>
            <circle cx={x(i)} cy={560} r={6} fill={i === 2 ? WHITE : BLUE} />
            <text x={x(i)} y={600} textAnchor="middle" fontFamily={theme.mono} fontSize={18} fill="rgba(255,255,255,0.6)">{y}</text>
          </g>
        ))}
        <path d={`M ${x(2)} 560 C ${x(2)} ${560 - 200 * rise}, ${x(4)} ${420 - 200 * rise}, ${x(4)} ${360 - 180 * rise}`} fill="none" stroke={WHITE} strokeOpacity={0.6} strokeWidth={2} strokeDasharray="5 7" />
      </svg>
      <div style={{ ...panel, position: "absolute", left: x(2) + 60 + rise * 140, top: 420 - rise * 330, width: 480, padding: 26, boxShadow: `0 0 ${40 + rise * 60}px ${BLUE}${rise > 0.5 ? "99" : "44"}` }}>
        <div style={{ fontFamily: theme.mono, fontSize: 18, color: BLUE, letterSpacing: 2 }}>MARCH 2021</div>
        <div style={{ marginTop: 10, fontFamily: theme.display, fontWeight: 600, fontSize: 34, color: WHITE, lineHeight: 1.15 }}>The quiet power of a small audience</div>
        <div style={{ marginTop: 18, display: "flex", gap: 14, fontFamily: theme.mono, fontSize: 20 }}>
          <span style={{ padding: "6px 14px", borderRadius: 999, background: WHITE, color: "#000" }}>EVERGREEN {score}</span>
          <span style={{ padding: "6px 14px", borderRadius: 999, border: `1px solid ${BLUE}`, color: WHITE }}>RESHARE</span>
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------- bookend scenes

function Intro() {
  const frame = useCurrentFrame();
  const a = useIn(24, 22);
  const b = useIn(S(3.4), 22);
  const c = useIn(S(6.2), 20);
  const push = interpolate(frame, [0, S(8)], [1, 1.12]);
  return (
    <Space drift={0.4}>
      <div style={{ position: "absolute", inset: 0, transform: `scale(${push})`, opacity: interpolate(frame, [0, 40], [0, 1], clamp) }}>
        <Galaxy seed="far-1" x={1500} y={260} size={150} tilt={0.35} />
        <Galaxy seed="far-2" x={330} y={820} size={110} tilt={0.6} arms={3} />
        <Galaxy seed="far-3" x={1650} y={860} size={70} tilt={0.5} />
        <Galaxy seed="far-4" x={260} y={200} size={60} tilt={0.7} />
      </div>
      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", textAlign: "center", gap: 28 }}>
        <h1 style={{ margin: 0, fontFamily: theme.display, fontWeight: 600, fontSize: 80, color: WHITE, opacity: a, transform: `translateY(${(1 - a) * 30}px)` }}>
          At the edge of something vast.
        </h1>
        <h2 style={{ margin: 0, fontFamily: theme.display, fontWeight: 500, fontSize: 64, color: "rgba(255,255,255,0.75)", opacity: b, transform: `translateY(${(1 - b) * 24}px)` }}>
          Curious. <span style={{ color: WHITE, textShadow: `0 0 30px ${BLUE}, 0 0 70px ${BLUE}` }}>A little breathless.</span>
        </h2>
        <p style={{ margin: "30px 0 0", fontFamily: theme.mono, fontSize: 24, letterSpacing: 8, color: BLUE, opacity: c }}>A JOURNEY OF KNOWLEDGE</p>
      </AbsoluteFill>
    </Space>
  );
}

function Launch() {
  const frame = useCurrentFrame();
  const speed = interpolate(frame, [0, 20, 90, 120], [2, 22, 18, 8], clamp);
  const streak = interpolate(frame, [0, 12, 95, 120], [0, 1, 1, 0.3], clamp);
  const title = useIn(10, 14);
  const sub = useIn(28, 18);
  const shake = frame < 14 ? Math.sin(frame * 3.1) * (14 - frame) * 0.8 : 0;
  return (
    <AbsoluteFill style={{ transform: `translate(${shake}px, ${shake * 0.6}px)` }}>
      <WarpField speed={speed} streak={streak} count={520} />
      <AbsoluteFill style={{ background: `radial-gradient(circle at 50% 50%, rgba(255,255,255,${interpolate(frame, [0, 10], [0.8, 0], clamp)}), transparent 60%)` }} />
      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", textAlign: "center", gap: 26 }}>
        <h1 style={{ margin: 0, fontFamily: theme.display, fontWeight: 700, fontSize: 132, lineHeight: 1, color: WHITE, opacity: title, transform: `scale(${0.85 + title * 0.15})`, textShadow: `0 0 50px ${BLUE}` }}>
          A journey of knowledge
        </h1>
        <p style={{ margin: 0, fontFamily: theme.body, fontSize: 40, color: "rgba(255,255,255,0.85)", opacity: sub, transform: `translateY(${(1 - sub) * 20}px)` }}>
          exploring the galaxies of untapped potential
        </p>
      </AbsoluteFill>
      <Flare at={6} duration={30} y={47} />
    </AbsoluteFill>
  );
}

function Montage() {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const speed = interpolate(frame, [0, durationInFrames], [4, 40], { easing: Easing.in(Easing.quad) });
  const lit = Math.floor(frame / S(BEAT / 2)); // one galaxy per eighth note
  const whiteout = interpolate(frame, [durationInFrames - 14, durationInFrames], [0, 1], clamp);
  const go = useIn(S(2.6), 12);
  return (
    <AbsoluteFill>
      <WarpField speed={speed} streak={interpolate(frame, [0, 60], [0.2, 1], clamp)} count={560} />
      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 440px)", gap: 22 }}>
          {STOPS.map((s, i) => {
            const on = i < lit;
            return (
              <div key={s.id} style={{ ...panel, padding: "22px 26px", opacity: on ? 1 : 0.18, borderColor: on ? BLUE : "rgba(255,255,255,0.16)", background: on ? "rgba(0,0,0,0.8)" : "rgba(0,0,0,0.4)", boxShadow: on ? `0 0 40px ${BLUE}88` : "none", transform: `scale(${on ? 1 : 0.95})` }}>
                <div style={{ fontFamily: theme.mono, fontSize: 18, letterSpacing: 3, color: BLUE }}>GALAXY {String(i + 1).padStart(2, "0")}</div>
                <div style={{ marginTop: 6, fontFamily: theme.display, fontWeight: 600, fontSize: 32, color: WHITE }}>{s.short}</div>
              </div>
            );
          })}
        </div>
        <p style={{ marginTop: 44, fontFamily: theme.mono, fontSize: 34, letterSpacing: 12, color: WHITE, opacity: go, textShadow: `0 0 24px ${BLUE}` }}>ALL SYSTEMS GO</p>
      </AbsoluteFill>
      <AbsoluteFill style={{ background: WHITE, opacity: whiteout }} />
    </AbsoluteFill>
  );
}

function Outro() {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const flash = interpolate(frame, [0, 22], [1, 0], clamp);
  const logo = useIn(4, 13);
  const name = useIn(12, 15);
  const soon = useIn(S(3.2), 12);
  const tag = useIn(S(4.4), 20);
  const pulse = usePulse(5);
  const end = interpolate(frame, [durationInFrames - 30, durationInFrames], [1, 0], clamp);
  const letters = "COMING SOON".split("");
  return (
    <AbsoluteFill style={{ opacity: end }}>
      <Space drift={0.3}>
        <div style={{ position: "absolute", inset: 0, transform: `scale(${interpolate(frame, [0, durationInFrames], [1.15, 1])})`, transformOrigin: "960px 540px" }}>
          <Galaxy seed="home" x={960} y={560} size={620} tilt={0.3} arms={2} spin={0.6} coreBoost={0.15 + pulse * 0.1} />
        </div>
        <AbsoluteFill style={{ background: "radial-gradient(45% 45% at 50% 50%, rgba(0,0,0,0.55), transparent 80%)" }} />
        <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", textAlign: "center" }}>
          <div style={{ opacity: Math.min(1, logo), transform: `scale(${0.85 + 0.15 * logo}) translateY(${(1 - name) * 20}px)` }}>
            <Lockup size={176} suffix="AI" glow={1 + pulse * 0.3} />
          </div>
          <div style={{ marginTop: 44, display: "flex", gap: 6 }}>
            {letters.map((ch, i) => {
              const s = spring({ frame: frame - S(3.2) - i * 2, fps: LAUNCH_FPS, config: { damping: 11 } });
              return (
                <span key={i} style={{ display: "inline-block", minWidth: ch === " " ? 30 : undefined, fontFamily: theme.mono, fontWeight: 400, fontSize: 64, letterSpacing: 10, color: WHITE, opacity: Math.min(1, s) * soon, transform: `translateY(${(1 - s) * 40}px)`, textShadow: `0 0 ${20 + pulse * 20}px ${BLUE}, 0 0 60px ${BLUE}` }}>
                  {ch}
                </span>
              );
            })}
          </div>
          <p style={{ margin: "40px 0 0", fontFamily: theme.body, fontSize: 34, color: "rgba(255,255,255,0.8)", opacity: tag }}>
            Your knowledge, in orbit. <span style={{ color: BLUE }}>notestack.ai</span>
          </p>
        </AbsoluteFill>
        <Flare at={S(3.1)} duration={34} y={64} />
      </Space>
      <AbsoluteFill style={{ background: WHITE, opacity: flash }} />
    </AbsoluteFill>
  );
}

// ---------------------------------------------------------------- composition

const RENDER: Record<LaunchSceneId, () => JSX.Element> = {
  intro: Intro,
  launch: Launch,
  sources: () => <Stop id="sources"><SourcesVisual /></Stop>,
  research: () => <Stop id="research"><ResearchVisual /></Stop>,
  map: () => <Stop id="map"><MapVisual /></Stop>,
  voice: () => <Stop id="voice"><VoiceVisual /></Stop>,
  audio: () => <Stop id="audio"><AudioVisual /></Stop>,
  video: () => <Stop id="video"><VideoVisual /></Stop>,
  launchkit: () => <Stop id="launchkit"><LaunchKitVisual /></Stop>,
  launchpad: () => <Stop id="launchpad"><LaunchpadVisual /></Stop>,
  resurface: () => <Stop id="resurface"><ResurfaceVisual /></Stop>,
  montage: Montage,
  outro: Outro,
};

function FadeIn({ skip, children }: { skip: boolean; children: ReactNode }) {
  const frame = useCurrentFrame();
  const opacity = skip ? 1 : interpolate(frame, [0, S(XF)], [0, 1], clamp);
  return <AbsoluteFill style={{ opacity }}>{children}</AbsoluteFill>;
}

export function LaunchTrailer() {
  return (
    <AbsoluteFill style={{ backgroundColor: theme.black }}>
      <SoundTrack src={staticFile("launch-vo/music.wav")} volume={musicVolume} />
      {LAUNCH_SCENES.map((scene, i) => {
        const last = i === LAUNCH_SCENES.length - 1;
        const Scene = RENDER[scene.id];
        // Hard cut into the outro (the montage whites out); crossfade everywhere else.
        const skipFade = i === 0 || scene.id === "outro" || scene.id === "launch";
        return (
          <Sequence key={scene.id} from={S(scene.start)} durationInFrames={S(scene.len + (last ? 0 : XF))} name={scene.id}>
            <FadeIn skip={skipFade}>
              <Scene />
            </FadeIn>
            {scene.vo !== null && (
              <Sequence from={S(scene.vo)} name={`vo-${scene.id}`}>
                <SoundTrack src={staticFile(`launch-vo/${scene.id}.mp3`)} volume={1} />
              </Sequence>
            )}
          </Sequence>
        );
      })}
    </AbsoluteFill>
  );
}