{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"motion-primitives-text-shimmer","type":"registry:component","title":"Text Shimmer","description":"Tailark motion primitives text-shimmer component","dependencies":["motion"],"registryDependencies":["@tailark/core-utils"],"files":[{"path":"core/motion-primitives/text-shimmer.tsx","type":"registry:component","target":"@ui/motion-primitives/text-shimmer.tsx","content":"'use client'\nimport React, { type JSX } from 'react'\nimport { LazyMotion, domAnimation, m } from 'motion/react'\nimport { cn } from '@/lib/utils'\n\nexport type TextShimmerProps = {\n    children: string\n    as?: React.ElementType\n    className?: string\n    duration?: number\n    spread?: number\n}\n\nfunction TextShimmerComponent({ children, as: Component = 'p', className, duration = 2, spread = 2 }: TextShimmerProps) {\n    const MotionComponent = m.create(Component as keyof JSX.IntrinsicElements)\n\n    const dynamicSpread = children.length * spread\n\n    return (\n        <LazyMotion features={domAnimation}>\n        <MotionComponent\n            className={cn(\n                'bg-size-[250%_100%,auto] relative inline-block bg-clip-text',\n                'text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]',\n                '[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]',\n                'dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]',\n                className\n            )}\n            initial={{ backgroundPosition: '100% center' }}\n            animate={{ backgroundPosition: '0% center' }}\n            transition={{\n                repeat: Infinity,\n                duration,\n                ease: 'linear',\n            }}\n            style={\n                {\n                    '--spread': `${dynamicSpread}px`,\n                    backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,\n                } as React.CSSProperties\n            }>\n            {children}\n        </MotionComponent>\n        </LazyMotion>\n    )\n}\n\nexport const TextShimmer = React.memo(TextShimmerComponent)\n"}]}