animated-color-trail/animated-color-trail.js

A JavaScript package that creates a visually stunning trail effect that follows the mouse cursor.

// animated-color-trail.js
const createMouseTrailEffect = require('mouse-trail-effect');
const {
  generateMonochromaticPalette,
  generateComplementaryPalette,
  generateSplitComplementaryPalette,
  generateTriadicPalette,
  generateTetradicPalette,
  generateAnalogousPalette,
  generateShadesPalette,
  generateTintsPalette,
} = require('color-palette-creator');

function createAnimatedColorTrail(options = {}) {
  const {
    trailLength = 10,
    trailSize = 20,
    trailDuration = 500,
    colorPalette = 'monochromatic',
    colorCount = 5,
    colorSeed = null,
    trailEffect = 'gradient',
    trailShape = 'circle',
    fps = 60,
    easing = 'easeInOutQuad',
  } = options;

  // Generate color palette based on the selected option
  let colors;
  switch (colorPalette) {
    case 'monochromatic':
      colors = generateMonochromaticPalette({ format: 'hex', count: colorCount, seed: colorSeed });
      break;
    case 'complementary':
      colors = generateComplementaryPalette({ format: 'hex', seed: colorSeed });
      break;
    case 'splitComplementary':
      colors = generateSplitComplementaryPalette({ format: 'hex', seed: colorSeed });
      break;
    case 'triadic':
      colors = generateTriadicPalette({ format: 'hex', seed: colorSeed });
      break;
    case 'tetradic':
      colors = generateTetradicPalette({ format: 'hex', seed: colorSeed });
      break;
    case 'analogous':
      colors = generateAnalogousPalette({ format: 'hex', seed: colorSeed });
      break;
    case 'shades':
      colors = generateShadesPalette({ format: 'hex', count: colorCount, seed: colorSeed });
      break;
    case 'tints':
      colors = generateTintsPalette({ format: 'hex', count: colorCount, seed: colorSeed });
      break;
    default:
      colors = generateMonochromaticPalette({ format: 'hex', count: colorCount, seed: colorSeed });
  }

  // Create mouse trail effect with the generated color palette
  const mouseTrailEffect = createMouseTrailEffect({
    trailLength,
    trailSize,
    trailDuration,
    colorFormat: 'hex',
    colorCount: colors.length,
    colorSeed: colors,
    trailEffect,
    trailShape,
    fps,
    easing,
  });

  // Expose additional methods for user control
  function setTrailLength(length) {
    mouseTrailEffect.setTrailLength(length);
  }

  function setTrailSize(size) {
    mouseTrailEffect.setTrailSize(size);
  }

  function setTrailDuration(duration) {
    mouseTrailEffect.setTrailDuration(duration);
  }

  function setTrailEffect(effect) {
    mouseTrailEffect.setTrailEffect(effect);
  }

  function setTrailShape(shape) {
    mouseTrailEffect.setTrailShape(shape);
  }

  function setFps(fps) {
    mouseTrailEffect.setFps(fps);
  }

  function setEasing(easing) {
    mouseTrailEffect.setEasing(easing);
  }

  return {
    start: mouseTrailEffect.start,
    stop: mouseTrailEffect.stop,
    setTrailLength,
    setTrailSize,
    setTrailDuration,
    setTrailEffect,
    setTrailShape,
    setFps,
    setEasing,
  };
}

module.exports = createAnimatedColorTrail;