Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
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.
Use color (hex glare highlight) and opacity (alpha of that highlight). background sets the container background (default #000).
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 is the transition length in milliseconds (default 650).
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.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content inside the wrapper. |
className | string | — | Classes on the root div (use rounded-*, overflow-hidden, 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 (no transition until hover). |
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.