# Success Confetti

Deterministic particle burst from a chosen origin point.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @framecn/success-confetti
```

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { SuccessConfetti } from "@/components/framecn/success-confetti";
```

```tsx
<SuccessConfetti />
```

## API Reference

### SuccessConfetti

| Prop               | Type       | Default                                                   |
| ------------------ | ---------- | --------------------------------------------------------- |
| `count`            | `number`   | `60`                                                      |
| `colors`           | `string[]` | `["#ff5e3a", "#22c55e", "#0ea5e9", "#facc15", "#a855f7"]` |
| `originX`          | `number`   | `0.5`                                                     |
| `originY`          | `number`   | `0.5`                                                     |
| `gravity`          | `number`   | `0.4`                                                     |
| `velocity`         | `number`   | `12`                                                      |
| `text`             | `string`   | `"Merged!"`                                               |
| `textColor`        | `string`   | `"#171717"`                                               |
| `background`       | `string`   | `"#fafafa"`                                               |
| `seed`             | `string`   | `"framecn"`                                               |
| `speed`            | `number`   | `1`                                                       |
| `fps`              | `number`   | `30`                                                      |
| `durationInFrames` | `number`   | `90`                                                      |
| `className`        | `string`   | `-`                                                       |

## Notes

  The confetti uses deterministic physics with seeded random values. Same inputs
  always produce the same particle patterns.

  Higher particle counts may impact performance. Keep particleCount under 100
  for smooth animations.