Shimmer Sweep Headline

"use client";

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

const sparkles = [
  { top: "12%", left: "14%", size: 18, delay: 0 },
  { top: "22%", left: "82%", size: 14, delay: 1.1 },
  { top: "74%", left: "20%", size: 12, delay: 2.2 },
  { top: "68%", left: "78%", size: 16, delay: 0.6 },
];

export default function TextShimmerHeadline() {
  const reduce = useReducedMotion();

  return (
    <section className="relative flex min-h-[80vh] items-center justify-center overflow-hidden bg-white px-6 py-24 dark:bg-zinc-950">
      <style>{`
        @keyframes tsh-shine { 0% { background-position: 120% center; } 100% { background-position: -20% center; } }
        .tsh-shimmer { background-size: 220% auto; animation: tsh-shine 3.4s linear infinite; }
        .tsh-shimmer:hover { animation-duration: 1.3s; }
        @keyframes tsh-twinkle { 0%,100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
        .tsh-spark { animation: tsh-twinkle 3s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .tsh-shimmer, .tsh-spark { animation: none !important; }
        }
      `}</style>

      <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute left-1/2 top-1/2 h-[30rem] w-[30rem] -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-violet-300/40 via-indigo-300/30 to-transparent blur-3xl dark:from-violet-700/30 dark:via-indigo-800/20" />
        {sparkles.map((s, i) => (
          <svg
            key={i}
            viewBox="0 0 24 24"
            className="tsh-spark absolute fill-violet-400 dark:fill-violet-300"
            style={{ top: s.top, left: s.left, width: s.size, height: s.size, animationDelay: `${s.delay}s` }}
          >
            <path d="M12 0l2.4 8.4L22 12l-7.6 3.6L12 24l-2.4-8.4L2 12l7.6-3.6L12 0z" />
          </svg>
        ))}
      </div>

      <motion.div
        initial={{ opacity: 0, y: 24 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.4 }}
        transition={{ duration: 0.7, ease: "easeOut" }}
        className="mx-auto max-w-3xl text-center"
      >
        <span 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">
          <svg viewBox="0 0 24 24" className="h-4 w-4 fill-amber-400" aria-hidden="true">
            <path d="M12 0l2.4 8.4L22 12l-7.6 3.6L12 24l-2.4-8.4L2 12l7.6-3.6L12 0z" />
          </svg>
          Shimmer headline
        </span>

        <h2 className="mt-8 text-4xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
          <span
            className="tsh-shimmer bg-clip-text text-transparent"
            style={{
              backgroundImage:
                "linear-gradient(110deg,#6366f1 18%,#8b5cf6 38%,#ffffff 50%,#8b5cf6 62%,#6366f1 82%)",
            }}
          >
            Light that glides across the words
          </span>
        </h2>

        <p className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
          A polished sheen sweeps endlessly through the letters. Hover the
          headline to make the shine race a little faster.
        </p>

        <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <a
            href="#"
            className="group relative inline-flex items-center gap-2 rounded-xl bg-zinc-900 px-6 py-3 text-sm font-semibold text-white shadow-lg transition hover:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200 dark:focus-visible:ring-offset-zinc-950"
          >
            Get started
            <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.span
            aria-hidden="true"
            animate={reduce ? undefined : { y: [0, -6, 0] }}
            transition={{ duration: 2.4, ease: "easeInOut", repeat: Infinity }}
            className="text-sm text-zinc-500 dark:text-zinc-500"
          >
            No sign up required
          </motion.span>
        </div>
      </motion.div>
    </section>
  );
}