adding new demo + landing page improvements

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,33 +360,49 @@ 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 />,
   },
   {
     id: "video",
     eyebrow: "Video studio",
-    title: "Shorts, explainers and audiograms, from one post.",
-    body: "Notestack storyboards the post, narrates it and renders it with word by word captions and your brand colors. Vertical for Reels and TikTok, wide for YouTube, square for feeds.",
-    points: ["9:16 shorts with a hook in two seconds", "16:9 explainers and 1:1 audiograms", "Your logo and accent color on every frame"],
+    title: "Narrated videos from one post, edited scene by scene.",
+    body: "Pick a post or paste a link, choose a template, style and voice, and Notestack writes the script, narrates it and builds the scenes. Edit any scene and watch the live preview update, then render an MP4.",
+    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",
@@ -37,8 +45,8 @@ const FEATURES = [
   {
     icon: LaunchWindowIcon,
     label: "Video",
-    title: "Shorts, explainers, audiograms",
-    body: "Storyboards generated from your post, rendered with accurate captions in 9:16, 16:9 or 1:1.",
+    title: "Narrated videos you can edit",
+    body: "Pick a post and a template, then edit every scene with a live preview. Landscape for YouTube, vertical for Reels.",
   },
   {
     icon: RocketIcon,
@@ -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 */

renderer/src/compositions/LandingDemo.tsx

@@ -296,8 +296,8 @@ function Warp() {
 const SOURCES = ["Substack", "Ghost", "WordPress", "Medium", "RSS", "Markdown"];
 
 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",
+  "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"];
 
@@ -361,12 +361,12 @@ function Sync() {
 function Ask() {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
-  const q = typed("What have I written about pricing?", frame, 8, 30);
+  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 open = spring({ frame: frame - 114, fps, config: { damping: 18 } });
-  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 context = ["I tried a lot of numbers before this one.", "The paid tier doubled after I", "raised the price to ten dollars.", "Readers took the work seriously.", "Nobody left. That surprised me."];
+  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.7} count={300} />
@@ -384,19 +384,19 @@ function Ask() {
             ))}
           </div>
           <p style={{ margin: 0, fontFamily: theme.body, fontSize: 32, 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} />.
+            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>
         {[
-          { n: 1, label: "On Pricing · L12 to 14" },
-          { n: 2, label: "The Paid Tier · L4 to 9" },
+          { 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] ON PRICING · LINES 12 TO 14</p>
+          <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 (
@@ -426,11 +426,11 @@ function Marker({ n, glow }: { n: number; glow: number }) {
 }
 
 const TOPICS = [
-  "Pricing", "Paid tier", "Audience", "Craft", "Habits", "Newsletters", "Growth", "Writing",
-  "Focus", "Trust", "Launches", "Editing", "Community", "Ideas", "Archive",
+  "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" | "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 } {
@@ -445,10 +445,14 @@ function place(shape: Shape, i: number): { x: number; y: number } {
   }
   if (shape === "spiral") {
     const t = i / (n - 1);
-    const a = t * Math.PI * 2.6 + 0.4;
-    const r = 30 + t * 340;
+    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);
@@ -457,70 +461,97 @@ function place(shape: Shape, i: number): { x: number; y: number } {
   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 } {
-  const a = place("orbit", i);
-  const b = place("spiral", i);
-  const c = place("cluster", i);
-  const s1 = ease(clamp01(frame, 64, 96));
-  const s2 = ease(clamp01(frame, 112, 144));
-  return { x: a.x + (b.x - a.x) * s1 + (c.x - (a.x + (b.x - a.x) * s1)) * s2, y: a.y + (b.y - a.y) * s1 + (c.y - (a.y + (b.y - a.y) * s1)) * s2 };
+  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 < 62 ? 0 : frame < 110 ? 1 : 3;
+  const activeShape = frame < 56 ? 0 : frame < 92 ? 1 : frame < 124 ? 2 : 3;
   const panelIn = spring({ frame: frame - 158, fps, config: { damping: 18 } });
-  const hub = at(place("cluster", 0).x, place("cluster", 0).y);
+  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 }}>
-          {TOPICS.map((_, i) => {
-            if (i === 0) return null;
-            const from = mapPos(i, frame);
-            const to = mapPos(i < 4 ? 0 : i - 3, frame);
-            const on = clamp01(frame, 6 + i * 3, 20 + i * 3);
-            return <line key={i} x1={from.x} y1={from.y} x2={to.x} y2={to.y} stroke={i % 2 ? BLUE : "#ffffff"} strokeOpacity={0.3 * on} strokeWidth={1.5} />;
-          })}
-          {TOPICS.map((name, i) => {
-            const p = mapPos(i, frame);
-            const born = spring({ frame: frame - 2 - i * 3, fps, config: { damping: 12 } });
-            const r = (i === 0 ? 17 : 7 + ((i * 7) % 5)) * born;
-            const picked = i === 0 && frame >= 158;
-            return (
-              <g key={name}>
-                <circle cx={p.x} cy={p.y} r={r * 2.6} 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})` }} />
-                {picked && <circle cx={p.x} cy={p.y} r={r + 14} fill="none" stroke={BLUE} strokeWidth={3} />}
-                <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 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 === 1 ? pulse(frame, 62) : i === 3 ? pulse(frame, 110) : 0} style={{ width: 120, height: 48, fontSize: 22 }}>
+            <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)" }}>Scroll to dive in. Drag to move. Click a star to fly to it.</p>
+        <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 }}>Pricing</p>
+          <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 }}>
-            {["Paid tier", "Audience", "Trust"].map((t) => (
+            {["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>
-          {["On Pricing", "The Paid Tier", "Small Audiences"].map((t) => (
+          {["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>
@@ -528,14 +559,16 @@ function MindMap() {
       <Cursor
         keys={[
           { f: 0, x: 1560, y: 880 },
-          { f: 50, ...at(220, 50) },
-          { f: 64, ...at(220, 50) },
-          { f: 98, ...at(470, 50) },
-          { f: 112, ...at(470, 50) },
-          { f: 150, x: hub.x, y: hub.y },
-          { f: 170, x: hub.x + 30, y: hub.y + 120 },
+          { 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={[62, 110, 156]}
+        clicks={[56, 92, 124, 156]}
       />
     </AbsoluteFill>
   );
@@ -550,9 +583,9 @@ function Audio() {
   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 - 92) / 24));
   return (
@@ -602,9 +635,9 @@ const TEMPLATE_LOOKS: CSSProperties[] = [
   { background: "linear-gradient(135deg, #000, #0b1730)" },
   { background: `linear-gradient(135deg, ${BLUE}, #0a2a66)` },
   { background: "linear-gradient(135deg, #ffffff, #cfe0ff)" },
-  { background: "rgba(255,255,255,0.04)", border: `2px dashed ${BLUE}88` },
+  { background: "linear-gradient(135deg, #0b1730, #217cff55)" },
 ];
-const TEMPLATE_NAMES = ["Night", "Signal", "Paper", "From your website"];
+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. */
@@ -669,7 +702,7 @@ function VideoCreate() {
   );
 }
 
-const SCENE_TITLES = ["Price is a signal", "The numbers", "Why it worked", "Try it yourself"];
+const SCENE_TITLES = ["Gravity is geometry", "Inverse square", "Orbits", "Try it yourself"];
 
 /** 06: the scene editor, then render the MP4. */
 function VideoEdit() {
@@ -709,15 +742,15 @@ function VideoEdit() {
           {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}` }}>Price is<br />a signal.</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 }}>Paid readers, doubled</p>
-              {[0.28, 0.5, 1].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 === 2 ? "#ffffff" : BLUE, boxShadow: `0 0 30px ${BLUE}` }} />
+              <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 }}>You raised prices twice and the paid tier doubled.</p>
+              <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 && (
@@ -750,10 +783,10 @@ function LaunchKit() {
   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." },
+    { 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" };