### Install Project Dependencies

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/solid/demo/README.md

This command installs all necessary project dependencies using a package manager. You can choose between npm, pnpm, or yarn to set up the project after cloning.

```bash
$ npm install # or pnpm install or yarn install
```

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

### Install @neoconfetti/vanilla

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Instructions for installing the `@neoconfetti/vanilla` package using pnpm, npm, or yarn.

```Bash
pnpm add @neoconfetti/vanilla

# npm
npm install @neoconfetti/vanilla

# yarn
yarn add @neoconfetti/vanilla
```

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

### Run Application in Development Mode

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/solid/demo/README.md

These commands start the application in development mode, typically accessible at http://localhost:3000. The development server provides live reloading, automatically updating the page as you make edits.

```bash
npm dev
npm start
```

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

### Example: Setting stageWidth Option

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Code example demonstrating how to set the `stageWidth` option when initializing Confetti.

```TSX
new Confetti(document.querySelector('#confetti'), {
	stageWidth: 500,
});
```

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

### Example: Setting colors Option

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Code example demonstrating how to set the `colors` option when initializing Confetti.

```TSX
new Confetti(document.querySelector('#confetti'), {
	colors: ['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7'],
});
```

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

### Example: Setting particleSize Option

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Code example demonstrating how to set the `particleSize` option when initializing Confetti.

```TSX
new Confetti(document.querySelector('#confetti'), {
	particleSize: 20,
});
```

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

### Example: Setting stageHeight Option

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Code example demonstrating how to set the `stageHeight` option when initializing Confetti.

```TSX
new Confetti(document.querySelector('#confetti'), {
	stageHeight: 500,
});
```

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

### Install @neoconfetti/solid Package

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/solid/README.md

Instructions for installing the `@neoconfetti/solid` package using pnpm, npm, or yarn.

```bash
# pnpm
pnpm add @neoconfetti/solid

# npm
npm install @neoconfetti/solid

# yarn
yarn add @neoconfetti/solid
```

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

### Install @neoconfetti/svelte Package

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

Instructions for installing the @neoconfetti/svelte package using popular Node.js package managers.

```bash
pnpm add @neoconfetti/svelte

npm install @neoconfetti/svelte

yarn add @neoconfetti/svelte
```

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

### Example: Setting particleShape Option

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Code example demonstrating how to set the `particleShape` option when initializing Confetti.

```TSX
new Confetti(document.querySelector('#confetti'), {
	particleShape: 'circles',
});
```

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

### Example: Setting duration Option

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Code example demonstrating how to set the `duration` option when initializing Confetti.

```TSX
new Confetti(document.querySelector('#confetti'), {
	duration: 5000,
});
```

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

### Example: Setting force Option

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Code example demonstrating how to set the `force` option when initializing Confetti.

```TSX
new Confetti(document.querySelector('#confetti'), {
	force: 0.3,
});
```

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

### Example: Setting particleCount Option

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Code example demonstrating how to set the `particleCount` option when initializing Confetti.

```TSX
new Confetti(document.querySelector('#confetti'), {
	particleCount: 200,
});
```

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

### Example: Setting destroyAfterDone Option

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Code example demonstrating how to set the `destroyAfterDone` option when initializing Confetti.

```TSX
new Confetti(document.querySelector('#confetti'), {
	destroyAfterDone: false,
});
```

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

### Build Application for Production

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/solid/demo/README.md

This command compiles and optimizes the application for production deployment, outputting minified and hashed assets into the 'dist' folder. The build is optimized for performance and ready for static hosting.

```bash
npm run build
```

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

### Install @neoconfetti/react Package

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Instructions for adding the `@neoconfetti/react` package to your project using pnpm, bun, or npm.

```bash
pnpm add @neoconfetti/react
```

```bash
bun install @neoconfetti/react
```

```bash
npm install @neoconfetti/react
```

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

### Install svelte-confetti-explosion Package

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Instructions for adding the svelte-confetti-explosion package to your project using popular Node.js package managers: pnpm, npm, and yarn.

```bash
# pnpm
pnpm add svelte-confetti-explosion

# npm
npm install svelte-confetti-explosion

# yarn
yarn add svelte-confetti-explosion
```

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

### ConfettiOptions API Reference for @neoconfetti/solid

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/solid/README.md

Detailed API documentation for the `ConfettiOptions` object, including available properties, their types, default values, and usage examples for customizing confetti behavior.

