{"slug":"text-shimmer","name":"Text Shimmer","description":"Gradient sweep across text for loading or emphasis.","category":"motion","source_url":"https://beui.saura3h.xyz/r/text-shimmer/raw","detail_url":"https://beui.saura3h.xyz/r/text-shimmer","raw_url":"https://beui.saura3h.xyz/r/text-shimmer/raw","page_url":"https://beui.saura3h.xyz/components/motion/text-shimmer","dependencies":["react"],"internal":["@/components/motion/text-shimmer","@/lib/utils"],"files":[{"path":"components/motion/text-shimmer.tsx","type":"component","content":"import { cn } from \"@/lib/utils\";\nimport type { ElementType, ReactNode } from \"react\";\n\nexport interface TextShimmerProps {\n  children: ReactNode;\n  as?: ElementType;\n  duration?: number;\n  className?: string;\n}\n\nexport function TextShimmer({ children, as: Comp = \"span\", duration = 2.5, className }: TextShimmerProps) {\n  return (\n    <Comp\n      style={{ animationDuration: `${duration}s` }}\n      className={cn(\n        \"inline-block bg-clip-text text-transparent animate-shimmer\",\n        \"bg-[linear-gradient(110deg,var(--color-fg-muted)_30%,var(--color-fg)_50%,var(--color-fg-muted)_70%)]\",\n        \"bg-[length:200%_100%]\",\n        className,\n      )}\n    >\n      {children}\n    </Comp>\n  );\n}\n"},{"path":"components/previews/motion/text-shimmer.preview.tsx","type":"preview","content":"\"use client\";\n\nimport { TextShimmer } from \"@/components/motion/text-shimmer\";\n\nexport function TextShimmerPreview() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <TextShimmer className=\"text-3xl font-semibold\">Loading projects…</TextShimmer>\n      <TextShimmer duration={1.5} className=\"text-sm\">Faster shimmer</TextShimmer>\n    </div>\n  );\n}\n"},{"path":"lib/utils.ts","type":"util","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"}]}