UNPKG

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
# 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).