Merge pull request #10 from FireBird-Technologies/feat/new_promo_vid

frontend/src/components/FeatureShowcase.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode, type RefObject } from "react";
 import { Link } from "react-router-dom";
 
 /** Landing page feature tour: one full section per feature, alternating sides, each with a small
@@ -33,36 +33,180 @@ function ChatVisual() {
   );
 }
 
+const SHAPES = ["Orbit", "Spiral", "Figure", "Cluster"];
+const SHAPE_MS = 3500; // how long each shape is shown on its own
+const MORPH_MS = 1300;
+
+/** Where the four outer topics sit in each shape (the hub, Gravity, stays put so the dive lines up). */
+const LAYOUTS: [number, number][][] = [
+  [[74, 30], [20, 24], [26, 82], [78, 76]], // orbit: around the hub
+  [[55, 56], [42, 74], [16, 62], [18, 30]], // spiral: winding out
+  [[56, 36], [72, 48], [66, 68], [84, 78]], // figure: one long chain of stars
+  [[72, 28], [84, 36], [20, 76], [30, 86]], // cluster: two tight groups
+];
+
+/** Cycles the shape on a timer while the visual is on screen. Clicking a pill jumps to that shape and pauses
+ * the cycle for a while. With reduced motion the shape only changes when the reader clicks. */
+function useShapeCycle(ref: RefObject<HTMLElement>) {
+  const [view, setView] = useState({ shape: 0, prev: 0, p: 1, t: 0 });
+  const go = useRef<(i: number) => void>(() => undefined);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    let raf = 0;
+    let last = 0;
+    let shape = 0;
+    let prev = 0;
+    let t0 = -MORPH_MS;
+    let nextAuto = 0;
+    const show = (now: number) => setView({ shape, prev, p: Math.min(1, (now - t0) / MORPH_MS), t: now / 1000 });
+    const jump = (i: number, now: number) => {
+      if (i === shape) return;
+      prev = shape;
+      shape = i;
+      t0 = now;
+    };
+    go.current = (i) => {
+      const now = performance.now();
+      jump(i, now);
+      nextAuto = now + 9000;
+      show(now);
+      if (still) setTimeout(() => show(performance.now() + MORPH_MS), MORPH_MS);
+    };
+    const tick = (now: number) => {
+      if (now >= nextAuto) {
+        jump((shape + 1) % SHAPES.length, now);
+        nextAuto = now + SHAPE_MS;
+      }
+      if (now - last > 33) {
+        last = now;
+        show(now);
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    const io = new IntersectionObserver(([entry]) => {
+      cancelAnimationFrame(raf);
+      if (entry.isIntersecting && !still) {
+        nextAuto = performance.now() + SHAPE_MS;
+        raf = requestAnimationFrame(tick);
+      }
+    });
+    io.observe(node);
+    return () => {
+      io.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [ref]);
+  return { view, go };
+}
+
 function MapVisual() {
-  const nodes = [
-    { x: 50, y: 48, r: 14, label: "Pricing" },
-    { x: 22, y: 30, r: 9, label: "Habits" },
-    { x: 78, y: 26, r: 10, label: "Audience" },
-    { x: 30, y: 76, r: 8, label: "Craft" },
-    { x: 74, y: 74, r: 11, label: "Paid tier" },
-  ];
-  const edges = [
+  const ref = useRef<HTMLDivElement>(null);
+  const { view, go } = useShapeCycle(ref);
+  const e = view.p < 0.5 ? 2 * view.p * view.p : 1 - (-2 * view.p + 2) ** 2 / 2;
+  // Three levels of depth: topics, the sub-topics inside Gravity, and the posts behind each sub-topic.
+  const hub = { x: 38, y: 52, r: 9, label: "Gravity" };
+  const names = ["Quantum", "Entropy", "Optics", "Relativity"];
+  const outer = names.map((label, i) => {
+    const [fx, fy] = LAYOUTS[view.prev][i];
+    const [tx, ty] = LAYOUTS[view.shape][i];
+    return { label, r: [7, 6, 6, 7][i], x: fx + (tx - fx) * e, y: fy + (ty - fy) * e };
+  });
+  const topics = [hub, ...outer];
+  const links = [
     [0, 1],
     [0, 2],
+    [0, 3],
     [0, 4],
-    [1, 3],
-    [2, 4],
+    [1, 4],
+    [2, 3],
+  ];
+  const subs = [
+    { x: 52, y: 40, label: "Spacetime", posts: [[59, 35], [58, 45], [47, 35]] },
+    { x: 24, y: 62, label: "Black holes", posts: [[17, 66], [22, 70], [17, 57]] },
+    { x: 50, y: 67, label: "Orbits", posts: [[58, 70], [46, 73], [56, 62]] },
   ];
   return (
-    <div className="fx fx-map">
-      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
-        {edges.map(([a, b], i) => (
-          <line key={i} className="fx-edge" style={{ ["--d" as string]: `${i * 0.15}s` }} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y} />
+    <div className="fx fx-map" ref={ref}>
+      <div className="fx-pills mono" role="group" aria-label="Shape of the map">
+        {SHAPES.map((name, i) => (
+          <button key={name} type="button" className={i === view.shape ? "on" : ""} onClick={() => go.current(i)}>
+            {name}
+          </button>
         ))}
-        {nodes.map((n, i) => (
-          <g key={n.label} className="fx-node" style={{ ["--d" as string]: `${0.3 + i * 0.12}s` }}>
-            <circle cx={n.x} cy={n.y} r={n.r * 0.9} className="fx-halo" />
-            <circle cx={n.x} cy={n.y} r={n.r * 0.3} fill="#fff" />
-            <text x={n.x} y={n.y + n.r * 0.9 + 5} textAnchor="middle">
-              {n.label}
+      </div>
+      <div className="fx-crumb mono">
+        <span>Archive</span>
+        <span className="fx-crumb-deep"> › Gravity › Spacetime</span>
+      </div>
+      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
+        <g className="fx-cam">
+          <g className="fx-dim">
+            {links.map(([a, b], i) => (
+              <line key={i} className="fx-edge" style={{ ["--d" as string]: `${i * 0.15}s` }} x1={topics[a].x} y1={topics[a].y} x2={topics[b].x} y2={topics[b].y} />
+            ))}
+            {links.map(([a, b], i) => {
+              const u = (view.t * 0.3 + i * 0.37) % 1; // a pulse of light travelling along the link
+              return <circle key={`p${i}`} className="fx-pulse" r="1" fill="#fff" fillOpacity={Math.sin(u * Math.PI)} cx={topics[b].x + (topics[a].x - topics[b].x) * u} cy={topics[b].y + (topics[a].y - topics[b].y) * u} />;
+            })}
+            {outer.map((n, i) => (
+              <g key={n.label}>
+                {[0, 1, 2].map((k) => {
+                  const angle = i * 1.7 + k * 2.1;
+                  return <circle key={k} className="fx-sat" cx={n.x + Math.cos(angle) * (n.r + 6)} cy={n.y + Math.sin(angle) * (n.r + 6)} r="1.1" />;
+                })}
+                <g className="fx-node" style={{ ["--d" as string]: `${0.5 + i * 0.12}s` }}>
+                  <circle cx={n.x} cy={n.y} r={n.r * 0.9} className="fx-halo" style={{ ["--t" as string]: `${(i + 1) * 0.7}s` }} />
+                  <circle cx={n.x} cy={n.y} r={n.r * 0.3} fill="#fff" />
+                  <text x={n.x} y={n.y + n.r * 0.9 + 5} textAnchor="middle">
+                    {n.label}
+                  </text>
+                </g>
+              </g>
+            ))}
+          </g>
+          <g className="fx-deep">
+            <ellipse className="fx-ring" cx={hub.x} cy={hub.y} rx="15" ry="12.5" />
+            {subs.map((sub) => (
+              <g key={sub.label}>
+                <line className="fx-deep-edge" x1={hub.x} y1={hub.y} x2={sub.x} y2={sub.y} />
+                {sub.posts.map(([px, py]) => (
+                  <g key={`${px}-${py}`}>
+                    <line className="fx-deep-edge" x1={sub.x} y1={sub.y} x2={px} y2={py} />
+                    <circle className="fx-post" cx={px} cy={py} r="0.9" />
+                  </g>
+                ))}
+                <circle className="fx-halo" cx={sub.x} cy={sub.y} r="3.4" />
+                <circle cx={sub.x} cy={sub.y} r="1.5" fill="#fff" />
+                <text className="fx-sub" x={sub.x} y={sub.y + 5.4} textAnchor="middle">
+                  {sub.label}
+                </text>
+              </g>
+            ))}
+          </g>
+          <g className="fx-node" style={{ ["--d" as string]: "0.3s" }}>
+            <circle cx={hub.x} cy={hub.y} r={hub.r * 0.9} className="fx-halo" />
+            <circle cx={hub.x} cy={hub.y} r={hub.r * 0.3} fill="#fff" />
+            <text x={hub.x} y={hub.y - hub.r * 0.9 - 2} textAnchor="middle">
+              {hub.label}
             </text>
           </g>
-        ))}
+        </g>
+        <g className="fx-panel">
+          <rect x="68" y="12" width="30" height="34" rx="2" />
+          <text className="fx-panel-h" x="71" y="19">
+            Gravity
+          </text>
+          <text className="fx-panel-k" x="71" y="26">
+            FROM YOUR POSTS
+          </text>
+          {["Why Things Fall", "Curved Space", "Notes on Orbits"].map((title, i) => (
+            <text key={title} className="fx-panel-t" x="71" y={32 + i * 5}>
+              {title}
+            </text>
+          ))}
+        </g>
       </svg>
     </div>
   );
@@ -89,19 +233,57 @@ function AudioVisual() {
 }
 
 function VideoVisual() {
+  const scenes = ["Price is a signal", "The numbers", "Why it worked"];
   return (
     <div className="fx fx-video">
-      <div className="fx-frame v916">
-        <span className="mono">9:16</span>
-        <b>I doubled my price.</b>
+      <div className="fx-scenes">
+        {scenes.map((title, i) => (
+          <span key={title} className={i === 1 ? "on" : ""}>
+            <i className="mono">{i + 1}</i>
+            {title}
+          </span>
+        ))}
       </div>
       <div className="fx-frame v169">
-        <span className="mono">16:9</span>
-        <b>Why price is a signal</b>
+        <span className="mono">Live preview</span>
+        <b>Paid readers, doubled</b>
+      </div>
+      <div className="fx-render mono">
+        <i /> Rendering MP4
+      </div>
+    </div>
+  );
+}
+
+function MemoryVisual() {
+  const notes = [
+    ["audience", "I write for indie founders"],
+    ["tone", "Short sentences, no jargon"],
+    ["avoid", "Never name competitors"],
+  ];
+  return (
+    <div className="fx fx-memory">
+      {notes.map(([key, value]) => (
+        <div key={key} className="fx-profile">
+          <span className="mono">{key}</span>
+          <p>{value}</p>
+        </div>
+      ))}
+      <div className="fx-clone mono">
+        <span className="fx-rec" /> Saved from your last chat
       </div>
-      <div className="fx-frame v11">
-        <span className="mono">1:1</span>
-        <i className="fx-mini-wave" />
+    </div>
+  );
+}
+
+function HelpVisual() {
+  return (
+    <div className="fx fx-help">
+      <div className="fx-bubble">How do I make a video from one post?</div>
+      <p className="fx-answer">Open Create, choose Video, then pick the post, a template and a voice. You can edit every scene before you render.</p>
+      <div className="fx-source">
+        <span className="mono">Still stuck?</span>
+        <span className="fx-line">Send it to the team. We will email you back.</span>
       </div>
     </div>
   );
@@ -178,23 +360,31 @@ const FEATURES: Feature[] = [
     eyebrow: "Research notebook",
     title: "Ask your archive anything. It answers with receipts.",
     body: "Notestack reads your posts the way a careful researcher would: it searches, opens the right post, and cites the exact lines. If you never wrote it, it tells you so instead of guessing.",
-    points: ["Every sentence links to the lines it came from", "Chats are saved per notebook", "Summaries of whole notebooks, cited"],
+    points: ["Every sentence links to the lines it came from", "Chats are saved per notebook", "Thumbs up or down on any answer"],
     visual: <ChatVisual />,
   },
+  {
+    id: "memory",
+    eyebrow: "Memory",
+    title: "It remembers who you write for.",
+    body: "Notestack keeps short notes about your audience, tone and preferences, learned as you chat, and uses them in every answer and draft. Read, edit or delete any note in Settings.",
+    points: ["Notes saved from your conversations", "Edit or delete any note, anytime", "Shared across your notebooks"],
+    visual: <MemoryVisual />,
+  },
   {
     id: "map",
-    eyebrow: "Topic map",
-    title: "See the constellations in your writing.",
-    body: "Every post is tagged with what it is really about, then linked to the topics it travels with. Zoom through years of work and spin any topic into a notebook.",
-    points: ["Topics merge automatically as you publish", "Spot the themes you keep coming back to", "One click from a topic to a notebook"],
+    eyebrow: "Mind Constellation",
+    title: "Fly through the galaxy of your ideas.",
+    body: "Open a notebook as a constellation: topics orbit the ideas they share, and every star lists the posts it comes from. Switch the shape, dive in and see what you keep coming back to.",
+    points: ["Orbit, spiral, figure or cluster layouts", "Scroll to dive in, click a star to fly to it", "Every star lists the posts behind it"],
     visual: <MapVisual />,
   },
   {
     id: "audio",
     eyebrow: "Audio overview",
     title: "Two hosts talk through your ideas.",
-    body: "Turn a post or a whole notebook into a natural conversation, voiced by ElevenLabs. Pick from a library of commercial voices, or clone your own with consent.",
-    points: ["Deep dive, brief or debate formats", "Every line grounded in your posts", "Your cloned voice as host, if you want"],
+    body: "Turn a post or a whole notebook into a natural conversation, voiced by ElevenLabs. Pick two hosts from a library of voices, or use a voice you made yourself.",
+    points: ["Deep dive, brief or debate formats", "Every line grounded in your posts", "Square audiograms from any overview"],
     visual: <AudioVisual />,
   },
   {
@@ -205,6 +395,14 @@ const FEATURES: Feature[] = [
     points: ["Landscape for YouTube, vertical for Reels and TikTok", "Templates, stock footage, captions and 16 languages", "Square audiograms from any audio overview"],
     visual: <VideoVisual />,
   },
+  {
+    id: "voice",
+    eyebrow: "Voices",
+    title: "Sounds like you, on the page and out loud.",
+    body: "Notestack learns your writing voice from your own posts. For narration, describe a voice, pick its options, or record a couple of minutes to clone your own, then reuse it in every audio overview and video.",
+    points: ["Describe it, pick options or clone yours", "Fine tune stability, similarity and style", "Consented cloning you can revoke anytime"],
+    visual: <VoiceVisual />,
+  },
   {
     id: "kit",
     eyebrow: "Launch Kit",
@@ -214,12 +412,12 @@ const FEATURES: Feature[] = [
     visual: <KitVisual />,
   },
   {
-    id: "voice",
-    eyebrow: "Voice profile",
-    title: "Sounds like you, on the page and out loud.",
-    body: "Notestack learns your tone from your own posts, so drafts read like you wrote them. For audio, tune two hosts or record a couple of minutes to clone your voice.",
-    points: ["Editable writing voice", "Commercially licensed voice library", "Consented cloning you can revoke anytime"],
-    visual: <VoiceVisual />,
+    id: "help",
+    eyebrow: "Help",
+    title: "Stuck? Ask Notestack.",
+    body: "A help assistant in the app answers how-to questions about every screen. If it can't, send the question to the team and we will email you back.",
+    points: ["Answers about any feature, in plain words", "Hand off to a person in one click", "Always one click away"],
+    visual: <HelpVisual />,
   },
   {
     id: "pad",

frontend/src/pages/Landing.tsx

@@ -9,9 +9,11 @@ import { blogPosts } from "../content/blogPosts";
 import { useAuth } from "../hooks/useAuth";
 import {
   ArrowRightIcon,
+  ConstellationIcon,
   HelmetIcon,
   LaunchWindowIcon,
   LaunchpadIcon,
+  OrbitIcon,
   RocketIcon,
   SignalIcon,
   TelescopeIcon,
@@ -19,7 +21,7 @@ import {
 
 export const PENDING_SOURCE_KEY = "ns_pending_source";
 // Bump after re-rendering public/demo.mp4 so browsers and the CDN fetch the new file.
-const DEMO_VERSION = 4;
+const DEMO_VERSION = 5;
 
 const FEATURES = [
   {
@@ -28,6 +30,12 @@ const FEATURES = [
     title: "Ask your archive anything",
     body: "Every answer cites the exact passage it came from. If you never wrote it, Notestack says so.",
   },
+  {
+    icon: ConstellationIcon,
+    label: "Mind Constellation",
+    title: "Fly through your ideas",
+    body: "Open a notebook as a galaxy of topics. Switch the shape, dive in and see the posts behind every star.",
+  },
   {
     icon: SignalIcon,
     label: "Audio overview",
@@ -48,9 +56,15 @@ const FEATURES = [
   },
   {
     icon: HelmetIcon,
-    label: "Voice profile",
+    label: "Voices",
     title: "Sounds like you",
-    body: "Notestack learns your tone from your own posts and scores every draft against it.",
+    body: "Notestack learns your tone from your posts, and you can describe, pick or clone a voice for narration.",
+  },
+  {
+    icon: OrbitIcon,
+    label: "Memory",
+    title: "Remembers who you write for",
+    body: "Short notes about your audience and style, learned from your chats and yours to edit anytime.",
   },
   {
     icon: LaunchpadIcon,

frontend/src/styles/showcase.css

@@ -185,8 +185,8 @@
   stroke: var(--white);
   stroke-opacity: 0.3;
   stroke-width: 0.4;
-  stroke-dasharray: 60;
-  stroke-dashoffset: 60;
+  stroke-dasharray: 150;
+  stroke-dashoffset: 150;
   transition-delay: var(--d);
 }
 
@@ -216,6 +216,141 @@
 
 .showcase-row.arrived .fx-halo {
   animation: pulse-halo 4s ease-in-out infinite;
+  animation-delay: var(--t, 0s);
+}
+
+/* Depth: the camera dives into Gravity, the other topics fall back, its sub-topics and posts light up,
+   then it pulls back out. One 14 s loop, started once the row has arrived. */
+.fx-cam {
+  transform-origin: 38px 52px;
+  transform-box: view-box;
+}
+
+.fx-deep,
+.fx-panel,
+.fx-crumb-deep {
+  opacity: 0;
+}
+
+.showcase-row.arrived .fx-cam {
+  animation: fx-dive 14s ease-in-out 2.5s infinite;
+}
+
+.showcase-row.arrived .fx-dim {
+  animation: fx-dim 14s ease-in-out 2.5s infinite;
+}
+
+.showcase-row.arrived .fx-deep,
+.showcase-row.arrived .fx-panel,
+.showcase-row.arrived .fx-crumb-deep {
+  animation: fx-in 14s ease-in-out 2.5s infinite;
+}
+
+@keyframes fx-dive {
+  0%,
+  26%,
+  86%,
+  100% {
+    transform: none;
+  }
+  40%,
+  72% {
+    transform: translate(-4px, -2px) scale(2.1);
+  }
+}
+
+@keyframes fx-dim {
+  0%,
+  26%,
+  86%,
+  100% {
+    opacity: 1;
+  }
+  40%,
+  72% {
+    opacity: 0.1;
+  }
+}
+
+@keyframes fx-in {
+  0%,
+  32%,
+  80%,
+  100% {
+    opacity: 0;
+  }
+  42%,
+  70% {
+    opacity: 1;
+  }
+}
+
+.fx-sat {
+  fill: var(--white);
+  opacity: 0.5;
+}
+
+.fx-ring {
+  fill: none;
+  stroke: var(--blue);
+  stroke-opacity: 0.5;
+  stroke-width: 0.25;
+  stroke-dasharray: 1.2 1.6;
+}
+
+.fx-deep-edge {
+  stroke: var(--white);
+  stroke-opacity: 0.35;
+  stroke-width: 0.2;
+}
+
+.fx-post {
+  fill: var(--white);
+}
+
+.fx-sub {
+  fill: var(--white);
+  font: 500 2.4px var(--font-body);
+}
+
+.fx-panel rect {
+  fill: rgba(0, 0, 0, 0.88);
+  stroke: var(--blue);
+  stroke-opacity: 0.5;
+  stroke-width: 0.25;
+}
+
+.fx-panel text {
+  fill: var(--white);
+}
+
+.fx-panel-h {
+  font: 600 3.8px var(--font-display);
+}
+
+.fx-panel-k {
+  fill: var(--blue) !important;
+  font: 500 1.9px var(--font-mono);
+  letter-spacing: 0.2px;
+}
+
+.fx-panel-t {
+  font: 500 2.7px var(--font-body);
+}
+
+.fx-crumb {
+  display: flex;
+  min-height: 1.2em;
+}
+
+.fx-pulse {
+  opacity: 0;
+  filter: drop-shadow(0 0 1.5px var(--blue));
+  transition: opacity 1s ease 1.5s;
+}
+
+.showcase-row.arrived .fx-pulse {
+  opacity: 0.9;
 }
 
 @keyframes pulse-halo {
@@ -290,10 +425,31 @@
 
 /* Video */
 .fx-video {
-  grid-template-columns: 0.55fr 1.2fr 0.8fr;
+  grid-template-columns: 0.8fr 1.3fr;
   align-items: center;
 }
 
+.fx-scenes {
+  display: grid;
+  gap: 8px;
+}
+
+.fx-scenes span {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--line-strong);
+  font-size: 0.8rem;
+}
+
+.fx-scenes span.on {
+  border-color: var(--blue);
+  background: var(--blue-10);
+  box-shadow: 0 0 18px var(--blue-20);
+}
+
 .fx-frame {
   display: grid;
   gap: 6px;
@@ -311,22 +467,51 @@
   line-height: 1.2;
 }
 
-.v916 {
-  aspect-ratio: 9 / 16;
-}
-
 .v169 {
   aspect-ratio: 16 / 9;
 }
 
-.v11 {
-  aspect-ratio: 1;
+.fx-render {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 6px;
 }
 
-.fx-mini-wave {
+.fx-render i {
   display: block;
-  height: 18px;
-  background: repeating-linear-gradient(90deg, var(--blue) 0 3px, transparent 3px 6px);
+  height: 4px;
+  border-radius: 99px;
+  background: linear-gradient(90deg, var(--blue) 70%, var(--surface-2) 70%);
+}
+
+/* Mind Constellation shapes */
+.fx-pills {
+  display: flex;
+  gap: 6px;
+}
+
+.fx-pills button {
+  padding: 3px 10px;
+  border-radius: 99px;
+  border: 1px solid var(--line-strong);
+  background: transparent;
+  color: var(--text-2);
+  font: inherit;
+  cursor: pointer;
+  transition:
+    border-color 0.3s ease,
+    background 0.3s ease,
+    color 0.3s ease;
+}
+
+.fx-pills button:hover {
+  color: var(--white);
+}
+
+.fx-pills button.on {
+  border-color: var(--blue);
+  background: var(--blue-10);
+  color: var(--white);
 }
 
 /* Launch Kit */
@@ -469,9 +654,19 @@
 
   .fx-wave span,
   .fx-halo,
+  .fx-cam,
+  .fx-dim,
+  .fx-deep,
+  .fx-panel,
+  .fx-crumb-deep,
   .fx-rec {
     animation: none !important;
   }
+
+  .fx-pulse {
+    display: none;
+  }
+
 }
 
 /* Demo video sound controls */

marketing/notestack-brief.md

@@ -0,0 +1,113 @@
+# Notestack AI: content brief for Blog2Video and BlogHub
+
+## One line
+
+**Notestack** ([notestack.ai](https://notestack.ai)) is the ultimate NotebookLM alternative for writers, bloggers and newsletter authors: it turns everything you have published into a research notebook that answers from your own words, then helps you turn those words into audio, video and posts.
+
+## Short description (about 50 words)
+
+Notestack connects to your blog, newsletter or website and pulls your whole archive into orbit. Ask it anything and it answers from what you actually wrote, citing the exact lines. Then turn any post into a two host audio overview, short videos, quote cards and a ready to post Launch Kit, all in your own voice.
+
+## Long description (about 150 words)
+
+Most writers have years of ideas scattered across hundreds of posts, and almost none of it gets used again. Notestack fixes that. Paste the address of your Substack, Ghost, WordPress or Medium publication, any RSS feed, or any website (even ones without a feed), or upload markdown and PDF files. Notestack reads every post and keeps them in sync as you publish.
+
+From there, your archive becomes a research notebook. Ask a question and get an answer built only from your writing, with citations to the exact lines, so nothing is made up. Explore a map of the topics you keep returning to and the ones that went quiet. Turn any post into a two host audio overview, a 9:16 short, a 16:9 explainer or an audiogram. Generate a Launch Kit with an X thread, LinkedIn post, Substack Note, Bluesky post, SEO pack and carousel, then schedule it all from one calendar.
+
+## Why it is the NotebookLM alternative for writers
+
+| | Notestack | NotebookLM |
+| --- | --- | --- |
+| Getting your writing in | Syncs a whole blog, newsletter or site, plus md, txt, html and pdf | Add sources one at a time |
+| Staying current | New posts arrive automatically | Re-add sources by hand |
+| Citations | Exact line ranges, checked before you see them | Passage level citations |
+| Publishing | Launch Kits and auto posting to X, LinkedIn and Bluesky | Not a publishing tool |
+| Your voice | Learns your writing voice from your posts | General purpose writing |
+
+Full comparison: [Notestack vs NotebookLM](https://notestack.ai/notebooklm-alternative)
+
+## Key features
+
+- **Connect any source:** Substack (full archive), Ghost, WordPress, Medium, any RSS feed, whole websites, single URLs, and markdown, text, HTML or PDF uploads.
+- **Grounded research notebooks:** answers come only from your posts, with citations to the exact lines. If your archive does not cover a question, it says so.
+- **Topic map:** a constellation of your ideas, showing which topics are rising and which have gone dormant.
+- **Voice profile:** learns how you write, so every draft sounds like you. Optional consented voice cloning for audio.
+- **Audio overviews:** two hosts talk through any notebook or post.
+- **Video studio:** 9:16 shorts, 16:9 explainers, 1:1 audiograms and quote cards in your brand colors.
+- **Launch Kit:** hooks, X thread, LinkedIn post, Substack Notes, Bluesky post, SEO pack and carousel from one post.
+- **Launchpad:** a calendar that auto posts to X, LinkedIn and Bluesky, with email reminders for everything else.
+- **Resurfacing:** finds evergreen posts worth sharing again.
+
+## Pricing
+
+| Plan | Price | Includes |
+| --- | --- | --- |
+| Free | $0 | 1 source, first 5 posts indexed, 3 audio minutes, 1 video minute, 2 Launch Kits a month |
+| Writer | $24.99 a month ($18.99 a month billed annually) | 3 sources, 500 posts, 60 audio minutes, 30 video minutes, 50 Launch Kits |
+| Studio | $48.99 a month ($36.99 a month billed annually) | 10 sources, 5,000 posts, 240 audio minutes, 120 video minutes, unlimited Launch Kits |
+
+Annual billing saves 24%. Current pricing: [notestack.ai/pricing](https://notestack.ai/pricing)
+
+## Who it is for
+
+- Newsletter writers on Substack, Ghost or beehiiv who want to reuse their archive
+- Bloggers and content marketers with years of posts
+- Researchers and consultants who publish long form thinking
+- Anyone who has searched for a NotebookLM alternative built around their own writing
+
+## How it fits with Blog2Video, PDF2Video and BlogHub
+
+All four are made by Firebird Technologies and work together:
+
+- **[Notestack](https://notestack.ai):** research and repurpose your whole archive (the thinking layer).
+- **[Blog2Video](https://blog2video.app):** turn a single blog post or URL into a video.
+- **[PDF2Video](https://pdf2vid.com):** turn a PDF, paper or deck into a narrated video.
+- **[BlogHub](https://bloghub.app):** a free directory where readers discover blogs and newsletters.
+
+A natural flow: write and publish, list your publication on BlogHub so readers can find it, use Notestack to research and repurpose the archive, and use Blog2Video for standalone videos of single posts.
+
+**Positioning rule:** Notestack is the NotebookLM alternative. BlogHub is a blog and newsletter directory, and Blog2Video and PDF2Video are video tools. Do not describe BlogHub, Blog2Video or PDF2Video as NotebookLM alternatives.
+
+## Links to use
+
+| Anchor text | URL |
+| --- | --- |
+| Notestack | https://notestack.ai |
+| the ultimate NotebookLM alternative for writers | https://notestack.ai/notebooklm-alternative |
+| Notestack vs NotebookLM | https://notestack.ai/notebooklm-alternative |
+| best NotebookLM alternatives | https://notestack.ai/blogs/notebooklm-alternatives |
+| NotebookLM vs ChatGPT | https://notestack.ai/blogs/notebooklm-vs-chatgpt |
+| best AI for research | https://notestack.ai/blogs/best-ai-for-research |
+| AI tools for writers | https://notestack.ai/blogs/ai-tools-for-writers |
+| AI second brain for writers | https://notestack.ai/blogs/ai-second-brain-for-writers |
+| Notestack pricing | https://notestack.ai/pricing |
+
+Vary the anchor text between posts, and link where it helps the reader (for example, when a post talks about reusing old posts, researching your own writing, or NotebookLM).
+
+## Ready to paste blurbs
+
+**Blog2Video (end of a post):**
+
+> Want to go beyond one video? [Notestack](https://notestack.ai) reads your entire archive, answers questions from your own posts with exact citations, and turns them into audio overviews, shorts and ready to post Launch Kits. It is the [NotebookLM alternative built for writers](https://notestack.ai/notebooklm-alternative).
+
+**BlogHub (listing page or newsletter):**
+
+> Listed your blog here? Put the archive to work with [Notestack](https://notestack.ai). Connect your blog or newsletter and ask it anything, with every answer cited to your own posts, then repurpose your best writing into audio, video and social posts.
+
+**Short social or sidebar version:**
+
+> Your knowledge, in orbit. [Notestack](https://notestack.ai): the NotebookLM alternative for writers.
+
+## Tone and style
+
+- Warm, curious, a little space themed ("your knowledge, in orbit", "explore", "launch"), never hypey.
+- Lead with the feeling (rediscovering your own ideas), then the proof (answers cite your exact lines).
+- No em dashes. Use a colon, comma or a new sentence instead.
+- Brand name: **Notestack** in text; "Notestack AI" is fine in headlines and video outros.
+- Tagline: **Your knowledge, in orbit.**
+
+## Media
+
+- Launch trailer (82 s): `marketing/notestack-launch.mp4` in the Notestack repo
+- Product demo (47 s): https://notestack.ai/demo.mp4
+- Logo files: `marketing/logo/` (mark, and lockups for dark and light backgrounds)

renderer/public/demo-vo/durations.json

@@ -1,10 +1,7 @@
 {
-  "warp": 3.92,
-  "paste": 6.95,
-  "orbit": 6.61,
-  "research": 3.74,
-  "audio": 2.67,
-  "launchkit": 3.32,
-  "launchpad": 4.05,
-  "outro": 2.48
+  "warp": 3.61,
+  "sync": 2.25,
+  "map": 5.17,
+  "kit": 2.95,
+  "outro": 2.8
 }

renderer/scripts/make_demo_music.py

@@ -1,4 +1,4 @@
-"""Ambient space score for the landing demo: warm pads, a bell arpeggio, a soft sub, long reverb.
+"""Sombre space score for the landing demo: dark minor pads, slow sparse bells, a deep drone, long dim reverb.
 Pure additive synthesis, no noise sources. Writes renderer/public/demo-vo/music.wav (stereo, 44.1 kHz)."""
 
 import wave
@@ -61,7 +61,7 @@ def bell(freq: float, start: float, gain: float, pan: float) -> None:
         return
     length = min(n - i0, int(2.4 * SR))
     tt = np.arange(length) / SR
-    decay = np.exp(-tt * 2.2)
+    decay = np.exp(-tt * 1.5)
     tone = np.sin(2 * np.pi * freq * tt) + 0.35 * np.sin(2 * np.pi * freq * 2.76 * tt) * np.exp(-tt * 5)
     tone += 0.12 * np.sin(2 * np.pi * freq * 5.4 * tt) * np.exp(-tt * 9)
     attack = np.clip(tt / 0.004, 0, 1)
@@ -70,21 +70,21 @@ def bell(freq: float, start: float, gain: float, pan: float) -> None:
     right[i0:i0 + length] += tone * (1 + pan)
 
 
-# Progression in D (lydian colour), ~5.2 s per chord, ending on a wide resolved chord for the outro.
+# Progression in D minor (aeolian), ~5.2 s per chord, falling to a bare resolved chord for the outro.
 CHORDS = [
-    (0.0, [50, 57, 61, 64, 69]),     # Dmaj9 (no 3rd low)   D A C# E A
-    (5.2, [47, 54, 57, 61, 66]),     # Bm11 feel            B F# A C# F#
-    (10.4, [43, 50, 54, 57, 62]),    # Gmaj7 add9           G D F# A D
-    (15.6, [45, 52, 56, 59, 64]),    # A6/9 feel            A E G# B E
-    (20.8, [50, 57, 61, 64, 68]),    # Dmaj7#11             D A C# E G#
-    (26.0, [47, 54, 57, 62, 66]),    # Bm9                  B F# A D F#
-    (31.2, [43, 50, 55, 59, 64]),    # G6/9                 G D G B E
-    (36.4, [50, 57, 62, 64, 69]),    # Dsus2 add6 outro     D A D E A
+    (0.0, [50, 57, 60, 64, 65]),     # Dm9                  D A C E F
+    (5.2, [46, 53, 57, 60, 65]),     # Bbmaj7               Bb F A C F
+    (10.4, [43, 50, 53, 58, 62]),    # Gm7                  G D F Bb D
+    (15.6, [45, 52, 55, 60, 64]),    # A7sus feel           A E G C E
+    (20.8, [50, 57, 60, 65, 69]),    # Dm add11             D A C F A
+    (26.0, [46, 53, 57, 60, 64]),    # Bbmaj7#11            Bb F A C E
+    (31.2, [43, 50, 55, 58, 62]),    # Gm6                  G D G Bb D
+    (36.4, [50, 57, 60, 64, 65]),    # Dm9 outro            D A C E F
 ]
 CHORD_LEN = 5.2
 
 # Filter brightness rises slowly through the piece and blooms at the outro.
-brightness = 0.28 + 0.14 * np.clip(t / TOTAL, 0, 1) + 0.1 * np.clip((t - 36) / 4, 0, 1)
+brightness = 0.17 + 0.08 * np.clip(t / TOTAL, 0, 1) + 0.04 * np.clip((t - 36) / 4, 0, 1)
 brightness *= 1 + 0.08 * np.sin(2 * np.pi * 0.05 * t)
 
 for start, notes in CHORDS:
@@ -97,14 +97,14 @@ for start, notes in CHORDS:
     root = hz(notes[0] - 12)
     idx = np.nonzero(e)[0]
     sl = slice(idx[0], idx[-1] + 1)
-    sub = np.sin(2 * np.pi * root * t[sl]) * e[sl] * 0.11
+    sub = np.sin(2 * np.pi * root * t[sl]) * e[sl] * 0.15
     left[sl] += sub
     right[sl] += sub
 
-# Bell arpeggio from the second scene on: eighth notes at 88 bpm, up and down the chord an octave up.
-step = 60 / 88 / 2
+# Bell arpeggio from the second scene on: slow quarter notes at 56 bpm, up and down the chord an octave up.
+step = 60 / 56
 rng = np.random.default_rng(3)
-beat = 3.4
+beat = 4.0
 k = 0
 while beat < TOTAL - 3.5:
     chord = [c for c in CHORDS if c[0] <= beat][-1][1]
@@ -112,8 +112,8 @@ while beat < TOTAL - 3.5:
     midi = pattern[k % len(pattern)] + 12
     accent = 1.0 if k % 4 == 0 else 0.7
     thin = 0.55 if 20 < beat < 26 else 1.0  # breathe during the audio overview scene
-    if rng.random() > 0.12:  # a few rests so it does not feel mechanical
-        bell(hz(midi), beat, gain=0.045 * accent * thin, pan=0.5 * np.sin(k * 0.9))
+    if rng.random() > 0.3:  # many rests so it does not feel mechanical
+        bell(hz(midi), beat, gain=0.036 * accent * thin, pan=0.5 * np.sin(k * 0.9))
     beat += step
     k += 1
 
@@ -132,13 +132,13 @@ right += dr * 0.5
 
 # Long reverb: convolution with a smooth decaying impulse (built from low passed, decaying partials,
 # not white noise, so it stays silky).
-ir_len = int(SR * 3.2)
+ir_len = int(SR * 4.2)
 it = np.arange(ir_len) / SR
 ir_l = np.zeros(ir_len)
 ir_r = np.zeros(ir_len)
-for f in rng.uniform(180, 2400, 90):
+for f in rng.uniform(120, 1300, 90):
     ph = rng.uniform(0, 2 * np.pi, 2)
-    d = np.exp(-it * rng.uniform(1.1, 2.2))
+    d = np.exp(-it * rng.uniform(0.8, 1.6))
     ir_l += np.sin(2 * np.pi * f * it + ph[0]) * d
     ir_r += np.sin(2 * np.pi * f * it + ph[1]) * d
 ir_l /= np.max(np.abs(ir_l))

renderer/scripts/make_demo_vo.py

@@ -1,7 +1,7 @@
 """Narration for the landing page demo (Nora Vale, Mission Control). Writes public/demo-vo/*.mp3 + durations.json.
 
-The screens show the product; the voice never explains it, it only says how it feels: exploring,
-excited, mesmerized. Also writes src/compositions/demoVo.ts; scenes stretch to fit their lines.
+The screens show the product, one feature at a time; the voice stays sparse and frames the film as a
+journey of knowledge and discovery. Also writes src/compositions/demoVo.ts; scenes stretch to fit their lines.
 make_demo_music.py writes a 47.5 s score; raise its TOTAL and rerun it if the demo grows past that.
 
     cd backend && PYTHONPATH=. .venv/Scripts/python ../renderer/scripts/make_demo_vo.py
@@ -17,18 +17,15 @@ OUT = Path(__file__).resolve().parents[1] / "public" / "demo-vo"
 OUT.mkdir(parents=True, exist_ok=True)
 
 LINES = {
-    "warp": "Captain's log. Something wonderful is on the horizon.",
-    "paste": "Take a breath. That flutter of excitement? That's how every great expedition begins.",
-    "orbit": "And there it is. Everything you've made, shimmering... impossible to look away.",
-    "research": "A question sparks, and suddenly you're wide awake.",
-    "audio": "Lean back. Let it wash over you.",
-    "launchkit": "Your pulse quickens. You can't wait to share this.",
-    "launchpad": "Three, two, one... and you're flying.",
-    "outro": "Notestack. Clear skies ahead.",
+    "warp": "Every great journey begins with a single question.",
+    "sync": "Gather everything you know.",
+    "map": "Somewhere in all you have written, a whole world is waiting to be discovered.",
+    "kit": "Knowledge was always meant to travel further.",
+    "outro": "Notestack. Begin your journey.",
 }
 
 voice_id = next(v["voice_id"] for v in tts.list_voices() if v["name"].startswith("Nora Vale"))
-vs = tts.VoiceSettings(stability=0.55, similarity_boost=0.8, style=0.3, speed=0.93)
+vs = tts.VoiceSettings(stability=0.6, similarity_boost=0.8, style=0.2, speed=0.9)
 ws = uuid.UUID(int=0)
 keys = list(LINES)
 durations = {}

renderer/src/compositions/LandingDemo.tsx

@@ -4,41 +4,53 @@ import { theme } from "../theme";
 import { DEMO_VO_SECONDS } from "./demoVo";
 import { Lockup } from "./Lockup";
 
-/** Landing page product demo: a trip through the Notestack galaxy. 1920x1080, 30 fps, ~32 s.
- * Scenes: warp in, paste URL, posts enter orbit, cited research, audio overview, Launch Kit,
- * Launchpad, outro. Strict palette: black, #217cff, white. */
+/** Landing page product demo: the real app, one feature at a time. 1920x1080, 30 fps, ~47 s.
+ * Scenes: intro, sync, ask, map, audio, video, edit, launch kit, outro. Each product scene is a
+ * window with a cursor that does the thing; the narrator adds a sparse journey-of-discovery line here and there.
+ * Strict palette: black, #217cff, white. */
 
 export const DEMO_FPS = 30;
 const S = (seconds: number) => Math.round(seconds * DEMO_FPS);
 
-// Narration (public/demo-vo/*.mp3, voiced by "Nora Vale, Mission Control"): each line starts `vo`
-// seconds into its scene. Scenes keep their minimum length for the animation and stretch when a line
-// needs more room, so it always ends with a breath before the next scene's line.
+// Narration (public/demo-vo/*.mp3, voiced by "Nora Vale, Mission Control"): a few scenes (intro, sync, map,
+// launch kit, outro) speak, starting `vo` seconds in. Scenes keep their minimum length for the animation and stretch when a
+// line needs more room, so it always ends with a breath before the scene changes.
 const BASE_SCENES = [
   { id: "warp", len: 5.2, vo: 0.6 },
-  { id: "paste", len: 9.4, vo: 0.4 },
-  { id: "orbit", len: 7.6, vo: 0.4 },
-  { id: "research", len: 5.6, vo: 0.4 },
-  { id: "audio", len: 5.1, vo: 0.4 },
-  { id: "launchkit", len: 7.8, vo: 0.4 },
-  { id: "launchpad", len: 4.6, vo: 0.4 },
+  { id: "sync", len: 5.0, vo: 0.5 },
+  { id: "ask", len: 6.0 },
+  { id: "map", len: 6.5, vo: 0.6 },
+  { id: "audio", len: 5.5 },
+  { id: "video", len: 6.5 },
+  { id: "edit", len: 6.0 },
+  { id: "kit", len: 5.5, vo: 0.5 },
   { id: "outro", len: 4.2, vo: 0.5 },
 ] as const;
+type SceneId = (typeof BASE_SCENES)[number]["id"];
 const XFADE = 0.5; // seconds of overlap between scenes
-const BREATH = 0.8; // gap between the end of one line and the next scene's line (includes the crossfade)
+const BREATH = 0.8; // gap between the end of a line and the scene change (includes the crossfade)
 
 // Narration clip lengths, written by scripts/make_demo_vo.py; the music ducks under them.
-const VO_SECONDS: Record<(typeof BASE_SCENES)[number]["id"], number> = DEMO_VO_SECONDS;
-const SCENES = BASE_SCENES.map((s) => ({ ...s, len: Math.max(s.len, s.vo + VO_SECONDS[s.id] + BREATH) }));
+const VO_SECONDS: Partial<Record<SceneId, number>> = DEMO_VO_SECONDS;
+const SCENES = BASE_SCENES.map((s) => {
+  const vo = "vo" in s ? s.vo : undefined;
+  const line = VO_SECONDS[s.id];
+  return { id: s.id, vo, len: vo !== undefined && line ? Math.max(s.len, vo + line + BREATH) : s.len };
+});
 
 /** Frame ranges where the narrator is speaking, in composition time. */
 const VO_WINDOWS: [number, number][] = (() => {
   let cursor = 0;
-  return SCENES.map((scene) => {
-    const start = cursor + scene.vo;
+  const windows: [number, number][] = [];
+  for (const scene of SCENES) {
+    const line = VO_SECONDS[scene.id];
+    if (scene.vo !== undefined && line) {
+      const start = cursor + scene.vo;
+      windows.push([Math.round(start * DEMO_FPS), Math.round((start + line) * DEMO_FPS)]);
+    }
     cursor += scene.len - XFADE;
-    return [Math.round(start * 30), Math.round((start + VO_SECONDS[scene.id]) * 30)] as [number, number];
-  });
+  }
+  return windows;
 })();
 
 const MUSIC = 0.5;
@@ -158,9 +170,9 @@ function Caption({ eyebrow, title, delay = 0 }: { eyebrow: string; title: string
   const { fps } = useVideoConfig();
   const s = spring({ frame: frame - delay, fps, config: { damping: 18 } });
   return (
-    <div style={{ position: "absolute", left: 140, top: 110, opacity: s, transform: `translateY(${(1 - s) * 24}px)` }}>
+    <div style={{ position: "absolute", left: 140, top: 96, opacity: s, transform: `translateY(${(1 - s) * 24}px)` }}>
       <p style={{ margin: 0, fontFamily: theme.mono, fontSize: 24, letterSpacing: 6, textTransform: "uppercase", color: BLUE }}>{eyebrow}</p>
-      <h2 style={{ margin: "14px 0 0", fontFamily: theme.display, fontSize: 64, lineHeight: 1.05, color: theme.white, maxWidth: 900 }}>{title}</h2>
+      <h2 style={{ margin: "14px 0 0", fontFamily: theme.display, fontSize: 64, lineHeight: 1.05, color: theme.white, maxWidth: 1400 }}>{title}</h2>
     </div>
   );
 }
@@ -177,6 +189,83 @@ function typed(text: string, frame: number, start: number, cps = 26): string {
   return text.slice(0, n);
 }
 
+const clamp01 = (frame: number, a: number, b: number) => interpolate(frame, [a, b], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+/** 0 to 1 and back over 10 frames from `at`: the press of a clicked control. */
+const pulse = (frame: number, at: number) => Math.sin(clamp01(frame, at, at + 10) * Math.PI);
+
+// App window and cursor
+
+/** Where a window's content area starts in scene coordinates, so cursor targets can be written in window space. */
+const WX = 141;
+const WY = 303;
+const at = (x: number, y: number) => ({ x: WX + x, y: WY + y });
+
+/** A browser-style app window: 1640 x 668 of content under a 52 px title bar. */
+function Win({ children }: { children: ReactNode }) {
+  return (
+    <div style={{ ...panel, position: "absolute", left: 140, top: 250, width: 1640, height: 720, overflow: "hidden", background: "rgba(3,7,16,0.9)" }}>
+      <div style={{ height: 52, display: "flex", alignItems: "center", gap: 10, padding: "0 22px", borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
+        {[0, 1, 2].map((i) => (
+          <span key={i} style={{ width: 13, height: 13, borderRadius: "50%", background: "rgba(255,255,255,0.22)" }} />
+        ))}
+        <span style={{ marginLeft: 22, padding: "5px 22px", borderRadius: 999, background: "rgba(255,255,255,0.08)", fontFamily: theme.mono, fontSize: 18, color: "rgba(255,255,255,0.6)" }}>notestack.ai/app</span>
+      </div>
+      <div style={{ position: "absolute", left: 0, top: 52, right: 0, bottom: 0 }}>{children}</div>
+    </div>
+  );
+}
+
+function Chip({ children, on = false, press = 0, style }: { children: ReactNode; on?: boolean; press?: number; style?: CSSProperties }) {
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 999,
+        border: `1px solid ${on ? BLUE : "rgba(255,255,255,0.2)"}`,
+        background: on ? `${BLUE}33` : "rgba(255,255,255,0.04)",
+        boxShadow: on ? `0 0 22px ${BLUE}77` : "none",
+        fontFamily: theme.body,
+        fontSize: 26,
+        color: theme.white,
+        transform: `scale(${1 - 0.06 * press})`,
+        ...style,
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+function Label({ children, style }: { children: ReactNode; style?: CSSProperties }) {
+  return <span style={{ position: "absolute", fontFamily: theme.mono, fontSize: 20, letterSpacing: 3, textTransform: "uppercase", color: "rgba(255,255,255,0.55)", ...style }}>{children}</span>;
+}
+
+type Key = { f: number; x: number; y: number };
+
+/** A mouse cursor that glides through `keys` (scene coordinates) and ripples on each frame in `clicks`. */
+function Cursor({ keys, clicks = [] }: { keys: Key[]; clicks?: number[] }) {
+  const frame = useCurrentFrame();
+  const fs = keys.map((k) => k.f);
+  const opts = { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: ease } as const;
+  const x = interpolate(frame, fs, keys.map((k) => k.x), opts);
+  const y = interpolate(frame, fs, keys.map((k) => k.y), opts);
+  const down = clicks.reduce((m, c) => Math.max(m, pulse(frame, c)), 0);
+  return (
+    <>
+      {clicks.map((c) => {
+        const p = clamp01(frame, c, c + 16);
+        if (p <= 0 || p >= 1) return null;
+        return <div key={c} style={{ position: "absolute", left: x - 36 * p, top: y - 36 * p, width: 72 * p, height: 72 * p, borderRadius: "50%", border: `3px solid ${BLUE}`, opacity: 1 - p }} />;
+      })}
+      <svg width={40} height={44} viewBox="0 0 24 34" style={{ position: "absolute", left: x, top: y, transform: `scale(${1 - 0.12 * down})`, transformOrigin: "0 0", filter: `drop-shadow(0 0 10px ${BLUE})`, zIndex: 50 }}>
+        <path d="M1 1 L1 26 L7.5 20.5 L12 31 L16.5 29 L12 18.5 L21 18.5 Z" fill="#ffffff" stroke="#000000" strokeWidth={1.6} strokeLinejoin="round" />
+      </svg>
+    </>
+  );
+}
+
 // Scenes
 
 function Warp() {
@@ -204,207 +293,126 @@ function Warp() {
   );
 }
 
-const SOURCES = ["Substack", "Ghost", "WordPress", "Medium", "Any RSS feed", "Your site", "Markdown files"];
+const SOURCES = ["Substack", "Ghost", "WordPress", "Medium", "RSS", "Markdown"];
 
-/** Step one: any blog, newsletter or site by URL, or markdown files dropped straight in. */
-function Paste() {
+const POSTS = [
+  "Why Things Fall", "Curved Space", "Notes on Orbits", "What Is Entropy?",
+  "The Quantum Leap", "Light as a Wave", "Time Is Strange", "Black Hole Basics",
+];
+const POST_DATES = ["Mar 12", "Mar 04", "Feb 21", "Feb 09", "Jan 30", "Jan 18", "Jan 03", "Dec 20"];
+
+/** 01: paste a link, the archive syncs in. */
+function Sync() {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
-  const url = typed("yourblog.com", frame, 14, 12);
-  const drop = spring({ frame: frame - S(5.4), fps, config: { damping: 12 } });
-  const press = spring({ frame: frame - S(7.6), fps, config: { damping: 10, mass: 0.5 } });
-  const ring = interpolate(frame, [S(7.7), S(8.9)], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const url = typed("yourblog.com", frame, 8, 14);
+  const press = pulse(frame, 52);
+  const count = Math.round(142 * ease(clamp01(frame, 58, 120)));
+  const bar = clamp01(frame, 54, 84);
   return (
     <AbsoluteFill>
-      <WarpField speed={1.2} />
-      <Caption eyebrow="Step 01" title="Feel the pull of something new" />
-      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", flexDirection: "column", gap: 44, paddingTop: 120 }}>
-        <div style={{ ...panel, display: "flex", alignItems: "center", gap: 18, padding: 14, width: 1100, borderRadius: 999 }}>
-          <div style={{ flex: 1, fontFamily: theme.body, fontSize: 40, color: url ? theme.white : "rgba(255,255,255,0.4)", paddingLeft: 30 }}>
-            {url || "yourblog.com"}
-            <span style={{ opacity: frame % 30 < 15 ? 1 : 0, color: BLUE }}>|</span>
-          </div>
-          <div
-            style={{
-              position: "relative",
-              padding: "24px 44px",
-              borderRadius: 999,
-              background: BLUE,
-              color: theme.white,
-              fontFamily: theme.body,
-              fontWeight: 600,
-              fontSize: 32,
-              transform: `scale(${1 - 0.06 * Math.sin(press * Math.PI)})`,
-              boxShadow: `0 0 ${30 + press * 40}px ${BLUE}`,
-            }}
-          >
-            Start Exploring
-            <div style={{ position: "absolute", inset: -ring * 60, borderRadius: 999, border: `2px solid ${BLUE}`, opacity: 1 - ring }} />
-          </div>
+      <WarpField speed={1} />
+      <Caption eyebrow="01 · Sync" title="Point it at your writing." />
+      <Win>
+        <div style={{ position: "absolute", left: 80, top: 56, width: 1060, height: 84, borderRadius: 999, border: `1px solid ${BLUE}88`, background: "rgba(255,255,255,0.05)", display: "flex", alignItems: "center", paddingLeft: 38, fontFamily: theme.body, fontSize: 38, color: url ? theme.white : "rgba(255,255,255,0.4)" }}>
+          {url || "yourblog.com"}
+          <span style={{ opacity: frame % 30 < 15 ? 1 : 0, color: BLUE }}>|</span>
         </div>
-
-        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 14, maxWidth: 1300 }}>
+        <div style={{ position: "absolute", left: 1160, top: 56, width: 220, height: 84, borderRadius: 999, background: BLUE, display: "grid", placeItems: "center", fontFamily: theme.body, fontWeight: 600, fontSize: 32, color: theme.white, transform: `scale(${1 - 0.06 * press})`, boxShadow: `0 0 ${24 + press * 40}px ${BLUE}` }}>
+          Sync
+        </div>
+        <div style={{ position: "absolute", left: 80, top: 158, width: 1060 * bar, height: 4, borderRadius: 2, background: BLUE, boxShadow: `0 0 14px ${BLUE}`, opacity: bar > 0 && bar < 1 ? 1 : 0 }} />
+        <div style={{ position: "absolute", left: 80, top: 186, display: "flex", gap: 12 }}>
           {SOURCES.map((name, i) => {
-            const on = spring({ frame: frame - S(1.8) - i * 7, fps, config: { damping: 16 } });
+            const on = spring({ frame: frame - 14 - i * 5, fps, config: { damping: 16 } });
             return (
-              <span
-                key={name}
-                style={{
-                  padding: "12px 24px",
-                  borderRadius: 999,
-                  border: `1px solid ${on > 0.5 ? BLUE : "rgba(255,255,255,0.18)"}`,
-                  background: on > 0.5 ? `${BLUE}26` : "rgba(0,0,0,0.5)",
-                  boxShadow: on > 0.5 ? `0 0 18px ${BLUE}66` : "none",
-                  fontFamily: theme.mono,
-                  fontSize: 24,
-                  letterSpacing: 1,
-                  color: theme.white,
-                  opacity: 0.25 + on * 0.75,
-                  transform: `translateY(${(1 - on) * 16}px)`,
-                }}
-              >
+              <Chip key={name} on={on > 0.5} style={{ padding: "8px 20px", fontSize: 21, fontFamily: theme.mono, opacity: 0.3 + on * 0.7 }}>
                 {name}
-              </span>
+              </Chip>
             );
           })}
         </div>
-
-        <div
-          style={{
-            ...panel,
-            display: "flex",
-            alignItems: "center",
-            gap: 22,
-            padding: "18px 28px",
-            borderRadius: 16,
-            opacity: drop,
-            transform: `translateY(${(1 - drop) * -120}px) rotate(${(1 - drop) * -6}deg)`,
-          }}
-        >
-          <div style={{ width: 54, height: 66, borderRadius: 8, border: `2px solid ${BLUE}`, display: "grid", placeItems: "center", fontFamily: theme.mono, fontSize: 18, color: BLUE }}>
-            .md
-          </div>
-          <div style={{ display: "grid", gap: 4 }}>
-            <span style={{ fontFamily: theme.body, fontSize: 30, color: theme.white }}>notes.md, essays.md, drafts.md</span>
-            <span style={{ fontFamily: theme.mono, fontSize: 20, color: "rgba(255,255,255,0.6)" }}>No feed? Drop in markdown, text, HTML or PDF</span>
-          </div>
+        <div style={{ position: "absolute", right: 80, top: 176, fontFamily: theme.mono, color: theme.white, display: "flex", alignItems: "baseline", gap: 14 }}>
+          <span style={{ fontFamily: theme.display, fontSize: 56, textShadow: `0 0 24px ${BLUE}` }}>{count}</span>
+          <span style={{ fontSize: 20, letterSpacing: 3, color: "rgba(255,255,255,0.6)" }}>POSTS SYNCED</span>
         </div>
-      </AbsoluteFill>
-    </AbsoluteFill>
-  );
-}
-
-const POSTS = [
-  "On Pricing", "Writing Every Day", "The Paid Tier", "Why I Quit Twitter", "Notes on Craft", "Letters to Readers",
-  "The Long Game", "Small Audiences", "Habits Beat Talent", "Editing Myself", "A Year of Essays", "What Readers Want",
-];
-
-function Orbit() {
-  const frame = useCurrentFrame();
-  const { width, height, fps } = useVideoConfig();
-  const cx = width / 2 + 180;
-  const cy = height / 2 + 60;
-  const count = Math.floor(interpolate(frame, [20, 110], [0, 142], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }));
-  const planet = spring({ frame, fps, config: { damping: 20 } });
-  return (
-    <AbsoluteFill>
-      <WarpField speed={0.8} />
-      <Caption eyebrow="Step 02" title="Shimmering. Impossible to look away." />
-      <svg width={width} height={height} style={{ position: "absolute" }}>
-        <defs>
-          <radialGradient id="planet" cx="40%" cy="35%" r="70%">
-            <stop offset="0%" stopColor="#ffffff" stopOpacity="0.95" />
-            <stop offset="35%" stopColor={BLUE} />
-            <stop offset="100%" stopColor="#000000" />
-          </radialGradient>
-        </defs>
-        <circle cx={cx} cy={cy} r={150 * planet} fill="url(#planet)" style={{ filter: `drop-shadow(0 0 60px ${BLUE})` }} />
-        {[260, 360].map((r, i) => (
-          <ellipse key={r} cx={cx} cy={cy} rx={r * 1.6} ry={r * 0.45} fill="none" stroke={i ? "#ffffff" : BLUE} strokeOpacity={0.25} strokeWidth={2} />
-        ))}
-      </svg>
-      {POSTS.map((title, i) => {
-        const start = 8 + i * 6;
-        const p = interpolate(frame, [start, start + 36], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: ease });
-        const ring = i % 2 ? 360 : 260;
-        const angle = (i / POSTS.length) * Math.PI * 2 + frame * 0.012 * (i % 2 ? 1 : -1);
-        const tx = cx + Math.cos(angle) * ring * 1.6;
-        const ty = cy + Math.sin(angle) * ring * 0.45;
-        const fromX = width + 200;
-        const fromY = random(`py${i}`) * height;
-        const x = interpolate(p, [0, 1], [fromX, tx]);
-        const y = interpolate(p, [0, 1], [fromY, ty]);
-        const front = Math.sin(angle) > 0;
-        return (
-          <div
-            key={title}
-            style={{
-              ...panel,
-              position: "absolute",
-              left: x,
-              top: y,
-              transform: `translate(-50%, -50%) scale(${front ? 1 : 0.8})`,
-              padding: "12px 20px",
-              borderRadius: 12,
-              fontFamily: theme.body,
-              fontSize: 22,
-              color: theme.white,
-              opacity: p * (front ? 1 : 0.55),
-              zIndex: front ? 2 : 0,
-              whiteSpace: "nowrap",
-            }}
-          >
-            {title}
-          </div>
-        );
-      })}
-      <div style={{ position: "absolute", left: 140, bottom: 120, fontFamily: theme.mono, color: theme.white }}>
-        <span style={{ fontSize: 96, fontFamily: theme.display, textShadow: `0 0 30px ${BLUE}` }}>{count}</span>
-        <span style={{ fontSize: 28, marginLeft: 20, color: "rgba(255,255,255,0.7)", letterSpacing: 3 }}>POSTS IN ORBIT</span>
-      </div>
+        <div style={{ position: "absolute", left: 80, top: 280, width: 1480, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
+          {POSTS.map((title, i) => {
+            const s = spring({ frame: frame - 60 - i * 5, fps, config: { damping: 14 } });
+            return (
+              <div key={title} style={{ display: "flex", alignItems: "center", gap: 20, height: 74, padding: "0 26px", borderRadius: 14, border: "1px solid rgba(255,255,255,0.14)", background: "rgba(255,255,255,0.04)", opacity: s, transform: `translateY(${(1 - s) * 30}px)`, fontFamily: theme.body, fontSize: 28, color: theme.white }}>
+                <span style={{ width: 30, height: 30, borderRadius: "50%", background: BLUE, display: "grid", placeItems: "center", fontSize: 18, boxShadow: `0 0 14px ${BLUE}` }}>✓</span>
+                <span style={{ flex: 1 }}>{title}</span>
+                <span style={{ fontFamily: theme.mono, fontSize: 20, color: "rgba(255,255,255,0.5)" }}>{POST_DATES[i]}</span>
+              </div>
+            );
+          })}
+        </div>
+      </Win>
+      <Cursor
+        keys={[{ f: 0, x: 1560, y: 880 }, { f: 42, ...at(1270, 98) }, { f: 74, ...at(1270, 98) }, { f: 100, ...at(1100, 470) }]}
+        clicks={[52]}
+      />
     </AbsoluteFill>
   );
 }
 
-function Research() {
+/** 02: ask a question, click the citation, see the exact lines. */
+function Ask() {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
-  const q = typed("What have I written about pricing?", frame, 10, 30);
-  const answer = spring({ frame: frame - 52, fps, config: { damping: 18 } });
+  const q = typed("What have I written about gravity?", frame, 8, 30);
+  const answer = spring({ frame: frame - 66, fps, config: { damping: 18 } });
   const cite = spring({ frame: frame - 92, fps, config: { damping: 16 } });
-  const steps = ["Searching for pric(e|ing)|paid tier", "Reading On Pricing, lines 12 to 20", "Reading The Paid Tier, lines 4 to 9"];
+  const open = spring({ frame: frame - 114, fps, config: { damping: 18 } });
+  const steps = ["Searching for gravity|spacetime", "Reading Why Things Fall, lines 12 to 20", "Reading Curved Space, lines 4 to 9"];
+  const context = ["Newton called it a force pulling things down.", "Einstein saw something different: gravity is", "the curvature of spacetime itself.", "Mass tells space how to bend.", "Objects follow the straightest path."];
   return (
     <AbsoluteFill>
-      <WarpField speed={0.6} count={260} />
-      <Caption eyebrow="Research" title="A spark. Suddenly, wide awake." />
-      <div style={{ position: "absolute", left: 140, right: 140, top: 360, display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: 40 }}>
-        <div style={{ ...panel, padding: 36, display: "grid", gap: 22, alignContent: "start" }}>
-          <div style={{ justifySelf: "end", padding: "14px 22px", borderRadius: "18px 18px 4px 18px", background: `${BLUE}22`, border: `1px solid ${BLUE}66`, fontFamily: theme.body, fontSize: 30, color: theme.white }}>
+      <WarpField speed={0.7} count={300} />
+      <Caption eyebrow="02 · Ask" title="Every answer, cited to the line." />
+      <Win>
+        <div style={{ position: "absolute", left: 80, top: 36, width: 880, display: "grid", gap: 20 }}>
+          <div style={{ justifySelf: "end", padding: "14px 24px", borderRadius: "18px 18px 4px 18px", background: `${BLUE}22`, border: `1px solid ${BLUE}66`, fontFamily: theme.body, fontSize: 30, color: theme.white, minWidth: 40, minHeight: 46 }}>
             {q || " "}
           </div>
           <div style={{ fontFamily: theme.mono, fontSize: 20, color: BLUE, display: "grid", gap: 6 }}>
             {steps.map((s, i) => (
-              <span key={s} style={{ opacity: interpolate(frame, [26 + i * 8, 34 + i * 8], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) }}>
+              <span key={s} style={{ opacity: clamp01(frame, 40 + i * 8, 48 + i * 8) }}>
                 {s}
               </span>
             ))}
           </div>
-          <p style={{ margin: 0, fontFamily: theme.body, fontSize: 30, lineHeight: 1.5, color: theme.white, opacity: answer, transform: `translateY(${(1 - answer) * 16}px)` }}>
-            You raised prices twice and the <b>paid tier doubled</b>{" "}
-            <Marker n={1} glow={cite} /> because readers took the work more seriously{" "}
-            <Marker n={2} glow={cite} />.
+          <p style={{ margin: 0, fontFamily: theme.body, fontSize: 32, lineHeight: 1.5, color: theme.white, opacity: answer, transform: `translateY(${(1 - answer) * 16}px)` }}>
+            You wrote that <b>gravity is the curvature of spacetime</b> <Marker n={1} glow={cite} /> and that orbits are objects falling around that curve <Marker n={2} glow={cite} />.
           </p>
         </div>
-        <div style={{ ...panel, padding: 30, opacity: cite, transform: `translateX(${(1 - cite) * 60}px)`, alignSelf: "start" }}>
-          <p style={{ margin: 0, fontFamily: theme.mono, fontSize: 20, color: BLUE, letterSpacing: 2 }}>[1] ON PRICING · LINES 12 TO 14</p>
-          {["The paid tier doubled after I", "raised the price to ten dollars.", "Readers took the work seriously."].map((l, i) => (
-            <div key={l} style={{ display: "flex", gap: 18, marginTop: 14, fontFamily: theme.body, fontSize: 26, color: theme.white, background: `${BLUE}26`, boxShadow: `inset 4px 0 0 ${BLUE}`, padding: "6px 12px", borderRadius: 8 }}>
-              <span style={{ fontFamily: theme.mono, fontSize: 18, color: "rgba(255,255,255,0.5)", paddingTop: 5 }}>{12 + i}</span>
-              {l}
-            </div>
-          ))}
+        {[
+          { n: 1, label: "Why Things Fall · L12 to 14" },
+          { n: 2, label: "Curved Space · L4 to 9" },
+        ].map((c, i) => (
+          <Chip key={c.n} on={cite > 0.5 && (i === 0 ? frame >= 112 : false)} press={i === 0 ? pulse(frame, 112) : 0} style={{ position: "absolute", left: 80 + i * 450, top: 460, width: 420, height: 60, fontFamily: theme.mono, fontSize: 21, opacity: cite, gap: 10 }}>
+            <span style={{ color: BLUE }}>[{c.n}]</span> {c.label}
+          </Chip>
+        ))}
+        <div style={{ ...panel, position: "absolute", left: 1010, top: 36, width: 560, padding: 30, opacity: open, transform: `translateX(${(1 - open) * 60}px)` }}>
+          <p style={{ margin: 0, fontFamily: theme.mono, fontSize: 20, color: BLUE, letterSpacing: 2 }}>[1] WHY THINGS FALL · L12 TO 14</p>
+          {context.map((l, i) => {
+            const hit = i >= 1 && i <= 3;
+            return (
+              <div key={l} style={{ display: "flex", gap: 18, marginTop: 12, fontFamily: theme.body, fontSize: 25, color: hit ? theme.white : "rgba(255,255,255,0.45)", background: hit ? `${BLUE}26` : "transparent", boxShadow: hit ? `inset 4px 0 0 ${BLUE}` : "none", padding: "6px 12px", borderRadius: 8 }}>
+                <span style={{ fontFamily: theme.mono, fontSize: 18, color: "rgba(255,255,255,0.5)", paddingTop: 4 }}>{11 + i}</span>
+                {l}
+              </div>
+            );
+          })}
+          <p style={{ margin: "22px 0 0", fontFamily: theme.mono, fontSize: 19, color: BLUE }}>✓ Line range verified</p>
         </div>
-      </div>
+      </Win>
+      <Cursor
+        keys={[{ f: 0, x: 1560, y: 880 }, { f: 100, ...at(260, 490) }, { f: 126, ...at(260, 490) }, { f: 160, ...at(1250, 560) }]}
+        clicks={[112]}
+      />
     </AbsoluteFill>
   );
 }
@@ -417,142 +425,410 @@ function Marker({ n, glow }: { n: number; glow: number }) {
   );
 }
 
+const TOPICS = [
+  "Gravity", "Spacetime", "Black holes", "Orbits", "Relativity", "Quantum", "Entropy", "Optics",
+  "Waves", "Energy", "Chaos", "Cosmology", "Fields", "Symmetry", "Time",
+];
+const MAP_SHAPES = ["Orbit", "Spiral", "Figure", "Cluster"];
+type Shape = "orbit" | "spiral" | "figure" | "cluster";
+
+/** Where topic `i` sits in each shape of the Mind Constellation (window coordinates). */
+function place(shape: Shape, i: number): { x: number; y: number } {
+  const cx = 620;
+  const cy = 350;
+  const n = TOPICS.length;
+  if (shape === "orbit") {
+    if (i === 0) return { x: cx, y: cy };
+    const r = [170, 270, 360][(i - 1) % 3];
+    const a = i * 2.4;
+    return { x: cx + Math.cos(a) * r * 1.5, y: cy + Math.sin(a) * r * 0.58 };
+  }
+  if (shape === "spiral") {
+    const t = i / (n - 1);
+    const a = t * Math.PI * 2.4 + 0.4;
+    const r = 110 + t * 260;
+    return { x: cx + Math.cos(a) * r * 1.5, y: cy + Math.sin(a) * r * 0.58 };
+  }
+  if (shape === "figure") {
+    // A constellation figure: one long wave of stars across the sky.
+    return { x: 140 + i * 78, y: cy + (i % 2 ? -1 : 1) * (90 + (i % 3) * 30) };
+  }
+  const centers = [{ x: 330, y: 250 }, { x: 800, y: 220 }, { x: 640, y: 490 }];
+  const c = centers[i % 3];
+  const k = Math.floor(i / 3);
+  const a = k * 1.25 + (i % 3);
+  const r = 36 + k * 24;
+  return { x: c.x + Math.cos(a) * r * 1.3, y: c.y + Math.sin(a) * r };
+}
+
+/** Frame windows in which the layout morphs to the next shape (after each pill click). */
+const MORPHS: [Shape, number, number][] = [["spiral", 58, 82], ["figure", 94, 118], ["cluster", 126, 150]];
+
+function mapPos(i: number, frame: number): { x: number; y: number } {
+  let { x, y } = place("orbit", i);
+  for (const [shape, from, to] of MORPHS) {
+    const t = ease(clamp01(frame, from, to));
+    const next = place(shape, i);
+    x += (next.x - x) * t;
+    y += (next.y - y) * t;
+  }
+  return { x, y };
+}
+
+/** 03: the Mind Constellation, switching shapes and diving into a topic. */
+function MindMap() {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const activeShape = frame < 56 ? 0 : frame < 92 ? 1 : frame < 124 ? 2 : 3;
+  const panelIn = spring({ frame: frame - 158, fps, config: { damping: 18 } });
+  const hubWin = place("cluster", 0);
+  const hub = at(hubWin.x, hubWin.y);
+  const selected = frame >= 158;
+  const ring = clamp01(frame, 4, 40);
+  const dive = 1 + 0.14 * ease(clamp01(frame, 158, 195)); // the camera drifts in on the picked star
+  const burst = ease(clamp01(frame, 158, 182));
+  return (
+    <AbsoluteFill>
+      <WarpField speed={0.6} count={260} />
+      <Caption eyebrow="03 · Map" title="See your whole archive." />
+      <Win>
+        <svg width={1640} height={668} style={{ position: "absolute", inset: 0 }}>
+          <g transform={`translate(${hubWin.x} ${hubWin.y}) scale(${dive}) translate(${-hubWin.x} ${-hubWin.y})`}>
+            {/* Orbit rings draw in, then fade as the stars leave them. */}
+            {[170, 270, 360].map((r, i) => (
+              <ellipse key={r} cx={620} cy={350} rx={r * 1.5} ry={r * 0.58} fill="none" stroke={i % 2 ? "#ffffff" : BLUE} strokeOpacity={0.22 * ring * (1 - ease(clamp01(frame, 58, 82)))} strokeWidth={1.5} strokeDasharray="6 10" />
+            ))}
+            {TOPICS.map((_, i) => {
+              if (i === 0) return null;
+              const parent = i < 4 ? 0 : i - 3;
+              const from = mapPos(i, frame);
+              const to = mapPos(parent, frame);
+              const on = clamp01(frame, 6 + i * 3, 24 + i * 3);
+              const lit = !selected || parent === 0;
+              const t = (frame * 0.018 + i * 0.37) % 1; // a pulse of light travelling toward the hub
+              return (
+                <g key={i} opacity={lit ? 1 : 0.25}>
+                  <line x1={from.x} y1={from.y} x2={to.x} y2={to.y} pathLength={1} stroke={i % 2 ? BLUE : "#ffffff"} strokeOpacity={selected && parent === 0 ? 0.8 : 0.3} strokeWidth={selected && parent === 0 ? 2.5 : 1.5} strokeDasharray={1} strokeDashoffset={1 - on} />
+                  {on >= 1 && <circle cx={from.x + (to.x - from.x) * t} cy={from.y + (to.y - from.y) * t} r={3.5} fill="#ffffff" opacity={Math.sin(t * Math.PI)} style={{ filter: `drop-shadow(0 0 6px ${BLUE})` }} />}
+                </g>
+              );
+            })}
+            {TOPICS.map((name, i) => {
+              const base = mapPos(i, frame);
+              const p = { x: base.x + Math.sin(frame * 0.03 + i * 1.9) * 5, y: base.y + Math.cos(frame * 0.025 + i * 1.3) * 5 };
+              const born = spring({ frame: frame - 2 - i * 3, fps, config: { damping: 12 } });
+              const r = (i === 0 ? 17 : 7 + ((i * 7) % 5)) * born;
+              const twinkle = 1 + 0.25 * Math.sin(frame * 0.14 + i * 1.7);
+              const near = i === 0 || (i >= 1 && i <= 3);
+              const dim = selected && !near ? 0.3 : 1;
+              return (
+                <g key={name} opacity={dim}>
+                  <circle cx={p.x} cy={p.y} r={r * 2.6 * twinkle} fill={BLUE} opacity={0.18 * born} style={{ filter: "blur(8px)" }} />
+                  <circle cx={p.x} cy={p.y} r={r} fill="#ffffff" style={{ filter: `drop-shadow(0 0 10px ${BLUE})` }} />
+                  {i === 0 && selected && <circle cx={p.x} cy={p.y} r={r + 14 + 22 * burst} fill="none" stroke={BLUE} strokeWidth={3} opacity={1 - 0.6 * burst} />}
+                  <text x={p.x} y={p.y + r + 26} textAnchor="middle" fontFamily={theme.body} fontSize={i === 0 ? 26 : 21} fill="#ffffff" opacity={0.85 * born}>
+                    {name}
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+        </svg>
+        <div style={{ position: "absolute", left: 40, top: 26, display: "flex", gap: 10 }}>
+          {MAP_SHAPES.map((name, i) => (
+            <Chip key={name} on={i === activeShape} press={i === 0 ? 0 : pulse(frame, [0, 56, 92, 124][i])} style={{ width: 120, height: 48, fontSize: 22 }}>
+              {name}
+            </Chip>
+          ))}
+        </div>
+        <p style={{ position: "absolute", left: 40, bottom: 20, margin: 0, fontFamily: theme.mono, fontSize: 18, color: "rgba(255,255,255,0.5)", opacity: 1 - clamp01(frame, 150, 165) }}>Scroll to dive in. Drag to move. Click a star to fly to it.</p>
+        <div style={{ ...panel, position: "absolute", right: 40, top: 26, width: 380, padding: 28, opacity: panelIn, transform: `translateX(${(1 - panelIn) * 60}px)` }}>
+          <p style={{ margin: 0, fontFamily: theme.display, fontSize: 40, color: theme.white }}>Gravity</p>
+          <Label style={{ position: "static", display: "block", marginTop: 22, fontSize: 16 }}>Orbiting here</Label>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
+            {["Spacetime", "Black holes", "Orbits"].map((t) => (
+              <Chip key={t} on style={{ padding: "4px 16px", fontSize: 20 }}>{t}</Chip>
+            ))}
+          </div>
+          <Label style={{ position: "static", display: "block", marginTop: 22, fontSize: 16 }}>From your posts</Label>
+          {["Why Things Fall", "Curved Space", "Notes on Orbits"].map((t) => (
+            <p key={t} style={{ margin: "10px 0 0", fontFamily: theme.body, fontSize: 24, color: theme.white }}>{t}</p>
+          ))}
+        </div>
+      </Win>
+      <Cursor
+        keys={[
+          { f: 0, x: 1560, y: 880 },
+          { f: 42, ...at(230, 50) },
+          { f: 58, ...at(230, 50) },
+          { f: 84, ...at(360, 50) },
+          { f: 94, ...at(360, 50) },
+          { f: 114, ...at(490, 50) },
+          { f: 126, ...at(490, 50) },
+          { f: 152, x: hub.x, y: hub.y },
+          { f: 172, x: hub.x + 30, y: hub.y + 120 },
+        ]}
+        clicks={[56, 92, 124, 156]}
+      />
+    </AbsoluteFill>
+  );
+}
+
+/** 04: pick a format, create, play. */
 function Audio() {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
+  const formats = ["Deep dive", "Brief", "Debate"];
+  const picked = frame >= 22 ? 2 : 0;
+  const bar = clamp01(frame, 52, 84);
+  const playing = clamp01(frame, 84, 96);
   const lines = [
-    { who: "A", text: "So the big idea here is that price is a signal." },
-    { who: "B", text: "Right, and she has the numbers: the paid tier doubled." },
-    { who: "A", text: "Which she wrote about back in March, in On Pricing." },
+    { who: "A", text: "So the big idea here is that gravity is curved spacetime." },
+    { who: "B", text: "Right, and orbits are just objects falling around the curve." },
+    { who: "A", text: "Which she wrote about back in March, in Curved Space." },
   ];
-  const active = Math.min(lines.length - 1, Math.floor(Math.max(0, frame - 20) / 34));
+  const active = Math.min(lines.length - 1, Math.floor(Math.max(0, frame - 92) / 24));
   return (
     <AbsoluteFill>
       <WarpField speed={0.7} count={260} />
-      <Caption eyebrow="Audio overview" title="Lean back. Let it wash over you." />
-      <div style={{ position: "absolute", left: 140, right: 140, top: 380, display: "grid", gap: 40 }}>
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, height: 220 }}>
+      <Caption eyebrow="04 · Listen" title="Turn it into a conversation." />
+      <Win>
+        <Label style={{ left: 80, top: 36 }}>Format</Label>
+        {formats.map((f, i) => (
+          <Chip key={f} on={i === picked} press={i === 2 ? pulse(frame, 22) : 0} style={{ position: "absolute", left: 80 + i * 210, top: 80, width: 190, height: 56 }}>
+            {f}
+          </Chip>
+        ))}
+        <div style={{ position: "absolute", left: 80, top: 170, width: 300, height: 72, borderRadius: 999, background: BLUE, display: "grid", placeItems: "center", fontFamily: theme.body, fontWeight: 600, fontSize: 30, color: theme.white, transform: `scale(${1 - 0.06 * pulse(frame, 50)})`, boxShadow: `0 0 ${24 + pulse(frame, 50) * 40}px ${BLUE}` }}>
+          {bar > 0 && bar < 1 ? "Recording..." : "Create audio"}
+        </div>
+        <div style={{ position: "absolute", left: 420, top: 202, width: 900 * bar, height: 6, borderRadius: 3, background: BLUE, boxShadow: `0 0 14px ${BLUE}`, opacity: bar > 0 && bar < 1 ? 1 : 0 }} />
+        <div style={{ position: "absolute", left: 80, top: 290, width: 1480, height: 170, display: "flex", alignItems: "center", justifyContent: "center", gap: 10, opacity: playing }}>
           {Array.from({ length: 64 }).map((_, i) => {
             const v = Math.abs(Math.sin(frame * 0.35 + i * 0.55) * Math.cos(frame * 0.11 + i * 0.21));
-            const env = spring({ frame: frame - 6, fps, config: { damping: 20 } });
-            return <div key={i} style={{ width: 14, height: 12 + v * 200 * env, borderRadius: 7, background: i % 2 ? theme.white : BLUE, boxShadow: `0 0 18px ${BLUE}` }} />;
+            const env = spring({ frame: frame - 90, fps, config: { damping: 20 } });
+            return <div key={i} style={{ width: 14, height: 12 + v * 150 * env, borderRadius: 7, background: i % 2 ? theme.white : BLUE, boxShadow: `0 0 18px ${BLUE}` }} />;
           })}
         </div>
-        <div style={{ display: "grid", gap: 14 }}>
+        <div style={{ position: "absolute", left: 80, top: 480, display: "grid", gap: 12 }}>
           {lines.map((l, i) => {
             const on = i === active;
-            const seen = i <= active;
             return (
-              <div key={i} style={{ display: "flex", gap: 22, alignItems: "center", opacity: seen ? (on ? 1 : 0.45) : 0, fontFamily: theme.body, fontSize: 34, color: theme.white }}>
-                <span style={{ width: 52, height: 52, borderRadius: "50%", display: "grid", placeItems: "center", fontFamily: theme.mono, fontSize: 22, background: l.who === "A" ? BLUE : theme.white, color: l.who === "A" ? theme.white : theme.black, boxShadow: on ? `0 0 26px ${BLUE}` : "none" }}>
-                  {l.who}
-                </span>
+              <div key={i} style={{ display: "flex", gap: 22, alignItems: "center", opacity: frame >= 92 + i * 24 ? (on ? 1 : 0.45) : 0, fontFamily: theme.body, fontSize: 32, color: theme.white }}>
+                <span style={{ width: 46, height: 46, borderRadius: "50%", display: "grid", placeItems: "center", fontFamily: theme.mono, fontSize: 20, background: l.who === "A" ? BLUE : theme.white, color: l.who === "A" ? theme.white : theme.black, boxShadow: on ? `0 0 26px ${BLUE}` : "none" }}>{l.who}</span>
                 {l.text}
               </div>
             );
           })}
         </div>
-      </div>
+      </Win>
+      <Cursor
+        keys={[{ f: 0, x: 1560, y: 880 }, { f: 18, ...at(595, 108) }, { f: 30, ...at(595, 108) }, { f: 46, ...at(230, 206) }, { f: 60, ...at(230, 206) }, { f: 100, ...at(900, 560) }]}
+        clicks={[22, 50]}
+      />
     </AbsoluteFill>
   );
 }
 
-function LaunchKit() {
+const VIDEO_STYLES = ["16:9 Explainer", "9:16 Short", "1:1 Square"];
+const TEMPLATE_LOOKS: CSSProperties[] = [
+  { background: "linear-gradient(135deg, #000, #0b1730)" },
+  { background: `linear-gradient(135deg, ${BLUE}, #0a2a66)` },
+  { background: "linear-gradient(135deg, #ffffff, #cfe0ff)" },
+  { background: "linear-gradient(135deg, #0b1730, #217cff55)" },
+];
+const TEMPLATE_NAMES = ["Night", "Signal", "Paper", "Studio"];
+const VOICES = ["Nora Vale", "Your voice (clone)", "+ Create a voice"];
+
+/** 05: wizard: pick a style, a template and a voice, create. */
+function VideoCreate() {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
-  const cards = [
-    { label: "X THREAD", body: "I doubled my price. My paid tier doubled too. Here is what I learned." },
-    { label: "LINKEDIN", body: "Most writers underprice. I did for two years. Then I ran an experiment." },
-    { label: "SUBSTACK NOTES", body: "Price is a signal. Readers told me so, with their wallets." },
-    { label: "BLUESKY", body: "Raised my price to $10. Paid readers went up, not down." },
-  ];
+  const style = frame >= 34 ? 1 : 0;
+  const tpl = frame >= 74 ? 1 : 0;
+  const voice = frame >= 114 ? 1 : 0;
+  const go = pulse(frame, 162);
+  const busy = clamp01(frame, 164, 194);
   return (
     <AbsoluteFill>
-      <WarpField speed={0.9} count={260} />
-      <Caption eyebrow="Launch Kit" title="Your pulse quickens." />
-      <div style={{ position: "absolute", left: 140, right: 140, top: 380, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
-        {cards.map((c, i) => {
-          const s = spring({ frame: frame - 10 - i * 7, fps, config: { damping: 14 } });
-          const rot = interpolate(s, [0, 1], [(i - 1.5) * 14, 0]);
+      <WarpField speed={0.8} count={260} />
+      <Caption eyebrow="05 · Make" title="Pick a look. Pick a voice." />
+      <Win>
+        <Label style={{ left: 80, top: 30 }}>Video style</Label>
+        {VIDEO_STYLES.map((t, i) => (
+          <Chip key={t} on={i === style} press={i === 1 ? pulse(frame, 34) : 0} style={{ position: "absolute", left: 80 + i * 250, top: 70, width: 230, height: 56 }}>
+            {t}
+          </Chip>
+        ))}
+        <Label style={{ left: 80, top: 160 }}>Template</Label>
+        {TEMPLATE_NAMES.map((name, i) => {
+          const s = spring({ frame: frame - 6 - i * 5, fps, config: { damping: 16 } });
+          const sel = i === tpl;
           return (
-            <div key={c.label} style={{ ...panel, padding: 28, minHeight: 300, opacity: s, transform: `translateY(${(1 - s) * 180}px) rotate(${rot}deg)`, display: "grid", alignContent: "start", gap: 18 }}>
-              <span style={{ fontFamily: theme.mono, fontSize: 20, letterSpacing: 3, color: BLUE }}>{c.label}</span>
-              <span style={{ fontFamily: theme.body, fontSize: 28, lineHeight: 1.4, color: theme.white }}>{c.body}</span>
+            <div key={name} style={{ position: "absolute", left: 80 + i * 300, top: 200, width: 270, height: 190, borderRadius: 16, border: `2px solid ${sel ? BLUE : "rgba(255,255,255,0.14)"}`, boxShadow: sel ? `0 0 30px ${BLUE}88` : "none", overflow: "hidden", opacity: s, transform: `scale(${(0.9 + 0.1 * s) * (i === 1 ? 1 - 0.04 * pulse(frame, 74) : 1)})`, ...TEMPLATE_LOOKS[i] }}>
+              <div style={{ position: "absolute", left: 20, top: 24, width: 120, height: 12, borderRadius: 6, background: i === 2 ? "#000" : "#fff", opacity: 0.9 }} />
+              <div style={{ position: "absolute", left: 20, top: 52, width: 190, height: 8, borderRadius: 4, background: i === 2 ? "#000" : "#fff", opacity: 0.4 }} />
+              <div style={{ position: "absolute", left: 20, bottom: 16, fontFamily: theme.body, fontSize: 22, color: i === 2 ? "#000" : "#fff" }}>{name}</div>
             </div>
           );
         })}
-      </div>
-      <div style={{ position: "absolute", left: 140, bottom: 90, display: "flex", gap: 16, fontFamily: theme.mono, fontSize: 22, color: "rgba(255,255,255,0.7)", letterSpacing: 2 }}>
-        {["HOOKS", "SEO PACK", "CAROUSEL", "QUOTE CARDS"].map((t, i) => (
-          <span key={t} style={{ padding: "10px 18px", border: `1px solid ${BLUE}88`, borderRadius: 999, opacity: interpolate(frame, [50 + i * 6, 60 + i * 6], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) }}>
+        <Label style={{ left: 80, top: 430 }}>Narration voice</Label>
+        {VOICES.map((v, i) => (
+          <Chip key={v} on={i === voice} press={i === 1 ? pulse(frame, 114) : 0} style={{ position: "absolute", left: 80 + i * 370, top: 470, width: 340, height: 64 }}>
+            {i < 2 && <span style={{ marginRight: 12, color: BLUE }}>▶</span>}
+            {v}
+          </Chip>
+        ))}
+        <div style={{ position: "absolute", left: 1240, top: 560, width: 340, height: 76, borderRadius: 999, background: BLUE, display: "grid", placeItems: "center", fontFamily: theme.body, fontWeight: 600, fontSize: 30, color: theme.white, overflow: "hidden", transform: `scale(${1 - 0.06 * go})`, boxShadow: `0 0 ${24 + go * 40}px ${BLUE}` }}>
+          <div style={{ position: "absolute", left: 0, bottom: 0, height: 6, width: `${busy * 100}%`, background: "#fff" }} />
+          {busy > 0 ? "Making your video..." : "Create video"}
+        </div>
+      </Win>
+      <Cursor
+        keys={[
+          { f: 0, x: 1560, y: 880 },
+          { f: 30, ...at(450, 98) },
+          { f: 38, ...at(450, 98) },
+          { f: 70, ...at(515, 295) },
+          { f: 78, ...at(515, 295) },
+          { f: 110, ...at(630, 502) },
+          { f: 118, ...at(630, 502) },
+          { f: 158, ...at(1410, 598) },
+          { f: 190, ...at(1410, 598) },
+        ]}
+        clicks={[34, 74, 114, 162]}
+      />
+    </AbsoluteFill>
+  );
+}
+
+const SCENE_TITLES = ["Gravity is geometry", "Inverse square", "Orbits", "Try it yourself"];
+
+/** 06: the scene editor, then render the MP4. */
+function VideoEdit() {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const active = frame >= 32 ? 1 : 0;
+  const since = frame >= 32 ? frame - 32 : frame;
+  const pop = spring({ frame: since, fps, config: { damping: 16 } });
+  const render = clamp01(frame, 110, 164);
+  const ready = frame >= 166;
+  const tabs = ["Edit Scenes", "Images/footage", "Audio", "Settings"];
+  return (
+    <AbsoluteFill>
+      <WarpField speed={0.7} count={260} />
+      <Caption eyebrow="06 · Edit" title="Tweak any scene, then render." />
+      <Win>
+        {tabs.map((t, i) => (
+          <span key={t} style={{ position: "absolute", left: 80 + i * 210, top: 12, width: 190, height: 48, display: "grid", placeItems: "center", borderRadius: 12, fontFamily: theme.body, fontSize: 23, color: theme.white, background: i === 0 ? `${BLUE}33` : "transparent", border: `1px solid ${i === 0 ? BLUE : "rgba(255,255,255,0.14)"}` }}>
             {t}
           </span>
         ))}
-      </div>
+        <div style={{ position: "absolute", left: 1340, top: 10, width: 220, height: 52, borderRadius: 999, background: BLUE, display: "grid", placeItems: "center", fontFamily: theme.body, fontWeight: 600, fontSize: 24, color: theme.white, transform: `scale(${1 - 0.06 * pulse(frame, 108)})`, boxShadow: `0 0 ${20 + pulse(frame, 108) * 40}px ${BLUE}` }}>
+          Download MP4
+        </div>
+        {SCENE_TITLES.map((t, i) => {
+          const s = spring({ frame: frame - 4 - i * 5, fps, config: { damping: 16 } });
+          const on = i === active;
+          return (
+            <div key={t} style={{ position: "absolute", left: 80, top: 80 + i * 120, width: 400, height: 106, borderRadius: 14, border: `1px solid ${on ? BLUE : "rgba(255,255,255,0.14)"}`, background: on ? `${BLUE}26` : "rgba(255,255,255,0.04)", boxShadow: on ? `0 0 24px ${BLUE}66` : "none", display: "flex", alignItems: "center", gap: 18, padding: "0 20px", opacity: s, transform: `translateX(${(1 - s) * -40}px) scale(${i === 1 ? 1 - 0.03 * pulse(frame, 32) : 1})` }}>
+              <span style={{ fontFamily: theme.mono, fontSize: 22, color: BLUE }}>{i + 1}</span>
+              <div style={{ width: 96, height: 60, borderRadius: 8, background: i % 2 ? `linear-gradient(135deg, ${BLUE}, #0a2a66)` : "linear-gradient(135deg, #000, #0b1730)", border: "1px solid rgba(255,255,255,0.2)" }} />
+              <span style={{ fontFamily: theme.body, fontSize: 25, color: theme.white }}>{t}</span>
+            </div>
+          );
+        })}
+        <div style={{ position: "absolute", left: 520, top: 80, width: 1040, height: 560, borderRadius: 18, overflow: "hidden", border: "1px solid rgba(255,255,255,0.18)", background: `radial-gradient(70% 70% at 30% 20%, ${BLUE}33, #000 70%)`, boxShadow: `0 0 50px ${BLUE}33` }}>
+          {active === 0 ? (
+            <div style={{ position: "absolute", left: 70, top: 160, opacity: pop, transform: `translateY(${(1 - pop) * 30}px)` }}>
+              <p style={{ margin: 0, fontFamily: theme.mono, fontSize: 22, letterSpacing: 5, color: BLUE }}>SCENE 1</p>
+              <p style={{ margin: "14px 0 0", fontFamily: theme.display, fontSize: 86, lineHeight: 1.05, color: theme.white, textShadow: `0 0 30px ${BLUE}` }}>Gravity is<br />a curve.</p>
+            </div>
+          ) : (
+            <>
+              <p style={{ position: "absolute", left: 70, top: 56, margin: 0, fontFamily: theme.display, fontSize: 52, color: theme.white, opacity: pop }}>Gravity fades with distance</p>
+              {[1, 0.25, 0.11].map((h, i) => (
+                <div key={i} style={{ position: "absolute", left: 90 + i * 250, bottom: 90, width: 170, height: 340 * h * ease(clamp01(since, 8 + i * 7, 34 + i * 7)), borderRadius: "12px 12px 0 0", background: i === 0 ? "#ffffff" : BLUE, boxShadow: `0 0 30px ${BLUE}` }} />
+              ))}
+              <p style={{ position: "absolute", left: 70, bottom: 30, margin: 0, fontFamily: theme.body, fontSize: 26, color: "rgba(255,255,255,0.85)", opacity: pop }}>Double the distance and gravity drops to a quarter.</p>
+            </>
+          )}
+          {render > 0 && (
+            <div style={{ ...panel, position: "absolute", left: 270, top: 190, width: 500, padding: "28px 32px", background: "rgba(0,0,0,0.92)", opacity: clamp01(frame, 110, 118) }}>
+              <p style={{ margin: 0, fontFamily: theme.body, fontSize: 30, color: theme.white }}>{ready ? "✓ Your MP4 is ready" : "Rendering MP4"}</p>
+              <div style={{ marginTop: 20, height: 10, borderRadius: 5, background: "rgba(255,255,255,0.14)" }}>
+                <div style={{ width: `${(ready ? 1 : render) * 100}%`, height: "100%", borderRadius: 5, background: BLUE, boxShadow: `0 0 16px ${BLUE}` }} />
+              </div>
+            </div>
+          )}
+        </div>
+      </Win>
+      <Cursor
+        keys={[
+          { f: 0, x: 1560, y: 880 },
+          { f: 26, ...at(280, 373) },
+          { f: 38, ...at(280, 373) },
+          { f: 100, ...at(1450, 36) },
+          { f: 124, ...at(1450, 36) },
+          { f: 150, ...at(1250, 480) },
+        ]}
+        clicks={[32, 108]}
+      />
     </AbsoluteFill>
   );
 }
 
-function Launchpad() {
+/** 07: the Launch Kit appears, then Launchpad schedules it across the week. */
+function LaunchKit() {
   const frame = useCurrentFrame();
-  const { width, height } = useVideoConfig();
-  const lit = [2, 5, 9, 12, 16, 19, 23, 26];
-  const rocket = interpolate(frame, [70, 112], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.in(Easing.cubic) });
+  const { fps } = useVideoConfig();
+  const cards = [
+    { label: "X THREAD", body: "Gravity is not a force. It is geometry. A thread on how Einstein changed everything." },
+    { label: "LINKEDIN", body: "Most of us learned gravity wrong. Here is the picture physicists actually use." },
+    { label: "SUBSTACK NOTES", body: "Mass tells space how to bend. Space tells mass how to move." },
+    { label: "BLUESKY", body: "Orbits are just falling, forever, around a curve." },
+  ];
+  const days = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
+  const slots: Record<number, string> = { 0: "X", 1: "LinkedIn", 2: "Notes", 3: "Bluesky", 4: "X", 5: "LinkedIn", 6: "Notes" };
   return (
     <AbsoluteFill>
-      <WarpField speed={0.8} count={260} />
-      <Caption eyebrow="Launchpad" title="Three, two, one. Flying." />
-      <div style={{ position: "absolute", left: 140, top: 360, display: "grid", gridTemplateColumns: "repeat(7, 120px)", gap: 12 }}>
-        {Array.from({ length: 28 }).map((_, i) => {
-          const on = lit.includes(i) && frame > 8 + lit.indexOf(i) * 6;
+      <WarpField speed={0.9} count={260} />
+      <Caption eyebrow="07 · Launch" title="A week of posts, scheduled." />
+      <Win>
+        {cards.map((c, i) => {
+          const s = spring({ frame: frame - 8 - i * 7, fps, config: { damping: 14 } });
           return (
-            <div key={i} style={{ height: 88, borderRadius: 12, border: `1px solid ${on ? BLUE : "rgba(255,255,255,0.14)"}`, background: on ? `${BLUE}33` : "rgba(0,0,0,0.5)", boxShadow: on ? `0 0 22px ${BLUE}88` : "none", padding: 10, fontFamily: theme.mono, fontSize: 16, color: "rgba(255,255,255,0.6)" }}>
-              {i + 1}
-              {on && <div style={{ marginTop: 18, height: 10, borderRadius: 5, background: theme.white, boxShadow: `0 0 12px ${BLUE}` }} />}
+            <div key={c.label} style={{ position: "absolute", left: 80 + i * 390, top: 30, width: 350, height: 230, padding: 26, borderRadius: 18, border: "1px solid rgba(255,255,255,0.14)", background: "rgba(255,255,255,0.04)", opacity: s, transform: `translateY(${(1 - s) * 140}px) rotate(${interpolate(s, [0, 1], [(i - 1.5) * 10, 0])}deg)`, display: "grid", alignContent: "start", gap: 14 }}>
+              <span style={{ fontFamily: theme.mono, fontSize: 20, letterSpacing: 3, color: BLUE }}>{c.label}</span>
+              <span style={{ fontFamily: theme.body, fontSize: 26, lineHeight: 1.4, color: theme.white }}>{c.body}</span>
             </div>
           );
         })}
-      </div>
-      <svg width={width} height={height} style={{ position: "absolute" }}>
-        <defs>
-          <linearGradient id="trail" x1="0" y1="1" x2="0" y2="0">
-            <stop offset="0%" stopColor={BLUE} stopOpacity="0" />
-            <stop offset="70%" stopColor={BLUE} stopOpacity="0.8" />
-            <stop offset="100%" stopColor="#ffffff" stopOpacity="1" />
-          </linearGradient>
-        </defs>
-        {(() => {
-          // A launch arc from the lower right: curved trail, hot head, exhaust sparks.
-          const pt = (u: number) => ({ x: 1360 + 300 * u + 120 * u * u, y: 1000 - 1050 * u + 120 * u * (1 - u) });
-          const head = pt(rocket);
-          const tail = pt(Math.max(0, rocket - 0.35));
-          const path = Array.from({ length: 24 }, (_, i) => pt(Math.max(0, rocket - 0.35) + ((rocket - Math.max(0, rocket - 0.35)) * i) / 23));
+        <Label style={{ left: 80, top: 300 }}>Launchpad</Label>
+        {days.map((d, i) => {
+          const lit = frame >= 76 + i * 6;
+          const s = spring({ frame: frame - 76 - i * 6, fps, config: { damping: 12 } });
           return (
-            <>
-              <circle cx={1360} cy={1000} r={140 * Math.min(1, rocket * 4)} fill={BLUE} opacity={0.25 * (1 - rocket)} style={{ filter: "blur(30px)" }} />
-              {rocket > 0 && (
-                <polyline points={path.map((q) => `${q.x},${q.y}`).join(" ")} fill="none" stroke="url(#trail)" strokeWidth={10} strokeLinecap="round" style={{ filter: `drop-shadow(0 0 18px ${BLUE})` }} />
+            <div key={d} style={{ position: "absolute", left: 80 + i * 215, top: 345, width: 195, height: 130, borderRadius: 14, border: `1px solid ${lit ? BLUE : "rgba(255,255,255,0.14)"}`, background: lit ? `${BLUE}33` : "rgba(255,255,255,0.03)", boxShadow: lit ? `0 0 22px ${BLUE}88` : "none", padding: 14, fontFamily: theme.mono, fontSize: 18, color: "rgba(255,255,255,0.6)" }}>
+              {d}
+              {lit && (
+                <div style={{ marginTop: 22, padding: "8px 0", textAlign: "center", borderRadius: 999, background: theme.white, color: theme.black, fontFamily: theme.body, fontWeight: 600, fontSize: 21, transform: `scale(${0.6 + 0.4 * s})`, boxShadow: `0 0 14px ${BLUE}` }}>{slots[i]}</div>
               )}
-              {rocket > 0 &&
-                Array.from({ length: 16 }).map((_, i) => {
-                  const u = Math.max(0, rocket - random(`s${i}`) * 0.3);
-                  const q = pt(u);
-                  const jitter = (random(`j${i}`) - 0.5) * 60;
-                  return <circle key={i} cx={q.x + jitter} cy={q.y + 20} r={2 + random(`k${i}`) * 3} fill="#ffffff" opacity={0.3 + 0.5 * random(`o${i}`)} />;
-                })}
-              {rocket > 0 && <circle cx={head.x} cy={head.y} r={16} fill="#ffffff" style={{ filter: `drop-shadow(0 0 28px ${BLUE}) drop-shadow(0 0 8px #ffffff)` }} />}
-              {rocket === 0 && <circle cx={tail.x} cy={tail.y} r={10} fill="#ffffff" opacity={interpolate(frame, [30, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })} style={{ filter: `drop-shadow(0 0 16px ${BLUE})` }} />}
-            </>
+            </div>
           );
-        })()}
-      </svg>
-      <div style={{ position: "absolute", left: 1180, top: 400, fontFamily: theme.mono, color: theme.white, opacity: interpolate(frame, [20, 40], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) }}>
-        <p style={{ margin: 0, fontSize: 22, letterSpacing: 4, color: BLUE }}>NEXT LAUNCH</p>
-        <p style={{ margin: "10px 0 0", fontFamily: theme.display, fontSize: 88, textShadow: `0 0 30px ${BLUE}` }}>
-          T-{String(Math.max(0, 10 - Math.floor(frame / 7))).padStart(2, "0")}
-        </p>
-        <p style={{ margin: "6px 0 0", fontSize: 22, color: "rgba(255,255,255,0.7)", letterSpacing: 2 }}>X · LINKEDIN · BLUESKY</p>
-      </div>
+        })}
+        <div style={{ position: "absolute", left: 80, top: 540, display: "flex", gap: 14 }}>
+          {["HOOKS", "SEO PACK", "CAROUSEL", "QUOTE CARDS"].map((t, i) => (
+            <span key={t} style={{ padding: "10px 18px", border: `1px solid ${BLUE}88`, borderRadius: 999, fontFamily: theme.mono, fontSize: 20, letterSpacing: 2, color: "rgba(255,255,255,0.75)", opacity: clamp01(frame, 40 + i * 6, 50 + i * 6) }}>
+              {t}
+            </span>
+          ))}
+        </div>
+        <div style={{ position: "absolute", left: 1300, top: 530, width: 280, height: 70, borderRadius: 999, background: BLUE, display: "grid", placeItems: "center", fontFamily: theme.body, fontWeight: 600, fontSize: 28, color: theme.white, transform: `scale(${1 - 0.06 * pulse(frame, 68)})`, boxShadow: `0 0 ${24 + pulse(frame, 68) * 40}px ${BLUE}` }}>
+          Schedule all
+        </div>
+      </Win>
+      <Cursor keys={[{ f: 0, x: 1560, y: 880 }, { f: 62, ...at(1440, 566) }, { f: 100, ...at(1440, 566) }, { f: 140, ...at(1100, 600) }]} clicks={[68]} />
     </AbsoluteFill>
   );
 }
@@ -580,14 +856,15 @@ function Outro() {
   );
 }
 
-const RENDER: Record<(typeof SCENES)[number]["id"], () => JSX.Element> = {
+const RENDER: Record<SceneId, () => JSX.Element> = {
   warp: Warp,
-  paste: Paste,
-  orbit: Orbit,
-  research: Research,
+  sync: Sync,
+  ask: Ask,
+  map: MindMap,
   audio: Audio,
-  launchkit: LaunchKit,
-  launchpad: Launchpad,
+  video: VideoCreate,
+  edit: VideoEdit,
+  kit: LaunchKit,
   outro: Outro,
 };
 
@@ -596,7 +873,7 @@ export function LandingDemo() {
   return (
     <AbsoluteFill style={{ backgroundColor: theme.black }}>
       <SoundTrack src={staticFile("demo-vo/music.wav")} volume={musicVolume} />
-      {SCENES.map((scene, i) => {
+      {SCENES.map((scene) => {
         const from = cursor;
         cursor += S(scene.len - XFADE);
         const Scene = RENDER[scene.id];
@@ -605,10 +882,11 @@ export function LandingDemo() {
             <FadeScene len={scene.len}>
               <Scene />
             </FadeScene>
-            <Sequence from={S(scene.vo)} name={`vo-${scene.id}`}>
-              <SoundTrack src={staticFile(`demo-vo/${scene.id}.mp3`)} volume={1} />
-            </Sequence>
-            {i === 0 && null}
+            {scene.vo !== undefined && (
+              <Sequence from={S(scene.vo)} name={`vo-${scene.id}`}>
+                <SoundTrack src={staticFile(`demo-vo/${scene.id}.mp3`)} volume={1} />
+              </Sequence>
+            )}
           </Sequence>
         );
       })}

renderer/src/compositions/demoVo.ts

@@ -1,2 +1,2 @@
 // Generated by scripts/make_demo_vo.py: narration clip lengths in seconds. Do not edit by hand.
-export const DEMO_VO_SECONDS = {"warp": 3.92, "paste": 6.95, "orbit": 6.61, "research": 3.74, "audio": 2.67, "launchkit": 3.32, "launchpad": 4.05, "outro": 2.48} as const;
+export const DEMO_VO_SECONDS = {"warp": 3.61, "sync": 2.25, "map": 5.17, "kit": 2.95, "outro": 2.8} as const;