Glare Hover
A surface that sweeps a diagonal glare highlight across its face on hover.
hovercssreveal
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Glare
Glare color
Glare opacity0.35
Angle45°
Band width220%
Motion
Sweep duration0.8s
Style
Corner radius16px
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Content beneath the glare layer. |
glareColor | string | "#ffffff" | Glare color (hex). |
glareOpacity | number | 0.35 | Peak opacity of the glare (0–1). |
angle | number | 45 | Glare band angle in degrees. |
size | number | 220 | Glare band width as a percentage of the element. |
duration | number | 0.8 | Sweep duration in seconds. |
radius | number | 16 | Corner radius in pixels. |
className | string | — | Class applied to the outer wrapper. |