```APIDOC
ConfettiOptions:
  particleCount:
    description: Number of confetti particles to create.
    type: number
    default: 150
    example: <div use:confetti={{ particleCount: 200 }} />
  particleSize:
    description: Size of the confetti particles in pixels
    type: number
    default: 12
    example: <div use:confetti={{ particleSize: 20 }} />
  particleShape:
    description: Shape of particles to use. Can be 'mix', 'circles' or 'rectangles'\n'mix' will use both circles and rectangles\n'circles' will use only circles\n'rectangles' will use only rectangles
    type: "'mix' | 'circles' | 'rectangles'"
    default: "'mix'"
    example: <div use:confetti={{ particleShape: 'circles' }} />
  duration:
    description: Duration of the animation in milliseconds
    type: number
    default: 3500
    example: <div use:confetti={{ duration: 5000 }} />
  colors:
    description: Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.
    type: Array<string>
    default: "['#FFC700', '#FF0000', '#2E3191', '#41BBC7']"
    example: <div use:confetti={{ colors: ['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7'] }} />
  force:
    description: Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.
    type: number
    default: 0.5
    example: <div use:confetti={{ force: 0.3 }} />
  stageHeight:
    description: Height of the stage in pixels. Confetti will only fall within this height.
    type: number
    default: 800
    example: <div use:confetti={{ stageHeight: 500 }} />
  stageWidth:
    description: Width of the stage in pixels. Confetti will only fall within this width.
    type: number
    default: 1600
    example: <div use:confetti={{ stageWidth: 500 }} />
  destroyAfterDone:
    description: Whether or not destroy all confetti nodes after the duration period has passed. By default it destroys all nodes, to free up memory.
    type: boolean
    default: true
    example: <div use:confetti={{ destroyAfterDone: false }} />
```

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

### Install @neoconfetti/vue Package

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vue/README.md

Instructions for adding the `@neoconfetti/vue` package to your project using popular package managers like pnpm, npm, or yarn.

```bash
pnpm add @neoconfetti/vue
```

```bash
npm install @neoconfetti/vue
```

```bash
yarn add @neoconfetti/vue
```

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

### Vue Directive Prop Usage Examples

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vue/README.md

Practical examples demonstrating how to apply various configuration options to the `v-confetti` directive in Vue templates to achieve different confetti effects.

```vue
<div v-confetti="{ particleCount: 200 }" />
```

```vue
<div v-confetti="{ particleSize: 20 }" />
```

```vue
<div v-confetti="{ particleShape: 'circles' }" />
```

```vue
<div v-confetti="{ duration: 5000 }" />
```

```vue
<div v-confetti="{ colors: ['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7'] }" />
```

```vue
<div v-confetti="{ force: 0.3 }" />
```

```vue
<div v-confetti="{ stageHeight: 500 }" />
```

```vue
<div v-confetti="{ stageWidth: 500 }" />
```

```vue
<div v-confetti="{ destroyAfterDone: false }" />
```

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

### Confetti stageWidth Prop Usage Example

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Example demonstrating how to set the width of the confetti stage to 1000 pixels using the `stageWidth` prop.

```tsx
<Confetti stageWidth={1000} />
```

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

### Basic Confetti Usage in Svelte

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

Demonstrates the minimal setup required to use the `confetti` action in a Svelte component, creating a default confetti explosion.

```svelte
<script>
	import { confetti } from '@neoconfetti/svelte';
</script>

<div use:confetti />
```

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

### Confetti force Prop Usage Example

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Example demonstrating how to set the force of confetti particles to 0.3 using the `force` prop.

```tsx
<Confetti force={0.3} />
```

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

### Confetti particleShape Prop Usage Example

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Example demonstrating how to set the shape of confetti particles to circles using the `particleShape` prop.

```tsx
<Confetti particleShape="circles" />
```

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

### Confetti stageHeight Prop Usage Example

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Example demonstrating how to set the height of the confetti stage to 500 pixels using the `stageHeight` prop.

```tsx
<Confetti stageHeight={500} />
```

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

### Confetti particleSize Prop Usage Example

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Example demonstrating how to set the size of confetti particles using the `particleSize` prop to 20 pixels.

```tsx
<Confetti particleSize={20} />
```

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

### Confetti particleCount Prop Usage Example

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Example demonstrating how to set the number of confetti particles using the `particleCount` prop to 200.

```tsx
<Confetti particleCount={200} />
```

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

### Confetti duration Prop Usage Example

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Example demonstrating how to set the animation duration of confetti to 5000 milliseconds using the `duration` prop.

