### Install Fireworks-JS Core and Framework Wrappers

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Instructions for installing the core fireworks-js library or its framework-specific packages using npm, yarn, or pnpm.

```bash
# Vanilla JS
npm install fireworks-js

# Framework-specific packages
npm install @fireworks-js/react
npm install @fireworks-js/preact
npm install @fireworks-js/vue
npm install @fireworks-js/svelte
npm install @fireworks-js/solid
npm install @fireworks-js/angular
npm install @fireworks-js/web
```

--------------------------------

### Start Fireworks Animation Loop

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Illustrates how to initiate the fireworks animation using the `start()` method. This method enables the animation frame loop, resize observer, and mouse handlers. It also shows how to check if the animation is currently running.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container, { opacity: 0.5 })

// Start continuous fireworks animation
fireworks.start()

// Check if animation is running
console.log(fireworks.isRunning) // true
```

--------------------------------

### Install Fireworks.js with npm, yarn, or pnpm

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Installs the fireworks-js package using different package managers. This is the first step to integrate the library into your project.

```sh
npm install fireworks-js
```

```sh
yarn add fireworks-js
```

```sh
pnpm add fireworks-js
```

--------------------------------

### Install Framework-Specific Fireworks.js Packages

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Installs the Fireworks.js integration packages for various JavaScript frameworks. Choose the package that corresponds to your project's framework.

```sh
npm install @fireworks-js/react
```

```sh
npm install @fireworks-js/preact
```

```sh
npm install @fireworks-js/solid
```

```sh
npm install @fireworks-js/vue
```

```sh
npm install @fireworks-js/svelte
```

```sh
npm install @fireworks-js/angular
```

```sh
npm install @fireworks-js/web
```

--------------------------------

### Start Fireworks Animation

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Initiates the firework animation. This method should be called after the Fireworks instance has been created and configured.

```javascript
fireworks.start();
```

--------------------------------

### Basic Fireworks.js Usage (Vanilla JS)

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Demonstrates the basic usage of Fireworks.js in a vanilla JavaScript project. It involves importing the Fireworks class, selecting a container element, and starting the animation.

```js
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('.container')
const fireworks = new Fireworks(container, { /* options */ })
fireworks.start()
```

--------------------------------

### Get Current Fireworks Options

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Retrieves the current configuration options of the Fireworks.js instance. This can be useful for inspecting or logging the active settings.

```javascript
const currentOptions = fireworks.currentOptions;
```

--------------------------------

### Use Fireworks.js via CDN

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Includes the fireworks-js library using CDN links from jsDelivr or UNPKG. After including the script, you can instantiate and start the fireworks effect.

```html
<!-- jsDelivr  -->
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>

<!-- UNPKG -->
<script src="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script>

<!-- Usage -->
<script>
  const container = document.querySelector('.fireworks')
  const fireworks = new Fireworks.default(container)
  fireworks.start()
</script>
```

--------------------------------

### Basic Vanilla JavaScript Usage of Fireworks-JS

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Demonstrates how to create and start a fireworks animation using the core fireworks-js library in vanilla JavaScript. It includes configuration options for appearance and behavior.

```javascript
import { Fireworks } from 'fireworks-js'

// Get or create a container element
const container = document.querySelector('#fireworks-container')

// Create fireworks instance with options
const fireworks = new Fireworks(container, {
  autoresize: true,
  opacity: 0.5,
  acceleration: 1.05,
  friction: 0.97,
  gravity: 1.5,
  particles: 50,
  traceLength: 3,
  traceSpeed: 10,
  explosion: 5,
  intensity: 30,
  flickering: 50,
  lineStyle: 'round',
  hue: {
    min: 0,
    max: 360
  },
  delay: {
    min: 30,
    max: 60
  },
  rocketsPoint: {
    min: 50,
    max: 50
  },
  lineWidth: {
    explosion: { min: 1, max: 3 },
    trace: { min: 1, max: 2 }
  },
  brightness: {
    min: 50,
    max: 80
  },
  decay: {
    min: 0.015,
    max: 0.03
  },
  mouse: {
    click: false,
    move: false,
    max: 1
  },
  boundaries: {
    width: container.clientWidth,
    height: container.clientHeight
  }
})

