Split Reveal

"use client";

import { useRef } from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

/** Текст, где каждое слово выезжает из-под маски со стаггером (GSAP). data-shot/reduced → финальное состояние. */
export function SplitReveal({ text = "Премиум-анимации, готовые к копированию" }: { text?: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useGSAP(
    () => {
      const el = ref.current;
      if (!el) return;
      const words = el.querySelectorAll(".sr-word");
      if (
        document.documentElement.hasAttribute("data-shot") ||
        window.matchMedia("(prefers-reduced-motion: reduce)").matches
      ) {
        gsap.set(words, { yPercent: 0, opacity: 1 });
        return;
      }
      gsap.from(words, { yPercent: 115, opacity: 0, duration: 0.8, ease: "power3.out", stagger: 0.08 });
    },
    { scope: ref },
  );

  return (
    <div
      ref={ref}
      style={{ fontSize: "2rem", fontWeight: 700, lineHeight: 1.15, textAlign: "center", maxWidth: 460, color: "oklch(0.94 0.01 265)" }}
    >
      {text.split(" ").map((w, i) => (
        <span key={i} style={{ display: "inline-block", overflow: "hidden", verticalAlign: "bottom" }}>
          <span className="sr-word" style={{ display: "inline-block" }}>
            {w}&nbsp;
          </span>
        </span>
      ))}
    </div>
  );
}

import gsap from "gsap";

/**
 * Split Reveal — vanilla JS/GSAP (без React). Слова элемента выезжают из-под масок
 * со стаггером при появлении во вьюпорте (split делается автоматически).
 *
 *   <h2 id="title">Премиум-анимации, готовые к копированию</h2>
 *   <script type="module">
 *     import { initSplitReveal } from './split-reveal-text.vanilla.js';
 *     const destroy = initSplitReveal(document.querySelector('#title'));
 *   </script>
 *
 * @param {HTMLElement} el — текстовый элемент (контент пересобирается в span-маски)
 * @param {{ stagger?: number, once?: boolean }} [options]
 * @returns {() => void} destroy (возвращает исходный текст)
 */
export function initSplitReveal(el, { stagger = 0.08, once = true } = {}) {
  const original = el.textContent ?? "";
  const frozen =
    document.documentElement.hasAttribute("data-shot") ||
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (frozen) return () => {};

  el.textContent = "";
  const words = original.split(/\s+/).map((w) => {
    const mask = document.createElement("span");
    mask.style.cssText = "display:inline-block;overflow:hidden;vertical-align:bottom;";
    const word = document.createElement("span");
    word.style.display = "inline-block";
    word.textContent = `${w} `;
    mask.appendChild(word);
    el.appendChild(mask);
    return word;
  });

  let tween = null;
  const io = new IntersectionObserver(
    ([e]) => {
      if (!e?.isIntersecting) return;
      if (once) io.disconnect();
      tween = gsap.from(words, { yPercent: 115, opacity: 0, duration: 0.8, ease: "power3.out", stagger });
    },
    { threshold: 0.4 },
  );
  io.observe(el);

  return () => {
    io.disconnect();
    tween?.kill();
    el.textContent = original;
  };
}