🎉 Emoji Wow Background

A highly customizable animated emoji background component with individual particle randomization, theme systems, and performance optimization. Perfect for adding delightful animated backgrounds to your web applications.

✨ Features

• 🎲 Individual Particle Randomization - Each emoji gets unique properties
• 🎨 Multiple Theme Collections - Space, tech, minimal, and custom themes
• ⚡ Performance Optimized - Efficient spawning and cleanup systems
• 🎯 Directional Movement - Smart emoji orientation (rockets point forward!)
• 📱 Responsive Design - Adapts to any container size
• 🔧 Highly Configurable - 13+ customizable properties
• 🚀 TypeScript Ready - Full type definitions included
• 🎪 Framework Agnostic Core - Use with any framework

🚀 Quick Start

Installation

npm install emoji-wow-background

Basic Usage (Svelte)

<script>
  import { EmojiWowBackground } from 'emoji-wow-background/src/svelte';
</script>

<div class="relative h-screen bg-gray-900">
  <EmojiWowBackground 
    theme="space"
    autoStart={true}
    totalEmojis={20}
  />
  <div class="relative z-10">
    <h1>Your content here</h1>
  </div>
</div>

🎛️ Configuration Options

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | opacity | number \| OpacityPreset | 12 | Background opacity (0-100) or preset | | totalEmojis | number \| CountPreset | 15 | Number of particles or preset | | speed | number \| SpeedPreset | 50 | Animation speed (1-100) or preset | | theme | ThemeType \| ThemeType[] | 'space' | Theme(s) to use | | emojiSize | number \| SizePreset | 50 | Emoji size (1-100) or preset | | rotation | number \| RotationPreset | 50 | Rotation amount (0-100) or preset | | customEmojis | string[] | [] | Custom emoji array | | autoStart | boolean | false | Start animation on mount | | maxRandomSpeed | number | 35 | Max speed when random | | maxRandomSize | number | 100 | Max size when random | | noRotateEmojis | string[] | ['🚀'] | Emojis that point in travel direction | | rotateDirection | RotateDirectionPreset | 'random' | Rotation direction | | initialRotations | InitialRotation[] | [{emoji: '🚀', rotation: 45}] | Initial rotation offsets |

Presets

Speed Presets

• 'slower' (10) - Very slow movement
• 'slow' (25) - Slow movement
• 'normal' (50) - Normal speed
• 'fast' (75) - Fast movement
• 'faster' (90) - Very fast movement
• 'random' - Individual random speeds

Size Presets

• 'tiny' (15) - Very small emojis
• 'small' (35) - Small emojis
• 'normal' (50) - Normal size
• 'large' (70) - Large emojis
• 'huge' (90) - Very large emojis
• 'random' - Individual random sizes

Theme Collections

• 'space' - 🚀✨🤖⭐🌟💫🛸⚡🔮💎🎯🔥
• 'tech' - 💻📱⚙️🔌🖥️⌨️💾🔋📡📶🔒⚡📲📷📺
• 'minimal' - ·→○◇*~▲▼◆●■□△▽◯
• ['space', 'tech'] - Combine multiple themes
• 'random' - All themes combined

🎨 Usage Examples

Static Configuration

<EmojiWowBackground 
  opacity={20}
  totalEmojis={15}
  speed="normal"
  theme="space"
  emojiSize="large"
  rotation="gentle"
  autoStart={true}
/>

Dynamic Randomization

<EmojiWowBackground 
  opacity="random"
  totalEmojis={25}
  speed="random"
  theme={['space', 'tech']}
  emojiSize="random"
  rotation="random"
  autoStart={true}
/>

Custom Emojis

<EmojiWowBackground 
  customEmojis={['🎉', '🎊', '🎈', '🎁', '🎂']}
  totalEmojis={20}
  speed="fast"
  autoStart={true}
/>

Manual Control

<script>
  let background;
  
  function startAnimation() {
    background.start();
  }
  
  function stopAnimation() {
    background.stop();
  }
</script>

<EmojiWowBackground 
  bind:this={background}
  theme="tech"
  totalEmojis={30}
/>

<button on:click={startAnimation}>Start</button>
<button on:click={stopAnimation}>Stop</button>

🏗️ Framework Integration

React (Coming Soon)

import { EmojiWowBackground } from 'emoji-wow-background/react';

function App() {
  return (
    <div className="relative h-screen">
      <EmojiWowBackground 
        theme="space"
        autoStart={true}
        totalEmojis={20}
      />
    </div>
  );
}

Vue (Coming Soon)

<template>
  <div class="relative h-screen">
    <EmojiWowBackground 
      theme="space"
      :auto-start="true"
      :total-emojis="20"
    />
  </div>
</template>

<script>
import { EmojiWowBackground } from 'emoji-wow-background/vue';
export default {
  components: { EmojiWowBackground }
}
</script>

Core Engine (Framework Agnostic)

import { EmojiWowBackgroundEngine } from 'emoji-wow-background';

const engine = new EmojiWowBackgroundEngine({
  theme: 'space',
  totalEmojis: 20,
  speed: 'normal'
});

engine.updateContainerSize(800, 600);
engine.start();

// Get particles for custom rendering
const particles = engine.getParticles();

🎯 Advanced Features

Directional Emojis

Some emojis (like rockets 🚀) automatically point in their travel direction:

<EmojiWowBackground 
  theme="space"
  noRotateEmojis={['🚀', '🛸', '⚡']}
  initialRotations={[
    { emoji: '🚀', rotation: 45 },
    { emoji: '🛸', rotation: 0 }
  ]}
/>

Performance Optimization

For multiple instances, use manual control:

<script>
  import { onMount } from 'svelte';
  
  let heroBackground, featuresBackground;
  let heroVisible = false, featuresVisible = false;
  
  // Use Intersection Observer to control animations
  onMount(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.target.id === 'hero') {
          heroVisible = entry.isIntersecting;
          if (heroVisible) heroBackground?.start();
          else heroBackground?.stop();
        }
      });
    });
    
    observer.observe(document.getElementById('hero'));
  });
</script>

<section id="hero">
  <EmojiWowBackground bind:this={heroBackground} theme="space" />
</section>

🛠️ Development

Building from Source

git clone https://github.com/morphist/emoji-wow-background.git
cd emoji-wow-background
npm install
npm run build

Running Demo

npm run demo

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🙏 Credits

Created by Norbu Dorje - Building digital sovereignty tools for the future.

Made with ❤️ for the web development community