Glare Hover

A diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required.

Installation

CLI

Manual

Usage

The effect is implemented with a ::before pseudo-element: a linear-gradient tile moves from one corner to the opposite on hover. Color is parsed from hex (#rgb or #rrggbb) into rgba for the glare band.

Colors and opacity

Use color (hex glare highlight) and opacity (alpha of that highlight). background sets the container background (default #000).

Angle and size

angle is the gradient angle in degrees (default -45). size is the glare tile size as a percentage of the element (default 250), passed to background-size.

Duration

duration is the transition length in milliseconds (default 650).

playOnce

With playOnce (default false), the glare only animates while hovering: transitions are disabled until hover, so the sweep runs each time you enter the element instead of animating on first paint.

Layout

Optional width and height are merged onto the root style (string values, e.g. "100%"). You can also rely on className (e.g. w-full) and normal style / div props.

Props

GlareHover

Prop Type Default Description
children React.ReactNode — Content inside the wrapper.
className string — Classes on the root div (use rounded-*, etc.).
style CSSProperties — Merged after CSS variables and background.
background string "#000" Root background color.
color string "#ffffff" Glare highlight (hex #rgb / #rrggbb).
opacity number 0.5 Alpha for the parsed glare color.
angle number -45 Gradient angle in degrees (--gh-angle).
size number 250 Glare tile size in % (--gh-size).
duration number 650 Transition duration in ms (--gh-duration).
playOnce boolean false If true, animation runs on hover only.
width string — Optional width on the root style.
height string — Optional height on the root style.

The root forwards standard div props (onClick, data-*, etc.). The glare is drawn on ::before with z-10 above the content.

Credits