feat(hero): Direction C agentic loop ring + headline originality

[rockitdev]

Summary

• Loop ring (Direction C): adds a r=90 Plan→Act→Observe circular-arrow ring inside the innermost orbit, bridging the "integration but no loop" gap in the hero graphic
• Ring animations: 45 s/rev slow rotation (never reads as a spinner), 12 s/lap loop packet at a different cadence than cable packets, faint counter-rotating depth ring at r=76 (62 s/rev)
• Headline originality: Syne variable font (self-hosted, 34 KB, hero only) replaces Hanken Grotesk on .hero__title; <em>AI agent systems</em> becomes white + brand-blue ruled underline (technical annotation) instead of accent-hi blue

Design decisions

Loop ring: Direction C as specified — the ring rotates, the waypoint labels don't. At any moment the arrowhead marks which phase (PLAN/ACT/OBSERVE) the orchestrator is currently in. Gap at 12 o'clock so the arrowhead reads "about to return to start." Static under prefers-reduced-motion but composition is complete and readable.

Headline font — Syne: Downloaded the Google Fonts woff2 and self-hosted at public/fonts/syne-variable-latin.woff2 (matching the project's zero-external-deps approach). Syne at weight 780–800 is a wide, angular geometric grotesque — distinctive at display sizes, reads "engineered precision," nothing generic. Scoped strictly to .hero__title.

em treatment: Moved away from the pure accent-hi blue (which at display sizes on dark background reads as "startup keyword gradient") to pure white + text-decoration: underline with text-decoration-color: var(--accent-hi), 2px thickness, 0.18em offset, skip-ink: none. Reads as a deliberate technical annotation — the thing being defined — rather than a highlighted buzzword.

Reduced motion: All GSAP animations (ring rotation, inner ring, loop packet) are inside the existing prefers-reduced-motion: no-preference gate. CSS also sets .loop-packet { display: none } under the reduce rule so it never flickers in before JS runs.

Build result

npm run build → 9 pages built, 0 errors, 2.11 s

Test plan

• Load at 1280px+: loop ring visible between gear core and inner orbit ellipses
• Confirm ring rotates very slowly (45 s/rev — barely perceptible)
• Confirm loop packet orbits the ring (12 s/lap, different speed from cable packets)
• Confirm PLAN/ACT/OBSERVE labels stay upright (not rotating)
• Confirm inner depth ring counter-rotates faintly
• Verify prefers-reduced-motion: reduce in browser DevTools → ring is static, no packet, no rotation
• Mobile (≤640px): hero viz still hidden, no JS runs, no errors
• Headline font: Syne renders at display sizes, not Hanken Grotesk
• em 'AI agent systems': white text + blue underline rule, not blue text

🤖 Generated with Claude Code