# 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

- Credit to [@chishiyac](https://github.com/chishiyac)