Shine Animation
A Framer Motion wrapper that sweeps a white glare overlay across any child content when the triggered prop flips to true.
ShineAnimation is a composable wrapper that adds a one-shot horizontal shine sweep to any child element. Pass triggered={true} to play the animation; it resets automatically once the transition completes. An optional delay lets you sequence multiple instances.
Installation
npx shadcn@latest add @adv/shine-animationUsage
import ShineAnimation from '@/components/shine-animation';
<ShineAnimation triggered>
<img src="/hero.png" alt="Hero" />
</ShineAnimation>Example
Shine me
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content to wrap with the shine overlay. |
delay | number | 0 | Delay in milliseconds before the animation starts after triggered becomes true. |
duration | number | 0.8 | Duration of the shine sweep in seconds. |
className | string | "" | Additional CSS classes on the outer wrapper div. |
triggered | boolean | false | Set to true to fire the animation. Automatically resets when complete. |