Getting Started
Templates
Components
undefined| Additional CSS classes |
as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "h1" | HTML element to render |
zoomDuration | number | 1 | Duration of zoom animation (seconds) |
shineDuration | number | 1.2 | Duration of shine animation (seconds) |
shineDelay | number | 1 | Delay before shine starts (seconds) |
shineRepeat | number | 0 | Times shine repeats (0 = once, Infinity = loop) |
baseColor | string | var(--foreground) | Base text color |
shineColor | string | #fff | Shine highlight color |
prefers-reduced-motion preferenceimport { AnimatedShineText } from "@/components/ui/animated-shine-text"
export default function Example() {
return <AnimatedShineText>Hello World!</AnimatedShineText>
}<AnimatedShineText
as="h2"
zoomDuration={0.8}
shineDuration={1.5}
shineDelay={0.8}
>
Welcome Back
</AnimatedShineText><AnimatedShineText shineRepeat={Infinity} shineDelay={2}>
Premium Feature
</AnimatedShineText><AnimatedShineText baseColor="#3b82f6" shineColor="#93c5fd">
Blue Shine
</AnimatedShineText>