A feature-rich React package for stunning animated backgrounds with interactive controls, themes, performance monitoring, and layered compositions.
npm install animated-backgroundsbash
npm install animated-backgrounds
`
or
`bash
yarn add animated-backgrounds
`
š Quick Start
$3
`jsx
import React from 'react';
import { AnimatedBackground } from 'animated-backgrounds';
function App() {
return (
animationName="starryNight"
blendMode="screen"
/>
{/ Your app content /}
);
}
export default App;
`
$3
`jsx
import React from 'react';
import { AnimatedBackground } from 'animated-backgrounds';
function App() {
return (
{/ Gaming theme with cyberpunk colors /}
animationName="matrixRain"
theme="gaming"
interactive={true}
enablePerformanceMonitoring={true}
/>
{/ Wellness theme with nature colors /}
animationName="oceanWaves"
theme="wellness"
adaptivePerformance={true}
/>
);
}
`
$3
`jsx
import React from 'react';
import { AnimatedBackground } from 'animated-backgrounds';
function App() {
return (
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
}}
/>
);
}
`
$3
`jsx
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 (
{/ Your content /}
);
}
`
$3
`jsx
import React from 'react';
import { AnimatedBackground, useAnimationControls } from 'animated-backgrounds';
function App() {
const controls = useAnimationControls({
initialSpeed: 1,
autoPlay: true
});
return (
animationName="galaxySpiral"
animationControls={controls}
/>
);
}
`
$3
`jsx
import React from 'react';
import { AnimatedBackground, usePerformanceMonitor } from 'animated-backgrounds';
function App() {
const performance = usePerformanceMonitor({
warningThreshold: 30,
autoOptimize: true
});
return (
animationName="electricStorm"
enablePerformanceMonitoring={true}
adaptivePerformance={true}
/>
{/ Performance Display /}
FPS: {performance?.fps}
Performance: {performance?.performanceLevel}
{performance?.warnings.map((warning, i) => (
{warning}
))}
);
}
`
šØ Available Themes
`jsx
// 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
];
`
šÆ Preset Configurations
`jsx
// Quick setup with presets
`
š± Mobile & Touch Support
`jsx
import React from 'react';
import { AnimatedBackground } from 'animated-backgrounds';
function App() {
return (
animationName="fireflyForest"
interactive={true}
interactionConfig={{
effect: 'follow',
strength: 0.6,
radius: 100
}}
// Automatically optimizes for mobile
adaptivePerformance={true}
/>
);
}
`
š ļø Custom Theme Creation
`jsx
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
`
š¤ Animated Text Components
`jsx
import React from 'react';
import { AnimatedText } from 'animated-backgrounds';
function App() {
return (
{/ Basic text animations /}
text="Hello World!"
effect="typewriter"
config={{
speed: 100,
loop: true,
delay: 1000
}}
/>
text="Rainbow Text"
effect="rainbow"
/>
text="Glitch Effect"
effect="glitch"
/>
{/ Bounce effect /}
text="Bouncing Letters"
effect="bounce"
styles={{
fontSize: '2em',
fontWeight: 'bold'
}}
/>
);
}
`
šŖ Advanced Examples
$3
`jsx
const gamingLayers = [
{ animation: 'matrixRain', opacity: 0.8, blendMode: 'normal' },
{ animation: 'electricStorm', opacity: 0.4, blendMode: 'screen' },
{ animation: 'neonPulse', opacity: 0.3, blendMode: 'overlay' }
];
layers={gamingLayers}
enablePerformanceMonitoring={true}
/>
`
$3
`jsx
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:
`jsx
"use client";
import React from 'react';
import { AnimatedBackground } from 'animated-backgrounds';
const Home = () => {
return (
Welcome to Next.js with Animated Backgrounds
animationName="starryNight"
theme="presentation"
adaptivePerformance={true}
/>
);
};
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:
`jsx
animationName="starryNight"
blendMode="screen" // Creates light, glowing effects
/>
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
1. Use adaptive performance for automatic optimization
2. Enable performance monitoring to track FPS
3. Choose appropriate themes for your use case
4. Use lower particle counts on mobile devices
5. Consider layered backgrounds for complex effects
`jsx
// Optimized for performance
animationName="starryNight"
adaptivePerformance={true}
enablePerformanceMonitoring={true}
fps={30} // Lower FPS for better performance
/>
`
š API Reference
$3
| 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 |
$3
`jsx
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');
`
$3
`jsx
import { usePerformanceMonitor } from 'animated-backgrounds';
const perf = usePerformanceMonitor({
sampleSize: 60,
warningThreshold: 30
});
// Access performance data
console.log(perf.fps, perf.avgFps, perf.performanceLevel);
``