FxConfetti

Global click confetti effect with three modes: gold stars, colored paper, and custom Emoji.

Effect Description

When the user clicks anywhere on the page, confetti particles are released at the click position.

Gold Stars Mode (Default)

• Gold stars (⭐ shape)
• Gold circular confetti

Colored Paper Mode

• Colorful square paper pieces (red, green, blue, yellow, orange)

Custom Emoji Mode

• Uses canvas-confetti's shapeFromText API to render Emoji as particle shapes
• Supports single or multiple Emoji

Configuration

Enable/Disable

themeConfig: {
  confetti: true,   // Enable (default)
  confetti: false,  // Disable
}

Choose Preset Shape

themeConfig: {
  // Gold stars (default)
  confetti: true,

  // Colored paper
  confetti: { shape: "colored-paper" },
}

Custom Emoji

themeConfig: {
  // Single Emoji
  confetti: { shapes: "🌸" },

  // Multiple Emoji
  confetti: { shapes: ["🌸", "🎀", "🦄"] },
}

Secondary Particles

By default, each click releases both primary and secondary particles. Disable with secondary:

themeConfig: {
  // Disable secondary particles
  confetti: { shape: "colored-paper", secondary: false },
}

TIP

When both shape and shapes are configured, shapes (custom Emoji) takes priority.

Technical Details

• Based on the canvas-confetti library
• Custom Emoji rendered using confetti.shapeFromText() API
• Component has no visual template (empty <template>), only registers a global click event listener
• Uses defineClientComponent for lazy loading, does not affect SSR
• Compatible with VitePress's View Transition switching animation