text-blink

1import { cn } from "@/lib/utils";
2 
3type TextBlinkProps = Omit<React.ComponentProps<"span">, "children"> & {
4  children: React.ReactNode;
5  as?: React.ElementType;
6  minOpacity?: number;
7};
8 
9function TextBlink({
10  children,
11  as: Component = "p",
12  className,
13  minOpacity = 0.45,
14  style,
15  ...props
16}: TextBlinkProps) {
17  return (
18    <>
19      <style>{`
20        @keyframes loading-ui-text-blink {
21          0%,
22          100% {
23            opacity: 1;
24          }
25 
26          50% {
27            opacity: var(--loading-ui-text-blink-opacity);
28          }
29        }
30      `}</style>
31      <Component
32        className={cn("inline-block font-medium", className)}
33        style={
34          {
35            ...style,
36            "--loading-ui-text-blink-opacity": minOpacity,
37            animation:
38              "loading-ui-text-blink var(--duration, 2s) ease-in-out infinite",
39          } as React.CSSProperties
40        }
41        {...props}
42      >
43        {children}
44      </Component>
45    </>
46  );
47}
48 
49export { TextBlink };