Kinetic Text

npm install motion

"use client";

import { useRef, type ElementType } from "react";
import { motion, useReducedMotion, useScroll, useTransform, type MotionValue } from "motion/react";

type KineticTextProps = {
  /** The text. In "lines" mode, separate lines with \n. */
  text: string;
  /**
   * letters: each letter rises in turn · lines: each line slides up from behind a mask ·
   * blur: words sharpen into focus · scroll: letters light up as you scroll past.
   */
  mode?: "letters" | "lines" | "blur" | "scroll";
  /** Seconds between each letter, word or line. */
  stagger?: number;
  /** Seconds each piece takes to arrive. */
  duration?: number;
  /** Element to render, e.g. "h1". */
  as?: ElementType;
  className?: string;
};

const ease = [0.22, 1, 0.36, 1] as const;

export function KineticText({
  text,
  mode = "letters",
  stagger = 0.03,
  duration = 0.6,
  as: Tag = "p",
  className = "",
}: KineticTextProps) {
  const reduceMotion = useReducedMotion();
  const flat = text.replace(/\n/g, " ");

  if (reduceMotion) return <Tag className={className}>{flat}</Tag>;

  return (
    <Tag className={className}>
      {/* screen readers read the sentence once, not letter by letter */}
      <span className="sr-only">{flat}</span>
      <span aria-hidden>
        {mode === "letters" && <Letters text={flat} stagger={stagger} duration={duration} />}
        {mode === "lines" && <Lines text={text} stagger={stagger} duration={duration} />}
        {mode === "blur" && <Blur text={flat} stagger={stagger} duration={duration} />}
        {mode === "scroll" && <ScrollReveal text={flat} />}
      </span>
    </Tag>
  );
}

type PartProps = { text: string; stagger: number; duration: number };

function Letters({ text, stagger, duration }: PartProps) {
  let count = 0;
  // words stay unbroken so lines only wrap between them
  return text.split(" ").map((word, w) => (
    <span key={w} className="inline-block whitespace-nowrap">
      {Array.from(word).map((char, c) => (
        <motion.span
          key={c}
          className="inline-block"
          initial={{ opacity: 0, y: "0.5em", rotate: 8 }}
          whileInView={{ opacity: 1, y: 0, rotate: 0 }}
          viewport={{ once: true }}
          transition={{ duration, delay: count++ * stagger, ease }}
        >
          {char}
        </motion.span>
      ))}
      {" "}
    </span>
  ));
}

function Lines({ text, stagger, duration }: PartProps) {
  return text.split("\n").map((line, index) => (
    // the clip hides each line until it slides up into place
    <span key={index} className="block overflow-hidden pb-[0.08em]">
      <motion.span
        className="block"
        initial={{ y: "110%" }}
        whileInView={{ y: 0 }}
        viewport={{ once: true }}
        transition={{ duration, delay: index * stagger * 4, ease }}
      >
        {line}
      </motion.span>
    </span>
  ));
}

function Blur({ text, stagger, duration }: PartProps) {
  return text.split(" ").map((word, index) => (
    <motion.span
      key={index}
      className="inline-block"
      initial={{ opacity: 0, filter: "blur(12px)", scale: 1.06 }}
      whileInView={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
      viewport={{ once: true }}
      transition={{ duration: duration * 1.4, delay: index * stagger * 3, ease }}
    >
      {word}
      {" "}
    </motion.span>
  ));
}

function ScrollReveal({ text }: { text: string }) {
  const ref = useRef<HTMLSpanElement>(null);
  // 0 as the text enters the lower part of the screen, 1 once it reaches the upper third
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start 0.9", "start 0.35"] });
  const chars = Array.from(text);
  return (
    <span ref={ref}>
      {chars.map((char, index) => (
        <ScrollChar key={index} char={char} progress={scrollYProgress} range={[index / chars.length, (index + 1) / chars.length]} />
      ))}
    </span>
  );
}

function ScrollChar({ char, progress, range }: { char: string; progress: MotionValue<number>; range: [number, number] }) {
  const opacity = useTransform(progress, range, [0.15, 1]);
  return <motion.span style={{ opacity }}>{char}</motion.span>;
}