Package Exports

animated-backgrounds
animated-backgrounds/dist/index.esm.js
animated-backgrounds/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (animated-backgrounds) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Animated Backgrounds

License npm GitHub stars

🎨 A feature-rich React package for stunning animated backgrounds with advanced controls, themes, and interactivity.

🌟 New Features in v2.0

🎮 Interactive animations with mouse/touch support
🎨 Theme system with predefined color schemes
📊 Performance monitoring and adaptive optimization
🎛️ Animation controls (play/pause/speed/reset)
🏗️ Layered backgrounds for complex compositions
📱 Mobile-optimized with gesture recognition
🎯 Preset configurations for quick setup

Sample implementation https://qr-generator-murex.vercel.app/

Docs https://umerfarok.github.io/animated-backgrounds/

Installation

npm install animated-backgrounds

yarn add animated-backgrounds

🚀 Quick Start

Basic Usage

import React from 'react';
import { AnimatedBackground } from 'animated-backgrounds';

function App() {
  return (
    <div>
      <AnimatedBackground 
        animationName="starryNight" 
        blendMode="screen" 
      />
      {/* Your app content */}
    </div>
  );
}

export default App;

🎨 Theme-Based Usage

import React from 'react';
import { AnimatedBackground } from 'animated-backgrounds';

function App() {
  return (
    <div>
      {/* Gaming theme with cyberpunk colors */}
      <AnimatedBackground 
        animationName="matrixRain"
        theme="gaming"
        interactive={true}
        enablePerformanceMonitoring={true}
      />
      
      {/* Wellness theme with nature colors */}
      <AnimatedBackground 
        animationName="oceanWaves"
        theme="wellness"
        adaptivePerformance={true}
      />
    </div>
  );
}

🎮 Interactive Animations

import React from 'react';
import { AnimatedBackground } from 'animated-backgrounds';

function App() {
  return (
    <div>
      <AnimatedBackground 
        animationName="particleNetwork"
        interactive={true}
        interactionConfig={{
          effect: 'attract',     // 'attract', 'repel', 'follow', 'burst'
          strength: 0.8,         // 0-1
          radius: 150,           // pixels
          continuous: true       // keep effect after mouse leaves
        }}
      />
    </div>
  );
}

🏗️ Layered Backgrounds

import React from 'react';
import { LayeredBackground } from 'animated-backgrounds';

function App() {
  const layers = [
    { 
      animation: 'starryNight', 
      opacity: 0.7, 
      blendMode: 'normal',
      speed: 0.5 
    },
    { 
      animation: 'particleNetwork', 
      opacity: 0.3, 
      blendMode: 'screen',
      speed: 1.2 
    },
    { 
      animation: 'cosmicDust', 
      opacity: 0.5, 
      blendMode: 'overlay',
      speed: 0.8 
    }
  ];

  return (
    <div>
      <LayeredBackground layers={layers} />
      {/* Your content */}
    </div>
  );
}

🎛️ Animation Controls

import React from 'react';
import { AnimatedBackground, useAnimationControls } from 'animated-backgrounds';

function App() {
  const controls = useAnimationControls({
    initialSpeed: 1,
    autoPlay: true
  });

  return (
    <div>
      <AnimatedBackground 
        animationName="galaxySpiral"
        animationControls={controls}
      />
      
      <div className="controls">
        <button onClick={controls.play}>Play</button>
        <button onClick={controls.pause}>Pause</button>
        <button onClick={controls.reset}>Reset</button>
        <button onClick={() => controls.setSpeed(0.5)}>Slow</button>
        <button onClick={() => controls.setSpeed(2.0)}>Fast</button>
      </div>
    </div>
  );
}

📊 Performance Monitoring

import React from 'react';
import { AnimatedBackground, usePerformanceMonitor } from 'animated-backgrounds';

function App() {
  const performance = usePerformanceMonitor({
    warningThreshold: 30,
    autoOptimize: true
  });

  return (
    <div>
      <AnimatedBackground 
        animationName="electricStorm"
        enablePerformanceMonitoring={true}
        adaptivePerformance={true}
      />
      
      {/* Performance Display */}
      <div className="performance-info">
        <p>FPS: {performance?.fps}</p>
        <p>Performance: {performance?.performanceLevel}</p>
        {performance?.warnings.map((warning, i) => (
          <p key={i} className="warning">{warning}</p>
        ))}
      </div>
    </div>
  );
}

🎨 Available Themes

// Available preset themes
const themes = [
  'gaming',      // Cyberpunk colors, high intensity
  'portfolio',   // Monochrome, professional
  'landing',     // Sunset colors, medium intensity
  'presentation', // Space colors, low intensity
  'wellness',    // Nature colors, calming
  'party'        // Neon colors, high energy
];

<AnimatedBackground animationName="neonPulse" theme="gaming" />

🎯 Preset Configurations

// Quick setup with presets
<AnimatedBackground preset="gaming" />
<AnimatedBackground preset="portfolio" />
<AnimatedBackground preset="landing" />

📱 Mobile & Touch Support

import React from 'react';
import { AnimatedBackground } from 'animated-backgrounds';

function App() {
  return (
    <div>
      <AnimatedBackground 
        animationName="fireflyForest"
        interactive={true}
        interactionConfig={{
          effect: 'follow',
          strength: 0.6,
          radius: 100
        }}
        // Automatically optimizes for mobile
        adaptivePerformance={true}
      />
    </div>
  );
}

🛠️ Custom Theme Creation

import { themeManager, COLOR_SCHEMES } from 'animated-backgrounds';

