demos.tsx

// This file is auto-generated by `pnpm build:registry`.
// Source of truth: `registry/components/*.json -> registry/demos/shared.tsx + registry/**/demo.tsx`.
// Do not edit this file manually.

"use client";

import { Button } from "@/components/ui/moving-border";
import { TypewriterText } from "@/components/ui/typewriter-text";
import { TiltCard } from "@/components/ui/3d-tilt-card";
import { SpotlightCard } from "@/components/ui/spotlight-card";
import { AuroraBackground } from "@/components/ui/aurora-background";
import { AnimatedTabs } from "@/components/ui/animated-tabs";
import { MagneticButton } from "@/components/ui/magnetic-button";
import { InfiniteMarquee, MarqueeItem } from "@/components/ui/infinite-marquee";
import { ScrollRevealGroup } from "@/components/ui/scroll-reveal";
import {
  SkeletonShimmer,
  SkeletonCard,
} from "@/components/ui/skeleton-shimmer";
import {
  MorphingModal,
  MorphingModalTrigger,
} from "@/components/ui/morphing-modal";
import { GradientTextReveal } from "@/components/ui/gradient-text-reveal";
import { ScrambleText } from "@/components/ui/scramble-text";
import { MagneticText } from "@/components/ui/magnetic-text";
import { MeteorsCard } from "@/components/ui/meteors-card";
import { FlipCard } from "@/components/ui/flip-card";
import { DotGridBackground } from "@/components/ui/dot-grid-background";
import { FloatingDock } from "@/components/ui/floating-dock";
import { ConfettiBurst } from "@/components/ui/confetti-burst";
import { DrawerSlide } from "@/components/ui/drawer-slide";
import {
  NotificationStack,
  useNotifications,
} from "@/components/ui/notification-stack";
import { AnimatedTimeline } from "@/components/ui/animated-timeline";
import { NestedComments } from "@/components/ui/nested-comments";
import type { Comment } from "@/components/ui/nested-comments";
import { HoverRevealCard } from "@/components/ui/hover-reveal-card";
import { BentoGrid, BentoCard } from "@/components/ui/bento-grid";
import { ParticleField } from "@/components/ui/particle-field";
import { HorizontalScrollGallery } from "@/components/ui/horizontal-scroll-gallery";
import { RadialMenu } from "@/components/ui/radial-menu";
import { CursorTrail } from "@/components/ui/cursor-trail";
import Image from "next/image";
import { PenCursor } from "@/components/ui/pen-cursor";
import { InteractiveCursor } from "@/components/ui/interactive-cursor";
import GlowHeroSection from "@/components/ui/glow-hero-section";
import { LimelightNav } from "@/components/ui/limelight-nav";
import { MorphingCardStack } from "@/components/ui/morphing-card-stack";
import { MiniMacKeyboard } from "@/components/ui/mini-mac-keyboard";
import { MultiStepAuthCard } from "@/components/ui/multi-step-auth-card";
import { DataTable } from "@/components/ui/data-table";
import GlowingTextOutline from "@/components/ui/animated-glowing-text-outline";
import { ShinyText } from "@/components/ui/shiny-text";
import { OutlinedMegaMark } from "@/components/ui/outlined-mega-mark";
import { BlurReveal } from "@/components/ui/blur-reveal";
import { CountUp } from "@/components/ui/count-up";
import { BorderBeam } from "@/components/ui/border-beam";
import { Ripple } from "@/components/ui/ripple";
import { WordRotate } from "@/components/ui/word-rotate";
import { ShootingStarsGrid } from "@/components/ui/shooting-stars-grid";
import { DynamicInfo } from "@/components/ui/dynamic-info";
import { MacbookMock } from "@/components/ui/macbook-mock";
import { LiquidGlassPanel } from "@/components/ui/liquid-glass-panel";
import { ShaderMeshGradient } from "@/components/ui/shader-mesh-gradient";
import { ChromaticAberrationReveal } from "@/components/ui/chromatic-aberration-reveal";
import { IridescentFoilButton } from "@/components/ui/iridescent-foil-button";
import { KineticVariableHeadline } from "@/components/ui/kinetic-variable-headline";
import { CausticLightCard } from "@/components/ui/caustic-light-card";
import { RefractiveCursorLens } from "@/components/ui/refractive-cursor-lens";
import { AmbientGlowCard } from "@/components/ui/ambient-glow-card";
import { ReferencePulseHero } from "@/components/ui/hero-reference-pulse";
import { IridescentSweepHero } from "@/components/ui/hero-iridescent-sweep";
import { LiquidAuroraMeshHero } from "@/components/ui/hero-liquid-aurora-mesh";
import { NoiseDotFieldHero } from "@/components/ui/hero-noise-dot-field";
import { LogoMarqueeHero } from "@/components/ui/hero-logo-marquee";
import { MagneticLettersHero } from "@/components/ui/hero-magnetic-letters";
import { TerminalHero } from "@/components/ui/hero-terminal";
import { FlowFieldHero } from "@/components/ui/hero-flow-field";
import { RadialBurstHero } from "@/components/ui/hero-radial-burst";
import { AnimatedTooltip } from "@/components/ui/animated-tooltip";
import { motion } from "motion/react";
import { useRef, useState } from "react";
import {
  Ghost,
  Sparkles,
  Layers,
  ScrollText,
  Terminal,
  Zap,
  Shield,
  Globe,
  Home as HomeIcon,
  Bookmark,
  PlusCircle,
  User,
  Settings,
  Compass,
  Bell,
  Palette,
  Clock,
  Link2,
  Share2,
  Info,
} from "lucide-react";
import { cn } from "@/lib/utils";

export type DemoThemeProps = { theme?: "light" | "dark" };
export type DemoComponent = React.ComponentType<DemoThemeProps>;

// Helper for notifications demo
function NotificationDemo({ theme = "dark" }: DemoThemeProps) {
  const { notifications, addNotification, removeNotification } =
    useNotifications();
  return (
    <div className="flex flex-col items-center gap-4 w-full">
      <div className="flex flex-wrap gap-3 items-center justify-center">
        {(["success", "error", "warning", "info"] as const).map((type) => (
          <button
            key={type}
            onClick={() =>
              addNotification({
                title: `${
                  type.charAt(0).toUpperCase() + type.slice(1)
                } notification`,
                description: "This is a demo notification that auto-dismisses.",
                type,
                duration: 4000,
              })
            }
            className={cn(
              "px-4 py-2 rounded-lg text-sm font-medium transition-colors capitalize",
              type === "success" &&
                "bg-green-900/50 border border-green-800/50 hover:bg-green-900/80 text-green-300",
              type === "error" &&
                "bg-red-900/50 border border-red-800/50 hover:bg-red-900/80 text-red-300",
              type === "warning" &&
                "bg-yellow-900/50 border border-yellow-800/50 hover:bg-yellow-900/80 text-yellow-300",
              type === "info" &&
                "bg-blue-900/50 border border-blue-800/50 hover:bg-blue-900/80 text-blue-300",
            )}
          >
            {type}
          </button>
        ))}
      </div>
      <NotificationStack
        theme={theme}
        notifications={notifications}
        onRemove={removeNotification}
      />
    </div>
  );
}

function InteractiveCursorDemo({ theme = "dark" }: DemoThemeProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const isDark = theme === "dark";
  return (
    <div
      ref={containerRef}
      className={cn(
        "relative h-[440px] w-full flex items-center justify-center overflow-hidden rounded-xl border",
        isDark
          ? "bg-neutral-950 border-neutral-800"
          : "bg-neutral-50 border-neutral-200",
      )}
    >
      {/* Ambient center glow */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background: isDark
            ? "radial-gradient(ellipse 60% 50% at 50% 55%, rgba(168,85,247,0.08) 0%, transparent 80%)"
            : "radial-gradient(ellipse 60% 50% at 50% 55%, rgba(124,58,237,0.06) 0%, transparent 80%)",
        }}
      />

      <div className="relative z-10 flex flex-col items-center gap-5 text-center px-8 select-none">
        {/* Eyebrow label */}
        <span
          className={cn(
            "text-[11px] font-mono tracking-[0.2em] uppercase pointer-events-none",
            isDark ? "text-purple-400/70" : "text-purple-600/70",
          )}
        >
          Spring Physics · Magnetic Snap · Click Particles
        </span>

        {/* Heading */}
        <h3
          className={cn(
            "text-4xl font-bold tracking-tight pointer-events-none",
            isDark
              ? "bg-gradient-to-b from-white to-neutral-400 bg-clip-text text-transparent"
              : "bg-gradient-to-b from-neutral-900 to-neutral-500 bg-clip-text text-transparent",
          )}
        >
          Interactive Cursor
        </h3>

        {/* Description */}
        <p
          className={cn(
            "max-w-xs text-sm leading-relaxed pointer-events-none",
            isDark ? "text-neutral-500" : "text-neutral-500",
          )}
        >
          Move inside this card. Hover buttons to see magnetic pull. Click
          anywhere for burst particles.
        </p>

        {/* Button row — each one is a magnetic target */}
        <div className="flex items-center gap-3 mt-1">
          <button
            className={cn(
              "px-5 py-2.5 rounded-full text-sm font-semibold transition-colors",
              isDark
                ? "bg-purple-600 hover:bg-purple-500 text-white"
                : "bg-purple-600 hover:bg-purple-700 text-white",
            )}
          >
            Primary
          </button>
          <button
            className={cn(
              "px-5 py-2.5 rounded-full text-sm font-semibold border transition-colors",
              isDark
                ? "border-neutral-700 text-neutral-300 hover:border-purple-500 hover:text-purple-300"
                : "border-neutral-300 text-neutral-600 hover:border-purple-400 hover:text-purple-700",
            )}
          >
            Secondary
          </button>
          <button
            className={cn(
              "px-5 py-2.5 rounded-full text-sm font-semibold transition-colors",
              isDark
                ? "text-neutral-500 hover:text-neutral-200"
                : "text-neutral-400 hover:text-neutral-800",
            )}
          >
            Ghost
          </button>
        </div>

        {/* Hint */}
        <p
          className={cn(
            "text-[11px] pointer-events-none mt-1",
            isDark ? "text-neutral-700" : "text-neutral-400",
          )}
        >
          Pass{" "}
          <code className={isDark ? "text-neutral-500" : "text-neutral-500"}>
            hideSystemCursor
          </code>{" "}
          to fully replace the native cursor
        </p>
      </div>

      <InteractiveCursor
        containerRef={containerRef}
        hideSystemCursor={false}
        color={isDark ? "#a855f7" : "#7c3aed"}
        clickColor={isDark ? "#c084fc" : "#8b5cf6"}
        trailColor={
          isDark ? "rgba(168, 85, 247, 0.35)" : "rgba(124, 58, 237, 0.25)"
        }
        glow={true}
        particleEffect={true}
        magneticPull={true}
      />
    </div>
  );
}

function PenCursorDemo({ theme = "dark" }: DemoThemeProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  return (
    <div
      ref={containerRef}
      className={cn(
        "relative h-[400px] w-full flex items-center justify-center p-12 rounded-xl overflow-hidden shadow-inner border",
        theme === "dark"
          ? "bg-neutral-950 border-neutral-800"
          : "bg-neutral-100 border-neutral-200",
      )}
    >
      <div className="text-center relative z-10 pointer-events-none select-none">
        <h3
          className={cn(
            "text-3xl font-bold bg-clip-text text-transparent mb-4",
            theme === "dark"
              ? "bg-gradient-to-br from-white to-neutral-500"
              : "bg-gradient-to-br from-neutral-900 to-neutral-600",
          )}
        >
          Ribbon trail
        </h3>
        <p
          className={theme === "dark" ? "text-neutral-400" : "text-neutral-600"}
        >
          Move your mouse — a physics-driven ribbon trails the pointer.
        </p>
      </div>
      <PenCursor
        containerRef={containerRef}
        trailLength={40}
        maxWidth={1}
        minWidth={1}
        colorHead={theme === "dark" ? "159, 175, 155" : "100, 80, 200"}
        colorTail={theme === "dark" ? "198, 167, 106" : "180, 120, 230"}
        alphaHead={0.95}
        alphaTail={0}
        damping={0.55}
        speedInfluence={0.8}
        speedMax={500}
      />
    </div>
  );
}

