Shimmer Text

npx @galactrex/ui add shimmer-text

import { ShimmerText } from "@/components/galactrex/shimmer-text";

<ShimmerText>Generating your brief…</ShimmerText>

"use client";
import type { ElementType, ReactNode } from "react";
import { cx } from "@/components/galactrex/motion/cx";
import { useReducedMotion } from "@/components/galactrex/motion/use-reduced-motion";

export type ShimmerTextProps = {
  children: ReactNode;
  as?: ElementType;
  /** seconds for one pass */
  duration?: number;
  /** width of the light band as a share of the text, 0.1 to 0.6 */
  spread?: number;
  className?: string;
};

/** Muted text with a band of light sweeping across it, the way an assistant shows it is "thinking" or a loader
    says "working". For in-progress labels, skeleton titles and quiet emphasis. The text is fully readable
    throughout; reduced motion leaves it plain. */
export function ShimmerText({ children, as: Tag = "span", duration = 2, spread = 0.25, className }: ShimmerTextProps) {
  const reduced = useReducedMotion();
  const band = Math.round(Math.min(0.6, Math.max(0.1, spread)) * 50);
  return (
    <Tag
      className={cx("bg-clip-text text-transparent", !reduced && "[animation:gxui-shimmer_var(--gxui-shimmer-time)_linear_infinite]", reduced && "text-gxui-muted", className)}
      style={reduced ? undefined : {
        backgroundImage: `linear-gradient(90deg, var(--gxui-muted) ${50 - band}%, var(--gxui-ink) 50%, var(--gxui-muted) ${50 + band}%)`,
        backgroundSize: "250% 100%",
        WebkitBackgroundClip: "text",
        backgroundClip: "text",
        ["--gxui-shimmer-time" as string]: `${duration}s`,
      }}
    >
      {children}
    </Tag>
  );
}