Git Product home page Git Product logo

svelte-confetti's Introduction

Svelte Confetti

tests passing npm version npm downloads bundle size

Add a little bit of flair to your app with some confetti 🎊! There are no dependencies and it's tiny in size. Even better; it works without JavaScript with the help of SSR in SvelteKit.

Demo and Docs: https://mitcheljager.github.io/svelte-confetti/

Installation

Install using Yarn or NPM.

yarn add svelte-confetti --dev
npm install svelte-confetti --save-dev

Include the component in your app.

import { Confetti } from "svelte-confetti"
<Confetti />

Usage

For detailed documentation on every property check out: https://mitcheljager.github.io/svelte-confetti/

Configuration

Property Default Description
size 10 The max size in pixels of the individual confetti pieces.
x [-0.5, 0.5] The max horizontal range of the confetti pieces. Negative is left, positive is right. [-1, 1] would mean maximum of 200px left and 200px right.
y [0.25, 1] The max vertical range of the confetti pieces. Negative is down, positive is up. [-1, 1] would mean maximum of 200px down and 200px up.
duration 2000 Duration of the animation for each individual piece.
infinite false If set to true the animation will play indefinitely.
delay [0, 50] Used to set a random delay for each piece. A large difference between each number will mean a longer spray time.
colorRange [0, 360] Color range on the HSL color wheel. 0 to 360 is full RGB. 75 To 150 would be only green colors.
colorArray [] Can be used to pick a random color from this array. Set just one array elements to have a single color. Accepts any viable css background property, including gradients and images.
amount 50 Amount of particles spawned. The larger your spray the more pieces you might want. Be careful with too many as it might impact performance.
iterationCount 1 How many times the animation will play before stopping. Is overwritten by the "infinite" property.
fallDistance "100px" How far each piece falls. Accepts any css property, px, rem, vh, etc, but not 0.
rounded false Set to true to make each confetti piece rounded.
cone false Set to true to make the explosion appear in a cone like shape which might feel more realistic when dealing with a larger amount.
noGravity false Set to true to make the particles accelerate at a constant speed without "falling" down. Give it a more explosion like effect.
xSpread 0.15 A number from 0 to 1 that determines how far the particles spread horizontally. A low number will mean the x near the peak and the x near the end are similar.
destroyOnComplete true By default the elements are removed when the animation is complete. Set to false to prevent this behaviour.
disableForReducedMotion false Disable animations for those with reduced motion preferences.

svelte-confetti's People

Contributors

mitcheljager avatar bersling avatar mstachowiak avatar

Stargazers

Posandu Mapa avatar Mario Lurig avatar chick_0 avatar Stefano Vittorio Porta avatar  avatar David Dal Busco avatar Michał Gdula avatar Allan avatar Morgan Dilling avatar  avatar  avatar Igor Lanko avatar Stephen Gunn avatar Koen Berkhout avatar Varun Sahni avatar Taylor avatar leuwenn avatar Fadlul Alim avatar  avatar Jayesh Potlabattini avatar  avatar  avatar Purkylin avatar Vladyslav Pavlenko avatar Vojtěch Jungmann avatar Dave Smart avatar Guilherme Sousa avatar Patrik Pihlström avatar Doctor Eval() avatar Neil Savin avatar Peter John Arao avatar Błażej Nowakowski avatar Scott Barnard avatar smari avatar Florian avatar fabrykowski avatar Bohdan Shulha avatar James Moore avatar Eytan avatar Jakob avatar  avatar Jeff McMorris avatar Rinrin.rs avatar Michael avatar Dev Gaurav Jatt avatar Phanuprat Suwannachan avatar  avatar Charlie Coppinger avatar Ihar avatar Alon Krymgand avatar Malte avatar Ivan Vlatković avatar Hari Meyyappan avatar Tomas Lapes avatar  avatar Lily avatar  avatar Andreas Biørn-Hansen avatar  avatar Guy Barnard avatar Jes Gonzalez avatar  avatar  avatar Miguel Soares avatar rdupz avatar Juan Mesa avatar Jetsadakorn Maliwan avatar Kyle Malloy avatar thib avatar Andrii Zontov avatar  avatar nichenqin avatar Fabio Rizzo Matos avatar Abdul Samad avatar Emil Lystimaki avatar Rakan Jawanh avatar Willow avatar Martin Diaz avatar Naveen avatar Alexandre Castlenine avatar Matthew Noel avatar Kazuumi Nishimura avatar Christophe R Patraldo avatar Sasan Jaghori avatar  avatar !!Timothy avatar Shivaprasad Bhat avatar Ajay avatar Andre Esteves Perrone avatar  avatar Caidan Williams avatar Mathias Løken avatar Alexandros Nicolaides avatar Anastasios Statiris avatar jsntlr avatar Graham Steffaniak avatar aji pangestu avatar Tresor Kambembo  avatar Robert Saramet avatar Nutchapon Makelai avatar

Watchers

James Cloos avatar  avatar  avatar

svelte-confetti's Issues

Request: Include typescript definitions

Error: Could not find a declaration file for module 'svelte-confetti'.
 '/node_modules/.pnpm/[email protected]/node_modules/svelte-confetti/src/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/svelte-confetti` if it exists or add a new declaration (.d.ts) file containing `declare module 'svelte-confetti';` (ts)
  import { Confetti } from 'svelte-confetti'

@types/svelte-confetti is not in the npm registry

Breaking version published as minor 1.3.0

Hi there,

Thank you for this nicely documented library!

It's nice if npm dependencies can follow the semver. By default, deps are installed with ^, and so minor versions are included.

Version 1.3.0 was published as a minor update despite bringing a breaking change - dependency on Svelte 4. Following the semver, it should've been 2.0.0.

There is not much one can do at this point since it would require quite a bit of work, but I'm just letting you know nicely, as I see this was done on multiple of your npm packages and it complicates things for people using the packages downstream.

Thanks again

Remove lockfile

There are currently two lockfiles in the repository, yarn.lock and package-lock.json. Two (possible) ways that this should be mitigated:

  • Choose a preferred package manager (personally in favor of yarn or pnpm)
  • Exclude a preferred package manager (as this is a library, there's no need to have a lockfile, especially considering that it encourages CI to test against unpinned files that won't be replicated).

Confetti rain lagging

Hello, when I take back the confetti rain from the documentation my whole page starts to lag whereas on the documentation site no problem, would you know where this could be coming from? Example here. The today's answer is "Neon".

svelte-confetti doesn't appear to be written in CJS

I just upgraded to the latest version "svelte-confetti": "^1.2.1" and found this warning:

svelte-confetti doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

So like my computer said, I'm contacting you here to fix this :)

No confetti when Windows animations are disabled

Currently the library decides that the confetti should not be displayed at all when prefers-reduced-motion media selector goes through. I think this decision should be left to the users of the library instead. The main problem is that Windows has this one setting to disable animations that affects a very large set of features and this library not working is quite unexpected behavior in that case.

@media (prefers-reduced-motion) {
  .confetti,
  .confetti::before {
    animation: none;
  }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.