Get Components with Subtle Animations for React.js 

1npx shadcn@latest add http://localhost:3000/r/text-shimmer.json

1'use client';
2
3import { cn } from '@/lib/utils';
4import { motion } from 'motion/react';
5import { useMemo } from 'react';
6
7interface TextShimmerProps {
8  duration?: number;
9  children: string;
10  className?: string;
11  spread?: number;
12  baseColor?: string;
13  shimmerColor?: string;
14}
15
16const TextShimmer = ({
17  duration = 3,
18  children,
19  className,
20  spread = 2,
21  baseColor = '#FFF',
22  shimmerColor = '#000',
23}: TextShimmerProps) => {
24  const dynamicSpread = useMemo(() => {
25    return children.length * spread;
26  }, [children, spread]);
27
28  return (
29    <motion.p
30      initial={{ backgroundPosition: '100% center' }}
31      animate={{ backgroundPosition: '0% center' }}
32      transition={{
33        repeat: Infinity,
34        duration,
35        ease: 'linear',
36      }}
37      style={
38        {
39          '--spread': `${dynamicSpread}px`,
40          '--base-color': baseColor,
41          '--base-gradient-color': shimmerColor,
42          backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
43        } as React.CSSProperties
44      }
45      className={cn(
46        'relative inline-block bg-[length:250%_100%,auto] bg-clip-text',
47        'text-transparent',
48        '[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]',
49        className
50      )}
51    >
52      {children}
53    </motion.p>
54  );
55};
56
57export default TextShimmer;