Fancy Text

1'use client';
2 
3import React, { useLayoutEffect, useRef, useState } from 'react';
4import { motion } from 'motion/react';
5import { cn } from '@/lib/utils';
6 
7interface FancyTextProps {
8  children: string;
9  className?: string;
10  fillClassName?: string;
11  stagger?: number;
12  duration?: number;
13  delay?: number;
14}
15 
16const FancyText = React.forwardRef<HTMLSpanElement, FancyTextProps>(
17  (
18    {
19      children,
20      className = 'text-5xl font-black leading-none text-black/10 dark:text-white/10',
21      fillClassName = 'text-black dark:text-white',
22      stagger = 0.08,
23      duration = 1.4,
24      delay = 0,
25    },
26    ref,
27  ) => {
28    const spanRef = useRef<HTMLSpanElement>(null);
29    const finalRef = (ref ?? spanRef) as React.RefObject<HTMLSpanElement>;
30 
31    const chars = children.split('');
32    const [hideBase, setHideBase] = useState(false);
33    const [isSmall, setIsSmall] = useState(false);
34 
35    useLayoutEffect(() => {
36      if (!finalRef.current) return;
37      const size = parseFloat(getComputedStyle(finalRef.current).fontSize);
38      setIsSmall(size < 28);
39    }, [finalRef]);
40 
41    return (
42      <span ref={finalRef} className='relative inline-block'>
43        <span
44          className={cn(className)}
45          style={{ opacity: hideBase && isSmall ? 0 : 1 }}
46        >
47          {children}
48        </span>
49 
50        <span className='absolute inset-0 flex overflow-hidden'>
51          {chars.map((char, i) => (
52            <motion.span
53              key={i}
54              className={cn(className, fillClassName)}
55              initial={{ clipPath: 'inset(100% 0% 0% 0%)' }}
56              animate={{ clipPath: 'inset(0% 0% 0% 0%)' }}
57              transition={{
58                duration,
59                delay: delay + i * stagger,
60                ease: [0.25, 0.1, 0.25, 1],
61              }}
62              onAnimationComplete={() => {
63                if (i === chars.length - 1 && isSmall) setHideBase(true);
64              }}
65              style={{
66                display: 'inline-block',
67                whiteSpace: char === ' ' ? 'pre' : 'normal',
68              }}
69            >
70              {char === ' ' ? '\u00A0' : char}
71            </motion.span>
72          ))}
73        </span>
74      </span>
75    );
76  },
77);
78 
79FancyText.displayName = 'FancyText';
80export { FancyText };