A small Web Component shows a before-after comparison. 🌓
## Demo
Go to the [Home page](https://9am.github.io/before-after/).
## Usage
Include via CDN(e.g. unpkg) or Download a copy
```html
BEFORE
AFTER
```
Or import the ESM version
```html
```
Or install via npm
```sh
npm install @9am/before-after
```
## Documentation
### Attributes
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `varient` | linear \| radial \| conic repeating-linear \| repeating-radial \| repeating-conic | `linear` | The varient. |
| `orient` | horizontal \| vertical | `horizontal` | The orientation. |
| `value` | number | `50` | The position of the thumb bar. (0-100) |
### CSS Properties
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `--position` | css gradient params before `` | linear: `to left` radial: `circle at center` conic: `at center` | The control for how the mask behaves. |
| `--repeat` | number | `6` | The repeat times for `repeating-` varients. |
| `--thumb-size` | css size | `1px` | The thumb size. |
| `--thumb-color` | css color | `white` | The thumb color. |
## License
[MIT](LICENSE)
