{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "text-shimmer", "title": "Text Shimmer", "description": "Animated shimmer effect for text with customizable timing and spread", "dependencies": [ "motion" ], "registryDependencies": [], "files": [ { "path": "registry/default/blocks/animations/text-shimmer/components/elements/text-shimmer.tsx", "content": "\"use client\";\n\nimport React, { type JSX, useMemo } from \"react\";\n\nimport { motion } from \"motion/react\";\n\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 delay?: number;\n repeatDelay?: number;\n};\n\nfunction TextShimmerBase({\n children,\n as: Component = \"p\",\n className,\n duration = 2,\n spread = 2,\n delay = 0,\n repeatDelay = 0,\n}: TextShimmerProps) {\n const MotionComponent = motion.create(\n Component as keyof JSX.IntrinsicElements,\n );\n\n const dynamicSpread = useMemo(() => {\n return children.length * spread;\n }, [children, spread]);\n\n return (\n \n {children}\n \n );\n}\n\nexport const TextShimmer = React.memo(TextShimmerBase);\n", "type": "registry:component" }, { "path": "registry/default/blocks/animations/text-shimmer/routes/layout.tsx", "content": "import { Geist, Geist_Mono } from \"next/font/google\";\n\nconst geistSans = Geist({\n variable: \"--font-geist-sans\",\n subsets: [\"latin\"],\n});\n\nconst geistMono = Geist_Mono({\n variable: \"--font-geist-mono\",\n subsets: [\"latin\"],\n});\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n \n \n {children}\n \n \n );\n}\n", "type": "registry:page", "target": "app/layout.tsx" }, { "path": "registry/default/blocks/animations/text-shimmer/routes/page.tsx", "content": "import { TextShimmer } from \"@/registry/default/blocks/animations/text-shimmer/components/elements/text-shimmer\";\n\nexport default function TextShimmerPage() {\n return (\n
\n
\n
\n
\n

Text Shimmer

\n

\n Animated shimmer effect for text with customizable timing and\n spread.\n

\n
\n\n
\n \n Shimmer Effect\n \n \n Loading content...\n \n \n Custom spread and duration\n \n
\n
\n
\n
\n );\n}\n", "type": "registry:page", "target": "app/text-shimmer/page.tsx" } ], "docs": "Polymorphic text component with animated shimmer effect. Supports light/dark mode, customizable duration, spread, delay, and repeatDelay props.", "categories": [ "animations" ], "type": "registry:block" }