Glare Hover

A glare hover effect that adds a subtle shine to elements when hovered.

Pro

Popular

For teams that need more.

$49 /mo

Unlimited projects

Team collaboration

Advanced analytics

SSO (coming soon)

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/glare-hover.json

14-day free trial · No card required

Ready to get started?

Join 4,000+ teams already using our platform to ship faster.

A wrapper component that sweeps a configurable glare across its content on hover.

Name	Type	Default	Description
`children`	`Snippet`	`undefined`	`Content rendered inside the hover surface.`
`width`	`string`	`undefined`	`Optional CSS width applied to the root element.`
`height`	`string`	`undefined`	`Optional CSS height applied to the root element.`
`background`	`string`	`"#000"`	`Background behind the glare animation.`
`color`	`#${string}`	`"#ffffff"`	`Hex color used for the glare highlight.`
`opacity`	`number`	`0.5`	`Opacity of the glare color after conversion to RGBA.`
`angle`	`number`	`-45`	`Angle of the animated glare gradient in degrees.`
`size`	`number`	`250`	`Background-size percentage used for the glare sweep.`
`duration`	`number`	`650`	`Hover transition duration in milliseconds.`
`playOnce`	`boolean`	`false`	`Runs the glare only on hover instead of maintaining a reusable transition state.`
`class`	`string`	`""`	`Additional classes merged onto the root div.`
`style`	`string`	`""`	`Inline styles appended to the generated CSS variables.`