A light that sweeps across an element, once, in a loop, on hover or on tap.
Installation
Usage
import { Shine } from '@animate-ui/react/primitives/effects/shine';
export function GetStarted() {
return (
<Shine asChild loop loopDelay={500}>
<button>Get started</button>
</Shine>
);
}enableOnHover and enableOnTap play the shine on interaction instead of right away.
Animation
- A skewed gradient of
color(the text color by default) sweeps from left to right overduration(1.2s,cubic-bezier(0.4, 0, 0.2, 1)), clipped to the element. It never catches the pointer. - With
loop, it sweeps again afterloopDelay. WithenableOnHoverandloop, it keeps sweeping while hovered. - It moves with a hardware-accelerated
transform. - Under reduced motion, there is no shine: it's decorative.
API Reference
Shine
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | false |
color? | string | 'currentColor' |
opacity? | number | 0.3 |
duration? | number | 1200 |
delay? | number | 0 |
loop? | boolean | false |
loopDelay? | number | 0 |
deg? | number | -15 |
enable? | boolean | true |
enableOnHover? | boolean | false |
enableOnTap? | boolean | false |
...props? | React.ComponentProps<'div'> | - |