Character Reveal Heading

"use client";

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

const heading = "Every letter earns its place";
const sub = "A cinematic character reveal that blurs in one glyph at a time.";

const charBox: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.028 } },
};

const char: Variants = {
  hidden: { opacity: 0, y: "0.5em", filter: "blur(8px)" },
  show: {
    opacity: 1,
    y: "0em",
    filter: "blur(0px)",
    transition: { duration: 0.5, ease: "easeOut" },
  },
};

const wordBox: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.06, delayChildren: 0.5 } },
};

const wordItem: Variants = {
  hidden: { opacity: 0, y: 10 },
  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
};

export default function TextCharacterReveal() {
  const words = heading.split(" ");

  return (
    <section className="relative flex min-h-[80vh] items-center justify-center overflow-hidden bg-zinc-50 px-6 py-24 dark:bg-zinc-950">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,rgba(99,102,241,0.10),transparent_60%)]"
      />

      <div className="mx-auto max-w-3xl text-center">
        <motion.p
          initial={{ opacity: 0, y: 8 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          className="text-sm font-semibold uppercase tracking-[0.3em] text-indigo-500 dark:text-indigo-400"
        >
          Character reveal
        </motion.p>

        <motion.h2
          variants={charBox}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.5 }}
          aria-label={heading}
          className="mt-6 text-4xl font-bold tracking-tight text-zinc-900 sm:text-6xl lg:text-7xl dark:text-white"
        >
          {words.map((w, wi) => (
            <span
              key={`${w}-${wi}`}
              aria-hidden="true"
              className="mr-[0.25em] inline-block whitespace-nowrap"
            >
              {w.split("").map((c, ci) => (
                <motion.span
                  key={`${c}-${ci}`}
                  variants={char}
                  className="inline-block"
                >
                  {c}
                </motion.span>
              ))}
            </span>
          ))}
        </motion.h2>

        <motion.p
          variants={wordBox}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.5 }}
          aria-label={sub}
          className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400"
        >
          {sub.split(" ").map((w, i) => (
            <motion.span
              key={`${w}-${i}`}
              variants={wordItem}
              aria-hidden="true"
              className="mr-[0.25em] inline-block"
            >
              {w}
            </motion.span>
          ))}
        </motion.p>

        <motion.div
          initial={{ scaleX: 0 }}
          whileInView={{ scaleX: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.9, ease: "easeInOut", delay: 0.4 }}
          className="mx-auto mt-10 h-px w-40 origin-center bg-gradient-to-r from-transparent via-indigo-500 to-transparent"
        />
      </div>
    </section>
  );
}