# How to Customize and Trigger the Confetti Animation in Vue Color Avatar

> Learn to customize the Vue color avatar confetti animation colors physics and duration. Trigger the confetti effect manually by importing the helper into any Vue component.

- Repository: [LeoKu/vue-color-avatar](https://github.com/codennnn/vue-color-avatar)
- Tags: how-to-guide
- Published: 2026-02-27

---

**The confetti effect is powered by the `canvas-confetti` library bound to a dedicated `<canvas>` element, and you can customize colors, physics, and duration by editing the `showConfetti()` function in [`src/utils/index.ts`](https://github.com/codennnn/vue-color-avatar/blob/main/src/utils/index.ts) or trigger it manually by importing that helper into any Vue component.**

The `vue-color-avatar` repository uses a lightweight canvas-based particle system to celebrate special avatar generations. By default, the animation fires automatically when the random generator hits a rare probability threshold, but the implementation is fully exposed for custom triggers and visual tuning.

## Where the Confetti Animation Lives

The visual layer is rendered by **[`src/components/ConfettiCanvas.vue`](https://github.com/codennnn/vue-color-avatar/blob/main/src/components/ConfettiCanvas.vue)**, which places a fullscreen `<canvas id="confetti">` element at the root of the application. This canvas acts as the drawing surface for the `canvas-confetti` library.

The logic that drives the animation lives in **[`src/utils/index.ts`](https://github.com/codennnn/vue-color-avatar/blob/main/src/utils/index.ts)**. The exported `showConfetti()` function dynamically imports `canvas-confetti`, creates a custom instance bound to the `#confetti` canvas, and executes a timed animation loop that fires dual bursts from the left and right edges.

By default, `showConfetti()` is invoked inside **[`src/App.vue`](https://github.com/codennnn/vue-color-avatar/blob/main/src/App.vue)** whenever the avatar generator produces a special result based on the `TRIGGER_PROBABILITY` constant.

## How to Customize the Confetti Animation

All visual and behavioral parameters are hard-coded as constants inside `showConfetti()` in [`src/utils/index.ts`](https://github.com/codennnn/vue-color-avatar/blob/main/src/utils/index.ts). Edit these values to change the effect:

### Colors and Duration

The default color palette is defined on lines 69-71:

```typescript
const confettiColors = ['#6967fe', '#85e9f4', '#e16984']

```

Replace this array with any valid CSS color strings (hex, RGB, or named colors) to match your brand.

The animation duration is controlled on line 67:

```typescript
const duration = performance.now() + 1 * 1000

```

Change `1 * 1000` to any millisecond value (e.g., `3 * 1000` for a three-second celebration).

### Physics and Positioning

The dual-burst configuration uses these parameters on lines 74-76 and 81-83:

- **`angle`**: `60` (left burst) and `120` (right burst). Adjust to rotate the spray direction.
- **`spread`**: `55`. Increase for a wider fan or decrease for a tighter stream.
- **`origin.x`**: `0` (left edge) and `1` (right edge). Modify to move launch points inward or add `origin.y` for vertical positioning.

### Performance and Accessibility

The confetti instance is created with these options on lines 62-64:

```typescript
const myConfetti = confetti.create(canvasEle, {
  resize: true,
  useWorker: true,
  disableForReducedMotion: true,
})

```

- **`useWorker`**: Offloads physics to a Web Worker. Set to `false` to run on the main thread.
- **`disableForReducedMotion`**: Respects the user's `prefers-reduced-motion` setting. Set to `false` to force animation regardless of accessibility preferences.
- **`resize`**: Automatically resizes the canvas with the window. Disable if you manage sizing manually.

## How to Manually Trigger the Confetti Animation

Because `showConfetti()` is a pure utility function, you can invoke it from any Vue component or composable.

### Basic Button Trigger

Import the helper and call it inside an event handler:

```vue
<template>
  <button @click="celebrate">Celebrate!</button>
  <ConfettiCanvas />
</template>

<script setup lang="ts">
import { showConfetti } from '@/utils'
import ConfettiCanvas from '@/components/ConfettiCanvas.vue'

function celebrate() {
  // Custom logic can run here
  showConfetti()
}
</script>

```

The `<ConfettiCanvas />` component must be present in the template to provide the `<canvas id="confetti">` target.

### Triggering After Async Operations

Use the function after promises resolve, such as following an API call or image export:

```typescript
import { showConfetti } from '@/utils'

async function exportAvatar() {
  const blob = await generateAvatarBlob()
  downloadFile(blob)
  
  // Trigger celebration on successful export
  showConfetti()
}

```

## Advanced: Using Multiple Canvas Instances

If you need separate confetti zones (for example, modal overlays versus full-page celebrations), modify the canvas ID in [`ConfettiCanvas.vue`](https://github.com/codennnn/vue-color-avatar/blob/main/ConfettiCanvas.vue) and update the selector in `showConfetti()`:

```vue
<!-- ConfettiCanvas.vue -->
<canvas id="party-canvas" style="position:absolute; inset:0; width:100%; height:100%"></canvas>

```

```typescript
// utils/index.ts
const canvasEle = document.querySelector('#party-canvas') as HTMLCanvasElement

```

You can then export multiple factory functions from [`utils/index.ts`](https://github.com/codennnn/vue-color-avatar/blob/main/utils/index.ts), each targeting a different canvas ID, allowing simultaneous independent animations.

## Summary

- The confetti system relies on **`canvas-confetti`** bound to a `<canvas id="confetti">` element rendered by **[`src/components/ConfettiCanvas.vue`](https://github.com/codennnn/vue-color-avatar/blob/main/src/components/ConfettiCanvas.vue)**.
- All customization happens inside **`showConfetti()`** in [`src/utils/index.ts`](https://github.com/codennnn/vue-color-avatar/blob/main/src/utils/index.ts), including colors, duration, physics angles, and accessibility settings.
- Trigger the animation manually by importing `showConfetti` into any Vue component and calling it after the `<ConfettiCanvas />` element is mounted.
- Default automatic triggering occurs in **[`src/App.vue`](https://github.com/codennnn/vue-color-avatar/blob/main/src/App.vue)** when the random avatar generator hits the `TRIGGER_PROBABILITY` threshold.

## Frequently Asked Questions

### How do I change the confetti colors to match my brand?

Edit the `confettiColors` array inside `showConfetti()` in [`src/utils/index.ts`](https://github.com/codennnn/vue-color-avatar/blob/main/src/utils/index.ts). Replace the default `['#6967fe', '#85e9f4', '#e16984']` with your brand’s hex codes, RGB values, or CSS named colors. The next time `showConfetti()` runs, it will use your new palette.

### Can I trigger the confetti animation from a child component instead of App.vue?

Yes. Import `showConfetti` from `@/utils` into any child component and call it inside an event handler or lifecycle hook. Ensure that `<ConfettiCanvas />` is present in your template hierarchy (usually in [`App.vue`](https://github.com/codennnn/vue-color-avatar/blob/main/App.vue) or the parent layout) so the `#confetti` canvas element exists when the function executes.

### How do I make the confetti animation last longer or shorter?

Modify the `duration` constant in [`src/utils/index.ts`](https://github.com/codennnn/vue-color-avatar/blob/main/src/utils/index.ts) line 67. The default is `performance.now() + 1 * 1000` (one second). Change the multiplier to adjust the total runtime—for example, `3 * 1000` for three seconds or `500` for half a second. The animation loop will continue firing bursts until the current time exceeds this duration value.

### Is the confetti animation accessible for users with motion sensitivity?

By default, yes. The `canvas-confetti` instance is initialized with `disableForReducedMotion: true` in [`src/utils/index.ts`](https://github.com/codennnn/vue-color-avatar/blob/main/src/utils/index.ts), which automatically suppresses the animation when the user’s system preferences indicate reduced motion. If you need to override this behavior for specific use cases, change the value to `false`, though this is generally discouraged for accessibility compliance.