Skip to content

Instantly share code, notes, and snippets.

@tobimori

tobimori/nice.ts

Created July 1, 2022 09:12
Show Gist options
  • Save tobimori/e78db720f4add6a185b7f5e140771ab2 to your computer and use it in GitHub Desktop.
Save tobimori/e78db720f4add6a185b7f5e140771ab2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tobimori created this gist Jul 1, 2022.
    170 changes: 170 additions & 0 deletions nice.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,170 @@
    import { tsParticles } from 'tsparticles-engine'
    import { loadFull } from 'tsparticles'

    export const confetti = async () => {
    await loadFull(tsParticles)

    await tsParticles.load('egg', {
    emitters: [
    {
    position: {
    x: 0,
    y: 30
    },
    rate: {
    quantity: 5,
    delay: 0.15
    },
    particles: {
    move: {
    direction: 'top-right',
    outModes: {
    top: 'none',
    left: 'none',
    default: 'destroy'
    }
    }
    }
    },
    {
    position: {
    x: 100,
    y: 30
    },
    rate: {
    quantity: 5,
    delay: 0.15
    },
    particles: {
    move: {
    direction: 'top-left',
    outModes: {
    top: 'none',
    right: 'none',
    default: 'destroy'
    }
    }
    }
    }
    ],
    particles: {
    color: {
    value: ['#ffffff', '#FF0000']
    },
    move: {
    decay: 0.05,
    direction: 'top',
    enable: true,
    gravity: {
    enable: true
    },
    outModes: {
    top: 'none',
    default: 'destroy'
    },
    speed: {
    min: 10,
    max: 50
    }
    },
    number: {
    value: 0
    },
    opacity: {
    value: 1
    },
    rotate: {
    value: {
    min: 0,
    max: 360
    },
    direction: 'random',
    animation: {
    enable: true,
    speed: 30
    }
    },
    tilt: {
    direction: 'random',
    enable: true,
    value: {
    min: 0,
    max: 360
    },
    animation: {
    enable: true,
    speed: 30
    }
    },
    size: {
    value: {
    min: 0,
    max: 2
    },
    animation: {
    enable: true,
    startValue: 'min',
    count: 1,
    speed: 16,
    sync: true
    }
    },
    roll: {
    darken: {
    enable: true,
    value: 25
    },
    enable: true,
    speed: {
    min: 5,
    max: 15
    }
    },
    wobble: {
    distance: 30,
    enable: true,
    speed: {
    min: -7,
    max: 7
    }
    },
    shape: {
    type: 'image',
    options: {
    image: [
    {
    src: '/assets/confetti/mint.png',
    width: 184,
    height: 100,
    particles: {
    size: {
    value: 12
    }
    }
    },
    {
    src: '/assets/confetti/coral.png',
    width: 184,
    height: 69,
    particles: {
    size: {
    value: 12
    }
    }
    },
    {
    src: '/assets/confetti/sand.png',
    width: 184,
    height: 55,
    particles: {
    size: {
    value: 12
    }
    }
    }
    ]
    }
    }
    }
    })
    }