127 Components
Shimmer Text
TextLinear-inspired metallic gradient typography with a high-gloss light beam that sweeps across headlines continuously or upon hover interaction.
Specular Shimmer TextPlatinum Silver
Linear-grade metallic typography with high-gloss beam refraction
LINEAR 2.0 PROTOCOL // RELEASE REFS
Next-Generation Kinetic Motion
Engineered with microsecond responsiveness, real-time sync, and fluid keyboard ergonomics.
SWEEP DURATION3s
BEAM ANGLE115°
Specular Shimmer TextMatrix Emerald
Linear-grade metallic typography with high-gloss beam refraction
LINEAR 2.0 PROTOCOL // RELEASE REFS
Crafted with sub-pixel precision
Engineered with microsecond responsiveness, real-time sync, and fluid keyboard ergonomics.
SWEEP DURATION3s
BEAM ANGLE115°
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/shimmer-text.json"
Props
TypeScript props supported by <ShimmerText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Issue tracking engineered for high-velocity software teams." | Headline copy to render with metallic shimmer finish. |
| palette | "silver" | "gold" | "violet" | "emerald" | "silver" | Metallic color tone preset for the gradient foundation and reflection beam. |
| duration | number | 3 | Sweep cycle duration in seconds. |
| angle | number | 115 | Angle of the light beam incidence in degrees. |
| shimmerOnHoverOnly | boolean | false | When true, shimmer beam sweeps only when hovered or focused. |
| className | string | — | Optional custom classes applied to the root container. |
Key Features
- High-gloss specular light beam swept across typography via background-clip or mask reflection.
- Multiple metallic palettes: Platinum Silver, Liquid Gold, Cyber Neon Violet, and Emerald Matrix.
- Customizable shimmer duration, sweep angle, text size, and interactive hover-trigger mode.
- Live text editing in the demo stage to test any custom title or marketing headline.
Keyboard & Accessibility
- Text remains fully selectable and readable by standard screen readers via genuine DOM heading elements.
- Provides a pause/play toggle and disables animations automatically when prefers-reduced-motion is active.
- Ensures high contrast ratio against dark backgrounds even at the peak of the reflection sweep.