# Animated Beam

An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.

## Installation

```bash
# CLI
```

## Examples

### Animated Beam Uni-Directional

```bash
# Preview
```

### Animated Beam Bi-Directional

```bash
# Preview
```

### Animated Beam Multiple Inputs

```bash
# Preview
```

### Animated Beam Multiple Outputs

```bash
# Preview
```

## Usage

```javascript
// Usage example
```

## Props

### Animated Beam

| Prop               | Type     | Default     | Description                                   |
|--------------------|----------|-------------|-----------------------------------------------|
| `className`        | `string` | `-`         | The class name for the component.            |
| `containerRef`     | `ref`    | `-`         | The container ref.                           |
| `fromRef`          | `ref`    | `-`         | The ref of the element from which the beam should start. |
| `toRef`            | `ref`    | `-`         | The ref of the element to which the beam should end. |
| `curvature`        | `number` | `0`         | The curvature of the beam.                   |
| `reverse`          | `boolean`| `false`     | Whether the beam should be reversed.         |
| `duration`         | `number` | `5`         | The duration of the beam.                    |
| `delay`            | `number` | `0`         | The delay of the beam.                       |
| `repeat`           | `number` | `Infinity`  | The number of times the beam animation should repeat. |
| `repeatDelay`      | `number` | `0`         | The delay between repeated beam animation cycles. |
| `pathColor`        | `string` | `gray`      | The color of the beam.                       |
| `pathWidth`        | `number` | `2`         | The width of the beam.                       |
| `pathOpacity`      | `number` | `0.2`       | The opacity of the beam.                     |
| `gradientStartColor`| `string` | `#ffaa40`   | The start color of the gradient.             |
| `gradientStopColor`| `string` | `#9c40ff`   | The stop color of the gradient.              |
| `startXOffset`     | `number` | `0`         | The start x offset of the beam.             |
| `startYOffset`     | `number` | `0`         | The start y offset of the beam.             |
| `endXOffset`       | `number` | `0`         | The end x offset of the beam.               |
| `endYOffset`       | `number` | `0`         | The end y offset of the beam.               |

## Credits

- Credit to [@itsarghyadas](https://twitter.com/itsarghyadas) for figuring out the foundation of this!