{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "shimmering-text", "title": "Shimmering Text", "author": "tusharvarshney ", "description": "Smooth, light-sweeping shimmer animation for text.", "dependencies": [ "motion" ], "files": [ { "path": "src/registry/components/shimmering-text/shimmering-text.tsx", "content": "\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport { motion } from \"motion/react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type ShimmeringTextProps = Omit<\n React.ComponentProps,\n \"children\"\n> & {\n /** The text to render with the shimmering effect. */\n text: string\n /**\n * Duration in seconds for one shimmer cycle.\n * @defaultValue 1 */\n duration?: number\n /**\n * Whether the shimmer animation is paused.\n * @defaultValue false */\n isStopped?: boolean\n}\n\nexport function ShimmeringText({\n text,\n duration = 1,\n isStopped = false,\n className,\n ...props\n}: ShimmeringTextProps) {\n const createCharVariants = React.useCallback(\n (charIndex: number): Variants => ({\n running: {\n color: [\"var(--color)\", \"var(--shimmering-color)\", \"var(--color)\"],\n transition: {\n duration,\n repeat: Infinity,\n repeatType: \"loop\" as const,\n repeatDelay: text.length * 0.05,\n delay: (charIndex * duration) / text.length,\n ease: \"easeInOut\",\n },\n },\n stopped: {\n color: \"var(--color)\",\n transition: {\n duration: duration * 0.5,\n ease: \"easeOut\",\n },\n },\n }),\n [duration, text.length]\n )\n\n return (\n \n {text?.split(\"\")?.map((char, i) => (\n \n {char}\n \n ))}\n \n )\n}\n", "type": "registry:component", "target": "@components/shimmering-text.tsx" } ], "type": "registry:component" }