ConfettiTrigger

Triggers a confetti explosion on page load, button click, or manually. Uses hardware‑accelerated canvas animation for celebration moments such as form‑submission success, milestone achievements, or festive events.

Use Cases

• Form submission success celebration (RSVP, registration, purchase)
• Landing page hero celebration on load (festive events)
• Interactive ‘Celebrate’ button for engagement
• Event registration confirmation pages
• Milestone achievement pages (completed course, reached goal)
• Contest winner announcement pages

Properties

trigger

When to fire confetti. Type: string. Options: on-load, on-click, manual. Default: on-load.

Tip: landing_page → on-load (fires automatically after 300 ms delay); success_page → on-load (celebrates form submission success); interactive → on-click (user triggers celebration); future → manual (for script integration – currently hidden)

colors

Comma-separated list of hex color codes for confetti particles. Type: string. Default: #ff0000, #00ff00, #0000ff, #ffff00, #ff00ff.

particleCount

Number of confetti particles (50‑300). Lower = subtle, higher = energetic. RECOMMENDED: 100‑200 for mobile performance. Type: number. Default: 150.

spread

Angle spread in degrees (0‑360). 70° = focused burst, 180° = wide spray, 360° = omnidirectional explosion. Type: number. Default: 70.

origin

Origin point for confetti (x: 0‑1 horizontal, y: 0‑1 vertical). { x: 0.5, y: 0.5 } = center. Type: object. Default: {"x":0.5,"y":0.5}.

duration

Animation duration in milliseconds (1000‑10000). 3000 ms (3 seconds) is balanced. Type: number. Default: 3000.

clickableText

Button text (only used if trigger='on-click'). Type: string. Default: Celebrate!.

buttonVariant

Button style (only used if trigger='on-click'). Type: string. Options: primary, secondary. Default: primary.

Best Practices

• CRITICAL: ONLY use for emotionally appropriate moments (celebrations, success, weddings, events)
• NEVER use for business form submissions or professional apps (distracting and unprofessional)
• Use trigger='on-load' for landing pages with celebration theme
• Use trigger='on-click' for interactive celebration buttons
• Limit particleCount to 100‑200 for performance (mobile‑friendly)
• Choose colors matching brand palette (avoid default rainbow for professional contexts)
• Respects prefers‑reduced‑motion for accessibility (confetti disabled automatically)
• For wedding RSVP success: use soft pastel colors (#ffb6c1, #f5d0fe, #fce7f3, #ffd700)
• For high‑energy events: use vibrant colors (#ff0000, #00ff00, #0000ff, #ffff00)

Common Mistakes

Using ConfettiTrigger for business/SaaS form submissions

Why it's a problem: Confetti is unprofessional in business contexts - distracting and childish

Fix: ONLY use for celebrations, weddings, events. For SaaS, use simple success message with checkmark.

Using default rainbow colors for weddings

Why it's a problem: Rainbow colors (#ff0000, #00ff00, #0000ff) clash with elegant wedding aesthetic

Fix: Use soft pastels for weddings: #ffb6c1, #f5d0fe, #fce7f3, #ffd700

Setting particleCount > 200 on mobile

Why it's a problem: High particle counts lag on mobile devices

Fix: Use 100‑200 particles for mobile‑friendly performance

Using trigger='on-load' for every page

Why it's a problem: Confetti on every page is annoying and loses impact

Fix: ONLY use on-load for landing/success pages. Reserve confetti for special moments.