feat(web): mobile-fit hero tiles + voluminous calmer particle field + FAQ accordion

Three coordinated polish items requested:

1. **Hero step-rotator tiles fit mobile without horizontal scroll.**
   The previous snippets contained a 50+ char `Live at https://notion-x9.mcp.buildmymcpserver.com` URL that overflowed the ~295 px text area on a 375 px viewport. Rewrote all three snippets to be naturally short — same product story, no full URLs. The <pre> drops `overflow-x-auto` and gains `whitespace-pre-wrap break-words` so any token that does exceed the column wraps gracefully instead of forcing a scrollbar.

2. **ParticleHero — more volumetric, slower, steadier at load-in.**
   The "stuttery / too fast" feedback came from two issues compounding: tiny dots (1.8 px on 256-tier, with 0.42 base alpha) gave the eye too few pixels to track between frames, so individual particles read as snapping rather than drifting; and the simplex-noise drift evolved at 0.08 time-scale with 0.045 velocity, fast enough that frame-to-frame deltas exceeded a tracked particle's diameter.

   Render uniforms tuned:
   - `uPointSize` 1.8 → 2.8 (256-tier), 2.4 → 3.6 (128-tier)
   - `uBaseAlpha` 0.42 → 0.60

   Simulation shader tuned:
   - Drift noise time scale 0.08 → 0.045 (the most impactful single change — particles now move at half the previous speed)
   - Drift velocity magnitude 0.045 → 0.028
   - Ring breathing noise time scale 0.35 → 0.22
   - Ring polar-wave time scales 1.2 / 0.7 → 0.7 / 0.42

   Net effect: same number of particles (65k) but each individually larger, brighter, and moving more slowly. The cumulative additive bloom is denser without the jitter that read as visual stutter.

3. **FAQ collapsed into a native `<details>` accordion.**
   Crawlers and screen readers still see every Q+A in the SSR'd HTML — `<details><summary>...</summary><p>answer</p></details>` is the standard semantic pattern for disclosure widgets. Users see one question at a time and expand on demand, which keeps the page from feeling like an endless wall of marketing text below the fold.

   Container narrowed `max-w-6xl` → `max-w-3xl` for accordion typography (long-form prose reads better single-column). The default WebKit disclosure-triangle marker is suppressed with `list-none` + `[&_summary::-webkit-details-marker]:hidden`, and a `lucide-react` `ChevronDown` icon rotates 180° via `group-open:rotate-180` to indicate state.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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() {
         </div>
       </section>
 
-      {/* FAQ */}
+      {/* FAQ — collapsible accordion using native <details>. 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`. */}
       <section className="py-14 sm:py-20">
         <JsonLd data={faqJsonLd()} />
-        <div className="mx-auto max-w-6xl px-6">
+        <div className="mx-auto max-w-3xl px-6">
           <h2 className="text-[28px] font-semibold tracking-tight">FAQ</h2>
-          <div className="mt-8 grid gap-x-12 gap-y-6 md:grid-cols-2">
+          <div className="mt-8 border-t border-[--color-border]">
             {FAQ.map((f) => (
-              <div key={f.q}>
-                <h3 className="text-[14px] font-semibold tracking-tight">{f.q}</h3>
-                <p className="mt-1.5 text-[13px] leading-relaxed text-[--color-fg-muted]">{f.a}</p>
-              </div>
+              <details
+                key={f.q}
+                className="group border-b border-[--color-border] [&_summary::-webkit-details-marker]:hidden"
+              >
+                <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-[14.5px] font-semibold tracking-tight text-[--color-fg] transition-colors hover:text-[--color-accent]">
+                  <span>{f.q}</span>
+                  <ChevronDown
+                    size={16}
+                    className="shrink-0 text-[--color-fg-subtle] transition-transform duration-200 group-open:rotate-180 group-open:text-[--color-accent]"
+                  />
+                </summary>
+                <p className="pb-5 pr-8 text-[13.5px] leading-relaxed text-[--color-fg-muted]">
+                  {f.a}
+                </p>
+              </details>
             ))}
           </div>
         </div>

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 <pre> 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}
               </span>
             </div>
-            <pre className="mono relative overflow-x-auto px-4 py-4 text-[12.5px] leading-relaxed text-[--color-fg]">
+            <pre className="mono relative whitespace-pre-wrap break-words px-4 py-4 text-[12.5px] leading-relaxed text-[--color-fg]">
               <code>{current.code}</code>
             </pre>
           </motion.div>

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,

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;