Fireworks Sim

OBS & Streamlabs Integration Guide

You can trigger fireworks automatically from your stream alerts, channel point redeems, and more! Here’s how:

Step 1: Add as a Browser Source

1. In OBS or Streamlabs, add a new Browser Source to your scene.
2. Check the "Local file" box and select this index.html file.
3. Set the Width to 1920 and Height to 1080 (or your stream's resolution).
4. You now have a transparent overlay that will show fireworks. You can toggle the menu with 'M' and hide it for your stream. Your settings (like gravity, mute, etc.) will be saved automatically.

Step 2: Triggering Fireworks (Choose one method)

Method A: URL Trigger (Easiest for most bots)

This method works by creating a separate browser source for each redeem that shows for a few seconds.

1. In your bot (Streamer.bot, Streamlabs Cloudbot, etc.), set up a Channel Point Redeem action.
2. The action should be "Show Browser Source". Point it to a new, hidden browser source.
3. In this new browser source's properties, use a URL with parameters like this:
   /path/to/your/index.html?redeem=REDEEM_ID
4. Replace REDEEM_ID with an ID from the list below. For example, to trigger a small barrage:
   /path/to/your/index.html?redeem=small_barrage
5. You can also add &amount=X to trigger it multiple times (for barrages, this multiplies the count).
6. Set your bot to hide the source after a few seconds (e.g., 10-15 seconds).

Method B: JavaScript Trigger (Advanced & More Efficient)

This method uses one main browser source and tells it what to do, avoiding reloads.

1. Use a bot that can execute JavaScript on a browser source (like Streamer.bot).
2. Have your main fireworks browser source always active (but the menu hidden).
3. In your bot's action, use the "Execute JavaScript" function on that source.
4. The command to run is:
   window.launchRedeem('REDEEM_ID', 1);
5. Replace REDEEM_ID with an ID from the list below. The second number is the amount.

Available Redeem IDs

Use these IDs for REDEEM_ID in the examples above.