```tsx
<Confetti duration={5000} />
```

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

### Confetti destroyAfterDone Prop Usage Example

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Example demonstrating how to prevent confetti nodes from being destroyed after the animation by setting `destroyAfterDone` to `false`.

```tsx
<Confetti destroyAfterDone={false} />
```

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

### Confetti colors Prop Usage Example

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Example demonstrating how to specify custom colors for confetti particles using an array of hex color strings with the `colors` prop.

```tsx
<Confetti colors={['#FFC700', '#FF0000', '#2E3191', '#41BBC7']} />
```

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

### Apply CSS Style Props to ConfettiExplosion Component

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Illustrates how to use CSS custom properties, --x and --y, directly on the ConfettiExplosion component to adjust the confetti's starting position on the x and y axes.

```svelte
<ConfettiExplosion --x="10px" --y="10px" />
```

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

### Confetti Initialization with Options

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Shows how to initialize the confetti instance with custom options for color and force.

```TSX
import { Confetti } from '@neoconfetti/vanilla';

const confetti = new Confetti(document.querySelector('#confetti'), {
	color: ['#ff0000', '#00ff00', '#0000ff'],
	force: 0.9,
});

confetti.explode();
```

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

### Basic Confetti Usage

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Demonstrates the basic initialization and explosion of confetti using `@neoconfetti/vanilla`.

```TSX
import { Confetti } from '@neoconfetti/vanilla';

const confetti = new Confetti(document.querySelector('#confetti'));

// Explode the confetti
confetti.explode();
```

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

### Basic Usage of @neoconfetti/solid in SolidJS

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/solid/README.md

Demonstrates the basic integration of `@neoconfetti/solid` into a SolidJS component using `createConfetti` and the `use:confetti` directive.

```tsx
import { createConfetti } from '@neoconfetti/solid';

function App() {
	const { confetti } = createConfetti();

	return <div use:confetti />;
}
```

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

### SolidJS: Current neoconfetti Usage with createConfetti

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/solid/README.md

Demonstrates the current syntax for integrating neoconfetti into SolidJS applications. It involves importing `createConfetti` to obtain the `confetti` action, which is then applied to a DOM element using `use:confetti`. This wrapper is necessary due to SolidJS's compilation behavior.

```tsx
import { createConfetti } from '@neoconfetti/solid';

const { confetti } = createConfetti();

<div
	use:confetti={
		{
			/* options */
		}
	}
/>;
```

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

### SolidJS: Desired Simpler neoconfetti Usage

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/solid/README.md

Illustrates a proposed, simpler syntax for neoconfetti in SolidJS, where the `confetti` action could be directly imported. This direct import is currently not viable because SolidJS's compiler treats `use:confetti` as a string, potentially removing the import.

```tsx
import { confetti } from '@neoconfetti/solid';

<div
	use:confetti={
		{
			/* options */
		}
	}
/>;
```

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

### Customize Confetti Behavior with Options

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

Shows how to pass configuration options to the `confetti` action to customize the behavior, such as particle count and force.

```svelte
<div use:confetti={{ particleCount: 200, force: 0.3 }} />
```

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

### ConfettiOptions: force Property

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

API documentation for the `force` option, controlling the intensity of the confetti explosion.

```APIDOC
Property: force
Type: number
Default value: 0.5
Description: Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.
```

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

### Customize Confetti Behavior with Options in SolidJS

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/solid/README.md

Shows how to pass options like `particleCount` and `force` to the `use:confetti` directive to customize the confetti effect.

```tsx
<div use:confetti={{ particleCount: 200, force: 0.3 }} />
```

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

### Basic Confetti Component Usage

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Demonstrates how to import and render the `Confetti` component with its default settings to display a confetti explosion.

```tsx
import { Confetti } from '@neoconfetti/react';

<Confetti />;
```

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

### ConfettiOptions: colors Property

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

API documentation for the `colors` option, defining the array of colors for confetti particles.

```APIDOC
Property: colors
Type: Array<string>
Default value: ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
Description: Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in CSS.
```

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

### ConfettiOptions: particleSize Property

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

API documentation for the `particleSize` option, specifying the size of confetti particles in pixels.

```APIDOC
Property: particleSize
Type: number
Default value: 12
Description: Size of the confetti particles in pixels.
```

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

### ConfettiOptions: particleCount Property

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

API documentation for the `particleCount` option, specifying the number of confetti particles.

```APIDOC
Property: particleCount
Type: number
Default value: 150
Description: Number of confetti particles to create.
```

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

