Browse components
Glare Hover
A glossy band of light sweeps across the card on hover or focus, like light catching foil.
Installation
npx shadcn@latest add @glint-ui/glare-hoverFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/glare-hover.json
Usage
import { GlareHover } from "@/components/ui/glare-hover";
<GlareHover className="rounded-2xl">
<Card />
</GlareHover>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Card or element to shine. |
| angle | number | -45 | Angle of the glare band in degrees. |
| color | string | "#ffffff" | Glare color. |
| opacity | number | 0.5 | Peak opacity of the glare. |
| size | number | 20 | Band width, % of the sweep. |
| duration | number | 800 | Ms for one sweep. |
| playOnce | boolean | false | Sweep only on enter; skip the return sweep on leave. |
| className | string | — | Extra classes for the root element. |