18 lines
2.5 KiB
JSON
18 lines
2.5 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "shimmering-text",
|
|
"type": "registry:ui",
|
|
"title": "Shimmering Text",
|
|
"description": "A text component that smoothly animates text with a shimmering effect.",
|
|
"dependencies": [
|
|
"motion"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/text/shimmering/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { type HTMLMotionProps, motion, type Transition } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype ShimmeringTextProps = {\n text: string;\n duration?: number;\n transition?: Transition;\n wave?: boolean;\n color?: string;\n shimmeringColor?: string;\n} & Omit<HTMLMotionProps<'span'>, 'children'>;\n\nfunction ShimmeringText({\n text,\n duration = 1,\n transition,\n wave = false,\n className,\n color = 'var(--color-neutral-500)',\n shimmeringColor = 'var(--color-neutral-300)',\n ...props\n}: ShimmeringTextProps) {\n return (\n <motion.span\n className={cn('relative inline-block [perspective:500px]', className)}\n style={\n {\n '--shimmering-color': shimmeringColor,\n '--color': color,\n color: 'var(--color)',\n } as React.CSSProperties\n }\n {...props}\n >\n {text?.split('')?.map((char, i) => (\n <motion.span\n key={i}\n className=\"inline-block whitespace-pre [transform-style:preserve-3d]\"\n initial={{\n ...(wave\n ? {\n scale: 1,\n rotateY: 0,\n }\n : {}),\n color: 'var(--color)',\n }}\n animate={{\n ...(wave\n ? {\n x: [0, 5, 0],\n y: [0, -5, 0],\n scale: [1, 1.1, 1],\n rotateY: [0, 15, 0],\n }\n : {}),\n color: ['var(--color)', 'var(--shimmering-color)', 'var(--color)'],\n }}\n transition={{\n duration,\n repeat: Infinity,\n repeatType: 'loop',\n repeatDelay: text.length * 0.05,\n delay: (i * duration) / text.length,\n ease: 'easeInOut',\n ...transition,\n }}\n >\n {char}\n </motion.span>\n ))}\n </motion.span>\n );\n}\n\nexport { ShimmeringText, type ShimmeringTextProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/text/shimmering.tsx"
|
|
}
|
|
]
|
|
} |