⭐
⭐ Star this repo on GitHub

🎨 SeasonalFX CDN Examples

1️⃣ Basic Usage - Winter Snow

The simplest way to add seasonal effects to your page

❄️ Winter Effect

<script src="https://unpkg.com/seasonalfx@latest/dist/index.umd.min.js"></script>
<script>
  const fx = new SeasonalFX.SeasonalFX({
    target: 'canvas1',
    season: 'winter',
    intensity: 'moderate'
  });
  fx.start();
</script>

2️⃣ Interactive Season Switcher

Switch between different seasons dynamically

🌸 Spring Effect

function changeSeason(season) {
  fx.setSeason(season);
}

3️⃣ Custom Image Particles

Use your own images as particles (SVG, PNG, or any image URL)

🎨 Custom Images

fx.updateCustomization({
  customImage: 'data:image/svg+xml,...',
  imageMode: 'contain' // 'contain', 'cover', or 'fill'
});

4️⃣ Intensity Levels

Control the amount of particles from minimal to bold

⚡ Adjust Intensity

fx.setIntensity('moderate'); // 'minimal' | 'subtle' | 'moderate' | 'bold'

5️⃣ Auto-Detect Season from Date

Automatically use the appropriate season based on current date

Loading...

Current Season:
Based on: 
const season = SeasonalFX.detectSeasonFromDate(new Date());
const fx = new SeasonalFX.SeasonalFX({ target: 'canvas', season });

6️⃣ Custom Colors

Override default colors with your brand colors

🎨 Brand Colors

fx.updateCustomization({
  customColor: '#ec4899'
});

7️⃣ Event Confetti Burst

Perfect for celebrations and special moments

🎉 Click to Celebrate!

const fx = new SeasonalFX.SeasonalFX({
  target: 'canvas',
  season: 'event',
  intensity: 'bold'
});
fx.start();