// Start the fireworks animation
fireworks.start()
```

--------------------------------

### Install @fireworks-js/svelte Package

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/packages/svelte/README.md

This command installs the necessary package for using Fireworks JS within a Svelte project. It uses npm as the package manager.

```sh
npm install @fireworks-js/svelte
```

--------------------------------

### currentOptions - Get Current Configuration

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Getter property that returns the current fireworks configuration options object.

```APIDOC
## currentOptions

### Description
Getter property that returns the current fireworks configuration options object.

### Method
`get currentOptions(): object`

### Endpoint
N/A (Instance property)

### Parameters
None

### Request Example
```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container, {
  opacity: 0.7,
  particles: 75
})

// Access current configuration
const options = fireworks.currentOptions
console.log('Opacity:', options.opacity)       // 0.7
console.log('Particles:', options.particles)   // 75
console.log('Gravity:', options.gravity)       // 1.5 (default)
```

### Response
#### Success Response (object)
- **currentOptions** (object) - The current configuration options of the fireworks instance.
```

--------------------------------

### Svelte Component for Fireworks Animation

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Implements a Svelte component for displaying fireworks. It allows for direct access to the fireworks instance via bind:this, enabling control over starting, stopping, and launching fireworks. Dependencies include '@fireworks-js/svelte'.

```svelte
<script lang="ts">
  import { Fireworks, type FireworksOptions } from '@fireworks-js/svelte'
  import { onMount } from 'svelte'

  let fw: Fireworks
  let mounted = true
  let options: FireworksOptions = {
    opacity: 0.5,
    particles: 50,
    hue: { min: 0, max: 360 }
  }

  function toggleFireworks() {
    const fireworks = fw.fireworksInstance()
    if (fireworks.isRunning) {
      fireworks.waitStop()
    } else {
      fireworks.start()
    }
  }

  function launchFireworks() {
    const fireworks = fw.fireworksInstance()
    fireworks.launch(3)
  }

  onMount(() => {
    const fireworks = fw.fireworksInstance()
    fireworks.start()
  })
</script>

<main>
  <div class="buttons">
    <button on:click={() => (mounted = !mounted)}>
      {mounted ? 'Mounted' : 'Unmounted'}
    </button>
    <button on:click={toggleFireworks}>Toggle</button>
    <button on:click={launchFireworks}>Launch 3</button>
  </div>
  {#if mounted}
    <Fireworks bind:this={fw} {options} class="fireworks" />
  {/if}
</main>

<style>
  :global(.fireworks) {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #000;
  }

  .buttons {
    display: flex;
    gap: 4px;
    position: absolute;
    z-index: 1;
  }
</style>
```

--------------------------------

### launch(count?) - Launch Fireworks

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Launches a specific number of fireworks on demand. If the animation is not running, it will automatically start and stop after the launched fireworks complete. Default count is 1.

```APIDOC
## launch(count?)

### Description
Launch a specific number of fireworks on demand. If the animation is not running, it will automatically start and stop after the launched fireworks complete. Default count is 1.

### Method
`launch(count?: number)`

### Endpoint
N/A (Instance method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container, { autoresize: true })

// Launch single firework
fireworks.launch()

// Launch multiple fireworks at once
fireworks.launch(5)

// Launch fireworks on button click
document.querySelector('#launch-btn').addEventListener('click', () => {
  const count = parseInt(document.querySelector('#count-input').value) || 1
  fireworks.launch(count)
})
```

### Response
#### Success Response (void)
This method does not return a value.

#### Response Example
N/A
```

--------------------------------

### Get Fireworks.js Library Version

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Retrieves the current version of the Fireworks.js library. This is a simple getter property that returns the version as a string. No external dependencies are required for this basic functionality.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)

