Glare Hover
Free
A wrapper that sweeps a band of light across its content on hover and on keyboard focus.
New release
Lantern Drift
Arcade runner · €4.99
Customize
120°
30
0.35
0.8s
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/glare-hover.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/glare-hover.tsx.
Usage
import { GlareHover } from "@/components/ui/glare-hover";
<GlareHover angle={120} className="rounded-3xl">
<GameCard />
</GlareHover>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content the light passes over. |
| angle | number | 120 | Direction of the sweep in degrees, as in a CSS linear-gradient. |
| width | number | 30 | Width of the band of light, roughly as a percentage of the element. |
| color | string | "#f4ede3" | Color of the light. |
| opacity | number | 0.35 | Strength of the light, from 0 to 1. |
| duration | number | 0.8 | Length of one sweep, in seconds. |
| playOnMount | boolean | false | Sweep once shortly after the component mounts. |
| className | string | — | Extra classes for the wrapper. Give it the same corner radius as the content. |
Dependencies: motion