Shimmer Text

Installation#

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/shimmer-text.json

Manual

1. Install the dependencies

   npmpnpmbunyarn

   npm install clsx motion tailwind-merge

2. Add the shared helpers

   Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

   lib/motion.ts

   import type { Transition, Variants } from "motion/react";
   
   /** Durations in seconds. */
   export const duration = {
     instant: 0.1,
     quick: 0.18,
     base: 0.28,
     slow: 0.45,
   } as const;
   
   /** Cubic-bezier curves. */
   export const ease = {
     /** Entering, UI response. */
     out: [0.22, 1, 0.36, 1],
     /** Moving on screen. */
     inOut: [0.65, 0, 0.35, 1],
     /** Sheets and the mobile menu. */
     drawer: [0.32, 0.72, 0, 1],
   } as const;
   
   /** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
   export const ui = {
     press: { scale: 0.96, duration: 0.12 },
     icon: { type: "spring", duration: 0.3, bounce: 0 },
     popover: { duration: 0.18, ease: ease.out },
     modal: { duration: 0.24, ease: ease.out },
     exitFactor: 0.6,
   } as const;
   
   /** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
   export const kinetic = {
     heroLetter: { duration: 0.6, ease: ease.out },
     /** Delay per letter, eased so the wave slows toward the end. */
     heroStep: 0.035,
     reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
     /** Two afterimages: lag in seconds and opacity of each. */
     ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
   } as const;
   
   /** Spring presets. */
   export const spring = {
     snappy: { type: "spring", stiffness: 500, damping: 30 },
     smooth: { type: "spring", stiffness: 260, damping: 26 },
     bouncy: { type: "spring", stiffness: 300, damping: 15 },
   } as const satisfies Record<string, Transition>;
   
   /** Stagger between siblings, in seconds (0.03–0.06). */
   export const stagger = {
     tight: 0.03,
     base: 0.045,
     loose: 0.06,
   } as const;
   
   /** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
   export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
     if (reduceMotion) {
       return {
         hidden: { opacity: 0 },
         visible: { opacity: 1, transition: { duration: duration.base } },
         exit: { opacity: 0, transition: { duration: duration.quick } },
       };
     }
     return {
       hidden: { opacity: 0, y, filter: "blur(4px)" },
       visible: {
         opacity: 1,
         y: 0,
         filter: "blur(0px)",
         transition: { duration: duration.base, ease: ease.out },
       },
       exit: {
         opacity: 0,
         y: -y / 2,
         filter: "blur(4px)",
         transition: { duration: duration.quick, ease: ease.out },
       },
     };
   }
   
   /** Scale 0.96 → 1 for popovers, menus and dialogs. */
   export function overlayVariants(reduceMotion?: boolean | null): Variants {
     if (reduceMotion) {
       return {
         hidden: { opacity: 0 },
         visible: { opacity: 1, transition: { duration: duration.quick } },
         exit: { opacity: 0, transition: { duration: duration.instant } },
       };
     }
     return {
       hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
       visible: {
         opacity: 1,
         scale: 1,
         filter: "blur(0px)",
         transition: { duration: duration.quick, ease: ease.out },
       },
       exit: {
         opacity: 0,
         scale: 0.96,
         filter: "blur(2px)",
         transition: { duration: duration.instant + 0.02, ease: ease.out },
       },
     };
   }
   
   /** Parent variants that stagger their children in. */
   export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
     return {
       hidden: {},
       visible: { transition: { staggerChildren: gap, delayChildren } },
       exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
     };
   }

   Show all 113 lines

3. Copy the source

   components/ui/shimmer-text/shimmer-text.tsx

   "use client";
   
   import { useEffect, useRef, useState, type ComponentProps, type ReactNode } from "react";
   import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react";
   import { cn } from "@/lib/utils";
   import { ease } from "@/lib/motion";
   
   export interface ShimmerTextProps extends Omit<ComponentProps<"span">, "children"> {
     /** One line of text. */
     children: ReactNode;
     /** Seconds for one sweep across the text. @default 1.6 */
     duration?: number;
     /** Seconds between sweeps. @default 0.4 */
     repeatDelay?: number;
     /** Width of the highlight band in px. Defaults to 40% of the text width, kept between 40 and 140px. */
     spread?: number;
     /** Run the sweep. When false, the text renders plainly in the base color. @default true */
     active?: boolean;
     /** Classes for the highlight band's text color. @default "text-foreground" */
     highlightClassName?: string;
   }
   
   const MASK = "linear-gradient(90deg, transparent, #000 50%, transparent)";
   
   export function ShimmerText({
     children,
     duration = 1.6,
     repeatDelay = 0.4,
     spread,
     active = true,
     highlightClassName,
     className,
     ...props
   }: ShimmerTextProps) {
     const reduceMotion = useReducedMotion();
     const lineRef = useRef<HTMLSpanElement>(null);
     const [width, setWidth] = useState(0);
     // A narrow window slides across while the copy inside slides back the same amount:
     // the highlighted text stays put and only transforms animate, never background-position.
     const x = useMotionValue(0);
     const counterX = useTransform(x, (v) => -v);
     const band = spread ?? Math.min(140, Math.max(40, width * 0.4));
     const sweeping = active && !reduceMotion && width > 0;
   
     useEffect(() => {
       const line = lineRef.current;
       if (!line) return;
       const observer = new ResizeObserver(() => setWidth(line.offsetWidth));
       observer.observe(line);
       return () => observer.disconnect();
     }, []);
   
     useEffect(() => {
       if (!sweeping) return;
       const controls = animate(x, [-band, width], { duration, ease: ease.inOut, repeat: Infinity, repeatDelay });
       return () => controls.stop();
     }, [sweeping, band, width, duration, repeatDelay, x]);
   
     return (
       <span className={cn("inline-block text-muted-foreground", className)} {...props}>
         <span ref={lineRef} className="relative inline-block whitespace-nowrap">
           {/* Reduced motion swaps the sweep for a gentle breathing fade. */}
           <motion.span
             className="inline-block"
             animate={active && reduceMotion ? { opacity: [1, 0.55, 1] } : { opacity: 1 }}
             transition={active && reduceMotion ? { duration: 2.4, repeat: Infinity, ease: "easeInOut" } : { duration: 0.2 }}
           >
             {children}
           </motion.span>
           {sweeping ? (
             // Clipped to the text box, so the band never pokes out (and never adds scroll overflow) at either end.
             <span aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden select-none">
               <motion.span
                 className="absolute inset-y-0 left-0 overflow-hidden"
                 style={{ width: band, x, maskImage: MASK, WebkitMaskImage: MASK }}
               >
                 <motion.span
                   className={cn("absolute inset-y-0 left-0 whitespace-nowrap", highlightClassName ?? "text-foreground")}
                   style={{ width, x: counterX }}
                 >
                   {children}
                 </motion.span>
               </motion.span>
             </span>
           ) : null}
         </span>
       </span>
     );
   }

   Show all 89 lines

Usage#

import { ShimmerText } from "@/components/ui/shimmer-text/shimmer-text";

export function Thinking({ done }: { done: boolean }) {
  return <ShimmerText active={!done}>Searching the docs</ShimmerText>;
}

API reference#

Accessibility#

• The text stays real, readable text; the moving highlight is an aria-hidden copy.
• Pair it with a status region (role="status" or aria-live) when the text itself changes, so progress is announced.
• With reduced motion enabled, the sweep becomes a gentle opacity breathe with no movement.