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