### ConfettiOptions: stageHeight Property

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

API documentation for the `stageHeight` option, defining the height of the confetti stage in pixels.

```APIDOC
Property: stageHeight
Type: number
Default value: 800
Description: Height of the stage in pixels. Confetti will only fall within this height.
```

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

### ConfettiOptions: stageWidth Property

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

API documentation for the `stageWidth` option, defining the width of the confetti stage in pixels.

```APIDOC
Property: stageWidth
Type: number
Default value: 1600
Description: Width of the stage in pixels. Confetti will only fall within this width.
```

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

### ConfettiOptions: duration Property

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

API documentation for the `duration` option, specifying the animation duration in milliseconds.

```APIDOC
Property: duration
Type: number
Default value: 3500
Description: Duration of the animation in milliseconds.
```

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

### Basic Usage of ConfettiExplosion Component in Svelte

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Demonstrates how to import the ConfettiExplosion component and include it in a Svelte application for a default confetti effect.

```svelte
<script>
	import { ConfettiExplosion } from 'svelte-confetti-explosion';
</script>

<ConfettiExplosion />
```

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

### Confetti Component Props API Reference

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Comprehensive documentation for all configurable properties of the `Confetti` React component, detailing their purpose, types, and default values.

```APIDOC
Confetti Component Props:
- particleCount:
    Description: Number of confetti particles to create.
    Type: number
    Default: 150
- particleSize:
    Description: Size of the confetti particles in pixels.
    Type: number
    Default: 12
- particleShape:
    Description: Shape of particles to use. Can be `mix`, `circles` or `rectangles`.
        `mix` will use both circles and rectangles
        `circles` will use only circles
        `rectangles` will use only rectangles
    Type: 'mix' | 'circles' | 'rectangles'
    Default: 'mix'
- duration:
    Description: Duration of the animation in milliseconds.
    Type: number
    Default: 3500
- colors:
    Description: Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.
    Type: Array<string>
    Default: ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
- force:
    Description: Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.
    Type: number
    Default: 0.5
- stageHeight:
    Description: Height of the stage in pixels. Confetti will only fall within this height.
    Type: number
    Default: 800
- stageWidth:
    Description: Width of the stage in pixels. Confetti will only fall within this width.
    Type: number
    Default: 1600
- destroyAfterDone:
    Description: Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to free up memory.
    Type: boolean
    Default: true
```

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

### ConfettiOptions: particleShape Property

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

API documentation for the `particleShape` option, defining the shape of confetti particles.

```APIDOC
Property: particleShape
Type: 'mix' | 'circles' | 'rectangles'
Default value: 'mix'
Description: Shape of particles to use. Can be `mix`, `circles` or `rectangles`. `mix` will use both circles and rectangles
`circles` will use only circles
`rectangles` will use only rectangles.
```

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

### Defining Confetti Options with TypeScript Type

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Illustrates how to define confetti options separately using the `ConfettiOptions` TypeScript type for better type safety and organization.

```TSX
import { type ConfettiOptions, Confetti } from '@neoconfetti/vanilla';

const options: ConfettiOptions = {
	color: ['#ff0000', '#00ff00', '#0000ff'],
	force: 0.9,
};

const confetti = new Confetti(document.querySelector('#confetti'), options);
confetti.explode();
```

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

### v-confetti Directive Props API Reference

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vue/README.md

Comprehensive API documentation for all configurable properties of the `v-confetti` directive, detailing their types, default values, and descriptions.

```APIDOC
vConfetti Directive Props:
  particleCount:
    type: number
    defaultValue: 150
    description: Number of confetti particles to create.
  particleSize:
    type: number
    defaultValue: 12
    description: Size of the confetti particles in pixels.
  particleShape:
    type: 'mix' | 'circles' | 'rectangles'
    defaultValue: 'mix'
    description: Shape of particles to use. 'mix' will use both circles and rectangles, 'circles' will use only circles, 'rectangles' will use only rectangles.
  duration:
    type: number
    defaultValue: 3500
    description: Duration of the animation in milliseconds.
  colors:
    type: Array<string>
    defaultValue: ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
    description: Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.
  force:
    type: number
    defaultValue: 0.5
    description: Force of the confetti particles. Between 0 and 1. 0 is maximum force. Will error out if you pass a value outside of this range.
  stageHeight:
    type: number
    defaultValue: 800
    description: Height of the stage in pixels. Confetti will only fall within this height.
  stageWidth:
    type: number
    defaultValue: 1600
    description: Width of the stage in pixels. Confetti will only fall within this width.
  destroyAfterDone:
    type: boolean
    defaultValue: true
    description: Whether or not destroy all confetti nodes after the duration period has passed. By default it destroys all nodes, to free up memory.
```

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

