buildmymcpserver/apps/web/components/hero-step-rotator.tsx

'use client';

import {
  AnimatePresence,
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring,
  useTransform,
} from 'framer-motion';
import { useEffect, useRef, useState } from 'react';

interface Step {
  label: string; // file-name badge top-left
  badge: string; // "01 · Describe" badge top-right
  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.
// The prompt deliberately mentions the secret NAME (`NOTION_API_KEY`)
// but never its value — the value goes into the encrypted vault in a
// separate, backend-only flow (step 02 below). This wording mirrors
// what the actual product UI accepts.
const STEPS: Step[] = [
  {
    label: 'prompt.txt',
    badge: '01 · Describe',
    code: `Build an MCP server that
searches our Notion workspace.

Tools: search_pages, get_page
Needs: NOTION_API_KEY`,
  },
  {
    label: 'secrets.vault',
    badge: '02 · Secure',
    code: `NOTION_API_KEY  = secret_••••••3a8f
NOTION_DB_ID    = db_••••••f12c

🔒 AES-256, encrypted at rest
   never sent to the AI`,
  },
  {
    label: 'build.log',
    badge: '03 · Generate',
    code: `✓ Generating spec   (2 tools)
✓ Static checks     passed
✓ Building image    17.2s
✓ Deploying         ok
✓ Live  →  mcp/notion-x9`,
  },
  {
    label: 'claude.config.json',
    badge: '04 · Connect',
    code: `{
  "mcpServers": {
    "notion": {
      "url": ".../notion-x9/mcp",
      "auth": "oauth2"
    }
  }
}`,
  },
];

const AUTO_MS = 3500;

/**
 * Hero step rotator — single centered tile cycling through three states.
 *
 * Replaces the old static stack of three code blocks. Auto-advances every
 * 3.5s, pauses on hover, jumps instantly when the user clicks a dot.
 *
 * Mouse interaction: the tile reacts with a subtle 3D tilt driven by spring-
 * smoothed motion values, plus a radial glow that translates toward the
 * cursor. Both are disabled when `prefers-reduced-motion: reduce` is set —
 * the rotation is content-essential and still advances, but the transition
 * collapses to an instant cross-fade and the tilt/glow are stripped out.
 */
export function HeroStepRotator() {
  const [step, setStep] = useState(0);
  const [paused, setPaused] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const reduced = useReducedMotion();

  // Mouse motion values for tilt + glow translation. `mx` and `my` are
  // raw cursor offsets (-1..1); the `*Spring` versions add the smoothing
  // so the tilt doesn't jitter on every mousemove event.
  const mx = useMotionValue(0);
  const my = useMotionValue(0);
  const mxSpring = useSpring(mx, { damping: 22, stiffness: 200 });
  const mySpring = useSpring(my, { damping: 22, stiffness: 200 });
  const rotateX = useTransform(mySpring, [-1, 1], reduced ? [0, 0] : [6, -6]);
  const rotateY = useTransform(mxSpring, [-1, 1], reduced ? [0, 0] : [-8, 8]);
  // Glow translates rather than re-rendering background-position — keeps
  // it on the GPU compositor instead of pegging the main thread.
  const glowDx = useTransform(mxSpring, [-1, 1], reduced ? [0, 0] : [-140, 140]);
  const glowDy = useTransform(mySpring, [-1, 1], reduced ? [0, 0] : [-110, 110]);

  useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setStep((s) => (s + 1) % STEPS.length), AUTO_MS);
    return () => clearTimeout(t);
  }, [step, paused]);

  function onMove(e: React.MouseEvent<HTMLDivElement>) {
    const r = containerRef.current?.getBoundingClientRect();
    if (!r) return;
    const x = Math.max(-1, Math.min(1, ((e.clientX - r.left) / r.width) * 2 - 1));
    const y = Math.max(-1, Math.min(1, ((e.clientY - r.top) / r.height) * 2 - 1));
    mx.set(x);
    my.set(y);
  }
  function onEnter() {
    setPaused(true);
  }
  function onLeave() {
    setPaused(false);
    mx.set(0);
    my.set(0);
  }

  const current = STEPS[step]!;

  return (
    <div className="flex flex-col items-center gap-5">
      {/* Container is relative + has a min-height so the absolutely-
          positioned cards inside (during the slide) overlap cleanly
          without collapsing the layout. min-h is sized for the tallest
          card (claude_desktop_config.json at 7 lines). */}
      <div
        ref={containerRef}
        className="relative w-full max-w-md min-h-[240px]"
        style={{ perspective: 1200 }}
        onMouseEnter={onEnter}
        onMouseLeave={onLeave}
        onMouseMove={onMove}
      >
        <AnimatePresence initial={false}>
          <motion.div
            key={step}
            // Carousel: current card slides left-out, next slides right-in.
            // Both cards coexist briefly in the same 3D-space and inherit
            // the same tilt — reads as a single tile that's swapping its
            // contents, not two discrete tiles. Reduced-motion collapses
            // the slide to a plain opacity cross-fade.
            initial={reduced ? { opacity: 0 } : { x: 220, opacity: 0 }}
            animate={reduced ? { opacity: 1 } : { x: 0, opacity: 1 }}
            exit={reduced ? { opacity: 0 } : { x: -220, opacity: 0 }}
            transition={{ duration: reduced ? 0.15 : 0.55, ease: [0.16, 1, 0.3, 1] }}
            style={{
              rotateX,
              rotateY,
              position: 'absolute',
              inset: 0,
              transformStyle: 'preserve-3d',
            }}
            className="overflow-hidden rounded-lg border border-[--color-border-strong] bg-[--color-bg-elevated] shadow-2xl shadow-black/50"
          >
            {/* Cursor-following glow — sits behind the content, additive. */}
            <motion.div
              aria-hidden
              className="pointer-events-none absolute inset-0"
              style={{
                background:
                  'radial-gradient(circle 260px at center, rgba(99,102,241,0.32), transparent 70%)',
                x: glowDx,
                y: glowDy,
              }}
            />
            <div className="relative flex items-center justify-between border-b border-[--color-border] px-4 py-2.5">
              <span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
                {current.label}
              </span>
              <span className="mono text-[10.5px] tracking-[0.16em] text-[--color-accent]">
                {current.badge}
              </span>
            </div>
            <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>
        </AnimatePresence>
      </div>

      {/* Step indicator — accent dot is wider + glows so the active step
          reads at a glance. Buttons stay clickable so users can jump. */}
      <div className="flex items-center gap-2" role="tablist" aria-label="Hero flow steps">
        {STEPS.map((s, i) => (
          <button
            key={s.badge}
            type="button"
            role="tab"
            aria-selected={i === step}
            aria-label={`Jump to ${s.badge}`}
            onClick={() => setStep(i)}
            className={`h-1.5 rounded-full transition-all duration-300 ${
              i === step
                ? 'w-9 bg-[--color-accent] shadow-[0_0_10px_rgba(99,102,241,0.65)]'
                : 'w-1.5 bg-[--color-border-strong] hover:bg-[--color-fg-subtle]'
            }`}
          />
        ))}
      </div>
    </div>
  );
}