text-shimmer-wave

1"use client";
2 
3import { type JSX } from "react";
4import { motion, type Transition } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7export type TextShimmerWaveProps = {
8  children: string;
9  as?: React.ElementType;
10  className?: string;
11  duration?: number;
12  baseColor?: string;
13  shimmerColor?: string;
14  zDistance?: number;
15  xDistance?: number;
16  yDistance?: number;
17  spread?: number;
18  scaleDistance?: number;
19  rotateYDistance?: number;
20  transition?: Transition;
21  style?: React.CSSProperties;
22};
23 
24export function TextShimmerWave({
25  children,
26  as: Component = "p",
27  className,
28  duration = 1,
29  baseColor,
30  shimmerColor,
31  zDistance = 10,
32  xDistance = 2,
33  yDistance = -2,
34  spread = 1,
35  scaleDistance = 1.1,
36  rotateYDistance = 10,
37  transition,
38  style,
39}: TextShimmerWaveProps) {
40  const MotionComponent = motion.create(
41    Component as keyof JSX.IntrinsicElements,
42  );
43 
44  return (
45    <MotionComponent
46      className={cn("relative inline-block [perspective:500px]", className)}
47      style={
48        {
49          ...style,
50          "--base-color":
51            baseColor ?? "color-mix(in oklab, currentColor 55%, transparent)",
52          "--base-gradient-color": shimmerColor ?? "currentColor",
53        } as React.CSSProperties
54      }
55    >
56      {children.split("").map((char, i) => {
57        const delay = (i * duration * (1 / spread)) / children.length;
58 
59        return (
60          <motion.span
61            key={i}
62            className={cn(
63              "inline-block whitespace-pre [transform-style:preserve-3d]",
64            )}
65            initial={{
66              translateZ: 0,
67              scale: 1,
68              rotateY: 0,
69              color: "var(--base-color)",
70            }}
71            animate={{
72              translateZ: [0, zDistance, 0],
73              translateX: [0, xDistance, 0],
74              translateY: [0, yDistance, 0],
75              scale: [1, scaleDistance, 1],
76              rotateY: [0, rotateYDistance, 0],
77              color: [
78                "var(--base-color)",
79                "var(--base-gradient-color)",
80                "var(--base-color)",
81              ],
82            }}
83            transition={{
84              duration: duration,
85              repeat: Infinity,
86              repeatDelay: (children.length * 0.05) / spread,
87              delay,
88              ease: "easeInOut",
89              ...transition,
90            }}
91          >
92            {char}
93          </motion.span>
94        );
95      })}
96    </MotionComponent>
97// … truncated