// Adapted from nice-components/staggering-text — DD text reveal animation
// Integration: Landing hero heading, workspace greeting
// Adapted for dark text on light bg + our motion system

import { useState, useRef, useEffect } from "react";
import { AnimatePresence, motion, useInView } from "framer-motion";
import { cn } from "@/lib/utils";

interface StaggeringTextProps {
  children: string;
  className?: string;
  /** External hover control */
  hover?: boolean;
  /** Auto-loop when in view */
  autoLoop?: boolean;
  loopInterval?: number;
}

export function StaggeringText({
  children,
  className,
  hover: controlledHover,
  autoLoop = true,
  loopInterval = 2000,
}: StaggeringTextProps) {
  const ref = useRef<HTMLDivElement>(null);
  const isInView = useInView(ref);
  const [internalHover, setInternalHover] = useState(false);

  useEffect(() => {
    if (!autoLoop || !isInView || controlledHover !== undefined) return;
    const interval = setInterval(() => {
      setInternalHover((h) => !h);
    }, loopInterval);
    return () => clearInterval(interval);
  }, [autoLoop, isInView, loopInterval, controlledHover]);

  const hover = controlledHover !== undefined ? controlledHover : internalHover;
  const chunks = children.split("");

  const transition = {
    type: "spring" as const,
    stiffness: 250,
    damping: 30,
  };

  return (
    <div
      ref={ref}
      className={cn("w-fit", className)}
      style={{ display: "grid" }}
      aria-label={children}
    >
      <div className="col-start-1 row-start-1" aria-hidden>
        <AnimatePresence initial={false}>
          {chunks.map((letter, index) => {
            const delay = hover
              ? index * 0.05
              : (chunks.length - 1 - index) * 0.06;
            return (
              <motion.span
                key={index}
                className="inline-block"
                animate={{
                  rotateX: hover ? 80 : 0,
                  y: hover ? -16 : 0,
                  filter: hover ? "blur(4px)" : "blur(0px)",
                  opacity: hover ? 0 : 1,
                }}
                style={letter === " " ? { display: "inline" } : undefined}
                transition={{ delay, ...transition }}
              >
                {letter}
              </motion.span>
            );
          })}
        </AnimatePresence>
      </div>
      <div className="col-start-1 row-start-1" aria-hidden>
        <AnimatePresence initial={false}>
          {chunks.map((letter, index) => {
            const delay = hover
              ? 0.1 + index * 0.05
              : (chunks.length - 1 - index) * 0.05;
            return (
              <motion.span
                key={index}
                className="inline-block"
                animate={{
                  rotateX: hover ? 360 : 270,
                  y: hover ? 0 : 16,
                  filter: hover ? "blur(0px)" : "blur(4px)",
                  opacity: hover ? 1 : 0,
                }}
                style={letter === " " ? { display: "inline" } : undefined}
                transition={{ ...transition, delay }}
              >
                {letter}
              </motion.span>
            );
          })}
        </AnimatePresence>
      </div>
    </div>
  );
}
Prop	Type	Default	Description
children*	`string`	—	Text to animate
hover	`boolean`	`false`	Trigger on hover
autoLoop	`boolean`	`false`	Auto-loop animation
loopInterval	`number`	`3000`	Loop interval in ms
className	`string`	—	Additional CSS classes
StaggeringText

Preview

API Reference
