Adds a realistic moving glare highlight on hover over any element.
Hover the card and a glare sweeps across it. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
width | string | "500px" | The width of the hover element. |
height | string | "500px" | The height of the hover element. |
background | string | "#000" | The background color of the element. |
borderRadius | string | "10px" | The border radius of the element. |
borderColor | string | "#333" | The border color of the element. |
glareColor | string | "#ffffff" | The color of the glare effect (hex format). |
glareOpacity | number | 0.5 | The opacity of the glare effect (0-1). |
glareAngle | number | -45 | The angle of the glare effect in degrees. |
glareSize | number | 250 | The size of the glare effect as a percentage (e.g. 250 = 250%). |
transitionDuration | number | 650 | The duration of the transition in milliseconds. |
playOnce | boolean | false | If true, the glare only animates on hover and doesn't return on mouse leave. |
| Prop | Type | Default | Description |
|---|---|---|---|
default | slot | - | The content to display inside the glare hover element. The original takes it as children. |
Keyboard shortcuts and ARIA behavior.