Animation

Emoji Rain

Beautiful emoji animations for the web. Drop coins, mushrooms, stars, and any emoji with physics-based falling effects.

Implementation

function rain(emoji, opts = {}) {
  const { count = 30, duration = 2000, container = document.body } = opts;
  for (let i = 0; i < count; i++) {
    const el = document.createElement('span');
    el.textContent = emoji;
    el.style.cssText = `
      position: fixed; top: -40px; font-size: 24px; pointer-events: none;
      left: ${Math.random() * 100}vw; z-index: 9999;
      animation: fall ${duration}ms linear forwards;
      animation-delay: ${Math.random() * duration * 0.5}ms;
    `;
    container.appendChild(el);
    setTimeout(() => el.remove(), duration * 1.5);
  }
}

// Usage
rain('🌟');
rain('🍄', { count: 50, duration: 3000 });

Usage

Call rain() with any emoji and optional config for count, duration, and container.

Examples

Input: rain('🪙')
Output: 30 coin emojis fall from the top of the screen

Input: rain('🍄', { count: 50 })
Output: 50 mushroom emojis with physics-based animation