### Updating Confetti Options

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Demonstrates how to update existing confetti options, either by merging specific properties or by completely overriding the options object.

```TypeScript
import { Confetti } from '@neoconfetti/vanilla';

const confetti = new Confetti(document.querySelector('#confetti'), {
	color: ['#ff0000', '#00ff00', '#0000ff'],
	force: 0.9,
});

// Update the specific options. Will be merged with the existing options.
confetti.options.colors = ['white', 'black'];

// Completely overrides existing options, in this case, the `force` property is set to its default value.
confetti.options = { colors: ['white', 'black'] };
```

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

### Waiting for Confetti Explosion to Finish

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Explains how to use the Promise returned by `confetti.explode()` to wait for the confetti animation to complete before executing subsequent code.

```TypeScript
// confetti.explode() returns a promise that resolves when the confetti is done exploding. You can use this to wait for the confetti to finish exploding before doing something else.
await confetti.explode();
```

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

### APIDOC: colors Prop

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

An array of strings defining the colors to use for the confetti particles. Supports any valid CSS color format.

```APIDOC
colors:
  type: Array<string>
  defaultValue: ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
  example: <div use:confetti={{ colors: ['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7'] }} />
```

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

### APIDOC: particleSize Prop

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

Sets the size of individual confetti particles in pixels.

```APIDOC
particleSize:
  type: number
  defaultValue: 12
  example: <div use:confetti={{ particleSize: 20 }} />
```

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

### APIDOC: particleCount Prop

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

Defines the number of confetti particles to create for the explosion.

```APIDOC
particleCount:
  type: number
  defaultValue: 150
  example: <div use:confetti={{ particleCount: 200 }} />
```

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

### TypeScript Configuration for Renamed SolidJS Directives

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/solid/README.md

Addresses TypeScript errors encountered when renaming the `confetti` directive from `createConfetti()`. Provides the necessary `globals.d.ts` declaration to correctly type the custom directive.

```tsx
import { createConfetti } from '@neoconfetti/solid';

const { confetti: myCustomConfetti } = createConfetti();

<div use:myCustomConfetti />;
```

```ts
import { ConfettiOptions } from '@neoconfetti/solid';
import 'solid-js';

declare module 'solid-js' {
	namespace JSX {
		interface Directives {
			myCustomConfetti: ConfettiOptions;
		}
	}
}
```

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

### APIDOC: duration Prop

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

Determines the total duration of the confetti animation in milliseconds.

```APIDOC
duration:
  type: number
  defaultValue: 3500
  example: <div use:confetti={{ duration: 5000 }} />
```

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

### Destroying Confetti Instance

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

Shows how to explicitly destroy the confetti instance to free up memory when it's no longer needed.

```TypeScript
confetti.destroy();
```

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

### ConfettiOptions: destroyAfterDone Property

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vanilla/README.md

API documentation for the `destroyAfterDone` option, controlling whether confetti nodes are automatically destroyed after the animation.

```APIDOC
Property: destroyAfterDone
Type: boolean
Default value: true
Description: Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to free up memory.
```

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

### Implement Basic Confetti with Vue Directive

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vue/README.md

Demonstrates the simplest way to add a confetti explosion to a Vue component by importing `vConfetti` and applying the `v-confetti` directive to an element.

```vue
<script>
import { vConfetti } from '@neoconfetti/vue';
</script>

<div v-confetti />
```

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

### APIDOC: force Prop

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

Controls the force applied to the confetti particles, with a value between 0 (no force) and 1 (maximum force).

```APIDOC
force:
  type: number
  defaultValue: 0.5
  example: <div use:confetti={{ force: 0.3 }} />
```

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

### APIDOC: stageWidth Prop

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

Sets the width of the confetti stage in pixels, limiting the horizontal spread area of the particles.

```APIDOC
stageWidth:
  type: number
  defaultValue: 1600
  example: <div use:confetti={{ stageWidth: 500 }} />
```

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

### APIDOC: particleShape Prop

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

Specifies the shape of particles to use. Can be 'mix' (both circles and rectangles), 'circles' (only circles), or 'rectangles' (only rectangles).

```APIDOC
particleShape:
  type: 'mix' | 'circles' | 'rectangles'
  defaultValue: 'mix'
  example: <div use:confetti={{ particleShape: 'circles' }} />
```

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

