feat(web): hero redesign — cycling step rotator + full-width video section

Restructures the landing page above-the-fold into two distinct sections:

1. **Hero — left copy + cycling tile, no static stack of three blocks**
   New `<HeroStepRotator>` (Framer Motion client component) shows ONE
   tile centred in the column, cycling prompt.txt → build.log →
   claude_desktop_config.json every 3.5s. Auto-advance pauses on hover
   and exposes a 3-dot tablist so users can jump to any step. The active
   dot grows wide with an accent glow.

   Mouse interaction: spring-smoothed 3D tilt on rotateX/rotateY plus a
   radial glow that translates toward the cursor — both driven by motion
   values, so the transforms stay on the GPU compositor instead of
   re-rendering on every mousemove. `useReducedMotion()` strips the
   tilt + glow translation and collapses the page transition to an
   instant cross-fade (the rotation itself still advances — it's content,
   not decoration).

   Hero padding tightened (py-12/14/16 vs py-14/20/28) so the video
   section below is teased above the fold. New scroll cue ("see it run"
   + animated chevron) sits at the bottom of the hero, anchored to
   #flow.

2. **Flow video — full-width edge-to-edge under the hero (new section)**
   The hero.mp4 / hero.webm pair moves out of the "How it works"
   section into its own #flow section. No max-w wrapper — it spans the
   viewport with `w-full aspect-video`, so on a 1080p monitor the video
   gets the full 1920px width. Adds a subtle radial vignette so the
   black edges blend into the page chrome.

