animated-color-trail
Version:
A JavaScript package that creates a visually stunning trail effect that follows the mouse cursor.
69 lines (51 loc) • 3.08 kB
Markdown
# Animated Color Trail
Animated Color Trail is a JavaScript package that creates a visually stunning trail effect that follows the mouse cursor. It combines the functionality of the `mouse-trail-effect` and `color-palette-creator` packages to generate a colorful and animated trail based on various color palette options.
## Installation
You can install the package using npm:
```
npm install animated-color-trail
```
## Usage
To use the Animated Color Trail package, you can import it into your JavaScript file and create an instance of the trail effect:
```javascript
const createAnimatedColorTrail = require('animated-color-trail');
const options = {
trailLength: 15,
trailSize: 30,
trailDuration: 600,
colorPalette: 'complementary',
colorCount: 7,
colorSeed: 'myCustomSeed',
trailEffect: 'sparkle',
trailShape: 'square',
fps: 30,
easing: 'easeOutQuart',
};
const colorTrail = createAnimatedColorTrail(options);
colorTrail.start();
```
## Options
The `createAnimatedColorTrail` function accepts an optional `options` object with the following properties:
- `trailLength` (number, default: 10): The number of trail elements.
- `trailSize` (number, default: 20): The size of each trail element in pixels.
- `trailDuration` (number, default: 500): The duration of the trail animation in milliseconds.
- `colorPalette` (string, default: 'monochromatic'): The color palette to use for the trail. Available options are: 'monochromatic', 'complementary', 'splitComplementary', 'triadic', 'tetradic', 'analogous', 'shades', 'tints'.
- `colorCount` (number, default: 5): The number of colors to generate in the color palette.
- `colorSeed` (string, default: null): A custom seed value for generating consistent color palettes.
- `trailEffect` (string, default: 'gradient'): The visual effect of the trail. Available options are: 'gradient', 'sparkle'.
- `trailShape` (string, default: 'circle'): The shape of each trail element. Available options are: 'circle', 'square'.
- `fps` (number, default: 60): The frames per second of the trail animation.
- `easing` (string, default: 'easeInOutQuad'): The easing function for the trail animation. Available options are: 'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart'.
## Methods
The `createAnimatedColorTrail` function returns an object with the following methods:
- `start()`: Starts the animated color trail effect.
- `stop()`: Stops the animated color trail effect.
- `setTrailLength(length)`: Sets the trail length dynamically.
- `setTrailSize(size)`: Sets the trail size dynamically.
- `setTrailDuration(duration)`: Sets the trail duration dynamically.
- `setTrailEffect(effect)`: Sets the trail effect dynamically.
- `setTrailShape(shape)`: Sets the trail shape dynamically.
- `setFps(fps)`: Sets the frames per second dynamically.
- `setEasing(easing)`: Sets the easing function dynamically.
## License
This package is released under the [MIT License](https://opensource.org/licenses/MIT).