Members

# inner constant AnimatedBackground

Main AnimatedBackground component that renders stunning animated backgrounds with support for themes, interactions, performance monitoring, and controls.

Version:

2.0.0

Since:

1.0.0

View Source index.js, line 141

Examples

// Basic usage
<AnimatedBackground animationName="starryNight" />

// With theme and interactivity
<AnimatedBackground 
  animationName="particleNetwork"
  theme="gaming"
  interactive={true}
  interactionConfig={{
    effect: 'attract',
    strength: 0.8,
    radius: 150
  }}
/>

// With performance monitoring and controls
function App() {
  const controls = useAnimationControls();
  
  return (
    <AnimatedBackground 
      animationName="matrixRain"
      theme="cyberpunk"
      animationControls={controls}
      enablePerformanceMonitoring={true}
      adaptivePerformance={true}
    />
  );
}

// Mobile-optimized setup
<AnimatedBackground 
  animationName="floatingBubbles"
  theme="wellness"
  interactive={true}
  interactionConfig={{
    effect: 'follow',
    strength: 0.6,
    multiTouch: true
  }}
  adaptivePerformance={true}
  fps={30}
/>

Type Definitions

Type: Object

# AnimationControls

Properties:

Name	Type	Description
`isPlaying`	`boolean`	Whether animation is currently playing
`speed`	`number`	Current animation speed multiplier
`play`	`function`	Start/resume animation
`pause`	`function`	Pause animation
`reset`	`function`	Reset animation to initial state
`setSpeed`	`function`	Set animation speed (0.1x to 5.0x)
`toggle`	`function`	Toggle play/pause state

View Source index.js, line 57

Type: Object

# InteractionConfig

Properties:

Name	Type	Attributes	Default	Description
`effect`	`'attract'` \| `'repel'` \| `'follow'` \| `'burst'` \| `'gravity'`	<optional>	'attract'	Type of interaction effect
`strength`	`number`	<optional>	0.5	Interaction strength (0.1 to 2.0)
`radius`	`number`	<optional>	100	Interaction radius in pixels
`continuous`	`boolean`	<optional>	true	Whether interaction continues after mouse leaves
`multiTouch`	`boolean`	<optional>	false	Enable multi-touch support for mobile

View Source index.js, line 32

Example

// Basic interaction configuration
const interactionConfig = {
  effect: 'attract',
  strength: 0.8,
  radius: 150,
  continuous: true
};

// Mobile-optimized configuration
const mobileConfig = {
  effect: 'follow',
  strength: 0.6,
  radius: 100,
  multiTouch: true
};