Domino Letters

"use client";

import { cn } from "@/lib/utils";
import { stagger, useAnimate } from "motion/react";
import { useEffect } from "react";
import { EASE_OUT, TEXT, glyph, type EffectProps } from "../_text-effects/shared";

// 20 — Letters tip over one after another, each pivoting on its bottom-right
// corner onto the next, then stand back up from the far end.
export function DominoLetters({
  play,
  text = "Domino effect",
  angle = 72,
  fallDuration = 0.18,
  fallStagger = 0.05,
  riseDuration = 0.3,
  riseStagger = 0.04,
}: EffectProps & {
  text?: string;
  /** Degrees each letter tips over. */
  angle?: number;
  /** Seconds for one letter to fall. */
  fallDuration?: number;
  /** Seconds between falling letters. */
  fallStagger?: number;
  /** Seconds for one letter to stand back up. */
  riseDuration?: number;
  /** Seconds between rising letters. */
  riseStagger?: number;
}) {
  const [scope, run] = useAnimate<HTMLParagraphElement>();

  useEffect(() => {
    if (!play || !scope.current) return;
    const letters = Array.from(scope.current.querySelectorAll("span"));
    const controls = run([
      [letters, { rotate: angle }, { duration: fallDuration, delay: stagger(fallStagger), ease: "easeIn" }],
      [letters, { rotate: 0 }, { duration: riseDuration, delay: stagger(riseStagger, { from: "last" }), ease: EASE_OUT, at: "+0.15" }],
    ]);
    return () => controls.stop();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [play, run, scope]);

  return (
    <p ref={scope} aria-label={text} className={cn(TEXT, "flex")}>
      {Array.from(text).map((ch, i) => (
        <span key={i} aria-hidden className="inline-block origin-bottom-right">
          {glyph(ch)}
        </span>
      ))}
    </p>
  );
}