← All components
Surfaces / effect
Glare Hover
A slanted specular highlight sweeps across a surface on hover or keyboard focus.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The exact gradient stops and CSS ease curve are retained. Hover and focus within trigger the same sweep. The decorative overlay never intercepts input.
- playOnce matches the upstream behavior: snap back when leaving, instead of reversing the sweep.
- The component defaults to a 500px square; the gallery uses a 360px-tall card. max-width:100% keeps the surface inside narrow containers.
- Demo.tsx includes the full composition. Reduced motion, pause, hidden and offscreen behavior use an owned animation clock.
React 19.2Pointer Events
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | string | "500px" | Width |
height | string | "500px" | Height |
background | string | "#000000" | Background |
borderColor | string | "#333333" | Border |
borderRadius | string | "10px" | Radius |
glareColor | string | "#ffffff" | Glare color |
glareOpacity | number | 0.5 | Glare opacity |
glareAngle | number | -45 | Glare angle |
glareSize | number | 250 | Glare size |
transitionDuration | number | 650 | Sweep duration |
playOnce | boolean | false | Snap back on exit |
children | ReactNode | undefined | Surface content; links and buttons remain interactive. |
style | CSSProperties | {} | Additional container styles. |
paused | boolean | false | Freeze decorative motion. |
replayToken | number | 0 | Change to replay or reset the effect. |
className | string | '' | Text classes for Curved Loop; outer classes for the other components. |