// Helper for Modal Demo
function ModalDemo({ theme = "dark" }: DemoThemeProps) {
  const [modalOpen, setModalOpen] = useState(false);
  return (
    <>
      <div className="flex items-center justify-center">
        <MorphingModalTrigger
          theme={theme}
          layoutId="modal-demo"
          onClick={() => setModalOpen(true)}
          className={cn(
            "p-6 rounded-xl border transition-colors max-w-xs",
            theme === "dark"
              ? "bg-neutral-900/50 border-neutral-800 hover:border-neutral-700"
              : "bg-neutral-100 border-neutral-200 hover:border-neutral-300",
          )}
        >
          <h3
            className={cn(
              "text-lg font-bold mb-2",
              theme === "dark" ? "text-white" : "text-neutral-900",
            )}
          >
            Click to open modal
          </h3>
          <p
            className={cn(
              "text-sm",
              theme === "dark" ? "text-neutral-400" : "text-neutral-600",
            )}
          >
            This card morphs into a modal with spring physics.
          </p>
        </MorphingModalTrigger>
      </div>
      <MorphingModal
        theme={theme}
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        layoutId="modal-demo"
      >
        <div className="pt-4">
          <h3
            className={cn(
              "text-2xl font-bold mb-4",
              theme === "dark" ? "text-white" : "text-neutral-900",
            )}
          >
            Morphing Modal
          </h3>
          <p
            className={cn(
              "mb-6",
              theme === "dark" ? "text-neutral-400" : "text-neutral-600",
            )}
          >
            This modal expands from the trigger element with spring-based
            animation. It supports Escape key to close, click-outside to
            dismiss, and an animated close button.
          </p>
          <div className="flex gap-3">
            <button
              onClick={() => setModalOpen(false)}
              className="px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 transition-colors text-sm font-medium"
            >
              Got it
            </button>
            <button
              onClick={() => setModalOpen(false)}
              className={cn(
                "px-4 py-2 rounded-lg transition-colors text-sm font-medium",
                theme === "dark"
                  ? "bg-neutral-800 hover:bg-neutral-700 text-neutral-300"
                  : "bg-neutral-200 hover:bg-neutral-300 text-neutral-700",
              )}
            >
              Cancel
            </button>
          </div>
        </div>
      </MorphingModal>
    </>
  );
}

// Helper for Drawer Demo
function DrawerDemo({ theme = "dark" }: DemoThemeProps) {
  const [drawerOpen, setDrawerOpen] = useState(false);
  return (
    <>
      <div className="flex items-center justify-center">
        <button
          onClick={() => setDrawerOpen(true)}
          className="px-6 py-3 rounded-lg bg-purple-600 hover:bg-purple-500 transition-colors font-medium"
        >
          Open Drawer
        </button>
      </div>
      <DrawerSlide
        theme={theme}
        isOpen={drawerOpen}
        onClose={() => setDrawerOpen(false)}
      >
        <h3
          className={cn(
            "text-xl font-bold mb-4",
            theme === "dark" ? "text-white" : "text-neutral-900",
          )}
        >
          Drawer Content
        </h3>
        <p
          className={cn(
            "mb-4",
            theme === "dark" ? "text-neutral-400" : "text-neutral-600",
          )}
        >
          This drawer slides in from the right with spring physics. You can drag
          it to dismiss.
        </p>
        <button
          onClick={() => setDrawerOpen(false)}
          className={cn(
            "px-4 py-2 rounded-lg transition-colors text-sm",
            theme === "dark"
              ? "bg-neutral-800 hover:bg-neutral-700 text-neutral-300"
              : "bg-neutral-200 hover:bg-neutral-300 text-neutral-700",
          )}
        >
          Close Drawer
        </button>
      </DrawerSlide>
    </>
  );
}

// Helper for Nested Comments demo
const DEMO_COMMENTS: Comment[] = [
  {
    id: "1",
    author: "Alex Kim",
    content:
      "This component is incredible! The spring animations feel so natural and snappy.",
    timestamp: "2 hours ago",
    likes: 14,
    replies: [
      {
        id: "1-1",
        author: "Sarah Chen",
        content:
          "Agreed! The collapse animation is especially smooth. Love the thread lines too.",
        timestamp: "1 hour ago",
        likes: 6,
        replies: [
          {
            id: "1-1-1",
            author: "Alex Kim",
            content:
              "Thanks! Motion.dev's layout animations make nested content effortless to build.",
            timestamp: "45 min ago",
            likes: 3,
          },
        ],
      },
    ],
  },
  {
    id: "2",
    author: "Jordan Lee",
    content:
      "Love the inline reply box with ⌘+Enter shortcut. Very intuitive UX — try clicking Reply!",
    timestamp: "3 hours ago",
    likes: 9,
  },
  {
    id: "3",
    author: "Maya Patel",
    content:
      "The like button spring animation is a nice touch. Small details make a big difference.",
    timestamp: "4 hours ago",
    likes: 21,
  },
];

function NestedCommentsDemo({ theme = "dark" }: DemoThemeProps) {
  return (
    <div className="w-full p-6 overflow-y-auto max-h-[520px]">
      <NestedComments
        theme={theme}
        comments={DEMO_COMMENTS}
        maxDepth={4}
        accentColor="#8b5cf6"
      />
    </div>
  );
}

/** Keep in sync with `docs.usageCode` in registry/components/hero-logo-marquee.json. */
const LOGO_MARQUEE_DEMO_LOGOS = [
  "Acme",
  "Globex",
  "Soylent",
  "Initech",
  "Hooli",
  "Umbrella",
  "Stark",
  "Wayne",
  "Cyberdyne",
  "Wonka",
  "Tyrell",
  "Aperture",
] as const;

const LOGO_MARQUEE_DEMO_SECONDARY_LOGOS = [
  "Aperture",
  "Tyrell",
  "Wonka",
  "Cyberdyne",
  "Wayne",
  "Stark",
  "Umbrella",
  "Hooli",
  "Initech",
  "Soylent",
  "Globex",
  "Acme",
] as const;

function LogoMarqueeDemoHeadline() {
  return (
    <>
      <span className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.18em] text-white/70 backdrop-blur">
        <span className="h-1.5 w-1.5 rounded-full bg-white/80" aria-hidden />
        Trusted across teams
      </span>
      <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
        The platform shipping teams ship with.
      </h1>
      <p className="mt-5 max-w-xl text-pretty text-base text-white/65 sm:text-lg">
        From scrappy seed startups to public companies — UniqueUI components
        ship in production every day.
      </p>
    </>
  );
}