### APIDOC: stageHeight Prop

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

Sets the height of the confetti stage in pixels, limiting the vertical fall area of the particles.

```APIDOC
stageHeight:
  type: number
  defaultValue: 800
  example: <div use:confetti={{ stageHeight: 500 }} />
```

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

### Customize Confetti Behavior with Vue Directive Options

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/vue/README.md

Shows how to pass a configuration object to the `v-confetti` directive to customize confetti properties such as `particleCount` and `force`.

```vue
<div v-confetti="{ particleCount: 200, force: 0.3 }" />
```

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

### APIDOC: destroyAfterDone Prop

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/svelte/README.md

A boolean flag indicating whether all confetti DOM nodes should be destroyed after the animation duration to free up memory.

```APIDOC
destroyAfterDone:
  type: boolean
  defaultValue: true
  example: <div use:confetti={{ destroyAfterDone: false }} />
```

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

### Customize ConfettiExplosion Behavior with Props

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Shows how to modify the confetti explosion's behavior by passing specific props like particleCount and force to the ConfettiExplosion component.

```svelte
<ConfettiExplosion particleCount={200} force={0.3} />
```

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

### ConfettiExplosion Prop: force

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Controls the initial force of the confetti particles, influencing how far they spread. Values must be between 0 (no force) and 1 (maximum force).

```APIDOC
ConfettiExplosion.force:
  type: number
  defaultValue: 0.5
  description: Between 0 and 1.
  example: <ConfettiExplosion force={0.3} />
```

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

### ConfettiExplosion Prop: particleSize

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Sets the size of individual confetti particles in pixels. Larger values create bigger confetti pieces.

```APIDOC
ConfettiExplosion.particleSize:
  type: number
  defaultValue: 12
  example: <ConfettiExplosion particleSize={20} />
```

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

### ConfettiExplosion Prop: particleCount

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Defines the total number of confetti particles to be generated during the explosion. A higher count results in more particles.

```APIDOC
ConfettiExplosion.particleCount:
  type: number
  defaultValue: 150
  example: <ConfettiExplosion particleCount={200} />
```

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

### ConfettiExplosion Prop: colors

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

An array of strings defining the colors to be used for the confetti particles. Accepts any valid CSS color format, including hex, named colors, or CSS variables.

```APIDOC
ConfettiExplosion.colors:
  type: Array<string>
  defaultValue: ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
  example: <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
```

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

### ConfettiExplosion Prop: stageWidth

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Sets the horizontal boundary in pixels within which confetti particles will fall. Particles will not extend beyond this width.

```APIDOC
ConfettiExplosion.stageWidth:
  type: number
  defaultValue: 1600
  example: <ConfettiExplosion stageWidth={500} />
```

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

### Customize Confetti Behavior with Props

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/react/README.md

Shows how to pass `particleCount` and `force` props to the `Confetti` component to modify the number of particles and their explosion force.

```tsx
<Confetti particleCount={200} force={0.3} />
```

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

### ConfettiExplosion Prop: stageHeight

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Sets the vertical boundary in pixels within which confetti particles will fall. Particles will not extend beyond this height.

```APIDOC
ConfettiExplosion.stageHeight:
  type: number
  defaultValue: 800
  example: <ConfettiExplosion stageHeight={500} />
```

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

### ConfettiExplosion Prop: duration

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Specifies the total duration of the confetti animation in milliseconds. After this period, particles will typically be destroyed.

```APIDOC
ConfettiExplosion.duration:
  type: number
  defaultValue: 3500
  example: <ConfettiExplosion duration={5000} />
```

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

### ConfettiExplosion Prop: destroyAfterDone

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

A boolean flag indicating whether all confetti DOM nodes should be removed from memory after the animation duration. Defaults to true to free up resources.

```APIDOC
ConfettiExplosion.destroyAfterDone:
  type: boolean
  defaultValue: true
  example: <ConfettiExplosion destroyAfterDone={false} />
```

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

### ConfettiExplosion Prop: particlesShape

Source: https://github.com/puruvj/neoconfetti/blob/main/packages/core/README.md

Determines the shape of the confetti particles. Options include 'mix' (both circles and rectangles), 'circles' (only circles), or 'rectangles' (only rectangles).

```APIDOC
ConfettiExplosion.particlesShape:
  type: 'mix' | 'circles' | 'rectangles'
  defaultValue: 'mix'
  example: <ConfettiExplosion particlesShape="circles" />
```

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