Custom Components
Confetti
Live Preview

Confetti

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