console.log('Fireworks.js version:', fireworks.version) // e.g., "2.10.8"
```

--------------------------------

### Launch Fireworks on Demand

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Launches a specific number of fireworks on demand. If the animation is not running, it will automatically start and stop after the launched fireworks complete. The default count is 1. This method allows for user-initiated or programmatic launching of fireworks.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container, { autoresize: true })

// Launch single firework
fireworks.launch()

// Launch multiple fireworks at once
fireworks.launch(5)

// Launch fireworks on button click
document.querySelector('#launch-btn').addEventListener('click', () => {
  const count = parseInt(document.querySelector('#count-input').value) || 1
  fireworks.launch(count)
})
```

--------------------------------

### React Component for Fireworks Effects

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Integrates Fireworks.js into a React application using the @fireworks-js/react package. It provides a component with ref-based access to control fireworks instances, allowing for starting, stopping, launching, and clearing effects. Requires React and the @fireworks-js/react package.

```tsx
import { useRef } from 'react'
import { Fireworks } from '@fireworks-js/react'
import type { FireworksHandlers } from '@fireworks-js/react'

function App() {
  const ref = useRef<FireworksHandlers>(null)

  const toggleFireworks = () => {
    if (!ref.current) return
    if (ref.current.isRunning) {
      ref.current.stop()
    } else {
      ref.current.start()
    }
  }

  const launchFireworks = () => {
    ref.current?.launch(5)
  }

  return (
    <>
      <div style={{ position: 'absolute', zIndex: 1, display: 'flex', gap: '4px' }}>
        <button onClick={toggleFireworks}>Toggle</button>
        <button onClick={launchFireworks}>Launch 5</button>
        <button onClick={() => ref.current?.clear()}>Clear</button>
      </div>
      <Fireworks
        ref={ref}
        options={{
          opacity: 0.5,
          hue: { min: 0, max: 360 },
          acceleration: 1.05,
          friction: 0.97,
          gravity: 1.5,
          particles: 50,
          mouse: { click: true, move: false, max: 3 }
        }}
        style={{
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          position: 'fixed',
          background: '#000'
        }}
      />
    </>
  )
}

```

--------------------------------

### Vue 3 Component for Fireworks Effects

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Implements Fireworks.js in a Vue 3 application using the @fireworks-js/vue package. This component allows for template ref access to control fireworks, including starting, stopping, and managing the component's mounted state. It requires Vue 3 and the @fireworks-js/vue package.

```vue
<template>
  <div class="buttons">
    <button @click="toggleMounted">{{ mounted ? 'Mounted' : 'Unmounted' }}</button>
    <button @click="startFireworks">Start</button>
    <button @click="stopFireworks">Stop</button>
  </div>
  <Fireworks
    ref="fw"
    v-if="mounted"
    :autostart="false"
    :options="options"
    :style="{
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      position: 'fixed',
      background: '#000'
    }"
  />
</template>

<script lang="ts" setup>
import { Fireworks } from '@fireworks-js/vue'
import { ref, watch } from 'vue'
import type { FireworksOptions } from '@fireworks-js/vue'

const fw = ref<InstanceType<typeof Fireworks>()>
const mounted = ref(true)
const options = ref<FireworksOptions>({
  opacity: 0.5,
  hue: { min: 100, max: 200 },
  particles: 60
})

function toggleMounted() {
  mounted.value = !mounted.value
}

async function startFireworks() {
  if (!fw.value) return
  fw.value.start()
}

async function stopFireworks() {
  if (!fw.value) return
  await fw.value.waitStop()
}

// Auto-start when component mounts
watch(fw, () => {
  if (fw.value) {
    fw.value.start()
  }
})
</script>

```

--------------------------------

