Glare Hover
A hover effect component that creates a glare animation across elements
Hover Me
Usage
import GlareHover from './GlareHover'
<GlareHover
glareColor="#ffffff"
glareOpacity={0.3}
glareAngle={-30}
glareSize={300}
transitionDuration={800}
playOnce={false}
>
<h2>Hover Me</h2>
</GlareHover>Props
| Prop | Type | Default | Description |
|---|---|---|---|
glareColor | string | "#ffffff" | Color of the glare effect |
glareOpacity | number | 0.5 | Opacity of the glare effect |
glareAngle | number | -45 | Angle of the glare effect in degrees |
glareSize | number | 250 | Size of the glare effect as percentage |
transitionDuration | number | 650 | Duration of the animation in milliseconds |
playOnce | boolean | false | Whether to play animation only once |
width | string | "500px" | Width of the container |
height | string | "500px" | Height of the container |
background | string | "#000" | Background color |
borderRadius | string | "10px" | Border radius |
borderColor | string | "#333" | Border color |