Shimmering Text

Installation

No MCP yet? Connect your agent.

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} />