Split Text Effect

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { motion, useSpring, useTransform } from 'motion/react';
5import * as React from 'react';
6 
7interface CrossProps extends React.HTMLAttributes<HTMLDivElement> {
8  position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
9  color?: string;
10}
11 
12const Cross = React.forwardRef<HTMLDivElement, CrossProps>(
13  ({ position, className, color, ...props }, ref) => {
14    const positionClasses = {
15      'top-left': '-top-px -left-px rotate-0',
16      'top-right': '-top-px -right-px rotate-90',
17      'bottom-left': 'bottom-[-2px] -left-px -rotate-90',
18      'bottom-right': 'bottom-[-2px] -right-px -rotate-180',
19    };
20 
21    return (
22      <div
23        ref={ref}
24        aria-hidden="true"
25        className={cn(
26          'absolute h-[15px] w-[15px] cursor-pointer',
27          positionClasses[position],
28          className
29        )}
30        data-position={position}
31        {...props}
32      >
33        <div
34          className="absolute top-0 left-0 h-px w-[15px]"
35          style={{ backgroundColor: color }}
36        />
37        <div
38          className="absolute bottom-0 left-0 h-[15px] w-px"
39          style={{ backgroundColor: color }}
40        />
41      </div>
42    );
43  }
44);
45Cross.displayName = 'Cross';
46 
47interface SplitTextEffectProps extends React.HTMLAttributes<HTMLDivElement> {
48  text: string | React.ReactNode;
49  fill?: number;
50  accent?: string;
51}
52 
53const SplitTextEffect = React.forwardRef<HTMLDivElement, SplitTextEffectProps>(
54  ({ text, fill = 0.5, accent = '#006efe', className, ...props }, ref) => {
55    const containerRef = React.useRef<HTMLDivElement>(null);
56    const lineRef = React.useRef<HTMLDivElement>(null);
57    const [hasMounted, setHasMounted] = React.useState(false);
58 
59    React.useEffect(() => {
60      setHasMounted(true);
61    }, []);
62 
63    const smoothY = useSpring(0, {
64      stiffness: 100,
65      damping: 20,
66    });
67 
68    React.useEffect(() => {
69      if (!hasMounted || !containerRef.current) return;
70 
71      const container = containerRef.current;
72      const height = container.offsetHeight;
73      const initialY = Math.min(
74        Math.max(height * (1 - fill), height * 0.1),
75        height * 0.9
76      );
77 
78      smoothY.set(initialY);
79    }, [hasMounted, fill]);
80 
81    const handleMouseMove = (e: React.MouseEvent) => {
82      if (!containerRef.current) return;
83      const rect = containerRef.current.getBoundingClientRect();
84      const height = rect.height;
85 
86// … truncated