GlareHover
glare-hoverSweeps a diagonal glare across content when the pointer hovers.
Usage
Basic usage
Wrap any content and a diagonal reflection will sweep from left to right when hovering.
<GlareHover className="grid h-40 w-72 place-items-center rounded-xl border border-border bg-surface">
<span className="text-lg font-semibold text-foreground">Hover to see the reflection</span>
</GlareHover>Scanning time
Use duration to control the speed of reflective sweeping. Slow sweeping will show a more advanced texture.
<GlareHover
duration="1000ms"
className="grid h-40 w-72 place-items-center rounded-xl border border-border bg-surface"
>
<span className="text-lg font-semibold text-foreground">Slow sweep 1s</span>
</GlareHover>Custom reflective color
glareColor Covers a default translucent white that can be dyed to a brand-hued gloss.
<GlareHover
glareColor="rgba(124,58,237,0.5)"
className="grid h-40 w-72 place-items-center rounded-xl border border-border bg-surface"
>
<span className="text-lg font-semibold text-foreground">Purple gloss</span>
</GlareHover>Set on picture card
Also effective for pictures/covers, the reflection makes the card more interactive.
<GlareHover className="h-40 w-72 overflow-hidden rounded-xl border border-border">
<div className="flex h-full w-full items-end bg-gradient-to-br from-primary/60 to-chart-2/60 p-4">
<span className="text-lg font-semibold text-white">Selected works</span>
</div>
</GlareHover>When to Use
Use it when you want the card/button/tile to be swept by an oblique glass reflection when hovering (exquisite feeling, interactive hint). It is a wrapper container that passes in the content to be reflected as children and accepts all native div properties. If you want a continuous light spot on the border, use BorderBeam; if you want the entire border streamer, use ShineBorder; if you want to hover to enlarge the content, use Lens.
Import
import { GlareHover } from "@hulianui/ui"Props
Inherits all native div properties (ComponentPropsWithoutRef<"div">), plus:
| Name | Type | Default | Description |
|---|---|---|---|
| glareColor | string | Translucent white | Reflective color, default glass gloss (suitable for both light and dark) |
| duration | string | "650ms" | Sweep duration; showcase options are "450ms", "650ms", and "1000ms" |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Content swept by reflections |
Usage Guidelines
- Sweeping light is weakened/disabled under reduced-motion preferences. Do not put key information only in reflective animations.
- It's a wrapper not an overlay - give it the layout/style className directly, no extra
relativecontainer required.
Related
BorderBeam · ShineBorder · Lens · AnimatedBeam · OrbitingCircles · ProgressiveBlur
Playground
<GlareHover duration="650ms">...</GlareHover>