Texto que se revela

"use client";

/**
 * Texto que se revela palabra por palabra al entrar en pantalla: cada palabra sube desde una máscara, con un leve desenfoque.
 * El texto está visible desde el servidor y solo se oculta cuando el componente ya se montó, así que no se pierde sin JavaScript.
 *
 *   <WordReveal as="h2" text="Software que se adapta a tu operación" />
 */

import { useEffect, useRef, useState, type CSSProperties, type ElementType } from "react";

export type WordRevealProps = {
  text: string;
  /** Etiqueta HTML que se renderiza. */
  as?: ElementType;
  /** Milisegundos entre palabras. */
  stagger?: number;
  /** Si es false, repite la animación cada vez que vuelve a entrar en pantalla. */
  once?: boolean;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcrv-line { display: block; }
.gcrv-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.gcrv-word { display: inline-block; will-change: transform; }
.gcrv-root[data-armed="true"] .gcrv-word { transform: translateY(108%); opacity: 0; filter: blur(6px); }
.gcrv-root[data-armed="true"][data-shown="true"] .gcrv-word { transform: none; opacity: 1; filter: none; transition: transform .9s cubic-bezier(.16, 1, .3, 1) calc(var(--gcrv-i) * var(--gcrv-stagger, 60ms)), opacity .6s ease-out calc(var(--gcrv-i) * var(--gcrv-stagger, 60ms)), filter .7s ease-out calc(var(--gcrv-i) * var(--gcrv-stagger, 60ms)); }
@media (prefers-reduced-motion: reduce) { .gcrv-root[data-armed="true"] .gcrv-word { transform: none; opacity: 1; filter: none; transition: none !important; } }
`;

export function WordReveal({ text, as: Tag = "p", stagger = 60, once = true, className, style }: WordRevealProps) {
  const ref = useRef<HTMLElement>(null);
  const [armed, setArmed] = useState(false);
  const [shown, setShown] = useState(false);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setShown(true);
        if (once) observer.disconnect();
      } else if (!once) setShown(false);
    }, { threshold: 0.35 });
    // Hide only once we can reveal: the first paint and no-JS visitors keep the text.
    const frame = requestAnimationFrame(() => { setArmed(true); observer.observe(element); });
    return () => { cancelAnimationFrame(frame); observer.disconnect(); };
  }, [once]);

  const words = text.split(/\s+/).filter(Boolean);

  return (
    <>
      <style>{CSS}</style>
      <Tag ref={ref} className={["gcrv-root", className].filter(Boolean).join(" ")} style={{ ["--gcrv-stagger" as string]: `${stagger}ms`, ...style } as CSSProperties} data-armed={armed} data-shown={shown}>
        {words.map((word, index) => (
          <span key={`${word}-${index}`}>
            <span className="gcrv-mask"><span className="gcrv-word" style={{ ["--gcrv-i" as string]: index } as CSSProperties}>{word}</span></span>
            {index < words.length - 1 ? " " : null}
          </span>
        ))}
      </Tag>
    </>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/texto-revelado

import { WordReveal } from "./word-reveal";

export default function Ejemplo() {
  return <WordReveal text="Ejemplo" once />;
}