export const componentDemos: Record<string, DemoComponent> = {
  "animated-glowing-text-outline": () => (
    <div className="flex flex-col items-center justify-center p-10 min-h-[400px] w-full bg-background gap-16 border border-border rounded-xl overflow-hidden relative">
      <GlowingTextOutline
        text="Hello World"
        fontSize={80}
        colors={["#ffaa40", "#9c40ff", "#ffaa40"]}
        animationDuration={5}
      />
    </div>
  ),
  "moving-border": ({ theme = "dark" }) => (
    <div className="flex flex-wrap gap-6 items-center justify-center p-10">
      <Button
        theme={theme}
        borderRadius="1.75rem"
        className="bg-zinc-950 text-white border-neutral-200 dark:border-slate-800"
      >
        Click me
      </Button>
      <Button
        theme={theme}
        borderRadius="1rem"
        className="bg-zinc-950 text-white border-neutral-200 dark:border-slate-800"
        containerClassName="h-12 w-48"
      >
        Rounded Button
      </Button>
    </div>
  ),
  "typewriter-text": ({ theme = "dark" }) => (
    <div
      className={cn(
        "space-y-6 text-center p-10",
        theme === "dark" ? "text-white" : "text-neutral-900",
      )}
    >
      <div
        className={cn(
          "text-3xl font-bold",
          theme === "dark" ? "text-white" : "text-neutral-900",
        )}
      >
        I love{" "}
        <TypewriterText
          theme={theme}
          words={["React", "TypeScript", "Motion", "Tailwind", "UniqueUI"]}
          className="text-purple-400"
          typingSpeed={100}
          deletingSpeed={60}
        />
      </div>
      <div
        className={cn(
          "text-lg",
          theme === "dark" ? "text-neutral-400" : "text-neutral-600",
        )}
      >
        <TypewriterText
          theme={theme}
          words={[
            "Building amazing user interfaces...",
            "With beautiful animations...",
            "That stand out from the crowd.",
          ]}
          typingSpeed={50}
          deletingSpeed={30}
          delayBetweenWords={2000}
        />
      </div>
    </div>
  ),
  "3d-tilt-card": ({ theme = "dark" }) => (
    <div className="flex flex-wrap gap-8 items-center justify-center p-10">
      <TiltCard
        theme={theme}
        className={cn(
          "w-72 rounded-xl p-6",
          theme === "dark"
            ? "bg-gradient-to-br from-neutral-900 to-neutral-800 border border-neutral-700"
            : "bg-gradient-to-br from-neutral-100 to-neutral-200 border border-neutral-300",
        )}
      >
        <h3
          className={cn(
            "text-xl font-bold mb-2",
            theme === "dark" ? "text-white" : "text-neutral-900",
          )}
        >
          Hover me
        </h3>
        <p
          className={cn(
            "text-sm",
            theme === "dark" ? "text-neutral-400" : "text-neutral-600",
          )}
        >
          Move your cursor over this card to see the 3D tilt effect with glare.
        </p>
        <div
          className={cn(
            "mt-4 h-24 rounded-lg",
            theme === "dark"
              ? "bg-gradient-to-br from-purple-600/20 to-pink-600/20 border border-neutral-700/50"
              : "bg-gradient-to-br from-purple-200/40 to-pink-200/40 border border-neutral-300",
          )}
        />
      </TiltCard>
      <TiltCard
        theme={theme}
        tiltMaxDeg={25}
        glare={true}
        className={cn(
          "w-72 rounded-xl p-6",
          theme === "dark"
            ? "bg-gradient-to-br from-purple-950 to-indigo-950 border border-purple-800/50"
            : "bg-gradient-to-br from-purple-100 to-indigo-100 border border-purple-300/50",
        )}
      >
        <h3
          className={cn(
            "text-xl font-bold mb-2",
            theme === "dark" ? "text-purple-200" : "text-purple-800",
          )}
        >
          Extra Tilt
        </h3>
        <p
          className={cn(
            "text-sm",
            theme === "dark" ? "text-purple-300/60" : "text-purple-700/80",
          )}
        >
          This card has a stronger tilt angle for a more dramatic effect.
        </p>
        <div className="mt-4 flex gap-2">
          <div className="h-12 w-12 rounded-lg bg-purple-500/20 border border-purple-500/30" />
          <div className="h-12 w-12 rounded-lg bg-pink-500/20 border border-pink-500/30" />
          <div className="h-12 w-12 rounded-lg bg-indigo-500/20 border border-indigo-500/30" />
        </div>
      </TiltCard>
    </div>
  ),
  "spotlight-card": ({ theme = "dark" }) => (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-10">
      <SpotlightCard theme={theme}>
        <h3
          className={cn(
            "text-xl font-bold mb-2",
            theme === "dark" ? "text-white" : "text-neutral-900",
          )}
        >
          Hover for spotlight
        </h3>
        <p
          className={cn(
            "text-sm",
            theme === "dark" ? "text-neutral-400" : "text-neutral-600",
          )}
        >
          Move your mouse over the card to reveal a tracking spotlight effect.
        </p>
      </SpotlightCard>
      <SpotlightCard
        theme={theme}
        spotlightColor="rgba(232, 121, 249, 0.1)"
        spotlightSize={300}
      >
        <h3
          className={cn(
            "text-xl font-bold mb-2",
            theme === "dark" ? "text-white" : "text-neutral-900",
          )}
        >
          Custom spotlight
        </h3>
        <p
          className={cn(
            "text-sm",
            theme === "dark" ? "text-neutral-400" : "text-neutral-600",
          )}
        >
          Different color and size for the spotlight effect.
        </p>
      </SpotlightCard>
    </div>
  ),
  "aurora-background/cinematic": ({ theme = "dark" }) => (
    <div
      className={cn(
        "rounded-xl overflow-hidden border h-[400px] w-full relative",
        theme === "dark" ? "border-neutral-800" : "border-neutral-200",
      )}
    >
      <AuroraBackground
        preset="cinematic"
        theme={theme}
        className="min-h-0 h-full rounded-xl"
      >
        <div className="text-center z-10 px-4">
          <h3
            className={cn(
              "text-2xl font-bold mb-2 tracking-tight",
              theme === "dark" ? "text-white" : "text-neutral-900",
            )}
          >
            Background lights
          </h3>
          <p
            className={
              theme === "dark"
                ? "text-neutral-400 text-sm"
                : "text-neutral-600 text-sm"
            }
          >
            Vertical pillars drift right → left; soft overlap
          </p>
        </div>
      </AuroraBackground>
    </div>
  ),
  "aurora-background/stitch": ({ theme = "dark" }) => (
    <div
      className={cn(
        "rounded-xl overflow-hidden border h-[400px] w-full relative",
        theme === "dark" ? "border-neutral-800" : "border-neutral-200",
      )}
    >
      <AuroraBackground
        preset="stitch"
        theme={theme}
        blur={1.05}
        className="min-h-0 h-full rounded-xl"
      >
        <div className="text-center z-10 px-4">
          <h3
            className={cn(
              "text-2xl font-bold mb-2 tracking-tight",
              theme === "dark" ? "text-white" : "text-neutral-900",
            )}
          >
            Stitch DS
          </h3>
          <p
            className={
              theme === "dark"
                ? "text-neutral-400 text-sm"
                : "text-neutral-600 text-sm"
            }
          >
            Showcase tokens — same motion language
          </p>
        </div>
      </AuroraBackground>
    </div>
  ),
  "animated-tabs": ({ theme = "dark" }) => (
    <div className="max-w-md mx-auto p-10">
      <AnimatedTabs
        theme={theme}
        tabs={[
          {
            id: "design",
            label: "Design",
            content: (
              <div
                className={cn(
                  "p-4 rounded-lg text-sm",
                  theme === "dark"
                    ? "bg-neutral-900/50 border border-neutral-800 text-neutral-300"
                    : "bg-neutral-100 border border-neutral-200 text-neutral-700",
                )}
              >
                Build stunning interfaces with our design system. Every
                component is crafted with attention to detail.
              </div>
            ),
          },
          {
            id: "animate",
            label: "Animate",
            content: (
              <div
                className={cn(
                  "p-4 rounded-lg text-sm",
                  theme === "dark"
                    ? "bg-neutral-900/50 border border-neutral-800 text-neutral-300"
                    : "bg-neutral-100 border border-neutral-200 text-neutral-700",
                )}
              >
                Add life to your UI with spring-physics animations powered by
                Motion.dev.
              </div>
            ),
          },
          {
            id: "ship",
            label: "Ship",
            content: (
              <div
                className={cn(
                  "p-4 rounded-lg text-sm",
                  theme === "dark"
                    ? "bg-neutral-900/50 border border-neutral-800 text-neutral-300"
                    : "bg-neutral-100 border border-neutral-200 text-neutral-700",
                )}
              >
                Deploy with confidence. All components are production-ready and
                accessible.
              </div>
            ),
          },
        ]}
      />
    </div>
  ),
  "magnetic-button": ({ theme = "dark" }) => (
    <div className="flex flex-wrap gap-8 items-center justify-center p-20">
      <MagneticButton theme={theme}>Hover near me</MagneticButton>
      <MagneticButton
        theme={theme}
        magneticStrength={0.5}
        magneticRadius={200}
        className="bg-gradient-to-b from-purple-700 to-purple-900"
      >
        Stronger pull
      </MagneticButton>
    </div>
  ),
  "infinite-marquee": ({ theme = "dark" }) => (
    <div className="space-y-6 w-full p-10 overflow-hidden">
      <InfiniteMarquee theme={theme} speed={30}>
        {[
          "React",
          "Next.js",
          "TypeScript",
          "Tailwind",
          "Motion",
          "UniqueUI",
          "Vercel",
          "Node.js",
        ].map((item) => (
          <MarqueeItem key={item}>
            <span
              className={cn(
                "text-sm font-medium",
                theme === "dark" ? "text-neutral-300" : "text-neutral-600",
              )}
            >
              {item}
            </span>
          </MarqueeItem>
        ))}
      </InfiniteMarquee>
      <InfiniteMarquee theme={theme} speed={20} direction="right">
        {[
          "⚡ Fast",
          "🎨 Beautiful",
          "♿ Accessible",
          "📱 Responsive",
          "🔧 Customizable",
          "🚀 Production Ready",
        ].map((item) => (
          <MarqueeItem
            key={item}
            className={
              theme === "dark"
                ? "bg-purple-950/30 border-purple-800/50"
                : "bg-purple-100 border-purple-200/50"
            }
          >
            <span
              className={cn(
                "text-sm font-medium",
                theme === "dark" ? "text-purple-300" : "text-purple-700",
              )}
            >
              {item}
            </span>
          </MarqueeItem>
        ))}
      </InfiniteMarquee>
    </div>
  ),
  "scroll-reveal": ({ theme = "dark" }) => (
    <div
      className={cn(
        "p-10",
        theme === "dark" ? "text-white" : "text-neutral-900",
      )}
    >
      <ScrollRevealGroup
        theme={theme}
        animation="fade-up"
        staggerDelay={0.15}
        className="grid grid-cols-1 md:grid-cols-3 gap-4"
      >
        {["fade-up", "scale", "blur"].map((preset) => (
          <div
            key={preset}
            className={cn(
              "p-6 rounded-lg text-center",
              theme === "dark"
                ? "bg-neutral-900/50 border border-neutral-800"
                : "bg-neutral-100 border border-neutral-200",
            )}
          >
            <div
              className={cn(
                "text-lg font-semibold mb-1",
                theme === "dark" ? "text-neutral-200" : "text-neutral-800",
              )}
            >
              {preset}
            </div>
            <p
              className={cn(
                "text-xs",
                theme === "dark" ? "text-neutral-500" : "text-neutral-600",
              )}
            >
              Scroll to reveal
            </p>
          </div>
        ))}
      </ScrollRevealGroup>
    </div>
  ),
  "skeleton-shimmer": ({ theme = "dark" }) => (
    <div
      className={cn(
        "grid grid-cols-1 md:grid-cols-2 gap-6 p-10 w-full",
        theme === "dark" ? "text-white" : "text-neutral-900",
      )}
    >
      <SkeletonCard theme={theme} />
      <div
        className={cn(
          "space-y-4 p-6 rounded-xl border",
          theme === "dark"
            ? "border-neutral-800 bg-neutral-900/50"
            : "border-neutral-200 bg-neutral-100",
        )}
      >
        <SkeletonShimmer theme={theme} width="80%" height={20} rounded="md" />
        <SkeletonShimmer theme={theme} count={4} height={14} />
        <div className="flex gap-3">
          <SkeletonShimmer theme={theme} width={100} height={36} rounded="lg" />
          <SkeletonShimmer theme={theme} width={100} height={36} rounded="lg" />
        </div>
      </div>
    </div>
  ),
  "morphing-modal": ({ theme = "dark" }) => <ModalDemo theme={theme} />,
  "gradient-text-reveal": ({ theme = "dark" }) => (
    <div
      className={cn(
        "space-y-8 text-center p-10",
        theme === "dark" ? "text-white" : "text-neutral-900",
      )}
    >
      <GradientTextReveal
        text="Build stunning interfaces with UniqueUI"
        as="h3"
        className={cn(
          "text-3xl font-bold justify-center",
          theme === "dark" ? "text-white" : "text-neutral-900",
        )}
      />
      <GradientTextReveal
        text="Beautiful animated components for modern web apps"
        gradientFrom="#6366f1"
        gradientTo="#06b6d4"
        className={cn(
          "text-lg justify-center",
          theme === "dark" ? "text-neutral-300" : "text-neutral-600",
        )}
      />
    </div>
  ),
  "magnetic-text": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex min-h-[40vh] flex-col items-center justify-center gap-8 px-8 py-12 text-center",
        theme === "dark" ? "bg-[#0a0a0a]" : "bg-neutral-50",
      )}
    >
      <MagneticText
        as="h2"
        text="Motion, where it matters."
        animateEntry
        disableGlow={theme === "light"}
        className={cn(
          "text-4xl font-semibold tracking-tight sm:text-6xl",
          theme === "dark" ? "text-white" : "text-neutral-900",
        )}
      />
      <MagneticText
        text="Hover the headline above."
        radius={120}
        strength={10}
        disableGlow={theme === "light"}
        className={cn(
          "font-mono text-xs uppercase tracking-[0.18em]",
          theme === "dark" ? "text-white/55" : "text-neutral-500",
        )}
      />
    </div>
  ),
  "scramble-text": ({ theme = "dark" }) => (
    <div className="space-y-6 text-center p-10">
      <ScrambleText
        theme={theme}
        text="UNIQUEUI COMPONENTS"
        className={cn(
          "text-3xl font-bold tracking-wider",
          theme === "dark" ? "text-white" : "text-neutral-900",
        )}
      />
      <ScrambleText
        theme={theme}
        text="Hover to scramble again"
        triggerOnView={false}
        className={cn(
          "text-lg cursor-pointer",
          theme === "dark" ? "text-neutral-400" : "text-neutral-600",
        )}
      />
    </div>
  ),
  "meteors-card": ({ theme = "dark" }) => (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-10">
      <MeteorsCard theme={theme}>
        <h3
          className={cn(
            "text-xl font-bold mb-2",
            theme === "dark" ? "text-white" : "text-neutral-900",
          )}
        >
          Meteors Effect
        </h3>
        <p
          className={cn(
            "text-sm",
            theme === "dark" ? "text-neutral-400" : "text-neutral-600",
          )}
        >
          Watch the shooting stars fall through this card&apos;s background.
        </p>
      </MeteorsCard>
      <MeteorsCard theme={theme} meteorColor="#a855f7" meteorCount={30}>
        <h3
          className={cn(
            "text-xl font-bold mb-2",
            theme === "dark" ? "text-purple-200" : "text-purple-800",
          )}
        >
          Purple Meteors
        </h3>
        <p
          className={cn(
            "text-sm",
            theme === "dark" ? "text-purple-300/60" : "text-purple-700/80",
          )}
        >
          Custom colored meteors with extra density.
        </p>
      </MeteorsCard>
    </div>
  ),
  "mini-mac-keyboard": () => (
    <div className="flex min-h-[280px] w-full items-center justify-center overflow-visible px-4 py-8">
      <MiniMacKeyboard wrapperClassName="translate-x-0 translate-y-0 md:translate-y-0 scale-[2.35] sm:scale-[2.75] md:scale-[3.2]" />
    </div>
  ),
  "flip-card": ({ theme = "dark" }) => (
    <div className="flex flex-wrap gap-8 items-center justify-center p-10">
      <FlipCard
        theme={theme}
        className="w-60 h-40"
        front={
          <div
            className={cn(
              "flex items-center justify-center h-full rounded-xl border",
              theme === "dark"
                ? "bg-zinc-900 border-zinc-800"
                : "bg-zinc-100 border-zinc-300",
            )}
          >
            <p
              className={cn(
                "text-lg font-bold",
                theme === "dark" ? "text-white" : "text-neutral-900",
              )}
            >
              Hover to flip →
            </p>
          </div>
        }
        back={
          <div className="flex items-center justify-center h-full bg-gradient-to-br from-purple-900 to-indigo-900 rounded-xl">
            <p className="text-lg font-bold text-purple-200">Back side! ✨</p>
          </div>
        }
      />
      <FlipCard
        theme={theme}
        className="w-60 h-40"
        trigger="click"
        front={
          <div
            className={cn(
              "flex items-center justify-center h-full rounded-xl border",
              theme === "dark"
                ? "bg-zinc-900 border-zinc-800"
                : "bg-zinc-100 border-zinc-300",
            )}
          >
            <p
              className={cn(
                "text-lg font-bold",
                theme === "dark" ? "text-white" : "text-neutral-900",
              )}
            >
              Click to flip
            </p>
          </div>
        }
        back={
          <div
            className={cn(
              "flex items-center justify-center h-full rounded-xl border",
              theme === "dark"
                ? "bg-zinc-800 border-zinc-700"
                : "bg-zinc-200 border-zinc-400",
            )}
          >
            <p
              className={cn(
                "text-lg font-bold",
                theme === "dark" ? "text-green-400" : "text-green-700",
              )}
            >
              Click again!
            </p>
          </div>
        }
      />
    </div>
  ),
  "dot-grid-background": ({ theme = "dark" }) => (
    <DotGridBackground
      theme={theme}
      className="w-full h-[340px] flex items-center justify-center rounded-xl"
    >
      <div className="text-center relative z-10 select-none px-6">
        <p
          className={cn(
            "text-xs font-mono tracking-[0.25em] uppercase mb-4",
            theme === "dark" ? "text-neutral-500" : "text-neutral-400",
          )}
        >
          Move your cursor
        </p>
        <h3
          className={cn(
            "text-4xl font-bold tracking-tight",
            theme === "dark" ? "text-white" : "text-neutral-900",
          )}
        >
          Ripple Field
        </h3>
        <p
          className={cn(
            "mt-3 text-sm",
            theme === "dark" ? "text-neutral-500" : "text-neutral-400",
          )}
        >
          Each movement fires a shockwave through the grid
        </p>
      </div>
    </DotGridBackground>
  ),
  "floating-dock": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex items-center justify-center p-20",
        theme === "dark" ? "text-white" : "text-neutral-900",
      )}
    >
      <FloatingDock
        theme={theme}
        items={[
          {
            id: "home",
            icon: <span className="text-xl">🏠</span>,
            label: "Home",
          },
          {
            id: "search",
            icon: <span className="text-xl">✨</span>,
            label: "Search",
          },
          {
            id: "layers",
            icon: <span className="text-xl">📚</span>,
            label: "Layers",
          },
          {
            id: "scroll",
            icon: <span className="text-xl">📜</span>,
            label: "Scroll",
          },
          {
            id: "terminal",
            icon: <span className="text-xl">💻</span>,
            label: "Terminal",
          },
        ]}
      />
    </div>
  ),
  "confetti-burst": ({ theme = "dark" }) => (
    <div className="flex items-center justify-center p-20">
      <ConfettiBurst
        theme={theme}
        className={cn(
          "rounded-xl p-12 border transition-colors cursor-pointer",
          theme === "dark"
            ? "border-neutral-800 bg-neutral-900/50 hover:border-neutral-700"
            : "border-neutral-200 bg-neutral-100 hover:border-neutral-300",
        )}
      >
        <div className="text-center">
          <h3
            className={cn(
              "text-xl font-bold mb-2",
              theme === "dark" ? "text-white" : "text-neutral-900",
            )}
          >
            🎉 Click me!
          </h3>
          <p
            className={cn(
              "text-sm",
              theme === "dark" ? "text-neutral-400" : "text-neutral-600",
            )}
          >
            Click anywhere on this card for confetti
          </p>
        </div>
      </ConfettiBurst>
    </div>
  ),
  "drawer-slide": ({ theme = "dark" }) => <DrawerDemo theme={theme} />,
  "notification-stack": ({ theme = "dark" }) => (
    <NotificationDemo theme={theme} />
  ),
  // ─── Animated Timeline per-variant demos ─────────────────────────────────────
  "animated-timeline/vertical": ({ theme = "dark" }) => (
    <div className="p-10 w-full max-w-sm mx-auto">
      <AnimatedTimeline
        theme={theme}
        variant="vertical"
        lineColor="#3f3f46"
        items={[
          {
            id: "1",
            title: "Project Kickoff",
            description: "Scope defined and team assembled.",
            color: "#a855f7",
            date: "Jan 2026",
          },
          {
            id: "2",
            title: "Design Phase",
            description: "Wireframes and component system finalised.",
            color: "#6366f1",
            date: "Jan 2026",
          },
          {
            id: "3",
            title: "Dev Sprint",
            description: "Core components built and tested end-to-end.",
            color: "#ec4899",
            date: "Feb 2026",
          },
          {
            id: "4",
            title: "Public Launch",
            description: "CLI published and registry live.",
            color: "#10b981",
            date: "Feb 2026",
          },
        ]}
      />
    </div>
  ),
  "animated-timeline/horizontal": ({ theme = "dark" }) => (
    <div className="p-10 w-full overflow-x-auto">
      <AnimatedTimeline
        theme={theme}
        variant="horizontal"
        lineColor="#3f3f46"
        items={[
          {
            id: "1",
            title: "Kickoff",
            description: "Scope agreed.",
            color: "#a855f7",
            date: "Jan",
          },
          {
            id: "2",
            title: "Design",
            description: "Wireframes done.",
            color: "#6366f1",
            date: "Jan",
          },
          {
            id: "3",
            title: "Build",
            description: "Components shipped.",
            color: "#ec4899",
            date: "Feb",
          },
          {
            id: "4",
            title: "Launch",
            description: "Registry live.",
            color: "#10b981",
            date: "Feb",
          },
        ]}
      />
    </div>
  ),
  "animated-timeline/cards": ({ theme = "dark" }) => (
    <div className="p-8 w-full max-w-lg mx-auto">
      <AnimatedTimeline
        theme={theme}
        variant="cards"
        lineColor="#3f3f46"
        items={[
          {
            id: "1",
            title: "Project Kickoff",
            description: "Scope defined and team assembled.",
            color: "#a855f7",
            date: "Jan 2026",
          },
          {
            id: "2",
            title: "Design Phase",
            description: "Wireframes and component system finalised.",
            color: "#6366f1",
            date: "Jan 2026",
          },
          {
            id: "3",
            title: "Dev Sprint",
            description: "Core components built and tested end-to-end.",
            color: "#ec4899",
            date: "Feb 2026",
          },
          {
            id: "4",
            title: "Public Launch",
            description: "CLI published and registry live.",
            color: "#10b981",
            date: "Feb 2026",
          },
        ]}
      />
    </div>
  ),
  "animated-timeline/steps": ({ theme = "dark" }) => (
    <div className="p-10 w-full max-w-sm mx-auto">
      <AnimatedTimeline
        theme={theme}
        variant="steps"
        items={[
          {
            id: "1",
            title: "Install the CLI",
            description: "Run npx uniqueui init in your project.",
            color: "#a855f7",
          },
          {
            id: "2",
            title: "Add a component",
            description: "Run npx uniqueui add animated-timeline.",
            color: "#6366f1",
          },
          {
            id: "3",
            title: "Import and customise",
            description: "Use variant, color, and date props as needed.",
            color: "#ec4899",
          },
          {
            id: "4",
            title: "Ship to production",
            description: "Zero runtime dependency — fully your code.",
            color: "#10b981",
          },
        ]}
      />
    </div>
  ),
  "nested-comments": ({ theme = "dark" }) => (
    <NestedCommentsDemo theme={theme} />
  ),
  "hover-reveal-card": ({ theme = "dark" }) => (
    <div className="flex flex-wrap gap-6 items-start justify-center p-10">
      <HoverRevealCard
        theme={theme}
        image="https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=600&q=80"
        imageAlt="People at a conference table"
        tag="AI"
        title="AI for inclusive growth: Leadership lessons from Davos"
        subtitle="Article"
        description="What are the practical ways to ensure AI expands opportunity, strengthens resilience and supports a more inclusive, equitable future?"
        ctaText="Read the article →"
        accentColor="#6366f1"
        imageHeight={220}
        className="w-72"
      />
    </div>
  ),
  // ─── Bento Grid per-variant demos ───────────────────────────────────────────
  // These keys exactly match the demoKey in each ComponentVariant in components.ts
  "bento-grid/features": ({ theme = "dark" }) => (
    <div className="p-6 w-full">
      <BentoGrid theme={theme}>
        <BentoCard
          theme={theme}
          icon={<Sparkles className="w-5 h-5" />}
          title="Beautiful animations"
          description="Every interaction is crafted with spring-physics Motion.dev animations for a premium feel."
          cta="Explore components"
          href="#"
          className="col-span-2"
          spinBorder
          spinBorderColors={["#E2CBFF", "#393BB2"]}
        />
        <BentoCard
          theme={theme}
          icon={<Zap className="w-5 h-5" />}
          title="Lightning fast"
          description="Copy-paste components with zero runtime overhead."
          spinBorder
          spinBorderColors={["#a3e635", "#065f46"]}
        />
        <BentoCard
          theme={theme}
          icon={<Shield className="w-5 h-5" />}
          title="Type-safe props"
          description="Fully typed with TypeScript for confidence at scale."
          spinBorder
          spinBorderColors={["#67e8f9", "#1e3a5f"]}
        />
        <BentoCard
          theme={theme}
          icon={<Globe className="w-5 h-5" />}
          title="Zero lock-in"
          description="You own the code. No external runtime dependency."
          cta="Get started"
          href="#"
          className="col-span-2"
          spinBorder
          spinBorderColors={["#fda4af", "#9f1239"]}
        />
      </BentoGrid>
    </div>
  ),
  "bento-grid/showcase": ({ theme = "dark" }) => (
    <div className="p-6 w-full">
      <BentoGrid theme={theme}>
        <BentoCard
          theme={theme}
          title="Aurora vibes"
          description="Layered animated gradients that feel alive."
          background={
            <div className="absolute inset-0 bg-gradient-to-br from-violet-700/30 via-fuchsia-600/15 to-cyan-600/20 animate-pulse motion-reduce:animate-none" />
          }
          cta="View component"
          href="#"
          className="col-span-2"
        />
        <BentoCard
          theme={theme}
          title="Magnetic pull"
          description="Spring-physics cursor attraction."
          background={
            <div className="absolute inset-0 bg-gradient-to-br from-rose-700/25 to-orange-600/20" />
          }
        />
        <BentoCard
          theme={theme}
          title="Spotlight effect"
          description="Radial light that follows your mouse."
          background={
            <div className="absolute inset-0 bg-gradient-to-br from-sky-700/25 to-indigo-700/20" />
          }
        />
        <BentoCard
          theme={theme}
          title="Meteor storm"
          description="Shooting star particles raining through cards."
          background={
            <div className="absolute inset-0 bg-gradient-to-br from-emerald-700/25 to-teal-600/20" />
          }
          cta="Try it"
          href="#"
          className="col-span-2"
        />
      </BentoGrid>
    </div>
  ),
  "bento-grid/stats": ({ theme = "dark" }) => (
    <div className="p-6 w-full">
      <BentoGrid theme={theme} className="auto-rows-[160px]">
        <BentoCard
          theme={theme}
          title="Components"
          description="Production-ready animated components"
          background={
            <div
              className={cn(
                "absolute top-4 right-4 text-6xl font-black select-none",
                theme === "dark" ? "text-white/[0.06]" : "text-neutral-900/10",
              )}
            >
              24
            </div>
          }
          icon={<span className="text-2xl font-black text-violet-400">24</span>}
        />
        <BentoCard
          theme={theme}
          title="Zero dependencies"
          description="No UniqueUI runtime in your bundle"
          background={
            <div
              className={cn(
                "absolute top-4 right-4 text-6xl font-black select-none",
                theme === "dark" ? "text-white/[0.06]" : "text-neutral-900/10",
              )}
            >
              0
            </div>
          }
          icon={<span className="text-2xl font-black text-emerald-400">0</span>}
        />
        <BentoCard
          theme={theme}
          title="Install time"
          description="Seconds from CLI to working component"
          icon={<span className="text-2xl font-black text-sky-400">~3s</span>}
        />
        <BentoCard
          theme={theme}
          title="MIT License"
          description="Open source forever. Fork it, extend it, ship it."
          cta="View on GitHub"
          href="https://github.com"
          className="col-span-2"
        />
        <BentoCard
          theme={theme}
          title="Tailwind compatible"
          description="v3 and v4 supported"
          icon={<span className="text-2xl font-black text-cyan-400">✓</span>}
        />
      </BentoGrid>
    </div>
  ),
  "bento-grid/team": ({ theme = "dark" }) => (
    <div className="p-6 w-full">
      <BentoGrid theme={theme} className="auto-rows-[180px]">
        {[
          {
            name: "Alex Kim",
            role: "Lead Engineer",
            tag: "Motion",
            color: "#a855f7",
          },
          {
            name: "Sara Chen",
            role: "Design Systems",
            tag: "Tailwind",
            color: "#6366f1",
          },
          {
            name: "Jordan Lee",
            role: "DX Engineer",
            tag: "CLI",
            color: "#ec4899",
          },
          {
            name: "Maya Patel",
            role: "Animations Lead",
            tag: "Motion.dev",
            color: "#10b981",
          },
          {
            name: "Ryan Wu",
            role: "Accessibility",
            tag: "ARIA",
            color: "#f59e0b",
          },
          {
            name: "Priya Shah",
            role: "TypeScript Infra",
            tag: "TS 5.x",
            color: "#3b82f6",
          },
        ].map((m) => (
          <BentoCard
            key={m.name}
            theme={theme}
            title={m.name}
            description={m.role}
            cta={m.tag}
            background={
              <div
                className="absolute bottom-0 right-0 w-24 h-24 rounded-tl-full opacity-10"
                style={{ backgroundColor: m.color }}
              />
            }
            icon={
              <div
                className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white"
                style={{
                  backgroundColor: m.color + "33",
                  border: `1.5px solid ${m.color}66`,
                }}
              >
                {m.name
                  .split(" ")
                  .map((n) => n[0])
                  .join("")}
              </div>
            }
          />
        ))}
      </BentoGrid>
    </div>
  ),
  "particle-field/single": ({ theme = "dark" }) => (
    <div
      className={cn(
        "rounded-xl overflow-hidden border h-[400px] w-full relative",
        theme === "dark"
          ? "border-neutral-800 bg-neutral-950"
          : "border-neutral-200 bg-neutral-800",
      )}
    >
      <div className="absolute inset-0 z-10 pointer-events-none flex items-center justify-center">
        <h3
          className={cn(
            "text-3xl font-bold bg-clip-text text-transparent text-center",
            theme === "dark"
              ? "bg-gradient-to-b from-white to-neutral-500"
              : "bg-gradient-to-b from-neutral-100 to-neutral-400",
          )}
        >
          Interactive
          <br />
          Particle Field
        </h3>
      </div>
      <ParticleField particleCount={120} particleColor="#a855f7" speed={0.5} />
    </div>
  ),
  "particle-field/multi": ({ theme = "dark" }) => (
    <div
      className={cn(
        "rounded-xl overflow-hidden border h-[400px] w-full relative",
        theme === "dark"
          ? "border-neutral-800 bg-neutral-950"
          : "border-neutral-200 bg-neutral-800",
      )}
    >
      <div className="absolute inset-0 z-10 pointer-events-none flex items-center justify-center">
        <h3
          className={cn(
            "text-3xl font-bold bg-clip-text text-transparent text-center",
            theme === "dark"
              ? "bg-gradient-to-b from-white to-neutral-500"
              : "bg-gradient-to-b from-neutral-100 to-neutral-400",
          )}
        >
          Interactive
          <br />
          Particle Field
        </h3>
      </div>
      <ParticleField
        particleCount={120}
        particleColor={["#a855f7", "#06b6d4", "#f472b6"]}
        speed={0.5}
      />
    </div>
  ),
  "horizontal-scroll-gallery": ({ theme = "dark" }) => (
    <HorizontalScrollGallery
      theme={theme}
      items={[
        <Image
          key="1"
          src="https://images.unsplash.com/photo-1681935396624-006f4acdc530?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Landscape 1"
          width={1200}
          height={900}
          className="object-cover w-full h-full"
          unoptimized
        />,
        <Image
          key="2"
          src="https://images.unsplash.com/photo-1775059956734-78ffd2075cec?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Landscape 2"
          width={1200}
          height={900}
          className="object-cover w-full h-full"
          unoptimized
        />,
        <Image
          key="3"
          src="https://images.unsplash.com/photo-1722152246589-23370458081f?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Landscape 3"
          width={1200}
          height={900}
          className="object-cover w-full h-full"
          unoptimized
        />,
        <div
          key="4"
          className={cn(
            "w-full h-full flex items-center justify-center p-8 text-center",
            theme === "dark"
              ? "bg-neutral-900 text-white"
              : "bg-neutral-200 text-neutral-900",
          )}
        >
          <h3 className="text-4xl font-bold">End of Gallery</h3>
        </div>,
      ]}
    />
  ),
  "radial-menu": ({ theme = "dark" }) => (
    <div
      className={cn(
        "h-[400px] w-full flex items-center justify-center p-12 rounded-xl overflow-hidden shadow-inner border",
        theme === "dark"
          ? "bg-neutral-950 border-neutral-800"
          : "bg-neutral-100 border-neutral-200",
      )}
    >
      <RadialMenu
        theme={theme}
        radius={110}
        startAngle={-180}
        endAngle={0}
        staggerDelay={0.06}
        items={[
          { id: "1", label: "Settings", icon: <Layers className="w-5 h-5" /> },
          { id: "2", label: "Search", icon: <Ghost className="w-5 h-5" /> },
          { id: "3", label: "Apps", icon: <Terminal className="w-5 h-5" /> },
          { id: "4", label: "Docs", icon: <ScrollText className="w-5 h-5" /> },
          { id: "5", label: "Theme", icon: <Sparkles className="w-5 h-5" /> },
        ]}
      />
    </div>
  ),
  "cursor-trail": ({ theme = "dark" }) => (
    <div
      className={cn(
        "h-[400px] w-full flex items-center justify-center p-12 rounded-xl overflow-hidden shadow-inner border",
        theme === "dark"
          ? "bg-neutral-950 border-neutral-800"
          : "bg-neutral-100 border-neutral-200",
      )}
    >
      <div className="text-center relative z-10 pointer-events-none">
        <h3
          className={cn(
            "text-3xl font-bold bg-clip-text text-transparent mb-4",
            theme === "dark"
              ? "bg-gradient-to-br from-white to-neutral-500"
              : "bg-gradient-to-br from-neutral-900 to-neutral-600",
          )}
        >
          Interactive Cursor Trail
        </h3>
        <p
          className={theme === "dark" ? "text-neutral-400" : "text-neutral-600"}
        >
          Move your mouse inside this block to see the effect.
        </p>
      </div>
      <CursorTrail
        theme={theme}
        color="#a855f7"
        trailLength={30}
        size={15}
        decayDuration={0.8}
      />
    </div>
  ),
  "interactive-cursor": ({ theme = "dark" }) => (
    <InteractiveCursorDemo theme={theme} />
  ),
  "pen-cursor": ({ theme = "dark" }) => <PenCursorDemo theme={theme} />,
  "glow-hero-section/default": ({ theme = "dark" }) => (
    <GlowHeroSection theme={theme} height="h-[520px]" />
  ),
  "glow-hero-section/dark": ({ theme = "dark" }) => (
    <GlowHeroSection
      theme={theme}
      height="h-[520px]"
      backgroundColor="#0a0a0f"
      meshColorStart="rgba(139, 92, 246, 0.5)"
      meshColorEnd="rgba(6, 182, 212, 0.5)"
      badge="Next-Gen · Web · Components"
      heading="UniqueUI"
      description="Premium animated React components, copy-paste ready."
      gridSize={40}
      mouseRadius={200}
    />
  ),
  "glow-hero-section/no-badge": ({ theme = "dark" }) => (
    <GlowHeroSection
      theme={theme}
      height="h-[520px]"
      badge={null}
      heading="Build Interfaces That Stand Out"
      description="Drop-in animated components powered by Motion.dev and Tailwind CSS."
    />
  ),
  "limelight-nav/default": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex items-center justify-center p-12 h-[300px] w-full rounded-xl",
        theme === "dark" ? "bg-neutral-950" : "bg-neutral-100",
      )}
    >
      <LimelightNav
        theme={theme}
        limelightColor="#a855f7"
        items={[
          { id: "1", icon: <HomeIcon />, label: "Home" },
          { id: "2", icon: <Compass />, label: "Explore" },
          { id: "3", icon: <Bell />, label: "Notifications" },
        ]}
      />
    </div>
  ),
  "limelight-nav/custom": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex items-center justify-center p-12 h-[300px] w-full rounded-xl",
        theme === "dark" ? "bg-neutral-950" : "bg-neutral-100",
      )}
    >
      <LimelightNav
        theme={theme}
        limelightColor="#06b6d4"
        className={theme === "dark" ? "bg-neutral-900/50" : "bg-white/60"}
        items={[
          { id: "1", icon: <HomeIcon />, label: "Home" },
          { id: "2", icon: <Bookmark />, label: "Bookmarks" },
          { id: "3", icon: <PlusCircle />, label: "Add" },
          { id: "4", icon: <User />, label: "Profile" },
          { id: "5", icon: <Settings />, label: "Settings" },
        ]}
      />
    </div>
  ),
  "morphing-card-stack/default": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex items-center justify-center p-12 min-h-[500px] w-full rounded-xl border",
        theme === "dark"
          ? "bg-neutral-950 border-neutral-800"
          : "bg-neutral-100 border-neutral-200",
      )}
    >
      <MorphingCardStack
        theme={theme}
        cards={[
          {
            id: "1",
            title: "Magnetic Dock",
            description:
              "Cursor-responsive scaling with smooth spring animations",
            icon: <Layers className="h-5 w-5" />,
          },
          {
            id: "2",
            title: "Gradient Mesh",
            description:
              "Dynamic animated gradient backgrounds that follow your cursor",
            icon: <Palette className="h-5 w-5" />,
          },
          {
            id: "3",
            title: "Pulse Timeline",
            description: "Interactive timeline with animated pulse nodes",
            icon: <Clock className="h-5 w-5" />,
          },
          {
            id: "4",
            title: "Command Palette",
            description: "Radial command menu with keyboard navigation",
            icon: <Sparkles className="h-5 w-5" />,
          },
        ]}
      />
    </div>
  ),
  "multi-step-auth-card": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex items-center justify-center p-10 min-h-[420px] w-full rounded-xl border",
        theme === "dark"
          ? "bg-neutral-950 border-neutral-800"
          : "bg-neutral-100 border-neutral-200",
      )}
    >
      <MultiStepAuthCard />
    </div>
  ),
  "data-table/basic": ({ theme = "dark" }) => {
    const rows = [
      { id: "1", name: "Alex Kim", role: "Engineer", department: "Platform", status: "Active", joined: new Date("2023-01-09") },
      { id: "2", name: "Sara Chen", role: "Designer", department: "Product", status: "Active", joined: new Date("2023-03-14") },
      { id: "3", name: "Jordan Lee", role: "PM", department: "Growth", status: "Away", joined: new Date("2023-06-02") },
      { id: "4", name: "Maya Patel", role: "Engineer", department: "Platform", status: "Active", joined: new Date("2024-01-22") },
      { id: "5", name: "Ryan Wu", role: "Designer", department: "Product", status: "Away", joined: new Date("2024-02-11") },
      { id: "6", name: "Priya Shah", role: "PM", department: "Growth", status: "Active", joined: new Date("2024-04-30") },
      { id: "7", name: "Sam Rivera", role: "Engineer", department: "Platform", status: "Active", joined: new Date("2024-05-18") },
      { id: "8", name: "Jess Taylor", role: "Designer", department: "Product", status: "Active", joined: new Date("2024-06-07") },
      { id: "9", name: "Noah Park", role: "Engineer", department: "Growth", status: "Active", joined: new Date("2024-08-25") },
      { id: "10", name: "Lena Voss", role: "Analyst", department: "Platform", status: "Away", joined: new Date("2024-10-13") },
      { id: "11", name: "Omar Haddad", role: "Engineer", department: "Product", status: "Active", joined: new Date("2025-01-06") },
      { id: "12", name: "Ivy Nguyen", role: "PM", department: "Platform", status: "Active", joined: new Date("2025-03-19") },
    ];
    type Row = (typeof rows)[number];
    return (
      <div className="w-full p-6">
        <DataTable
          data={rows}
          getRowId={(row: Row) => row.id}
          preset="basic"
          pageSize={6}
          theme={theme}
          columns={[
            { id: "name", header: "Name", accessor: (row: Row) => row.name },
            { id: "role", header: "Role", accessor: (row: Row) => row.role },
            { id: "department", header: "Department", accessor: (row: Row) => row.department },
            { id: "status", header: "Status", accessor: (row: Row) => row.status },
            {
              id: "joined",
              header: "Joined",
              accessor: (row: Row) => row.joined,
              cell: (row: Row) => row.joined.toISOString().slice(0, 10),
            },
          ]}
        />
      </div>
    );
  },
  "data-table/advanced": ({ theme = "dark" }) => {
    const formatDate = (d: Date) =>
      `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(
        d.getDate()
      ).padStart(2, "0")}`;
    const rows = Array.from({ length: 24 }, (_, i) => ({
      id: `ord-${i + 1}`,
      order: `#${String(2400 + i)}`,
      customer: ["Alex Kim", "Sara Chen", "Jordan Lee", "Maya Patel", "Ryan Wu", "Priya Shah"][i % 6],
      total: Math.round((i * 53.7 + 24) * 100) / 100,
      status: ["Paid", "Pending", "Refunded"][i % 3],
      placed: new Date(2026, i % 12, (i % 27) + 1),
    }));
    type Row = (typeof rows)[number];
    return (
      <div className="w-full p-6">
        <DataTable
          data={rows}
          getRowId={(row: Row) => row.id}
          preset="advanced"
          pageSize={8}
          theme={theme}
          border
          renderExpanded={(row: Row) => (
            <div className="text-xs opacity-80">
              Order {row.order} for {row.customer} — placed{" "}
              {row.placed.toDateString()}, status {row.status}.
            </div>
          )}
          columns={[
            { id: "order", header: "Order", accessor: (row: Row) => row.order },
            { id: "customer", header: "Customer", accessor: (row: Row) => row.customer },
            {
              id: "total",
              header: "Total",
              accessor: (row: Row) => row.total,
              cell: (row: Row) => `$${row.total.toFixed(2)}`,
              align: "right",
            },
            { id: "status", header: "Status", accessor: (row: Row) => row.status },
            {
              id: "placed",
              header: "Placed",
              accessor: (row: Row) => row.placed,
              cell: (row: Row) => formatDate(row.placed),
            },
          ]}
        />
      </div>
    );
  },
  "data-table/virtualized": ({ theme = "dark" }) => {
    const rows = Array.from({ length: 10000 }, (_, i) => ({
      id: `evt-${i}`,
      event: `Event ${i + 1}`,
      service: ["api", "web", "worker", "cron"][i % 4],
      latency: ((i * 37) % 900) + 12,
      status: i % 13 === 0 ? "error" : "ok",
    }));
    type Row = (typeof rows)[number];
    return (
      <div className="w-full p-6">
        <DataTable
          data={rows}
          getRowId={(row: Row) => row.id}
          preset="enterprise"
          maxHeight={400}
          rowHeight={44}
          theme={theme}
          columns={[
            { id: "event", header: "Event", accessor: (row: Row) => row.event },
            { id: "service", header: "Service", accessor: (row: Row) => row.service },
            {
              id: "latency",
              header: "Latency (ms)",
              accessor: (row: Row) => row.latency,
              align: "right",
            },
            { id: "status", header: "Status", accessor: (row: Row) => row.status },
          ]}
        />
      </div>
    );
  },
  "data-table/grouped": ({ theme = "dark" }) => {
    const rows = [
      { id: "1", name: "Alex Kim", team: "Platform", region: "West", oncall: "Yes" },
      { id: "2", name: "Maya Patel", team: "Platform", region: "West", oncall: "No" },
      { id: "3", name: "Sam Rivera", team: "Platform", region: "East", oncall: "No" },
      { id: "4", name: "Sara Chen", team: "Product", region: "East", oncall: "Yes" },
      { id: "5", name: "Ryan Wu", team: "Product", region: "Central", oncall: "No" },
      { id: "6", name: "Jordan Lee", team: "Growth", region: "Central", oncall: "No" },
      { id: "7", name: "Priya Shah", team: "Growth", region: "West", oncall: "Yes" },
    ];
    type Row = (typeof rows)[number];
    return (
      <div className="w-full p-6">
        <DataTable
          data={rows}
          getRowId={(row: Row) => row.id}
          groupBy="team"
          border
          theme={theme}
          columns={[
            { id: "team", header: "Team", accessor: (row: Row) => row.team },
            { id: "name", header: "Name", accessor: (row: Row) => row.name },
            { id: "region", header: "Region", accessor: (row: Row) => row.region, rowSpan: true },
            { id: "oncall", header: "On call", accessor: (row: Row) => row.oncall },
          ]}
        />
      </div>
    );
  },
  "data-table/column-groups": ({ theme = "dark" }) => {
    const rows = [
      { id: "1", name: "Alex Kim", q1: 42, q2: 51, h1Target: 90, q3: 48, q4: 60, h2Target: 105, owner: "Platform" },
      { id: "2", name: "Sara Chen", q1: 38, q2: 47, h1Target: 88, q3: 52, q4: 58, h2Target: 102, owner: "Product" },
      { id: "3", name: "Jordan Lee", q1: 51, q2: 44, h1Target: 95, q3: 47, q4: 63, h2Target: 110, owner: "Growth" },
      { id: "4", name: "Maya Patel", q1: 45, q2: 55, h1Target: 92, q3: 50, q4: 61, h2Target: 108, owner: "Platform" },
    ];
    type Row = (typeof rows)[number];
    return (
      <div className="w-full p-6">
        <DataTable
          data={rows}
          getRowId={(row: Row) => row.id}
          sortable
          border
          theme={theme}
          columns={[
            {
              id: "name",
              header: "Name",
              accessor: (row: Row) => row.name,
              freeze: "left",
              width: 140,
            },
            {
              id: "h1",
              header: "H1",
              accessor: () => null,
              columns: [
                { id: "q1", header: "Q1", accessor: (row: Row) => row.q1, align: "right" },
                { id: "q2", header: "Q2", accessor: (row: Row) => row.q2, align: "right" },
                { id: "h1Target", header: "Target", accessor: (row: Row) => row.h1Target, align: "right" },
              ],
            },
            {
              id: "h2",
              header: "H2",
              accessor: () => null,
              columns: [
                { id: "q3", header: "Q3", accessor: (row: Row) => row.q3, align: "right" },
                { id: "q4", header: "Q4", accessor: (row: Row) => row.q4, align: "right" },
                { id: "h2Target", header: "Target", accessor: (row: Row) => row.h2Target, align: "right" },
              ],
            },
            { id: "owner", header: "Owner", accessor: (row: Row) => row.owner },
          ]}
        />
      </div>
    );
  }
