Interaction Lab

export function MagneticFill() {
  const x = useMotionValue(50);
  const y = useMotionValue(50);

  // The fill blooms from wherever the pointer entered, not from the centre.
  const background = useMotionTemplate`radial-gradient(140% 140% at ${x}% ${y}%, var(--accent) 0%, transparent 68%)`;

  return (
    <button
      type="button"
      onPointerMove={(event) => {
        const rect = event.currentTarget.getBoundingClientRect();
        x.set(((event.clientX - rect.left) / rect.width) * 100);
        y.set(((event.clientY - rect.top) / rect.height) * 100);
      }}
      className="spec-label group relative overflow-hidden border border-border-strong px-5 py-3 text-foreground transition-colors duration-300 hover:text-accent-contrast"
    >
      {/* The fill lives on its own layer so it can fade in from nothing. */}
      <motion.span
        aria-hidden
        style={{ background }}
        className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
      />
      <span className="relative">Hover me</span>
    </button>
  );
}

export function DirectionalUnderline() {
  const [origin, setOrigin] = useState<"left" | "right">("left");

  return (
    <a
      href="#lab"
      onPointerEnter={(event) => {
        const rect = event.currentTarget.getBoundingClientRect();
        // Wipe in from the side the pointer actually arrived from.
        setOrigin(event.clientX < rect.left + rect.width / 2 ? "left" : "right");
      }}
      className="group relative font-display text-lg text-foreground"
    >
      Read the case study
      <span
        aria-hidden
        className={cn(
          "absolute -bottom-1 left-0 h-px w-full scale-x-0 bg-accent transition-transform duration-300 ease-out group-hover:scale-x-100",
          origin === "left" ? "origin-left" : "origin-right",
        )}
      />
    </a>
  );
}

export function FocusField() {
  const [value, setValue] = useState("");
  const [focused, setFocused] = useState(false);
  const lifted = focused || value.length > 0;

  return (
    <div className="relative w-full max-w-64">
      <label
        htmlFor="lab-focus-field"
        className={cn(
          "spec-label pointer-events-none absolute left-3 transition-all duration-200",
          lifted
            ? "-top-2 bg-surface px-1 text-accent"
            : "top-3.5 text-faint",
        )}
      >
        Your email
      </label>

      <input
        id="lab-focus-field"
        type="email"
        value={value}
        onChange={(event) => setValue(event.target.value)}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        className="w-full border border-border bg-transparent px-3 py-3 font-mono text-sm outline-none transition-colors focus:border-accent"
      />

      {/* The ring contracts onto the field instead of snapping on. */}
      <motion.span
        aria-hidden
        className="pointer-events-none absolute inset-0 border border-accent"
        initial={false}
        animate={
          focused
            ? { opacity: 0.4, scale: 1 }
            : { opacity: 0, scale: 1.08 }
        }
        transition={{ type: "spring", stiffness: 320, damping: 26 }}
      />
    </div>
  );
}

export function SpotlightNav() {
  const [active, setActive] = useState(0);
  const [hovered, setHovered] = useState<number | null>(null);

  return (
    <nav className="flex border border-border p-1" onPointerLeave={() => setHovered(null)}>
      {NAV_ITEMS.map((item, index) => (
        <button
          key={item}
          type="button"
          onPointerEnter={() => setHovered(index)}
          onClick={() => setActive(index)}
          aria-current={active === index ? "page" : undefined}
          className="spec-label relative px-3 py-2 text-muted transition-colors hover:text-foreground aria-[current]:text-foreground"
        >
          {hovered === index ? (
            <motion.span
              layoutId="lab-spotlight"
              className="absolute inset-0 bg-foreground/8"
              transition={{ type: "spring", stiffness: 380, damping: 32 }}
            />
          ) : null}
          {active === index ? (
            <motion.span
              layoutId="lab-spotlight-underline"
              className="absolute inset-x-2 -bottom-1 h-px bg-accent"
              transition={{ type: "spring", stiffness: 380, damping: 32 }}
            />
          ) : null}
          <span className="relative">{item}</span>
        </button>
      ))}
    </nav>
  );
}

export function SlidingTabs() {
  const [active, setActive] = useState(0);

  return (
    <div
      role="tablist"
      aria-label="Sliding tabs demo"
      className="inline-flex border border-border bg-background p-1"
    >
      {TABS.map((tab, index) => (
        <button
          key={tab}
          role="tab"
          type="button"
          aria-selected={active === index}
          onClick={() => setActive(index)}
          className={cn(
            "spec-label relative px-4 py-2 transition-colors",
            active === index ? "text-background" : "text-muted hover:text-foreground",
          )}
        >
          {active === index ? (
            <motion.span
              layoutId="lab-tab-pill"
              className="absolute inset-0 bg-foreground"
              transition={{ type: "spring", stiffness: 340, damping: 30 }}
            />
          ) : null}
          <span className="relative">{tab}</span>
        </button>
      ))}
    </div>
  );
}

export function TextSwap() {
  const [sent, setSent] = useState(false);

  return (
    <button
      type="button"
      onClick={() => setSent((value) => !value)}
      className="spec-label relative h-11 w-40 overflow-hidden border border-border-strong text-foreground"
    >
      {/* Both labels ride one track, so the swap reads as a physical roll. */}
      <motion.span
        className="absolute inset-0 flex flex-col"
        animate={{ y: sent ? "-100%" : "0%" }}
        transition={{ type: "spring", stiffness: 300, damping: 30 }}
      >
        <span className="flex h-11 shrink-0 items-center justify-center">
          Send message
        </span>
        <span className="flex h-11 shrink-0 items-center justify-center text-accent">
          Sent ✓
        </span>
      </motion.span>
    </button>
  );
}