Confetti: Enhance your app with micro-interactions that delight users by showering them with confetti, emojis, or balloons as rewards

Vue 3 only. Not compatible with Vue 2

This package is a port of react-rewards.

Demo

Here is a simple demo and here’s the code for the demo.

About

vue-rewards lets you add micro-interactions to your app, and rewards users with the rain of confetti, emoji or balloons in seconds. Firing confetti all over the page may seem like a questionable idea, but keep in mind that rewarding users for their actions is not. If a huge cloud of smiling emoji doesn’t fit your application well, try changing the physics config to make it more subtle.

You can read more on the subject of micro-interactions in my blog post – https://www.thedevelobear.com/post/microinteractions/

Installation

pnpm install vue-rewards

or

yarn add vue-rewards

or

npm install vue-rewards

If you plan to use this with the Options API then you will need to add the following code to your main.js (or you may find the plugin registration in plugins/index.js):

import { createApp } from "vue";
import App from "./App.vue";
import VueRewards from "vue-rewards";
// your other plugins will be imported here

const app = createApp(App);

// This is the main part
app.use(VueRewards);

app.mount("#app");

Usage

In order to use the rewards, you’ll need to provide an element that will become the origin of the animation. This element needs to have an ID that matches the one used – it can be anywhere in the DOM as long as the IDs match.

You can place the element inside a button, center it and shoot up from the button. You can place it on top of the viewport with position: “fixed” and change the angle to 270, to shoot downwards. Try, experiment, have fun!

Animation particles are set to position: ‘fixed’ by default, but this can be changed through a config object.

You can use this package in both the composition API and the options API.

Using the Composition API

<script setup>
  import { useReward } from 'vue-rewards'
  import { onMounted } from 'vue'

  const config = {
    startVelocity:10,
    spread:180,
    elementCount:100
    // etc...
    // you can make this reactive instead etc.
  }

  // has to be in onMounted, otherwise the element won't be found.
  // This will trigger the animation immediately.
  onMounted(() => {
    // useReward has the following arguments:
    // userReward(id, type, config)
    // type can be one of 'confetti', 'balloons' or 'emoji'
    // no need to add # before the id
    // see below for all of the config options
    const { reward, isAnimating } = useReward('some-id', 'confetti', config);

    // to trigger the animation, call the reward function
    reward();

    // isAnimating is a boolean that is true when the animation is running
  })

  // or you can trigger the animation onclick
  // I have renamed reward to balloonsReward etc.

  const { reward: balloonsReward, isAnimating: isBalloonsAnimating } = useReward('some-id', 'balloons');
</script>

<template>
  <span id="some-id"> Let's celebrate! <span/>
  <button @click="balloonsReward">
    Click me!
  </button>
</template>

Using the Options API

Since we registered the plugin earlier we now have access to the $reward method in our components. $reward is the same as useReward. To get the same as above we do:

<template>
  <span id="some-id"> Let's celebrate! <span/>
  <button @click="balloonsReward">
    Click me!
  </button>
</template>

<script>
  export default {
    mounted() {
      const config = {
        startVelocity: 10,
        spread: 180,
        elementCount: 100
      }
      const { reward, isAnimating } = this.$reward('some-id', 'confetti', config);
      reward();
    },
    methods: {
      balloonsReward(id) {
        const { reward, isAnimating } = this.$reward(id, 'balloons');
        reward();
        return isAnimating
      }

    }
  }
</script>

Props & config

useReward/$reward params:

nametypedescriptionrequireddefaultidstringA unique id of the element you want to shoot fromyestypestring‘confetti’‘balloons’’emoji’configobjecta configuration object described belownosee below

Confetti config object:

nametypedescriptiondefaultlifetimenumbertime of life200anglenumberinitial direction of particles in degrees90decaynumberhow much the velocity decreases with each frame0.94spreadnumberspread of particles in degrees45startVelocitynumberinitial velocity of particles35elementCountnumberparticles quantity50elementSizenumberparticle size in px8zIndexnumberz-index of particles0positionstringone of CSSProperties[‘position’] – e.g. “absolute”“fixed”colorsstring[]An array of colors used when generating confetti[‘#A45BF1’, ‘#25C6F6’, ‘#72F753’, ‘#F76C88’, ‘#F5F770’]onAnimationComplete() => voidA function that runs when animation completesundefined

Balloons config object:

nametypedescriptiondefaultlifetimenumbertime of life600anglenumberinitial direction of balloons in degrees90decaynumberhow much the velocity decreases with each frame0.999spreadnumberspread of balloons in degrees50startVelocitynumberinitial velocity of the balloons3elementCountnumberballoons quantity10elementSizenumberballoons size in px20zIndexnumberz-index of balloons0positionstringone of CSSProperties[‘position’] – e.g. “absolute”“fixed”colorsstring[]An array of colors used when generating balloons[‘#A45BF1’, ‘#25C6F6’, ‘#72F753’, ‘#F76C88’, ‘#F5F770’]onAnimationComplete() => voidA function that runs when animation completesundefined

Emoji config object:

nametypedescriptiondefaultlifetimenumbertime of life200anglenumberinitial direction of emoji in degrees90decaynumberhow much the velocity decreases with each frame0.94spreadnumberspread of emoji in degrees45startVelocitynumberinitial velocity of emoji35elementCountnumberemoji quantity20elementSizenumberemoji size in px25zIndexnumberz-index of emoji0positionstringone of CSSProperties[‘position’] – e.g. “absolute”“fixed”emojistring[]An array of emoji to shoot[‘🤓’, ‘😊’, ‘🥳’]onAnimationComplete() => voidA function that runs when animation completesundefined

GitHub

View Github