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

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 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, 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. 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 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. Edit these values to change the effect:

Colors and Duration

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

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:

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:

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:

<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:

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 and update the selector in showConfetti():

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

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

You can then export multiple factory functions from 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.
• All customization happens inside showConfetti() in 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 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. 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 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 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, 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}