supermemory/apps/web/components/text-morph.tsx

'use client';
import { cn } from '@lib/utils';
import { AnimatePresence, motion, type Transition, type Variants } from 'motion/react';
import { useMemo, useId } from 'react';

export type TextMorphProps = {
    children: string;
    as?: React.ElementType;
    className?: string;
    style?: React.CSSProperties;
    variants?: Variants;
    transition?: Transition;
};

export function TextMorph({
    children,
    as: Component = 'p',
    className,
    style,
    variants,
    transition,
}: TextMorphProps) {
    const uniqueId = useId();

    const characters = useMemo(() => {
        const charCounts: Record<string, number> = {};

        return children.split('').map((char) => {
            const lowerChar = char.toLowerCase();
            charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1;

            return {
                id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,
                label: char === ' ' ? '\u00A0' : char,
            };
        });
    }, [children, uniqueId]);

    const defaultVariants: Variants = {
        initial: { opacity: 0 },
        animate: { opacity: 1 },
        exit: { opacity: 0 },
    };

    const defaultTransition: Transition = {
        type: 'spring',
        stiffness: 280,
        damping: 18,
        mass: 0.3,
    };

    return (
        // @ts-expect-error - style is optional
        <Component className={cn(className)} aria-label={children} style={style}>
            <AnimatePresence mode='popLayout' initial={false}>
                {characters.map((character) => (
                    <motion.span
                        key={character.id}
                        layoutId={character.id}
                        className='inline-block'
                        aria-hidden='true'
                        initial='initial'
                        animate='animate'
                        exit='exit'
                        variants={variants || defaultVariants}
                        transition={transition || defaultTransition}
                    >
                        {character.label}
                    </motion.span>
                ))}
            </AnimatePresence>
        </Component>
    );
}