Animated Gradient Border Cards

"use client";

import { motion } from "motion/react";

const EASE = [0.16, 1, 0.3, 1] as const;

type BorderItem = {
  title: string;
  copy: string;
  badge: string;
  icon: "spark" | "layers" | "globe";
};

const ITEMS: BorderItem[] = [
  {
    title: "Adaptive theming",
    copy: "Ship a light and dark experience from one set of tokens, no duplicated styles to keep in sync.",
    badge: "New",
    icon: "spark",
  },
  {
    title: "Composable blocks",
    copy: "Snap sections together like bricks and rearrange a whole page in an afternoon.",
    badge: "Popular",
    icon: "layers",
  },
  {
    title: "Global by default",
    copy: "Localise copy, dates and currency without forking your components for each market.",
    badge: "Pro",
    icon: "globe",
  },
];

const PATHS: Record<BorderItem["icon"], string> = {
  spark: "M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2 2M16 16l2 2M18 6l-2 2M8 16l-2 2",
  layers: "M12 3 3 8l9 5 9-5-9-5zM3 13l9 5 9-5M3 18l9 5 9-5",
  globe: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c2.5 2.5 3.5 6 3.5 9s-1 6.5-3.5 9c-2.5-2.5-3.5-6-3.5-9s1-6.5 3.5-9z",
};

const TAGS = [
  "Accessible",
  "Responsive",
  "Dark mode",
  "Zero config",
  "Tree shakeable",
  "Type safe",
  "SSR ready",
  "Themeable",
];

function BorderCard({ item, index }: { item: BorderItem; index: number }) {
  return (
    <motion.article
      initial={{ opacity: 0, y: 40 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-60px" }}
      transition={{ duration: 0.6, delay: index * 0.12, ease: EASE }}
      whileHover={{ y: -6 }}
      className="group relative overflow-hidden rounded-2xl p-px"
    >
      {/* rotating gradient border */}
      <div
        aria-hidden="true"
        className="cgb-rotor pointer-events-none absolute left-1/2 top-1/2 aspect-square w-[170%]"
        style={{
          backgroundImage:
            "conic-gradient(from 0deg, transparent 0deg, #6366f1 40deg, #a855f7 90deg, #ec4899 140deg, transparent 200deg, transparent 360deg)",
        }}
      />
      {/* static faint ring so the frame never fully disappears */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-200 dark:ring-zinc-800"
      />

      <div className="relative overflow-hidden rounded-[15px] bg-white p-7 dark:bg-zinc-900">
        {/* shimmer sweep on hover */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-indigo-500/10 to-transparent transition-transform duration-700 ease-out group-hover:translate-x-full dark:via-white/10"
        />

        <div className="relative flex items-start justify-between">
          <span className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-fuchsia-500 text-white shadow-lg shadow-fuchsia-500/20">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={1.7}
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-6 w-6"
              aria-hidden="true"
            >
              <path d={PATHS[item.icon]} />
            </svg>
          </span>
          <span className="rounded-full border border-zinc-200 bg-zinc-50 px-2.5 py-1 text-xs font-semibold text-zinc-600 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
            {item.badge}
          </span>
        </div>

        <h3 className="relative mt-5 text-lg font-bold text-zinc-900 dark:text-white">
          {item.title}
        </h3>
        <p className="relative mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
          {item.copy}
        </p>
      </div>
    </motion.article>
  );
}

export default function CardGradientBorder() {
  return (
    <section className="bg-white px-6 py-20 dark:bg-zinc-950 md:py-28">
      <style>{`
        @keyframes cgb-spin {
          from { transform: translate(-50%, -50%) rotate(0deg); }
          to   { transform: translate(-50%, -50%) rotate(360deg); }
        }
        .cgb-rotor {
          transform: translate(-50%, -50%);
          animation: cgb-spin 6s linear infinite;
        }
        @keyframes cgb-marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .cgb-marquee-track {
          animation: cgb-marquee 22s linear infinite;
        }
        .group:hover .cgb-rotor { animation-duration: 2.4s; }
        @media (prefers-reduced-motion: reduce) {
          .cgb-rotor { animation: none; }
          .cgb-marquee-track { animation: none; }
        }
      `}</style>

      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, ease: EASE }}
            className="text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white"
          >
            Borders that keep on moving
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.1, ease: EASE }}
            className="mx-auto mt-4 max-w-lg text-zinc-600 dark:text-zinc-400"
          >
            A live gradient sweeps around each frame and speeds up on hover,
            with a light shimmer passing across the surface.
          </motion.p>
        </div>

        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {ITEMS.map((item, i) => (
            <BorderCard key={item.title} item={item} index={i} />
          ))}
        </div>

        {/* marquee strip */}
        <div
          className="relative mt-12 overflow-hidden [mask-image:linear-gradient(90deg,transparent,black_12%,black_88%,transparent)]"
          aria-hidden="true"
        >
          <div className="cgb-marquee-track flex w-max gap-3">
            {[...TAGS, ...TAGS].map((tag, i) => (
              <span
                key={`${tag}-${i}`}
                className="whitespace-nowrap rounded-full border border-zinc-200 bg-zinc-50 px-4 py-2 text-sm font-medium text-zinc-600 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}