diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx index 6438d07..c49e148 100644 --- a/apps/web/app/(marketing)/page.tsx +++ b/apps/web/app/(marketing)/page.tsx @@ -5,6 +5,7 @@ import { PulseLink } from '@/components/pulse'; import { ScrollCue } from '@/components/scroll-cue'; import { StaticCodeBlock } from '@/components/static-code-block'; import { FAQ, faqJsonLd } from '@/lib/seo'; +import { ChevronDown } from 'lucide-react'; import Link from 'next/link'; const PROMPT_EXAMPLE = `Create an MCP server that searches our Notion workspace. @@ -351,17 +352,33 @@ export default function Landing() { - {/* FAQ */} + {/* FAQ — collapsible accordion using native
. Crawlers + and screen readers still see the full Q+A in the HTML; users + see one question at a time and expand on demand. No JS, no + state, semantically correct. `list-none` + the WebKit-marker + pseudo-class suppress the default disclosure triangle so we + can render our own chevron that rotates via `group-open`. */}
-
+

FAQ

-
+
{FAQ.map((f) => ( -
-

{f.q}

-

{f.a}

-
+
+ + {f.q} + + +

+ {f.a} +

+
))}
diff --git a/apps/web/components/hero-step-rotator.tsx b/apps/web/components/hero-step-rotator.tsx index 511ffee..c075558 100644 --- a/apps/web/components/hero-step-rotator.tsx +++ b/apps/web/components/hero-step-rotator.tsx @@ -16,31 +16,39 @@ interface Step { code: string; } +// Snippets are deliberately short — they have to fit in a tile that +// shrinks to roughly 295 px wide on a 375 px mobile viewport, with +// monospace 12.5 px. Long lines (URLs especially) get truncated to a +// recognisable shape (`mcp/notion-x9`) so we never need horizontal +// scrolling inside the tile. `whitespace-pre-wrap` on the 
 below
+// lets any remaining over-width tokens (e.g. someone shrinks the
+// viewport to 320 px) wrap instead of overflowing.
 const STEPS: Step[] = [
   {
     label: 'prompt.txt',
     badge: '01 · Describe',
-    code: `Create an MCP server that searches our Notion workspace.
-Tools: search_pages, get_page_content.
-Auth: NOTION_API_KEY.`,
+    code: `Build an MCP server that
+searches our Notion workspace.
+
+Tools: search_pages, get_page
+Auth: NOTION_API_KEY`,
   },
   {
     label: 'build.log',
     badge: '02 · Generate',
-    code: `> Generating spec...               OK  (2 tools)
-> Static checks                    OK
-> Building image bmm-mcp-notion    OK  17.2s
-> Deploying container              OK
-> Live at https://notion-x9.mcp.buildmymcpserver.com
-> First request: 401 → token → 200 OK`,
+    code: `✓ Generating spec   (2 tools)
+✓ Static checks     passed
+✓ Building image    17.2s
+✓ Deploying         ok
+✓ Live  →  mcp/notion-x9`,
   },
   {
-    label: 'claude_desktop_config.json',
+    label: 'claude.config.json',
     badge: '03 · Connect',
     code: `{
   "mcpServers": {
     "notion": {
-      "url": "https://notion-x9.mcp.buildmymcpserver.com/mcp",
+      "url": ".../notion-x9/mcp",
       "auth": "oauth2"
     }
   }
@@ -161,7 +169,7 @@ export function HeroStepRotator() {
                 {current.badge}
- 
+            
               {current.code}
             

           
diff --git a/apps/web/components/particle-hero/ParticleField.tsx b/apps/web/components/particle-hero/ParticleField.tsx
index 8217850..9f225bf 100644
--- a/apps/web/components/particle-hero/ParticleField.tsx
+++ b/apps/web/components/particle-hero/ParticleField.tsx
@@ -169,11 +169,16 @@ export function ParticleField({ textureSize, motionScale = 1 }: ParticleFieldPro
 
     const renderUniforms = {
       uPositions: { value: rtB.texture },
-      uPointSize: { value: textureSize === 256 ? 1.8 : 2.4 },
+      // Bigger dots + higher base alpha = more volumetric "calm field"
+      // read at the load-in (was 1.8 / 0.42 — read as too thin, looked
+      // stuttery because individual particles were hard to track between
+      // frames). With these values the field has a denser cumulative
+      // glow without any change to the simulation itself.
+      uPointSize: { value: textureSize === 256 ? 2.8 : 3.6 },
       uDpr: { value: dpr },
       uColorCalm: { value: colorCalm },
       uColorHot: { value: colorHot },
-      uBaseAlpha: { value: 0.42 },
+      uBaseAlpha: { value: 0.6 },
     };
     const particleMat = new THREE.ShaderMaterial({
       vertexShader: renderVertex,
diff --git a/apps/web/components/particle-hero/shaders.ts b/apps/web/components/particle-hero/shaders.ts
index 29f4494..7f15b5c 100644
--- a/apps/web/components/particle-hero/shaders.ts
+++ b/apps/web/components/particle-hero/shaders.ts
@@ -121,11 +121,14 @@ export const simFragment = /* glsl */ `
     float r = length(d);
     float ang = atan(d.y, d.x);
 
-    // Breathing distortion of the radius itself.
-    float noise = snoise(p * 4.0 + uTime * 0.35) * 0.05;
+    // Breathing distortion of the radius itself. Time scale tuned
+    // down (was 0.35 → 0.22) so the ring "breathes" rather than
+    // pulsates, which used to read as visual stutter on slow drift.
+    float noise = snoise(p * 4.0 + uTime * 0.22) * 0.05;
     // Polar wave — a slow rippling around the circumference.
-    float wave  = sin(ang * 5.0 + uTime * 1.2) * 0.012
-                + cos(ang * 3.0 - uTime * 0.7) * 0.010;
+    // Same calming pass on both phases.
+    float wave  = sin(ang * 5.0 + uTime * 0.7) * 0.012
+                + cos(ang * 3.0 - uTime * 0.42) * 0.010;
     float rr = r + noise + wave;
 
     // Three bands of different thickness at slightly offset radii.
@@ -149,10 +152,15 @@ export const simFragment = /* glsl */ `
     // --- Idle drift: rotational simplex-noise current ---
     // Time is scaled by uMotionScale so reduced-motion users get a
     // calmer field that evolves at half speed.
+    // Noise-evolution speed dropped from 0.08 → 0.045 (almost halved)
+    // and velocity magnitude from 0.045 → 0.028. The combination kills
+    // the perceived stutter — each particle now moves slowly enough
+    // that the eye tracks individual motion as smooth drift rather
+    // than as jerky per-frame teleportation.
     float driftTime = uTime * uMotionScale;
-    float n1 = snoise(pos * 1.6 + vec2(driftTime * 0.08, 0.0));
-    float n2 = snoise(pos * 1.6 + vec2(0.0, driftTime * 0.08) + 53.7);
-    vec2 driftVel = vec2(-n2, n1) * 0.045 * uMotionScale; // curl-like rotation
+    float n1 = snoise(pos * 1.6 + vec2(driftTime * 0.045, 0.0));
+    float n2 = snoise(pos * 1.6 + vec2(0.0, driftTime * 0.045) + 53.7);
+    vec2 driftVel = vec2(-n2, n1) * 0.028 * uMotionScale; // curl-like rotation
 
     // --- Ring push: gradient of the ring field, pointing outward ---
     float h = 0.003;
diff --git a/remotion/package.json b/remotion/package.json
index 0ebd8db..10a7486 100644
--- a/remotion/package.json
+++ b/remotion/package.json
@@ -6,7 +6,7 @@
     "studio": "remotion studio src/index.ts",
     "render:mp4": "remotion render src/index.ts HeroVideo out/hero-raw.mp4 --codec h264 --crf 28 --pixel-format yuv420p && node scripts/postprocess.mjs",
     "render:webm": "remotion render src/index.ts HeroVideo out/hero.webm --codec vp9 --crf 32",
-    "render:poster": "remotion still src/index.ts HeroVideo out/hero-poster.jpg --frame 180 --image-format jpeg --jpeg-quality 85",
+    "render:poster": "remotion still src/index.ts HeroVideo out/hero-poster.jpg --frame 210 --image-format jpeg --jpeg-quality 85",
     "render:all": "pnpm render:mp4 && pnpm render:webm && pnpm render:poster",
     "to-web": "node scripts/publish-to-web.mjs",
     "build": "pnpm render:all && pnpm to-web"
diff --git a/remotion/src/HeroVideo.tsx b/remotion/src/HeroVideo.tsx
index 40d9604..22c62a9 100644
--- a/remotion/src/HeroVideo.tsx
+++ b/remotion/src/HeroVideo.tsx
@@ -1,76 +1,105 @@
 import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate } from 'remotion';
 import { C } from './lib/colors';
+import { clampLerp } from './lib/easings';
 import { PromptScene } from './scenes/PromptScene';
-import { TransformScene } from './scenes/TransformScene';
-import { ServerScene } from './scenes/ServerScene';
+import { BuildScene } from './scenes/BuildScene';
+import { LibraryScene } from './scenes/LibraryScene';
+import { DiscoveryScene } from './scenes/DiscoveryScene';
 
 export const HERO_FPS = 30;
-export const HERO_DURATION_FRAMES = 240; // 8s
+export const HERO_DURATION_FRAMES = 300; // 10s
 
-// Scene timing — frame ranges, inclusive on start, exclusive on end.
-// Beats overlap intentionally at the edges so transitions cross-fade
-// rather than hard-cut. The last 12 frames fade the whole canvas to
-// black so the loop seam disappears (frame 0 starts equally dark).
+// Scene timing. Each beat overlaps the next by ~6 frames so the
+// transitions crossfade rather than hard-cut.
+//
+//   P1 prompt    [  0,  81)
+//   P2 build     [ 75, 171)
+//   P3 library   [165, 246)
+//   P4 discovery [240, 300)
 export const BEAT = {
-  prompt: { in: 0, out: 70 },
-  transform: { in: 55, out: 165 },
-  server: { in: 150, out: 240 },
+  prompt:    { in: 0,   out: 81  },
+  build:     { in: 75,  out: 171 },
+  library:   { in: 165, out: 246 },
+  discovery: { in: 240, out: 300 },
 } as const;
 
+const FADE_FRAMES = 12;
+
 export function HeroVideo() {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
-  // Loop-clean: ramp opacity to 0 over the last 12 frames so frame 239 ≈
+  // Loop-clean: ramp opacity to 0 over the last 12 frames so frame 299 ≈
   // frame 0 (both essentially-black). Browser