// Create custom theme
themeManager.createCustomTheme('myTheme', {
  name: 'My Custom Theme',
  colorScheme: {
    name: 'Custom',
    colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'],
    gradients: {
      primary: ['#ff6b6b', '#4ecdc4'],
      secondary: ['#45b7d1', '#96ceb4'],
      accent: ['#96ceb4', '#feca57']
    },
    effects: {
      glow: '#4ecdc4',
      highlight: '#feca57',
      shadow: '#2c3e50'
    }
  },
  animationSettings: {
    intensity: 'medium',
    speed: 1.0,
    particleCount: 100,
    glowEffect: true
  },
  recommendedAnimations: ['particleNetwork', 'cosmicDust']
});

// Use custom theme
<AnimatedBackground animationName="particleNetwork" theme="myTheme" />

🎤 Animated Text Components

import React from 'react';
import { AnimatedText } from 'animated-backgrounds';

function App() {
  return (
    <div>
      {/* Basic text animations */}
      <AnimatedText 
        text="Hello World!"
        effect="typewriter"
        config={{
          speed: 100,
          loop: true,
          delay: 1000
        }}
      />

      <AnimatedText 
        text="Rainbow Text"
        effect="rainbow"
      />

      <AnimatedText 
        text="Glitch Effect"
        effect="glitch"
      />

      {/* Bounce effect */}
      <AnimatedText 
        text="Bouncing Letters"
        effect="bounce"
        styles={{
          fontSize: '2em',
          fontWeight: 'bold'
        }}
      />
    </div>
  );
}

🎪 Advanced Examples

Multi-layered Gaming Background

const gamingLayers = [
  { animation: 'matrixRain', opacity: 0.8, blendMode: 'normal' },
  { animation: 'electricStorm', opacity: 0.4, blendMode: 'screen' },
  { animation: 'neonPulse', opacity: 0.3, blendMode: 'overlay' }
];

<LayeredBackground 
  layers={gamingLayers}
  enablePerformanceMonitoring={true}
/>

Interactive Portfolio Background

<AnimatedBackground 
  animationName="geometricShapes"
  theme="portfolio"
  interactive={true}
  interactionConfig={{
    effect: 'attract',
    strength: 0.3,
    radius: 200,
    continuous: false
  }}
  adaptivePerformance={true}
/>

Usage in Next.js with SSR

When using in Next.js projects with server-side rendering (SSR), add the "use client" directive:

"use client";

import React from 'react';
import { AnimatedBackground } from 'animated-backgrounds';

const Home = () => {
  return (
    <div>
      <h1>Welcome to Next.js with Animated Backgrounds</h1>
      <AnimatedBackground 
        animationName="starryNight" 
        theme="presentation"
        adaptivePerformance={true}
      />
    </div>
  );
};  

export default Home;

🎨 Available Animations

The package includes 20+ stunning animations:

Space & Cosmic:

starryNight - Twinkling stars
galaxySpiral - Rotating galaxy
cosmicDust - Floating space particles
quantumField - Quantum physics inspired

Nature & Elements:

oceanWaves - Flowing water simulation
autumnLeaves - Falling leaves
fireflies - Glowing insects
snowFall - Winter snow effect

Technology & Cyber:

matrixRain - Matrix-style code rain
electricStorm - Lightning effects
neonPulse - Pulsing neon lights
particleNetwork - Connected particles

Abstract & Artistic:

geometricShapes - Moving geometric forms
rainbowWaves - Colorful wave patterns
gradientWave - Smooth gradient transitions
floatingBubbles - Bubble simulation

Special Effects:

auroraBorealis - Northern lights
neuralNetwork - Brain-like connections
dnaHelix - DNA strand animation
fallingFoodFiesta - Fun food particles

🎯 Blend Modes

Enhance your backgrounds with CSS blend modes:

<AnimatedBackground 
  animationName="starryNight" 
  blendMode="screen"     // Creates light, glowing effects
/>

<AnimatedBackground 
  animationName="particleNetwork" 
  blendMode="multiply"   // Creates darker, atmospheric effects
/>

Available blend modes: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity

🚀 Performance Tips

Use adaptive performance for automatic optimization
Enable performance monitoring to track FPS
Choose appropriate themes for your use case
Use lower particle counts on mobile devices
Consider layered backgrounds for complex effects

// Optimized for performance
<AnimatedBackground 
  animationName="starryNight"
  adaptivePerformance={true}
  enablePerformanceMonitoring={true}
  fps={30} // Lower FPS for better performance
/>

📚 API Reference

AnimatedBackground Props

Prop	Type	Default	Description
`animationName`	string	required	Name of the animation
`theme`	string	undefined	Theme to apply
`interactive`	boolean	false	Enable interactions
`fps`	number	60	Frames per second
`blendMode`	string	'normal'	CSS blend mode
`adaptivePerformance`	boolean	false	Auto-optimize performance

Theme System

import { themeManager, THEMES, COLOR_SCHEMES } from 'animated-backgrounds';

// Available themes
console.log(Object.keys(THEMES));

// Available color schemes  
console.log(Object.keys(COLOR_SCHEMES));

// Apply theme
themeManager.applyTheme('gaming');

Performance Monitoring

import { usePerformanceMonitor } from 'animated-backgrounds';

const perf = usePerformanceMonitor({
  sampleSize: 60,
  warningThreshold: 30
});

// Access performance data
console.log(perf.fps, perf.avgFps, perf.performanceLevel);

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see the LICENSE file for details.

🌟 Show Your Support

If you like this project, please give it a ⭐ on GitHub!

Made with ❤️ by Umer Farooq