Installation
Examples
Wave Effect with Status Badge
Combines a SaaS-style live status pill with a wave-shimmer hero heading — perfect for product launches, feature announcements, or brand emphasis.
Usage
import ShimmeringText from "@/components/motionx/shimmering-text";Hero tagline shimmer
<ShimmeringText
text="Build Something Beautiful"
className="text-4xl font-bold"
duration={2}
color="hsl(var(--foreground))"
shimmeringColor="hsl(var(--primary))"
/>Wave shimmer for brand emphasis
<h2 className="text-3xl font-bold">
Ship faster with{" "}
<ShimmeringText
text="MotionX UI"
className="text-3xl font-bold"
duration={2}
wave={true}
color="hsl(var(--primary))"
shimmeringColor="hsl(var(--foreground))"
/>
</h2>Inline badge label
<div className="rounded-full border px-4 py-1.5">
<ShimmeringText
text="Now Available"
className="text-sm font-semibold"
duration={1.5}
wave={true}
color="hsl(var(--primary))"
shimmeringColor="hsl(var(--primary) / 0.4)"
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | Text content to shimmer (required) |
duration | number | 1 | Full cycle duration in seconds |
transition | Transition | — | Override Framer Motion transition settings |
wave | boolean | false | Enable 3D wave movement per character |
color | string | "var(--color-neutral-500)" | Base text color |
shimmeringColor | string | "var(--color-neutral-300)" | Shimmer highlight color |
className | string | — | Additional CSS classes for the wrapper span |