Aurora Gradient Headline

"use client";

import { motion, useReducedMotion, type Variants } from "motion/react";

const heading = "Colours that move with your ideas";

const container: Variants = {
  hidden: {},
  show: {
    transition: { staggerChildren: 0.08, delayChildren: 0.1 },
  },
};

const word: Variants = {
  hidden: { opacity: 0, y: 24, filter: "blur(6px)" },
  show: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.6, ease: "easeOut" },
  },
};

const fade: Variants = {
  hidden: { opacity: 0, y: 16 },
  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } },
};

export default function TextGradientAurora() {
  const reduce = useReducedMotion();
  const flow = reduce ? undefined : "tga-flow 6s linear infinite";

  return (
    <section className="relative isolate flex min-h-[80vh] items-center justify-center overflow-hidden bg-white px-6 py-24 dark:bg-zinc-950">
      <style>{`
        @keyframes tga-flow { to { background-position: 200% center; } }
        @keyframes tga-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-24px) } }
        .tga-orb { animation: tga-float 9s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .tga-anim, .tga-orb { animation: none !important; }
        }
      `}</style>

      <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10">
        <div className="tga-orb absolute left-1/2 top-[-10%] h-[34rem] w-[34rem] -translate-x-1/2 rounded-full bg-gradient-to-br from-indigo-400 via-violet-400 to-transparent opacity-30 blur-3xl dark:from-indigo-500 dark:via-fuchsia-600 dark:opacity-25" />
        <div className="tga-orb absolute -left-24 bottom-[-8%] h-80 w-80 rounded-full bg-gradient-to-tr from-rose-300 to-transparent opacity-40 blur-3xl [animation-delay:-3s] dark:from-rose-500 dark:opacity-20" />
        <div className="tga-orb absolute -right-16 top-1/3 h-80 w-80 rounded-full bg-gradient-to-bl from-amber-300 to-transparent opacity-40 blur-3xl [animation-delay:-6s] dark:from-amber-500 dark:opacity-20" />
      </div>

      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.4 }}
        className="mx-auto max-w-3xl text-center"
      >
        <motion.span
          variants={fade}
          className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/70 px-4 py-1.5 text-sm font-medium text-zinc-600 shadow-sm backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70 dark:text-zinc-300"
        >
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-violet-400 opacity-75" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-violet-500" />
          </span>
          Living gradient headline
        </motion.span>

        <h1 className="mt-8 text-4xl font-semibold tracking-tight sm:text-6xl lg:text-7xl">
          {heading.split(" ").map((w, i) => (
            <motion.span
              key={`${w}-${i}`}
              variants={word}
              className="tga-anim mr-[0.28em] inline-block bg-clip-text text-transparent"
              style={{
                backgroundImage:
                  "linear-gradient(110deg,#6366f1,#a855f7,#ec4899,#f59e0b,#6366f1)",
                backgroundSize: "200% auto",
                animation: flow,
              }}
            >
              {w}
            </motion.span>
          ))}
        </h1>

        <motion.p
          variants={fade}
          className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400"
        >
          A headline that never sits still. The gradient drifts across every
          letter while the words settle into place, one after another.
        </motion.p>

        <motion.div variants={fade} className="mt-10">
          <a
            href="#"
            className="group relative inline-flex items-center gap-2 overflow-hidden rounded-xl px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-violet-500/20 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950"
          >
            <span
              className="tga-anim absolute inset-0 -z-10"
              style={{
                backgroundImage:
                  "linear-gradient(110deg,#6366f1,#a855f7,#ec4899,#f59e0b,#6366f1)",
                backgroundSize: "200% auto",
                animation: flow,
              }}
            />
            Explore the palette
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
              className="h-4 w-4 transition group-hover:translate-x-0.5"
            >
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </a>
        </motion.div>
      </motion.div>
    </section>
  );
}