Text Reveal

npm i @usefluid/motion

"use client";

import { springCss, springs } from "@usefluid/motion";
import { useEffect, useState } from "react";
import styles from "./TextReveal.module.css";

const spring = springCss(springs.bouncy);

export function TextReveal({ text, play = true, stagger = 28 }: { text: string; play?: boolean; stagger?: number }) {
  const [shown, setShown] = useState(false);

  useEffect(() => {
    setShown(false);
    if (!play) return;
    let second = 0;
    const first = requestAnimationFrame(() => {
      second = requestAnimationFrame(() => setShown(true));
    });
    return () => {
      cancelAnimationFrame(first);
      cancelAnimationFrame(second);
    };
  }, [play, text]);

  let index = 0;
  return (
    <span
      className={styles.root}
      data-play={shown}
      style={{ "--easing": spring.easing, "--duration": `${spring.duration}ms` } as React.CSSProperties}
    >
      <span className={styles.srOnly}>{text}</span>
      <span aria-hidden>
        {text.split(" ").map((word, w) => (
          <span key={w} className={styles.word}>
            {word.split("").map((char, c) => (
              <span key={c} className={styles.char} style={{ transitionDelay: shown ? `${index++ * stagger}ms` : "0ms" }}>
                {char}
              </span>
            ))}
            {" "}
          </span>
        ))}
      </span>
    </span>
  );
}

.root {
  display: inline-block;
}
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.word {
  display: inline-block;
  white-space: pre;
}
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) scale(0.8);
  transition-property: opacity, transform;
  transition-duration: 180ms, var(--duration);
  transition-timing-function: ease, cubic-bezier(0.34, 1.56, 0.64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  .char {
    transition-timing-function: ease, var(--easing);
  }
}
.root[data-play="true"] .char {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .char {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

import "@usefluid/motion/theme.css";