,

  // ─── Phase 4 — Hero & Text Effects ───────────────────────────────────────

  "shiny-text": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex flex-col items-center justify-center gap-8 p-10 text-center",
        theme === "dark" ? "text-white" : "text-neutral-900",
      )}
    >
      <ShinyText
        text="The future of UI is here."
        speed={3}
        shimmerWidth={40}
        theme={theme}
        className="text-4xl font-black tracking-tight"
      />
      <ShinyText
        text="Ship faster. Look better."
        speed={4}
        shimmerWidth={50}
        theme={theme}
        className="text-2xl font-semibold"
      />
      <ShinyText
        text="Designed for builders who care."
        speed={5}
        shimmerWidth={35}
        theme={theme}
        className="text-lg font-medium"
      />
    </div>
  ),

  "outlined-mega-mark": () => (
    <OutlinedMegaMark
      containerClassName="flex w-full max-w-full flex-col items-center justify-center px-3 py-2 md:py-4"
      fontSize="clamp(7rem, 26vw, 14rem)"
      letterSpacing="-0.02em"
      strokeWidth={1}
      lightStrokeColor="var(--color-neutral-400, #a3a3a3)"
      darkStrokeColor="var(--color-neutral-200, #e5e5e5)"
      gradientOnHover
      outlineGradient={{
        stops: ["#fde68a", "#f97316", "#ec4899"],
        x1: "0%",
        y1: "0%",
        x2: "100%",
        y2: "0%",
      }}
    >
      UniqueUI
    </OutlinedMegaMark>
  ),

  "blur-reveal": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex flex-col items-center justify-center gap-8 p-10 text-center",
        theme === "dark" ? "text-white" : "text-neutral-900",
      )}
    >
      <BlurReveal
        text="Build stunning interfaces."
        animateBy="characters"
        delay={0}
        theme={theme}
        className="text-3xl font-black tracking-tight"
      />
      <BlurReveal
        text="Animated components that make users stop and stare."
        animateBy="words"
        delay={0.2}
        theme={theme}
        className={cn(
          "text-base max-w-sm leading-relaxed",
          theme === "dark" ? "text-neutral-400" : "text-neutral-600",
        )}
      />
    </div>
  ),

  "count-up": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex flex-wrap items-center justify-center gap-12 p-10",
        theme === "dark" ? "text-white" : "text-neutral-900",
      )}
    >
      {[
        { to: 12400, suffix: "+", label: "GitHub Stars", prefix: "" },
        { to: 99.9, suffix: "%", label: "Uptime SLA", prefix: "", decimals: 1 },
        { to: 68, suffix: " components", label: "Ready to use", prefix: "" },
        { to: 4200, suffix: "+", label: "Developers", prefix: "" },
      ].map(({ to, suffix, label, prefix, decimals }) => (
        <div key={label} className="text-center space-y-1">
          <p
            className={cn(
              "text-4xl font-black",
              theme === "dark" ? "text-white" : "text-neutral-900",
            )}
          >
            <CountUp
              to={to}
              suffix={suffix}
              prefix={prefix}
              decimals={decimals ?? 0}
              duration={2.2}
              theme={theme}
            />
          </p>
          <p
            className={cn(
              "text-sm",
              theme === "dark" ? "text-neutral-500" : "text-neutral-500",
            )}
          >
            {label}
          </p>
        </div>
      ))}
    </div>
  ),

  "border-beam": ({ theme = "dark" }) => (
    <div className="flex flex-wrap items-center justify-center gap-6 p-10">
      <BorderBeam
        colorFrom="#a855f7"
        colorTo="#ec4899"
        duration={5}
        size={180}
        theme={theme}
        className="w-64"
      >
        <div
          className={cn(
            "p-6 rounded-[10px]",
            theme === "dark" ? "bg-neutral-950" : "bg-white",
          )}
        >
          <div className="w-8 h-8 rounded-lg bg-purple-500/20 border border-purple-500/30 flex items-center justify-center mb-3">
            <Sparkles className="w-4 h-4 text-purple-400" />
          </div>
          <h3
            className={cn(
              "text-sm font-semibold mb-1",
              theme === "dark" ? "text-white" : "text-neutral-900",
            )}
          >
            Animated border
          </h3>
          <p
            className={cn(
              "text-xs",
              theme === "dark" ? "text-neutral-500" : "text-neutral-500",
            )}
          >
            A comet orbits continuously.
          </p>
        </div>
      </BorderBeam>

      <BorderBeam
        colorFrom="#06b6d4"
        colorTo="#3b82f6"
        duration={7}
        size={150}
        theme={theme}
        className="w-64"
      >
        <div
          className={cn(
            "p-6 rounded-[10px]",
            theme === "dark" ? "bg-neutral-950" : "bg-white",
          )}
        >
          <div className="w-8 h-8 rounded-lg bg-cyan-500/20 border border-cyan-500/30 flex items-center justify-center mb-3">
            <Zap className="w-4 h-4 text-cyan-400" />
          </div>
          <h3
            className={cn(
              "text-sm font-semibold mb-1",
              theme === "dark" ? "text-white" : "text-neutral-900",
            )}
          >
            Custom colours
          </h3>
          <p
            className={cn(
              "text-xs",
              theme === "dark" ? "text-neutral-500" : "text-neutral-500",
            )}
          >
            Any gradient, any speed.
          </p>
        </div>
      </BorderBeam>
    </div>
  ),

  ripple: ({ theme = "dark" }) => {
    const isDark = theme === "dark";
    return (
      <div
        className="relative w-full h-[460px] flex items-center justify-center overflow-hidden"
        style={{ background: isDark ? "#0c0608" : "#fdf8f5" }}
      >
        <Ripple
          mainCircleSize={90}
          mainCircleOpacity={isDark ? 0.55 : 0.45}
          numCircles={7}
          duration={10}
        />

        {/* Vignette so text stays readable over animated orbs */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background: isDark
              ? "radial-gradient(ellipse 55% 60% at 50% 50%, rgba(12,6,8,0) 0%, rgba(12,6,8,0.72) 60%, rgba(12,6,8,0.96) 100%)"
              : "radial-gradient(ellipse 55% 60% at 50% 50%, rgba(253,248,245,0) 0%, rgba(253,248,245,0.72) 60%, rgba(253,248,245,0.96) 100%)",
          }}
        />

        <div className="relative z-10 flex flex-col items-center gap-4 px-6 text-center max-w-xs">
          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{
              type: "spring",
              stiffness: 60,
              damping: 20,
              delay: 0.1,
            }}
            className={cn(
              "text-[10px] uppercase tracking-[0.35em]",
              isDark ? "text-rose-300/70" : "text-rose-500/70",
            )}
          >
            Maison de Parfum
          </motion.p>

          <motion.h2
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              type: "spring",
              stiffness: 80,
              damping: 22,
              delay: 0.28,
            }}
            className={cn(
              "text-[3.4rem] leading-[1] font-light",
              isDark ? "text-white" : "text-stone-900",
            )}
            style={{
              fontFamily: '"Cormorant Garamond", "Garamond", "Georgia", serif',
              fontStyle: "italic",
            }}
          >
            Aurore.
          </motion.h2>

          <motion.p
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              type: "spring",
              stiffness: 90,
              damping: 24,
              delay: 0.46,
            }}
            className={cn(
              "text-xs leading-relaxed tracking-wide",
              isDark ? "text-stone-400" : "text-stone-500",
            )}
          >
            A scent composed at the edge of dawn — rose, oud, and liquid amber
            woven into silence.
          </motion.p>

          <motion.button
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              type: "spring",
              stiffness: 100,
              damping: 26,
              delay: 0.62,
            }}
            className={cn(
              "mt-1 px-7 py-2.5 text-xs tracking-[0.18em] uppercase transition-all duration-300",
              isDark
                ? "border border-rose-300/30 text-rose-200/80 hover:border-rose-300/70 hover:text-rose-100"
                : "border border-rose-400/40 text-rose-700/80 hover:border-rose-500/70 hover:text-rose-800",
            )}
          >
            Discover the collection
          </motion.button>
        </div>
      </div>
    );
  },

  "word-rotate": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex flex-col items-center justify-center gap-10 p-10 text-center",
        theme === "dark" ? "text-white" : "text-neutral-900",
      )}
    >
      <h2
        className={cn(
          "text-3xl font-black tracking-tight",
          theme === "dark" ? "text-white" : "text-neutral-900",
        )}
      >
        Build interfaces that are{" "}
        <WordRotate
          words={["faster", "smarter", "bolder", "yours"]}
          animation="slide-up"
          interval={2000}
          theme={theme}
          className="text-purple-400"
        />
      </h2>

      <div className="flex flex-wrap justify-center gap-6 text-sm">
        {(["slide-up", "slide-down", "flip", "fade"] as const).map((anim) => (
          <div key={anim} className="text-center space-y-1">
            <p
              className={cn(
                "text-xs font-mono mb-2",
                theme === "dark" ? "text-neutral-500" : "text-neutral-400",
              )}
            >
              {anim}
            </p>
            <WordRotate
              words={["React", "Motion", "Tailwind"]}
              animation={anim}
              interval={1800}
              theme={theme}
              className={cn(
                "text-lg font-semibold",
                theme === "dark" ? "text-neutral-200" : "text-neutral-800",
              )}
            />
          </div>
        ))}
      </div>
    </div>
  ),

  "shooting-stars-grid": ({ theme = "dark" }) => (
    <div
      className={cn(
        "rounded-xl overflow-hidden border h-[400px] w-full relative",
        theme === "dark" ? "border-neutral-800" : "border-neutral-200",
      )}
    >
      <ShootingStarsGrid starCount={18} speed={2.5} gridSize={80}>
        <div className="flex h-full items-center justify-center text-center px-4 pointer-events-none">
          <div className="space-y-2">
            <p className="text-xs uppercase tracking-[0.35em] text-emerald-300/40 font-mono">
              meteor shower
            </p>
            <h3 className="text-3xl font-bold text-white tracking-tight drop-shadow-[0_0_24px_rgba(80,255,180,0.45)]">
              Shooting Stars
            </h3>
            <p className="text-white/40 text-sm max-w-[240px] mx-auto">
              Grid-snapped streaks, emerald vignette.
            </p>
          </div>
        </div>
      </ShootingStarsGrid>
    </div>
  ),

  "dynamic-info": ({ theme = "dark" }) => (
    <div
      className={cn(
        "rounded-xl overflow-hidden h-[300px] w-full relative",
        theme === "dark" ? "bg-neutral-900" : "bg-neutral-200",
      )}
    >
      <div className="absolute top-0 left-1/2 -translate-x-1/2">
        <DynamicInfo
          theme={theme}
          name="James Doe"
          role="Designer"
          avatar="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=160&h=160&fit=crop"
          defaultExpanded
          position="static"
          mergeEdge="top"
          socials={[
            {
              id: "x",
              icon: <Share2 size={14} />,
              label: "X",
              href: "https://x.com",
            },
            {
              id: "in",
              icon: <Link2 size={14} />,
              label: "LinkedIn",
              href: "https://linkedin.com",
            },
            {
              id: "gh",
              icon: <Globe size={14} />,
              label: "GitHub",
              href: "https://github.com",
            },
          ]}
          status={{ label: "Available", color: "#22c55e" }}
        />
      </div>
    </div>
  ),
  "macbook-mock": ({ theme = "dark" }) => (
    <div
      className={cn(
        "flex min-h-[320px] w-full items-center justify-center px-6 py-10",
        theme === "dark" ? "bg-neutral-950" : "bg-neutral-100",
      )}
    >
      <MacbookMock
        size="md"
        tint={theme === "dark" ? "spaceGray" : "silver"}
        screenIdleClassName={
          theme === "dark" ? "bg-[#121212]" : "bg-neutral-200"
        }
      />
    </div>
  ),
  "liquid-glass-panel": ({ theme = "dark" }) => (
    <div
      className={cn(
        "relative flex min-h-[440px] w-full items-center justify-center overflow-hidden rounded-xl border bg-cover bg-center px-6 py-10",
        theme === "dark" ? "border-neutral-800" : "border-neutral-200",
      )}
      style={{
        backgroundImage:
          "url(https://images.unsplash.com/photo-1500964757637-c85e8a162699?auto=format&fit=crop&w=1600&q=80)",
      }}
    >
      <div className="grid w-full max-w-3xl gap-5 md:grid-cols-2">
        <LiquidGlassPanel className="p-7">
          <span className="text-[11px] font-mono uppercase tracking-[0.3em] text-white/70">
            Solar Winter · 2026
          </span>
          <h3 className="mt-3 text-2xl font-semibold text-white">
            Real glass, not a blur.
          </h3>
          <p className="mt-2 text-sm text-white/80">
            Pixels behind this panel are physically refracted via SVG turbulence
            — text on top stays pixel-crisp.
          </p>
        </LiquidGlassPanel>
        <LiquidGlassPanel
          className="p-7"
          tint="rgba(120,90,255,0.18)"
          displacementScale={32}
          noiseFrequency={0.018}
        >
          <h3 className="text-lg font-semibold text-white">Tinted variant</h3>
          <p className="mt-2 text-sm text-white/80">
            Stronger displacement and a violet tint — useful for modal surfaces
            or CTA flourishes.
          </p>
          <button className="mt-4 rounded-full bg-white/15 px-4 py-1.5 text-xs font-medium text-white backdrop-blur-md transition hover:bg-white/25">
            Action
          </button>
        </LiquidGlassPanel>
      </div>
    </div>
  ),
  "shader-mesh-gradient": ({ theme = "dark" }) => (
    <div
      className={cn(
        "relative h-[460px] w-full overflow-hidden rounded-xl border",
        theme === "dark" ? "border-neutral-800" : "border-neutral-200",
      )}
    >
      <ShaderMeshGradient
        className="h-full w-full"
        colors={[
          "oklch(0.78 0.16 30)",
          "oklch(0.72 0.17 295)",
          "oklch(0.70 0.16 220)",
          "oklch(0.82 0.14 150)",
        ]}
        speed={1.1}
        pointerInfluence={0.6}
        grain={0.04}
      >
        <div className="flex h-full w-full items-center justify-center px-6 text-center">
          <div className="max-w-md">
            <span className="text-[11px] font-mono uppercase tracking-[0.32em] text-white/85 [text-shadow:0_1px_8px_rgba(0,0,0,0.45)]">
              Fragment shader · WebGL2
            </span>
            <h3 className="mt-3 text-3xl font-semibold text-white [text-shadow:0_2px_18px_rgba(0,0,0,0.5)]">
              GPU mesh gradient.
            </h3>
            <p className="mt-2 text-sm text-white/90 [text-shadow:0_1px_10px_rgba(0,0,0,0.45)]">
              Move your cursor — the nearest blob leans in.
            </p>
          </div>
        </div>
      </ShaderMeshGradient>
    </div>
  ),
  "chromatic-aberration-reveal": ({ theme = "dark" }) => (
    <div
      className={cn(
        "relative h-[460px] w-full overflow-hidden rounded-xl border",
        theme === "dark"
          ? "border-neutral-800 bg-black"
          : "border-neutral-200 bg-black",
      )}
    >
      <ChromaticAberrationReveal
        className="h-full w-full rounded-none"
        src="https://images.unsplash.com/photo-1500964757637-c85e8a162699?auto=format&fit=crop&w=1600&q=80"
        alt="Mountain lake at dusk"
        splitDistance={16}
        staggerMs={90}
        trigger="mount"
      />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/35 to-transparent p-6">
        <p className="text-xs font-mono uppercase tracking-[0.3em] text-white/75">
          Chromatic converge reveal
        </p>
        <h3 className="mt-2 text-2xl font-semibold text-white">
          RGB split, then perfect convergence.
        </h3>
      </div>
    </div>
  ),
  "iridescent-foil-button": ({ theme = "dark" }) => (
    <div className="relative flex h-[300px] w-full items-center justify-center">
      <IridescentFoilButton
        variant={theme === "dark" ? "vivid" : "default"}
        className="min-w-[240px] px-8 py-3 text-base"
      >
        Start Free Trial
      </IridescentFoilButton>
    </div>
  ),
  "kinetic-variable-headline": ({ theme = "dark" }) => (
    <div className="relative flex min-h-[320px] w-full items-center justify-center overflow-hidden px-8 py-12">
      <KineticVariableHeadline
        text="CRAFTED MOTION"
        mode="both"
        as="h1"
        className={cn(
          "text-center text-[clamp(3.5rem,11vw,7.2rem)] uppercase",
          theme === "dark" ? "text-white" : "text-[#0d1f3d]",
        )}
      />
    </div>
  ),
  "caustic-light-card": ({ theme = "dark" }) => (
    <div
      className={cn(
        "relative h-[460px] w-full overflow-hidden rounded-xl border",
        theme === "dark"
          ? "border-neutral-800 bg-[#050a14]"
          : "border-neutral-200 bg-[#eff4ff]",
      )}
    >
      <CausticLightCard
        className={cn(
          "h-full w-full rounded-none border-0",
          theme === "dark"
            ? "from-[#091327] via-[#0d1d36] to-[#071124]"
            : "from-[#dbe8ff] via-[#f5f8ff] to-[#d6e5ff]",
        )}
        causticColor={theme === "dark" ? "#fff7e0" : "#fff2cf"}
        intensity={0.64}
        speed={0.56}
        coverage={0.56}
      >
        <div className="flex h-full w-full items-center justify-center px-10 py-12 text-center">
          <div className="max-w-lg">
            <span
              className={cn(
                "text-[11px] font-mono uppercase tracking-[0.32em]",
                theme === "dark" ? "text-[#c2d4ff]/85" : "text-[#2f4b76]/70",
              )}
            >
              Caustics · shader canvas overlay
            </span>
            <h2
              className={cn(
                "mt-3 text-4xl font-semibold tracking-tight",
                theme === "dark" ? "text-white" : "text-[#102849]",
              )}
            >
              Pool-light shimmer on glass cards.
            </h2>
            <p
              className={cn(
                "mt-4 text-base leading-relaxed",
                theme === "dark" ? "text-[#d6e4ff]/90" : "text-[#35577f]/85",
              )}
            >
              Hover the card: caustics brighten and flow faster while text stays
              cleanly readable.
            </p>
          </div>
        </div>
      </CausticLightCard>
    </div>
  ),
  "refractive-cursor-lens": ({ theme = "dark" }) => (
    <div
      className={cn(
        "relative h-[460px] w-full overflow-hidden rounded-xl border",
        theme === "dark"
          ? "border-neutral-800 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950"
          : "border-neutral-200 bg-gradient-to-br from-neutral-100 via-white to-neutral-100",
      )}
    >
      <RefractiveCursorLens className="h-full w-full">
        <div className="flex h-full w-full items-center justify-center px-10 py-12">
          <article className="max-w-xl">
            <span
              className={cn(
                "text-[11px] font-mono uppercase tracking-[0.32em]",
                theme === "dark" ? "text-neutral-400" : "text-neutral-500",
              )}
            >
              iOS 26 magnifier · liquid glass
            </span>
            <h2
              className={cn(
                "mt-3 text-4xl font-semibold leading-tight tracking-tight",
                theme === "dark" ? "text-white" : "text-neutral-900",
              )}
            >
              Move your cursor anywhere here.
            </h2>
            <p
              className={cn(
                "mt-4 text-base leading-relaxed",
                theme === "dark" ? "text-neutral-300" : "text-neutral-700",
              )}
            >
              The lens follows you with a slight spring lag and refracts
              whatever sits underneath — type, gradients, images. Clicks pass
              straight through. Hidden on touch and reduced-motion.
            </p>
            <div className="mt-6 flex flex-wrap gap-2">
              {["SVG", "backdrop-filter", "spring", "pointer:fine"].map(
                (tag) => (
                  <span
                    key={tag}
                    className={cn(
                      "rounded-full px-3 py-1 text-xs font-medium",
                      theme === "dark"
                        ? "bg-white/5 text-neutral-300 ring-1 ring-white/10"
                        : "bg-black/5 text-neutral-700 ring-1 ring-black/10",
                    )}
                  >
                    {tag}
                  </span>
                ),
              )}
            </div>
          </article>
        </div>
      </RefractiveCursorLens>
    </div>
  ),
  "ambient-glow-card": () => (
    <div className="mx-auto w-full max-w-xl px-4 sm:px-6">
      <AmbientGlowCard
        className="min-h-[15rem]"
        blobColor={["#f9b8c4", "#f897ad", "#fcd1c1"]}
        animationDuration={24}
      >
        <h3 className="text-xl font-semibold sm:text-2xl">
          Software That Actually Scales
        </h3>
        <p>
          Not code. Not prototypes. Real, live systems running in production
          from day one.
        </p>
      </AmbientGlowCard>
    </div>
  ),
  // Main hero demos — render the same inline JSX shown in each block's
  // `docs.usageCode` (registry/components/<slug>.json) so the Preview and Usage produce byte-
  // identical DOM. The plain-JSX form (no motion.* wrappers) trades the
  // staggered entrance polish for full code transparency — every <span>,
  // <h1>, <p>, and <button> the user sees is the exact one they copy.
  "hero-reference-pulse": () => (
    <ReferencePulseHero
      className="bg-[#08080a] text-white"
      backgroundProps={{
        speed: 7,
        baseColor: "#08080a",
        conicPalette: [
          "hsla(268, 95%, 62%, 0.55)",
          "hsla(328, 95%, 60%, 0.35)",
          "hsla(228, 95%, 60%, 0.55)",
          "hsla(268, 95%, 62%, 0.55)",
        ],
        pulseColor: "hsla(268, 95%, 70%, 0.45)",
      }}
    >
      <span className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.18em] text-white/70 backdrop-blur">
        <span className="h-1.5 w-1.5 rounded-full bg-white/80" aria-hidden />
        Hero block
      </span>
      <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
        Build with light, not boxes.
      </h1>
      <p className="mt-5 max-w-xl text-pretty text-base text-white/65 sm:text-lg">
        A reference hero block. Drop in your own children to override the
        default composition — the background lives on its own as well.
      </p>
      <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
        <button
          type="button"
          className="group relative inline-flex h-11 items-center gap-2 overflow-hidden rounded-full bg-white px-6 text-sm font-medium text-black transition-transform duration-200 hover:-translate-y-px"
        >
          <span>Get started</span>
          <span aria-hidden className="transition-transform duration-200 group-hover:translate-x-0.5">
            →
          </span>
        </button>
        <button
          type="button"
          className="inline-flex h-11 items-center gap-2 rounded-full border border-white/15 px-6 text-sm font-medium text-white/85 backdrop-blur transition-colors hover:bg-white/5"
        >
          Read docs
        </button>
      </div>
    </ReferencePulseHero>
  ),
  "hero-iridescent-sweep": () => (
    <IridescentSweepHero
      className="bg-[#0e0a14] text-white"
      backgroundProps={{
        hue: 0,
        speed: 22,
        grain: 0.35,
        baseColor: "#0e0a14",
        palette: ["#ff9bd1", "#ffd66b", "#9bffd6", "#6bb5ff", "#c89bff", "#ff9bd1"],
      }}
    >
      <span className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs uppercase tracking-[0.22em] text-white/85 backdrop-blur">
        <span
          aria-hidden
          className="h-1.5 w-1.5 rounded-full"
          style={{
            background:
              "conic-gradient(from 0deg, #ff9bd1, #ffd66b, #9bffd6, #6bb5ff, #c89bff, #ff9bd1)",
            boxShadow: "0 0 12px 2px rgba(255,255,255,0.4)",
          }}
        />
        Edition · MMXXVI
      </span>
      <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
        <span
          className="bg-clip-text text-transparent"
          style={{
            backgroundImage:
              "linear-gradient(120deg, #ffffff 0%, #f5e6ff 28%, #ffe9c2 50%, #c8f1ff 72%, #ffffff 100%)",
          }}
        >
          Pressed in light.
        </span>
      </h1>
      <p className="mt-5 max-w-xl text-pretty text-base text-white/75 sm:text-lg">
        Conic foil under a turbulence grain, with a sheen that sweeps across
        the type on a slow cadence. Editorial energy, zero plug-ins.
      </p>
      <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
        <button
          type="button"
          className="group inline-flex h-11 items-center gap-2 rounded-full bg-white px-6 text-sm font-medium text-neutral-900 transition-transform duration-200 hover:-translate-y-px"
        >
          <span>Reserve a copy</span>
          <span aria-hidden className="transition-transform duration-200 group-hover:translate-x-0.5">
            →
          </span>
        </button>
        <button
          type="button"
          className="inline-flex h-11 items-center gap-2 rounded-full border border-white/25 px-6 text-sm font-medium text-white/90 backdrop-blur transition-colors hover:bg-white/10"
        >
          Read the editorial
        </button>
      </div>
    </IridescentSweepHero>
  ),
  "hero-liquid-aurora-mesh": () => (
    <LiquidAuroraMeshHero
      backgroundProps={{
        palette: ["#9b6bff", "#3effd0", "#ff77c4"],
        speed: 14,
      }}
    >
      <span className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.18em] text-white/70 backdrop-blur">
        <span
          aria-hidden
          className="h-1.5 w-1.5 rounded-full bg-emerald-300/90 shadow-[0_0_12px_2px] shadow-emerald-300/40"
        />
        Liquid · Aurora · Mesh
      </span>
      <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
        Light, made fluid.
      </h1>
      <p className="mt-5 max-w-xl text-pretty text-base text-white/65 sm:text-lg">
        A displacement-warped aurora mesh that drifts behind your headline.
        Mouse where you want the light to pool.
      </p>
      <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
        <button
          type="button"
          className="group inline-flex h-11 items-center gap-2 rounded-full bg-white px-6 text-sm font-medium text-black transition-transform duration-200 hover:-translate-y-px"
        >
          <span>Get started</span>
          <span aria-hidden className="transition-transform duration-200 group-hover:translate-x-0.5">
            →
          </span>
        </button>
        <button
          type="button"
          className="inline-flex h-11 items-center gap-2 rounded-full border border-white/15 px-6 text-sm font-medium text-white/85 backdrop-blur transition-colors hover:bg-white/5"
        >
          See it move
        </button>
      </div>
    </LiquidAuroraMeshHero>
  ),
  "hero-noise-dot-field": () => (
    <NoiseDotFieldHero
      backgroundProps={{
        spacing: 28,
        color: "rgba(255,255,255,0.85)",
        pocketRadius: 180,
      }}
    >
      <span className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 font-mono text-[10px] uppercase tracking-[0.2em] text-white/70 backdrop-blur">
        <span
          aria-hidden
          className="h-1.5 w-1.5 rounded-full bg-cyan-300/90 shadow-[0_0_10px_2px] shadow-cyan-300/40"
        />
        Field · 0x004
      </span>
      <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
        Engineered, down to the pixel.
      </h1>
      <p className="mt-5 max-w-xl text-pretty text-base text-white/65 sm:text-lg">
        A canvas-rendered dot grid that displaces with a sine-wave noise field
        and parts around your cursor. No external animation deps.
      </p>
      <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
        <button
          type="button"
          className="group inline-flex h-11 items-center gap-2 rounded-full bg-white px-6 text-sm font-medium text-black transition-transform duration-200 hover:-translate-y-px"
        >
          <span>Read the spec</span>
          <span aria-hidden className="transition-transform duration-200 group-hover:translate-x-0.5">
            →
          </span>
        </button>
        <button
          type="button"
          className="inline-flex h-11 items-center gap-2 rounded-full border border-white/15 px-6 font-mono text-xs uppercase tracking-[0.18em] text-white/85 backdrop-blur transition-colors hover:bg-white/5"
        >
          View source
        </button>
      </div>
    </NoiseDotFieldHero>
  ),
  "hero-logo-marquee": () => (
    <LogoMarqueeHero
      logos={[...LOGO_MARQUEE_DEMO_LOGOS]}
      secondaryLogos={[...LOGO_MARQUEE_DEMO_SECONDARY_LOGOS]}
      speed={32}
    >
      <LogoMarqueeDemoHeadline />
    </LogoMarqueeHero>
  ),
  // `/blocks` index thumbnail — headline only (dual marquee rows skew the crop).
  "hero-logo-marquee-thumbnail": () => (
    <LogoMarqueeHero
      logos={LOGO_MARQUEE_DEMO_LOGOS.slice(0, 8)}
      secondaryLogos={null}
      speed={28}
      className="min-h-[100svh] [&_[data-slot=marquee]]:hidden"
    >
      <LogoMarqueeDemoHeadline />
    </LogoMarqueeHero>
  ),
  "hero-magnetic-letters": () => <MagneticLettersHero />,
  "hero-terminal": () => <TerminalHero />,
  "hero-flow-field": ({ theme = "dark" }) => (
    <FlowFieldHero theme={theme as "light" | "dark"} />
  ),
  "hero-radial-burst": ({ theme = "dark" }) => (
    <RadialBurstHero
      defaultTheme={theme === "light" ? "daytime" : "night"}
      title={
        <>
          The backbone
          <br />
          of global commerce
        </>
      }
    />
  ),
  "animated-tooltip": ({ theme = "dark" }) => {
    const isDark = theme === "dark";
    const triggerClass = cn(
      "rounded-md px-4 py-2 text-sm font-medium transition-colors",
      isDark
        ? "bg-neutral-800 text-neutral-100 hover:bg-neutral-700"
        : "bg-neutral-100 text-neutral-900 hover:bg-neutral-200",
    );

    return (
      <div className="flex flex-col items-center gap-10 p-12">
        {/* Placement on every side */}
        <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
          <AnimatedTooltip content="Appears on top" side="top">
            <button type="button" className={triggerClass}>
              Top
            </button>
          </AnimatedTooltip>
          <AnimatedTooltip content="Appears on the right" side="right">
            <button type="button" className={triggerClass}>
              Right
            </button>
          </AnimatedTooltip>
          <AnimatedTooltip content="Appears at the bottom" side="bottom">
            <button type="button" className={triggerClass}>
              Bottom
            </button>
          </AnimatedTooltip>
          <AnimatedTooltip content="Appears on the left" side="left">
            <button type="button" className={triggerClass}>
              Left
            </button>
          </AnimatedTooltip>
        </div>

        {/* Independent colour control */}
        <div className="flex flex-wrap items-center justify-center gap-6">
          <AnimatedTooltip
            content="Custom themed tooltip"
            background="#7c3aed"
            color="#ffffff"
            arrowColor="#7c3aed"
            side="top"
          >
            <button type="button" className={triggerClass}>
              Violet
            </button>
          </AnimatedTooltip>
          <AnimatedTooltip
            content="Contrasting arrow"
            background="#f59e0b"
            color="#1c1917"
            arrowColor="#ef4444"
            side="bottom"
          >
            <button type="button" className={triggerClass}>
              Mismatched arrow
            </button>
          </AnimatedTooltip>
          <AnimatedTooltip content="No arrow, larger gap" arrow={false} offset={12}>
            <button type="button" className={triggerClass}>
              Arrowless
            </button>
          </AnimatedTooltip>
        </div>

        {/* Rich content + non-button triggers */}
        <div className="flex flex-wrap items-center justify-center gap-8">
          <AnimatedTooltip
            side="top"
            className="max-w-[16rem]"
            background={isDark ? "#0f172a" : "#1e293b"}
            color="#e2e8f0"
            content={
              <div className="space-y-1">
                <p className="font-semibold">Keyboard shortcut</p>
                <p className="text-xs text-slate-400">
                  Press {"⌘"}K to open the command palette from anywhere.
                </p>
              </div>
            }
          >
            <button type="button" className={triggerClass}>
              Rich content
            </button>
          </AnimatedTooltip>

          <AnimatedTooltip content="More information" side="top">
            <button
              type="button"
              aria-label="More information"
              className={cn(
                "grid h-9 w-9 place-items-center rounded-full transition-colors",
                isDark
                  ? "bg-neutral-800 text-neutral-100 hover:bg-neutral-700"
                  : "bg-neutral-100 text-neutral-900 hover:bg-neutral-200",
              )}
            >
              <Info className="h-4 w-4" />
            </button>
          </AnimatedTooltip>

          <AnimatedTooltip content="Opens in a new tab" side="bottom">
            <a
              href="#animated-tooltip"
              className={cn(
                "text-sm font-medium underline underline-offset-4",
                isDark ? "text-violet-400" : "text-violet-600",
              )}
            >
              Link trigger
            </a>
          </AnimatedTooltip>
        </div>
      </div>
    );
  }
,
};