text-shimmer

1import React from "react";
2import { cn } from "./utils/cn";
3 
4export type TextShimmerProps = {
5  children: React.ReactNode;
6  as?: React.ElementType;
7  className?: string;
8  duration?: number;
9  spread?: number;
10  delay?: number;
11};
12 
13function TextShimmerComponent({
14  children,
15  as: Component = "p",
16  className,
17  duration = 2,
18  spread = 100,
19  delay = 0,
20}: TextShimmerProps) {
21  const style = {
22    "--an-shimmer-duration": `${duration}s`,
23    "--an-shimmer-spread": `${spread}px`,
24    animationDelay: delay > 0 ? `${delay}s` : undefined,
25    animationDuration: `${duration}s`,
26    animationIterationCount: "infinite",
27    animationTimingFunction: "linear",
28  } as React.CSSProperties;
29 
30  return (
31    <Component
32      className={cn("an-text-shimmer", "an-text-shimmer--active", className)}
33      style={style}
34    >
35      {children}
36    </Component>
37  );
38}
39 
40export const TextShimmer = React.memo(TextShimmerComponent);