Morphing Text

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8export type TextMorphProps = Omit<
9  React.ComponentPropsWithoutRef<"span">,
10  "children"
11> & {
12  children: string | string[];
13};
14 
15function getText(children: TextMorphProps["children"]) {
16  return Array.isArray(children) ? children.join("") : children;
17}
18 
19function generateKeys(text: string) {
20  const charCount: Record<string, number> = {};
21 
22  return text.split("").map((char) => {
23    charCount[char] ??= 0;
24 
25    const key = `${char}-${charCount[char]}`;
26    charCount[char] += 1;
27 
28    return { char, key };
29  });
30}
31 
32export function TextMorph({ children, className, ...props }: TextMorphProps) {
33  const uid = React.useId();
34  const shouldReduceMotion = useReducedMotion();
35  const text = getText(children);
36  const textToDisplay = React.useMemo(() => generateKeys(text), [text]);
37  const transition = shouldReduceMotion
38    ? { duration: 0 }
39    : ({
40        duration: 0.25,
41        type: "spring",
42        bounce: 0,
43        opacity: {
44          duration: 0.35,
45          type: "spring",
46          bounce: 0,
47        },
48      } as const);
49 
50  return (
51    <span aria-label={text} className={cn("inline-block", className)} {...props}>
52      <AnimatePresence mode="popLayout" initial={false}>
53        {textToDisplay.map(({ char, key }) => (
54          <motion.span
55            key={key}
56            layoutId={shouldReduceMotion ? undefined : `${uid}-${key}`}
57            aria-hidden="true"
58            className="inline-block text-inherit"
59            initial={shouldReduceMotion ? false : { opacity: 0 }}
60            animate={{ opacity: 1 }}
61            exit={shouldReduceMotion ? undefined : { opacity: 0 }}
62            transition={transition}
63          >
64            {char === " " ? "\u00A0" : char}
65          </motion.span>
66        ))}
67      </AnimatePresence>
68    </span>
69  );
70}