18 lines
2.0 KiB
JSON
18 lines
2.0 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "highlight-text",
|
|
"type": "registry:ui",
|
|
"title": "Highlight Text",
|
|
"description": "A text component that smoothly reveals an animated highlight effect.",
|
|
"dependencies": [
|
|
"motion"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/text/highlight/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport {\n motion,\n useInView,\n type HTMLMotionProps,\n type Transition,\n type UseInViewOptions,\n} from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype HighlightTextProps = HTMLMotionProps<'span'> & {\n text: string;\n inView?: boolean;\n inViewMargin?: UseInViewOptions['margin'];\n inViewOnce?: boolean;\n transition?: Transition;\n};\n\nfunction HighlightText({\n ref,\n text,\n className,\n inView = false,\n inViewMargin = '0px',\n transition = { duration: 2, ease: 'easeInOut' },\n ...props\n}: HighlightTextProps) {\n const localRef = React.useRef<HTMLSpanElement>(null);\n React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);\n\n const inViewResult = useInView(localRef, {\n once: true,\n margin: inViewMargin,\n });\n const isInView = !inView || inViewResult;\n\n return (\n <motion.span\n ref={localRef}\n data-slot=\"highlight-text\"\n initial={{\n backgroundSize: '0% 100%',\n }}\n animate={isInView ? { backgroundSize: '100% 100%' } : undefined}\n transition={transition}\n style={{\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'left center',\n display: 'inline',\n }}\n className={cn(\n `relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500`,\n className,\n )}\n {...props}\n >\n {text}\n </motion.span>\n );\n}\n\nexport { HighlightText, type HighlightTextProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/text/highlight.tsx"
|
|
}
|
|
]
|
|
} |