3. **"How it works" — now lean**
   Video removed (it's the flow section now). Just the three textual
   cards as supporting copy.

Adds `framer-motion@11.18.2` to apps/web/package.json. Build passes
typecheck + Next.js production build with no new warnings; LCP path is
untouched since the rotator is client-hydrated after first paint and
Framer Motion is tree-shaken to the components we import.

Note: visitors with `prefers-reduced-motion: reduce` will still see the
video's poster instead of autoplay — Chrome blocks the network fetch
entirely for autoplay media when reduced-motion is set. The flow video
remains visible for the rest, and the step rotator continues to cycle
its content (with instant cross-fade instead of slide+scale).

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

apps/web/components/particle-hero/index.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+/**
+ * ParticleHero — public entry to the WebGL particle background.
+ *
+ * Responsibilities (kept OUT of ParticleField so that component can
+ * assume happy-path WebGL2):
+ *
+ *   1. WebGL2 missing → static gradient.
+ *   2. Mobile / low-power profile → either 16k particles or skip.
+ *   3. prefers-reduced-motion → still WebGL + cursor tracking, but
+ *      capped at 16k particles with halved drift and halved push
+ *      velocity. The ring still follows the cursor at full fidelity
+ *      because that's the interaction the user explicitly wants; we
+ *      only damp the *ambient* motion so the field reads as calm.
+ *   4. Lazy-load Three.js via next/dynamic so the hero LCP text isn't
+ *      blocked by ~150kb of WebGL plumbing.
+ *
+ * The static fallback is a CSS-only radial gradient + faint dot mask.
+ * It looks intentional, not broken — same color story as the live
+ * particle field, just without motion.
+ */
+
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
+
+type Capability =
+  | { kind: 'unknown' }
+  | { kind: 'fallback' }
+  | { kind: 'webgl'; textureSize: 128 | 256; motionScale: number };
+
+// Dynamic import keeps three out of the initial bundle. ssr:false
+// because there's no DOM/Canvas during SSR anyway.
+const ParticleField = dynamic(
+  () => import('./ParticleField').then((m) => ({ default: m.ParticleField })),
+  {
+    ssr: false,
+    // No loading UI — the static gradient already lives at z-0 above
+    // until this resolves, and the canvas paints into the same slot.
+    loading: () => null,
+  },
+);
+
+/**
+ * Detect WebGL2 + float-render-target support without keeping the
+ * context around. We create a throwaway canvas, ask for `webgl2`, and
+ * probe `EXT_color_buffer_float`. If anything fails we fall back.
+ *
+ * Runs sync-only in the browser; never during SSR.
+ */
+function detectWebGL2(): boolean {
+  try {
+    const c = document.createElement('canvas');
+    const gl = c.getContext('webgl2');
+    if (!gl) return false;
+    const ext = gl.getExtension('EXT_color_buffer_float');
+    // Losing context to ensure we don't leak the probe.
+    const loseExt = gl.getExtension('WEBGL_lose_context');
+    loseExt?.loseContext();
+    return Boolean(ext);
+  } catch {
+    return false;
+  }
+}
+
+export function ParticleHero() {
+  // Start in 'unknown' so SSR markup matches the first client render —
+  // the fallback gradient is rendered until we resolve capability, so
+  // there's no flash either way.
+  const [cap, setCap] = useState<Capability>({ kind: 'unknown' });
+
+  useEffect(() => {
+    // 1. WebGL2 + float targets — hard gate. Without these the sim
+    //    can't run at all, fall through to the static gradient.
+    if (!detectWebGL2()) {
+      setCap({ kind: 'fallback' });
+      return;
+    }
+
+    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    /**
+     * Pick the right particle tier for the device.
+     *
+     * Returns a non-fallback WebGL config OR null when the device is
+     * too constrained to render the field at all (low-core phones).
+     * Reduced-motion does NOT shrink the tier here — it's applied as
+     * a separate motion scalar on top, because the user still wants
+     * the cursor-tracking interaction.
+     */
+    const pickTier = (): Capability => {
+      // Heuristic: small viewport OR an absurd DPR (low-DPI phones lying
+      // about retina) with no high-end signal. hardwareConcurrency is a
+      // rough but free proxy; logical cores <= 4 on a small viewport is
+      // a strong hint we shouldn't push 65k particles.
+      const isNarrow = window.matchMedia('(max-width: 768px)').matches;
+      const dpr = window.devicePixelRatio || 1;
+      const cores = navigator.hardwareConcurrency ?? 4;
+      const reduced = reduce.matches;
+
+      // Motion-reduce caps drift + ring-push velocity at 50% but keeps
+      // pointer position fidelity at 100%. 1.0 means "default motion".
+      const motionScale = reduced ? 0.5 : 1.0;
+
+      if (isNarrow) {
+        // Phones: drop to 16k. Going lower than that and the field
+        // visibly thins out; going higher and we cook batteries.
+        // 4-core phones get the static fallback — those are the
+        // budget Androids most likely to thermal-throttle.
+        if (cores <= 4) {
+          return { kind: 'fallback' };
+        }
+        return { kind: 'webgl', textureSize: 128, motionScale };
+      }
+
+      if (dpr > 2.5 && cores <= 4) {
+        // High-DPI low-core — likely a low-end tablet.
+        return { kind: 'webgl', textureSize: 128, motionScale };
+      }
+
+      // Desktop / capable tablet. Reduced-motion users get the same 128
+      // tier as mobile — fewer particles means less ambient activity in
+      // peripheral vision, which is what the motion preference is for.
+      if (reduced) {
+        return { kind: 'webgl', textureSize: 128, motionScale };
+      }
+      return { kind: 'webgl', textureSize: 256, motionScale };
+    };
+
+    setCap(pickTier());
+
+    // Respond to motion-preference changes mid-session — re-pick the
+    // tier so toggling the OS setting takes effect without a reload.
+    const onReduceChange = () => setCap(pickTier());
+    reduce.addEventListener('change', onReduceChange);
+    return () => reduce.removeEventListener('change', onReduceChange);
+  }, []);
+
+  // Static fallback: radial indigo glow + faint dotted mask.
+  // Used both for 'unknown' (pre-hydration) and 'fallback'.
+  if (cap.kind !== 'webgl') {
+    return (
+      <div
+        aria-hidden="true"
+        className="absolute inset-0 size-full overflow-hidden"
+        style={{
+          backgroundImage: [
+            // Soft indigo glow centered on the hero
+            'radial-gradient(60% 80% at 50% 45%, rgba(99,102,241,0.18), rgba(99,102,241,0) 70%)',
+            // Very faint dotted texture — reads as "field of particles
+            // at rest" rather than a flat gradient.
+            'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 1.5px)',
+          ].join(', '),
+          backgroundSize: '100% 100%, 24px 24px',
+        }}
+      />
+    );
+  }
+
+  return <ParticleField textureSize={cap.textureSize} motionScale={cap.motionScale} />;
+}
+
+export default ParticleHero;