║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Shimmering Text description: Animated text with gradient shimmer effects and viewport-triggered animations using Motion. featured: true component: true

<ComponentPreview name="shimmering-text-demo" description="A text shimmer effect with customizable speed, intensity, and colors" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx @elevenlabs/cli@latest components add shimmering-text

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install motion

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="shimmering-text" title="components/ui/shimmering-text.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

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

Basic Usage

<ShimmeringText text="Hello, World!" />

Custom Duration and Colors

<ShimmeringText
  text="Custom Shimmer"
  duration={3}
  color="#6B7280"
  shimmerColor="#3B82F6"
/>

Trigger on Viewport Entry

<ShimmeringText
  text="Appears when scrolled into view"
  startOnView={true}
  once={true}
/>

Repeating Animation

<ShimmeringText
  text="Repeating Shimmer"
  repeat={true}
  repeatDelay={1}
  duration={2}
/>

With Custom Styling

<ShimmeringText
  text="Large Heading"
  className="text-4xl font-bold"
  spread={3}
/>

API Reference

ShimmeringText

An animated text component with gradient shimmer effect and viewport detection.

Props

| Prop | Type | Default | Description | | ------------ | --------- | ------- | ---------------------------------------------------- | | text | string | - | Required. Text to display with shimmer effect | | duration | number | 2 | Animation duration in seconds | | delay | number | 0 | Delay before starting animation | | repeat | boolean | true | Whether to repeat the animation | | repeatDelay | number | 0.5 | Pause duration between repeats in seconds | | className | string | - | Optional CSS classes | | startOnView | boolean | true | Whether to start animation when entering viewport | | once | boolean | false | Whether to animate only once | | inViewMargin | string | - | Margin for viewport detection (e.g., "0px 0px -10%") | | spread | number | 2 | Shimmer spread multiplier | | color | string | - | Base text color (CSS custom property) | | shimmerColor | string | - | Shimmer gradient color (CSS custom property) |

Notes

• Built with Motion for smooth, performant animations
• Uses CSS gradient background animation for the shimmer effect
• Viewport detection powered by Motion's useInView hook
• Dynamic spread calculation based on text length for consistent appearance
• Supports custom colors via CSS custom properties
• Text uses background-clip: text for gradient effect
• Default colors adapt to light/dark mode automatically
• Optimized with useMemo for performance
• Animation can be controlled via viewport intersection or immediate start

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║