Get Full Library

Confetti

Live Preview

You’re viewing the Free version of this component. The Pro version includes:

Animation Presets: Instead of just the standard burst, access continuous animation styles like "Falling" (snow effect) and "Side Cannons" (edge shooting), complete with customizable durations.

Custom Colors: Instead of the fixed rainbow palette, you can define your own specific color scheme using hex codes or color names via a new attribute.

3 Ready-to-Use Demos: Get started instantly with three pre-configured examples showcasing different confetti styles and triggers.

Upgrade to Pro

Instructions

Overview

Add festive confetti animations to your website that can be triggered by clicks or when elements come into view.

Getting Started

Quick Start

  1. Click the Copy Component button on the top of the page.
  2. Paste the component into your Webstudio site.

Manual Start

  1. Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Confetti/confetti-v1.0.js"></script>[/code-block]

  1. Add the Attribute: Add the dv-confetti attribute to any element you want to trigger confetti: <button dv-confetti="click count-200 spread-90">Celebrate!</button>

confetti attributes

Customization Options

Trigger Types

  • Use these options in the dv-confetti attribute:
    • click = Triggers confetti when element is clicked (default)
    • inview = Triggers confetti when element comes into view
  • Example: dv-confetti="inview"

Particle Settings

  • count-X = Number of confetti particles (default: 100)
    • Recommended range: 1 to 1000
    • Example: count-200
  • spread-X = Spread angle in degrees (default: 70)
    • Recommended range: 0 to 360
    • Example: spread-120

Origin Settings

  • origin-relative = Origin is relative to the element position (default)
  • origin-absolute = Origin is relative to the viewport
  • x-XX = X-axis origin point (default: 05 = 0.5)
    • Range: 00 to 10 (converted to 0.0 to 1.0)
    • Example: x-08 (becomes 0.8)
  • y-XX = Y-axis origin point (default: 05 = 0.5)
    • Range: 00 to 10 (converted to 0.0 to 1.0)
    • Example: y-02 (becomes 0.2)

Examples

  • Button with click trigger: <button dv-confetti="click count-150 spread-100">Click Me</button>
  • Element with view trigger: <div dv-confetti="inview count-300 spread-180 y-00">Appears with confetti</div>
  • Custom origin: <span dv-confetti="click count-50 origin-absolute x-00 y-00">Corner Burst</span>

Notes

  • The component automatically loads the required confetti library
  • Respects user preferences for reduced motion
  • Works with any HTML element that can receive attributes