# Text Shimmer > Animated shimmer effect for text with customizable timing and spread A shadcn/ui block from the [@elements](https://www.tryelements.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/elements/text-shimmer). - Page, with a live preview: https://shadcn.exchange/r/elements/text-shimmer - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/elements/text-shimmer-light-dd9d6b959426826d.png - Registry item: https://www.tryelements.dev/r/text-shimmer.json - Categories: animations - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://www.tryelements.dev/r/text-shimmer.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `motion` ## Notes from the registry Polymorphic text component with animated shimmer effect. Supports light/dark mode, customizable duration, spread, delay, and repeatDelay props. ## Files ### `registry/default/blocks/animations/text-shimmer/components/elements/text-shimmer.tsx` ```tsx "use client"; import React, { type JSX, useMemo } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export type TextShimmerProps = { children: string; as?: React.ElementType; className?: string; duration?: number; spread?: number; delay?: number; repeatDelay?: number; }; function TextShimmerBase({ children, as: Component = "p", className, duration = 2, spread = 2, delay = 0, repeatDelay = 0, }: TextShimmerProps) { const MotionComponent = motion.create( Component as keyof JSX.IntrinsicElements, ); const dynamicSpread = useMemo(() => { return children.length * spread; }, [children, spread]); return ( {children} ); } export const TextShimmer = React.memo(TextShimmerBase); ``` ### `registry/default/blocks/animations/text-shimmer/routes/layout.tsx` ```tsx import { Geist, Geist_Mono } from "next/font/google"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### `registry/default/blocks/animations/text-shimmer/routes/page.tsx` ```tsx import { TextShimmer } from "@/registry/default/blocks/animations/text-shimmer/components/elements/text-shimmer"; export default function TextShimmerPage() { return (

Text Shimmer

Animated shimmer effect for text with customizable timing and spread.

Shimmer Effect Loading content... Custom spread and duration

); } ```