Text Shimmer

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5export type TextShimmerProps = Omit<
6  React.HTMLAttributes<HTMLElement>,
7  "color"
8> & {
9  as?: React.ElementType;
10  /**
11   * Duration in seconds.
12   * @default 1
13   */
14  duration?: number;
15  /**
16   * Spread around center in percent points.
17   * @default 20
18   */
19  spread?: number;
20  /**
21   * Beam angle in degrees.
22   * @default 0
23   */
24  angle?: number;
25  /**
26   * Override highlight color.
27   */
28  color?: string;
29  /**
30   * Invert shimmer contrast.
31   * @default false
32   */
33  invert?: boolean;
34  /**
35   * Invert shimmer contrast in light theme only.
36   * @default false
37   */
38  invertLight?: boolean;
39  /**
40   * Invert shimmer contrast in dark theme only.
41   * @default false
42   */
43  invertDark?: boolean;
44  /**
45   * Delay before the next shimmer pass in seconds.
46   * @default 0
47   */
48  repeatDelay?: number;
49  /**
50   * Disable shimmer animation and render plain text.
51   * @default false
52   */
53  disableShimmer?: boolean;
54};
55 
56export function TextShimmer({
57  as: Comp = "span",
58  className,
59  style,
60  duration = 1,
61  repeatDelay = 0,
62  spread = 20,
63  angle = 0,
64  color,
65  invert = false,
66  invertLight = false,
67  invertDark = false,
68  disableShimmer = false,
69  children,
70  ...props
71}: TextShimmerProps) {
72  const id = React.useId();
73  const boundedSpread = Math.min(Math.max(spread, 5), 45);
74  const activeDuration = Math.max(duration, 0);
75  const pauseDuration = Math.max(repeatDelay, 0);
76  const totalDuration = Math.max(activeDuration + pauseDuration, 0.001);
77  const movePercent = (activeDuration / totalDuration) * 100;
78  const keyframeName = React.useMemo(
79    () => `nx-text-shimmer-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`,
80    [id],
81  );
82  const start = 50 - boundedSpread;
83  const end = 50 + boundedSpread;
84  const edge = "currentColor";
85  const brightBeam =
86    color ??
87    "oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.35))";
88  const dimBeam =
89    color ??
90    "oklch(from currentColor min(calc(l - 0.4), 0.2) c h / calc(alpha + 0.4))";
91  const lightBeam = invert || invertLight ? dimBeam : brightBeam;
92  const darkBeam = invert || invertDark ? dimBeam : brightBeam;
93  const keyframes = `@keyframes ${keyframeName} {
94    0% { background-position: 100% 50%; }
95    ${movePercent}% { background-position: -60% 50%; }
96    100% { background-position: -100% 50%; }
97  }
98  [data-nx-text-shimmer="${keyframeName}"] {
99    --nx-text-shimmer-beam: var(--nx-text-shimmer-beam-light);
100  }
101// … truncated