{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "shimmering-text", "type": "registry:component", "title": "Shimmering Text", "author": "ncdai ", "description": "Smooth shimmering text animation built with Motion.", "dependencies": [ "motion" ], "registryDependencies": [ "@ncdai/utils" ], "files": [ { "path": "src/registry/shimmering-text/shimmering-text.tsx", "content": "\"use client\";\n\nimport type { HTMLMotionProps, 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, \"children\"> & {\n text: string;\n duration?: number;\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" } ] }