React Shimmering Text

Powered by

Motion

Framer Motion

Ever seen text that "shimmers" and looks like someone covered it in glitter? Most shimmer effects either strobe like a broken light (nauseating) or use simple opacity fades (boring). This component creates actual wave-like shimmer that flows across text naturally, like light hitting water.

Character-by-character shimmer waves

Text that catches light with smooth flowing shimmer effects:

import { ShimmeringText } from '@/components/ui/shadcn-io/shimmering-text';export default function ShimmeringTextDemo() {  return (    <ShimmeringText      className="text-4xl font-semibold"      text="Shimmering Text"      wave    />  );}

'use client';import * as React from 'react';import { type HTMLMotionProps, motion, type Transition } from 'motion/react';import { cn } from '@/lib/utils';type ShimmeringTextProps = {  text: string;  duration?: number;  transition?: Transition;  wave?: boolean;  color?: string;  shimmeringColor?: string;} & Omit<HTMLMotionProps<'span'>, 'children'>;function ShimmeringText({  text,  duration = 1,  transition,  wave = false,  className,  color = 'var(--color-neutral-500)',  shimmeringColor = 'var(--color-neutral-300)',  ...props}: ShimmeringTextProps) {  return (    <motion.span      className={cn('relative inline-block [perspective:500px]', className)}      style={        {          '--shimmering-color': shimmeringColor,          '--color': color,          color: 'var(--color)',        } as React.CSSProperties      }      {...props}    >      {text?.split('')?.map((char, i) => (        <motion.span          key={i}          className="inline-block whitespace-pre [transform-style:preserve-3d]"          initial={{            ...(wave              ? {                  scale: 1,                  rotateY: 0,                }              : {}),            color: 'var(--color)',          }}          animate={{            ...(wave              ? {                  x: [0, 5, 0],                  y: [0, -5, 0],                  scale: [1, 1.1, 1],                  rotateY: [0, 15, 0],                }              : {}),            color: ['var(--color)', 'var(--shimmering-color)', 'var(--color)'],          }}          transition={{            duration,            repeat: Infinity,            repeatType: 'loop',            repeatDelay: text.length * 0.05,            delay: (i * duration) / text.length,            ease: 'easeInOut',            ...transition,          }}        >          {char}        </motion.span>      ))}    </motion.span>  );}export { ShimmeringText, type ShimmeringTextProps };

Built with TypeScript and shadcn/ui, using Motion for precise character animations in React applications. Each letter shimmers individually with configurable wave effects, creating that premium liquid metal look without the migraine-inducing strobe effects you see everywhere else.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/shimmering-text.json

npx shadcn@latest add https://www.shadcn.io/registry/shimmering-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/shimmering-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/shimmering-text.json

Usage

import { ShimmeringText } from "@/components/text/shimmering-text";

<ShimmeringText
  text="Smooth shimmer waves"
  duration={2}
  wave={true}
  shimmeringColor="hsl(var(--primary))"
/>;

Why most shimmer effects suck

Most developers just animate opacity or use CSS animations with harsh color transitions. The result? Text that flashes like a neon sign having an electrical fault. Your eyes can't follow the motion because there's no flow—just jarring on/off states.

This React component animates each character individually with staggered timing, creating a wave that flows naturally across the text. We use proper color interpolation and motion physics instead of binary opacity switches. The shimmer moves like actual light, not like a broken fluorescent bulb.

Plus, when developers add "wave effects," they usually just bounce letters up and down randomly. This component uses coordinated 3D transforms with proper perspective, so characters move together in realistic wave patterns that your brain can actually process.

Features

• Character-by-character shimmer that flows like real light across text
• 3D wave effects with coordinated movement and realistic physics
• Configurable colors that work with shadcn/ui theme tokens
• Precise timing controls with TypeScript support for perfect animations
• Hardware-accelerated transforms for 60fps performance in JavaScript projects
• Free open source component that respects reduced motion preferences
• Works seamlessly with Next.js applications and modern React frameworks

API Reference

ShimmeringText

Animated shimmer text with wave effects and character-by-character control.

Wave Animation Settings

When wave={true}, characters move with these 3D transforms:

Common gotchas

Shimmer moves too fast: Default 2-second duration works for most text lengths in React applications. Longer phrases need 3-4 seconds, single words can use 1.5 seconds for snappy effects.

Colors don't show shimmer: Make sure there's enough contrast between color and shimmeringColor in your Next.js theme. Light gray to white won't show well—try dark to light or use theme accent colors.

Wave effects look chaotic: The 3D perspective needs enough container space to work properly in JavaScript applications. If characters clip or look flat, increase the parent container's padding.

Animation stutters on mobile: Each character runs individual animations with TypeScript timing calculations. For very long text (50+ characters), consider disabling wave effects on lower-end devices.

Text becomes unreadable: High-contrast shimmers with fast timing can hurt readability in React components. Test with actual content, not just placeholder text, to ensure users can still read it.

Integration with other components

Perfect for hero sections in Card components or eye-catching headings in Sheet overlays. Works great with Button components for premium call-to-action text in Next.js projects.

For brand experiences, combine with Badge for status indicators with personality or Avatar for profile names that sparkle. This free open source component pairs well with Progress indicators for loading states with style, all with complete TypeScript integration.

Questions developers actually ask