### Clear All Fireworks from Canvas

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Clears all fireworks from the canvas immediately. This method removes all traces and explosions and clears the canvas rendering context. It's useful for resetting the animation state or removing fireworks before starting a new sequence.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Clear canvas on button click while keeping animation running
document.querySelector('#clear-btn').addEventListener('click', () => {
  fireworks.clear()
  // Animation continues, new fireworks will appear
})
```

--------------------------------

### Initialize Fireworks with Options

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Demonstrates how to initialize the Fireworks.js library with a custom set of options. This includes configuring aspects like particle count, gravity, colors, and mouse interactions. The `container` argument specifies the DOM element where the fireworks will be rendered.

```javascript
const fireworks = new Fireworks(container, {
  autoresize: true,
  opacity: 0.5,
  acceleration: 1.05,
  friction: 0.97,
  gravity: 1.5,
  particles: 50,
  traceLength: 3,
  traceSpeed: 10,
  explosion: 5,
  intensity: 30,
  flickering: 50,
  lineStyle: 'round',
  hue: {
    min: 0,
    max: 360
  },
  delay: {
    min: 30,
    max: 60
  },
  rocketsPoint: {
    min: 50,
    max: 50
  },
  lineWidth: {
    explosion: {
      min: 1,
      max: 3
    },
    trace: {
      min: 1,
      max: 2
    }
  },
  brightness: {
    min: 50,
    max: 80
  },
  decay: {
    min: 0.015,
    max: 0.03
  },
  mouse: {
    click: false,
    move: false,
    max: 1
  }
})
```

--------------------------------

### Update Fireworks Options

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Allows for dynamic updating of the fireworks configuration after initialization. The `options` parameter should be an object conforming to the defined options type.

```javascript
fireworks.updateOptions({ intensity: 50 });
```

--------------------------------

### Solid Component for Fireworks Animation

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Provides a Solid.js component for rendering fireworks. It utilizes a ref callback to access fireworks handlers, allowing for dynamic control over the animation's state and options. Dependencies include '@fireworks-js/solid'.

```tsx
import { Fireworks, FireworksHandlers } from '@fireworks-js/solid'
import { createSignal, Show } from 'solid-js'

function App() {
  const [enabled, setEnabled] = createSignal(true)
  let fireworks: FireworksHandlers

  const toggleFireworks = () => {
    if (fireworks.isRunning) {
      fireworks.waitStop()
    } else {
      fireworks.start()
    }
  }

  const updateColors = () => {
    fireworks.updateOptions({
      hue: { min: 200, max: 280 } // Purple/blue colors
    })
  }

  return (
    <>
      <div style={{ display: 'flex', gap: '4px', position: 'absolute', 'z-index': 1 }}>
        <button onClick={() => setEnabled(!enabled())}>
          {enabled() ? 'Enabled' : 'Disabled'}
        </button>
        <button onClick={toggleFireworks}>Toggle</button>
        <button onClick={updateColors}>Blue Theme</button>
      </div>
      <Show when={enabled()}>
        <Fireworks
          ref={(ref) => (fireworks = ref)}
          options={{ opacity: 0.5, particles: 60 }}
          style={{
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            position: 'fixed',
            background: '#000'
          }}
        />
      </Show>
    </>
  )
}

```

--------------------------------

### updateOptions(options) - Update Configuration

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Updates fireworks configuration options at runtime. All options are optional and will be deep-merged with existing options.

```APIDOC
## updateOptions(options)

### Description
Update fireworks configuration options at runtime. All options are optional and will be deep-merged with existing options.

### Method
`updateOptions(options: object)`

