Scroll Based Character Reveal

1"use client";
2 
3import { useRef } from "react";
4 
5import { MotionValue, motion, useScroll, useTransform } from "motion/react";
6 
7interface ScrollBasedCharacterRevealProps {
8  text: string;
9}
10 
11interface WordProps {
12  children: string;
13  scrollYProgress: MotionValue<number>;
14  range: [number, number];
15}
16 
17interface CharacterProps {
18  children: string;
19  scrollYProgress: MotionValue<number>;
20  range: [number, number];
21}
22 
23export const ScrollBasedCharacterReveal = ({
24  text,
25}: ScrollBasedCharacterRevealProps) => {
26  const container = useRef(null);
27  const { scrollYProgress } = useScroll({
28    target: container,
29    offset: ["start 0.8", "start 0.3"],
30  });
31 
32  const words = text.split(" ");
33 
34  return (
35    <div className="flex flex-col items-center justify-center">
36      <p
37        ref={container}
38        className="flex max-w-5xl flex-wrap text-center text-5xl font-bold"
39      >
40        {words.map((word, i) => {
41          const start = i / words.length;
42          const end = (start + i) / words.length;
43 
44          return (
45            <Word
46              key={i}
47              range={[start, end]}
48              scrollYProgress={scrollYProgress}
49            >
50              {word}
51            </Word>
52          );
53        })}
54      </p>
55    </div>
56  );
57};
58 
59const Word = ({ children, scrollYProgress, range }: WordProps) => {
60  const characters = children.split("");
61  const amount = range[1] - range[0];
62  const step = amount / children.length;
63 
64  return (
65    <span className="relative mt-1 mr-2">
66      {characters.map((character, i) => {
67        const start = range[0] + step * i;
68        const end = range[0] + step * (i + 1);
69        return (
70          <Character
71            key={i}
72            range={[start, end]}
73            scrollYProgress={scrollYProgress}
74          >
75            {character}
76          </Character>
77        );
78      })}
79    </span>
80  );
81};
82 
83const Character = ({ children, scrollYProgress, range }: CharacterProps) => {
84  const opacity = useTransform(scrollYProgress, range, [0, 1]);
85  return (
86    <span className="relative">
87      <span className="absolute opacity-10">{children}</span>
88      <motion.span style={{ opacity }}>{children}</motion.span>
89    </span>
90  );
91};