Text Highlight Sweep

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width kinetic text section: a sentence where one phrase gets a
 * marker-style highlight that sweeps in behind it, like it was underlined
 * by hand the moment it scrolled into view.
 */

export interface TextHighlightSweepProps {
  eyebrow?: string;
  /** Text before the highlighted phrase. */
  lead?: string;
  /** The phrase that gets the marker sweep. */
  highlight?: string;
  /** Text after the highlighted phrase. */
  tail?: string;
  subcopy?: string;
  accent?: "signal" | "lime" | "info" | "ok";
  sweepDuration?: number;
  className?: string;
}

const SWEEP_BG: Record<string, string> = {
  signal: "bg-signal/55",
  lime: "bg-lime/60",
  info: "bg-info/45",
  ok: "bg-ok/45",
};

export function TextHighlightSweep({
  eyebrow = "Marked by hand",
  lead = "Most of this sentence is just here to set up",
  highlight = "the one part that actually matters",
  tail = ", which is the whole point.",
  subcopy = "The highlight resets and sweeps in again every time the section re-enters view.",
  accent = "signal",
  sweepDuration = 0.7,
  className,
}: TextHighlightSweepProps) {
  const reduce = useReducedMotionSafe();

  return (
    <section className={cn("relative w-full overflow-hidden bg-background px-4 py-24 sm:px-6 lg:px-10", className)}>
      <div className="relative mx-auto max-w-3xl text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.22em] text-muted-foreground">{eyebrow}</p>
        <h2 className="mt-5 font-display text-[clamp(1.9rem,5vw,3.5rem)] font-bold leading-[1.25] tracking-[-0.02em]">
          {lead}{" "}
          <span className="relative isolate inline-block whitespace-normal">
            <motion.span
              aria-hidden
              className={cn("absolute inset-x-[-0.08em] inset-y-[0.08em] -z-10 origin-left rounded-[0.2em]", SWEEP_BG[accent])}
              initial={reduce ? { scaleX: 1 } : { scaleX: 0 }}
              whileInView={{ scaleX: 1 }}
              viewport={{ once: false, amount: 0.6 }}
              transition={{ duration: sweepDuration, ease: [0.65, 0, 0.35, 1] }}
            />
            <span className="relative">{highlight}</span>
          </span>
          {tail}
        </h2>
        <p className="mx-auto mt-6 max-w-xl text-base leading-relaxed text-muted-foreground">{subcopy}</p>
      </div>
    </section>
  );
}

export default TextHighlightSweep;