Components
/
Text Shimmer
Text Shimmer
An animated shimmer effect that moves across text continuously.
Preview
Animate your ideas with motion-primitives
Installation
Copy and paste the component code into your project.
Examples
Basic
Generating code...
Custom Colors
Hi, how are you?
Different Durations
Fast shimmer (0.8s)
Default shimmer (2s)
Slow shimmer (4s)
Custom Spread
Narrow spread (1)
Default spread (2)
Wide spread (4)
Large Text
Motion Primitives
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | - | The text content to apply shimmer effect |
| as | ElementType | "p" | The HTML element to render |
| className | string | - | Additional CSS classes |
| duration | number | 2 | Animation duration in seconds |
| spread | number | 2 | Width multiplier for the shimmer gradient |
Custom Colors
Use CSS variables to customize colors:
--base-color- Base text color--base-gradient-color- Shimmer gradient color