Glare Hover
A sleek glare effect on hover.
Hover Me
Installation
Usage
import GlareHover from '$lib/components/ori/glare-hover/glare-hover.svelte';<GlareHover
glareColor="#ffffff"
glareOpacity={0.3}
glareAngle={-30}
glareSize={300}
transitionDuration={800}
playOnce={false}
>
<h2 style="font-size: 3rem; font-weight: 900; color: #333; margin: 0">Hover Me</h2>
</GlareHover>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| glareColor | string | '#ffffff' | Color of the glare streak |
| glareOpacity | number | 0.5 | Opacity of the glare effect (0–1) |
| glareAngle | number | -45 | Angle of the glare streak in degrees |
| glareSize | number | 250 | Size of the glare gradient area as a percentage |
| transitionDuration | number | 650 | Duration of the glare transition in milliseconds |
| playOnce | boolean | false | If true, the glare plays only once on hover |
| width | string | '500px' | Width of the container |
| height | string | '500px' | Height of the container |
| background | string | '#000' | Background color of the container |
| borderRadius | string | '10px' | Border radius of the container |
| borderColor | string | '#333' | Border color of the container |
| class | string | '' | Additional CSS classes for custom styling |