feat: Wave 1 UI overhaul — make the scroll experience alive with GSAP

Replace static Framer Motion whileInView animations with scroll-linked
GSAP ScrollTrigger animations across all landing page sections, adding
smooth scrolling, parallax depth layers, and floating background elements
to compete with Google CodeWiki's polish.

Scroll Animation Foundation:
- Add GSAP ScrollTrigger plugin registration (src/lib/gsap.ts)
- Add Lenis smooth scroll with exponential easing (src/lib/smooth-scroll.ts)
- Add ScrollAnimationProvider wrapper connecting Lenis to GSAP ticker
- Install @gsap/react and lenis dependencies

Landing Section Conversions (Framer Motion → GSAP ScrollTrigger):
- HowItWorks: staggered card reveals, number badge bounce, SVG line scrub
- FeatureCards: alternating left/right card entrances with scrub, icon pulse
- ComparisonTable: row stagger with check/X icon pop-in (back.out bounce)
- CommunitySection: header/stats/CTA GSAP triggers (kept AnimatedCounter)
- FooterCTA: form bounce easing, gradient drift background animation

Parallax & Depth:
- Add SectionDivider component (gradient-orb, grid-fade, dots variants)
- Add FloatingElements with 6 shapes at varying parallax scroll rates
- Insert 4 section dividers between landing sections in page.tsx

CSS Animation Utilities:
- Add .gsap-reveal directional classes, .word-reveal helpers
- Add gradient-shift, gradient-drift, float-slow/medium keyframes

Bug Fix:
- Fix MCP server Docker crash: set host/port on mcp.settings instead of
  passing as run() kwargs (FastMCP API compatibility)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

UI_OVERHAUL_PLAN.md

@@ -414,6 +414,8 @@ def wiki_page_resource(owner: str, repo: str, page_id: str) -> str:
         host = os.environ.get("MCP_HOST", "0.0.0.0")
         port = int(os.environ.get("MCP_PORT", "8008"))
         print(f"Starting BetterCodeWiki MCP server on http://{host}:{port}/mcp", file=sys.stderr)
-        mcp.run(transport="streamable-http", host=host, port=port)
+        mcp.settings.host = host
+        mcp.settings.port = port
+        mcp.run(transport="streamable-http")
     else:
         mcp.run(transport="stdio")

api/mcp/server.py

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.2",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "class-variance-authority": "^0.7.1",
@@ -18,6 +19,7 @@
     "gsap": "^3.14.2",
     "hugeicons-react": "^0.4.0",
     "jszip": "^3.10.1",
+    "lenis": "^1.3.17",
     "lucide-react": "^0.574.0",
     "mermaid": "^11.4.1",
     "next": "15.3.1",

package-lock.json

@@ -244,4 +244,68 @@ code, pre, .font-mono {
 .text-body-sm { font-size: 0.75rem; line-height: 1.5; font-weight: 400; }
 .text-label-lg { font-size: 0.875rem; line-height: 1.25; font-weight: 500; letter-spacing: 0.006em; }
 .text-label-md { font-size: 0.75rem; line-height: 1.15; font-weight: 500; letter-spacing: 0.006em; }
-.text-label-sm { font-size: 0.688rem; line-height: 1.15; font-weight: 500; letter-spacing: 0.006em; }
+.text-label-sm { font-size: 0.688rem; line-height: 1.15; font-weight: 500; letter-spacing: 0.006em; }
+
+/* ===== Scroll Animation Utilities ===== */
+.gsap-reveal {
+  opacity: 0;
+  transform: translateY(40px);
+}
+
+.gsap-reveal-left {
+  opacity: 0;
+  transform: translateX(-40px);
+}
+
+.gsap-reveal-right {
+  opacity: 0;
+  transform: translateX(40px);
+}
+
+/* Word-by-word reveal for section headings */
+.word-reveal .word {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* Gradient line animation for section dividers */
+@keyframes gradient-shift {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(2%, -3%) scale(1.02); }
+  66% { transform: translate(-1%, 2%) scale(0.98); }
+}
+
+.animate-gradient-shift {
+  animation: gradient-shift 8s ease-in-out infinite;
+}
+
+/* Floating animation for decorative elements */
+@keyframes float-slow {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-10px) rotate(3deg); }
+}
+
+@keyframes float-medium {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-15px) rotate(-2deg); }
+}
+
+.animate-float-slow {
+  animation: float-slow 6s ease-in-out infinite;
+}
+
+.animate-float-medium {
+  animation: float-medium 4s ease-in-out infinite;
+}
+
+/* Slow gradient drift for FooterCTA background */
+@keyframes gradient-drift {
+  0%, 100% { background-position: 50% 100%; }
+  50% { background-position: 50% 80%; }
+}
+
+.animate-gradient-drift {
+  background-size: 200% 200%;
+  animation: gradient-drift 8s ease-in-out infinite;
+}