### Endpoint
N/A (Instance method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **options** (object) - Required - An object containing the configuration options to update.

### Request Example
```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Update hue to blue colors only
fireworks.updateOptions({
  hue: { min: 200, max: 240 }
})

// Enable sound effects
fireworks.updateOptions({
  sound: {
    enabled: true,
    files: [
      'https://example.com/explosion0.mp3',
      'https://example.com/explosion1.mp3',
      'https://example.com/explosion2.mp3'
    ],
    volume: { min: 4, max: 8 }
  }
})

// Enable mouse interaction
fireworks.updateOptions({
  mouse: {
    click: true,
    move: true,
    max: 3
  }
})

// Get current options
console.log(fireworks.currentOptions)
```

### Response
#### Success Response (void)
This method does not return a value.

#### Response Example
N/A
```

--------------------------------

### Configure Sound Effects with JavaScript

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Enables explosion sound effects in fireworks-js by providing audio file URLs and defining a volume range. This configuration is applied when initializing the Fireworks instance.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container, {
  sound: {
    enabled: true,
    files: [
      'https://fireworks.js.org/sounds/explosion0.mp3',
      'https://fireworks.js.org/sounds/explosion1.mp3',
      'https://fireworks.js.org/sounds/explosion2.mp3'
    ],
    volume: {
      min: 4,
      max: 8
    }
  }
})

fireworks.start()

// Toggle sound on/off
document.querySelector('#sound-toggle').addEventListener('click', () => {
  const currentOptions = fireworks.currentOptions
  fireworks.updateOptions({
    sound: {
      enabled: !currentOptions.sound.enabled
    }
  })
})
```

--------------------------------

### Use Fireworks Web Component in HTML

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Demonstrates how to use the fireworks-js custom element in an HTML page. This component can be styled and controlled via attributes and JavaScript.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Fireworks Web Component</title>
</head>
<body>
  <fireworks-js
    style="top: 0; left: 0; width: 100%; height: 100%; position: fixed; background: #000;"
    options='{"opacity": 0.5, "particles": 75, "hue": {"min": 0, "max": 360}}'
  ></fireworks-js>

  <script type="module">
    import '@fireworks-js/web'

    // Access the element and its methods
    const fireworksEl = document.querySelector('fireworks-js')

    // Control via JavaScript
    document.querySelector('#stop-btn')?.addEventListener('click', () => {
      fireworksEl.waitStop()
    })

    document.querySelector('#launch-btn')?.addEventListener('click', () => {
      fireworksEl.launch(3)
    })
  </script>
</body>
</html>
```

--------------------------------

### Enable Mouse Interaction with JavaScript

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Configures fireworks-js to launch fireworks in response to mouse clicks and cursor movement. The `max` option limits the number of fireworks generated per interaction.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container, {
  mouse: {
    click: true,   // Launch fireworks on click
    move: true,    // Fireworks follow cursor position
    max: 5         // Maximum fireworks per click
  }
})

fireworks.start()

// Disable mouse interaction programmatically
document.querySelector('#disable-mouse').addEventListener('click', () => {
  fireworks.updateOptions({
    mouse: {
      click: false,
      move: false
    }
  })
})
```

--------------------------------

### Update Fireworks Configuration Options

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Updates fireworks configuration options at runtime. All options are optional and will be deep-merged with existing options. This allows for dynamic changes to the animation's appearance, sound, and behavior.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Update hue to blue colors only
fireworks.updateOptions({
  hue: { min: 200, max: 240 }
})

// Enable sound effects
fireworks.updateOptions({
  sound: {
    enabled: true,
    files: [
      'https://example.com/explosion0.mp3',
      'https://example.com/explosion1.mp3',
      'https://example.com/explosion2.mp3'
    ],
    volume: { min: 4, max: 8 }
  }
})

// Enable mouse interaction
fireworks.updateOptions({
  mouse: {
    click: true,
    move: true,
    max: 3
  }
})

// Get current options
console.log(fireworks.currentOptions)
```

--------------------------------

### Launch a Specific Number of Fireworks

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Launches a predetermined number of fireworks. The `count` parameter specifies how many fireworks to launch. If not provided, it defaults to 1.

```javascript
fireworks.launch(5); // Launches 5 fireworks
```

--------------------------------

### isRunning - Check Animation Status

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Getter property that returns whether the fireworks animation is currently running.

```APIDOC
## isRunning

### Description
Getter property that returns whether the fireworks animation is currently running.

### Method
`get isRunning(): boolean`

### Endpoint
N/A (Instance property)

### Parameters
None

### Request Example
```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)

console.log(fireworks.isRunning) // false

fireworks.start()
console.log(fireworks.isRunning) // true

fireworks.pause()
console.log(fireworks.isRunning) // false

fireworks.pause() // resumes animation
console.log(fireworks.isRunning) // true
```

### Response
#### Success Response (boolean)
- **isRunning** (boolean) - `true` if the animation is running, `false` otherwise.
```

--------------------------------

### updateSize(sizes?) - Update Canvas Dimensions

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Forces an update of the canvas dimensions. If no sizes are provided, it uses the container's clientWidth and clientHeight.

```APIDOC
## updateSize(sizes?)

### Description
Force update the canvas dimensions. If no sizes are provided, uses the container's clientWidth and clientHeight.

### Method
`updateSize(sizes?: { width: number, height: number })`

### Endpoint
N/A (Instance method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Update to specific dimensions
fireworks.updateSize({
  width: 800,
  height: 600
})

// Update to container's current size (useful after container resize)
fireworks.updateSize()

// Handle window resize manually (when autoresize is disabled)
const fireworksNoAutoResize = new Fireworks(container, { autoresize: false })
window.addEventListener('resize', () => {
  fireworksNoAutoResize.updateSize()
})
```

### Response
#### Success Response (void)
This method does not return a value.

#### Response Example
N/A
```

--------------------------------

### Update Canvas Size

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Forces an update to the canvas dimensions. The `sizes` parameter should be an object containing `width` and `height` properties.

```javascript
fireworks.updateSize({ width: 800, height: 600 });
```

--------------------------------

### Asynchronously Stop Fireworks Animation

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Explains how to gracefully stop the fireworks animation using the `waitStop()` method. This asynchronous method waits for all current traces and explosions to complete before stopping and optionally disposing of the canvas. It returns a Promise that resolves upon completion.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Gracefully stop after 3 seconds - waits for existing fireworks to finish
setTimeout(async () => {
  console.log('Stopping gracefully...')
  await fireworks.waitStop()
  console.log('All fireworks have finished')
}, 3000)

// Gracefully stop and dispose canvas
setTimeout(async () => {
  await fireworks.waitStop(true)
  console.log('Canvas removed from DOM')
}, 6000)
```

--------------------------------

### Preact Component for Fireworks Effects

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Utilizes Fireworks.js within a Preact application via the @fireworks-js/preact package. This component mirrors the React component's API, offering ref-based control over fireworks effects. It requires Preact and the @fireworks-js/preact package.

```tsx
import { useRef } from 'preact/hooks'
import { Fireworks } from '@fireworks-js/preact'
import type { FireworksHandlers } from '@fireworks-js/preact'

function App() {
  const ref = useRef<FireworksHandlers>(null)

  const toggleFireworks = () => {
    if (!ref.current) return
    if (ref.current.isRunning) {
      ref.current.stop()
    } else {
      ref.current.start()
    }
  }

  return (
    <>
      <div style={{ display: 'flex', gap: '4px', position: 'absolute', zIndex: 1 }}>
        <button onClick={toggleFireworks}>Toggle</button>
        <button onClick={() => ref.current?.clear()}>Clear</button>
      </div>
      <Fireworks
        ref={ref}
        autostart={false}
        options={{ opacity: 0.5, particles: 75 }}
        style={{
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          position: 'fixed',
          background: '#000'
        }}
      />
    </>
  )
}

```

--------------------------------

### Svelte Component for Fireworks JS

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/packages/svelte/README.md

This Svelte component demonstrates how to integrate and control Fireworks JS. It imports the Fireworks component, defines options, and includes a function to toggle the fireworks on and off. The component requires the Fireworks class and FireworksOptions type from the package.

```svelte
<script lang="ts">
  import { Fireworks } from '@fireworks-js/svelte'
  import type { FireworksOptions } from '@fireworks-js/svelte'

  let fw: Fireworks
  let options: FireworksOptions = {
    opacity: 0.5
  }

  function toggleFireworks() {
    const fireworks = fw.fireworksInstance()
    if (fireworks.isRunning) {
      fireworks.waitStop()
    } else {
      fireworks.start()
    }
  }
</script>
<Fireworks bind:this={fw} autostart={false} {options} class="fireworks" />

```

--------------------------------

### Asynchronously Stop Fireworks

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Provides an asynchronous way to stop the fireworks animation. Similar to `.stop()`, the `dispose` parameter controls resource cleanup.

```javascript
await fireworks.waitStop(false);
```

--------------------------------

### Check if Fireworks Animation is Running

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

A getter property that returns a boolean indicating whether the fireworks animation is currently running. This is useful for conditional logic or UI updates based on the animation's state.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)

console.log(fireworks.isRunning) // false

fireworks.start()
console.log(fireworks.isRunning) // true

fireworks.pause()
console.log(fireworks.isRunning) // false

fireworks.pause()
console.log(fireworks.isRunning) // true
```

--------------------------------

### Force Update Canvas Dimensions

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Forces an update of the canvas dimensions. If no sizes are provided, it uses the container's clientWidth and clientHeight. This is useful for manually adjusting the canvas size, especially when autoresize is disabled or after the container has been resized.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Update to specific dimensions
fireworks.updateSize({
  width: 800,
  height: 600
})

// Update to container's current size (useful after container resize)
fireworks.updateSize()

// Handle window resize manually (when autoresize is disabled)
const fireworksNoAutoResize = new Fireworks(container, { autoresize: false })
window.addEventListener('resize', () => {
  fireworksNoAutoResize.updateSize()
})
```

--------------------------------

### clear() - Clear Canvas

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Clears all fireworks from the canvas immediately. Removes all traces and explosions and clears the canvas rendering context.

```APIDOC
## clear()

### Description
Clear all fireworks from the canvas immediately. Removes all traces and explosions and clears the canvas rendering context.

### Method
`clear()`

### Endpoint
N/A (Instance method)

### Parameters
None

### Request Example
```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Clear canvas on button click while keeping animation running
document.querySelector('#clear-btn').addEventListener('click', () => {
  fireworks.clear()
  // Animation continues, new fireworks will appear
})
```

### Response
#### Success Response (void)
This method does not return a value.

#### Response Example
N/A
```

--------------------------------

### Update Canvas Boundaries

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Updates the boundaries within which the fireworks will operate. The `boundaries` parameter is an object defining the `top`, `bottom`, `left`, and `right` limits.

```javascript
fireworks.updateBoundaries({ top: 50, bottom: 50, left: 50, right: 50 });
```

--------------------------------

### updateBoundaries(boundaries) - Update Explosion Boundaries

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Updates the boundaries within which fireworks explode. Boundaries define the area where firework explosions can occur.

```APIDOC
## updateBoundaries(boundaries)

### Description
Update the boundaries within which fireworks explode. Boundaries define the area where firework explosions can occur.

### Method
`updateBoundaries(boundaries: object)`

### Endpoint
N/A (Instance method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **boundaries** (object) - Required - An object defining the explosion boundaries. Can include `x`, `y`, `width`, `height`, and `debug` properties.

### Request Example
```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Restrict fireworks to center area
fireworks.updateBoundaries({
  x: 100,
  y: 100,
  width: container.clientWidth - 200,
  height: container.clientHeight - 200
})

// Enable boundary debugging (shows boundary area)
fireworks.updateBoundaries({
  debug: true
})
```

### Response
#### Success Response (void)
This method does not return a value.

#### Response Example
N/A
```

--------------------------------

### Angular Directive for Fireworks Integration

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

An Angular directive that allows adding fireworks effects to any HTML element. It requires importing `NgFireworksModule` into the application's module and uses a template reference variable to access the directive's methods for controlling the fireworks. Dependencies include '@fireworks-js/angular'.

```typescript
// app.module.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NgFireworksModule } from '@fireworks-js/angular'
import { AppComponent } from './app.component'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgFireworksModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

```

```typescript
// app.component.ts
import { Component, ViewChild } from '@angular/core'
import type { FireworksDirective, FireworksOptions } from '@fireworks-js/angular'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  enabled = true
  options: FireworksOptions = {
    opacity: 0.5,
    particles: 50,
    hue: { min: 0, max: 360 }
  }

  @ViewChild('fireworks') fireworks?: FireworksDirective

  toggleFireworks(): void {
    this.enabled = !this.enabled
  }

  start(): void {
    this.fireworks?.start()
  }

  async waitStop(): Promise<void> {
    await this.fireworks?.waitStop()
  }

  launch(count: number): void {
    this.fireworks?.launch(count)
  }
}

```

```html
<!-- app.component.html -->
<div style="position: absolute; z-index: 999; display: flex; gap: 4px;">
  <button (click)="toggleFireworks()">{{ enabled ? 'Mounted' : 'Unmounted' }}</button>
  <button (click)="start()">Start</button>
  <button (click)="waitStop()">Stop</button>
  <button (click)="launch(5)">Launch 5</button>
</div>
<ng-fireworks
  #fireworks="ngFireworks"
  [options]="options"
  class="fireworks"
  *ngIf="enabled"
></ng-fireworks>

```

--------------------------------

### Update Fireworks Explosion Boundaries

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Updates the boundaries within which fireworks explode. Boundaries define the area where firework explosions can occur. This allows for restricting the visual area of the fireworks display.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Restrict fireworks to center area
fireworks.updateBoundaries({
  x: 100,
  y: 100,
  width: container.clientWidth - 200,
  height: container.clientHeight - 200
})

// Enable boundary debugging (shows boundary area)
fireworks.updateBoundaries({
  debug: true
})
```

--------------------------------

### pause() - Toggle Animation

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Toggles the fireworks animation between running and paused states. When paused, the current frame is preserved on the canvas but no new frames are rendered.

```APIDOC
## pause()

### Description
Toggle the fireworks animation between running and paused states. When paused, the current frame is preserved on the canvas but no new frames are rendered.

### Method
`pause()`

### Endpoint
N/A (Instance method)

### Parameters
None

### Request Example
```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Toggle pause/resume every 2 seconds
setInterval(() => {
  fireworks.pause()
  console.log('Running:', fireworks.isRunning)
}, 2000)
```

### Response
#### Success Response (void)
This method does not return a value.

#### Response Example
N/A
```

--------------------------------

### Pause and Resume Fireworks Animation

Source: https://context7.com/crashmax-dev/fireworks-js/llms.txt

Toggles the fireworks animation between running and paused states. When paused, the current frame is preserved on the canvas but no new frames are rendered. This method is useful for temporarily stopping the animation without losing the current state.

```javascript
import { Fireworks } from 'fireworks-js'

const container = document.querySelector('#app')
const fireworks = new Fireworks(container)
fireworks.start()

// Toggle pause/resume every 2 seconds
setInterval(() => {
  fireworks.pause()
  console.log('Running:', fireworks.isRunning)
}, 2000)
```

--------------------------------

### Stop Fireworks Animation

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Stops the ongoing firework animation. The optional `dispose` parameter, when set to `true`, will also clean up resources associated with the fireworks instance.

```javascript
fireworks.stop(true); // Stops and disposes of fireworks
```

--------------------------------

### Pause Fireworks Animation

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Toggles the pause state of the fireworks animation. Calling this method will either pause the animation if it's running or resume it if it's paused.

```javascript
fireworks.pause();
```

--------------------------------

### Clear Canvas of Fireworks

Source: https://github.com/crashmax-dev/fireworks-js/blob/master/README.md

Removes all current fireworks from the canvas, effectively clearing the display without stopping the animation loop.

```javascript
fireworks.clear();
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.