animated-color-trail

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:

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.