@@ -6,38 +6,51 @@ import confetti from 'canvas-confetti';
6
6
7
7
const defaultColors = [ '#889BF2' , '#C3CDF9' , '#6079ED' ] ;
8
8
9
+ const randomInRange = ( min : number , max : number ) : number =>
10
+ Math . floor ( Math . random ( ) * ( max - min ) + min ) ;
11
+
12
+ // Use a rectangle instead of an square on supported browsers.
13
+ const rectangle =
14
+ typeof Path2D === 'function' && typeof DOMMatrix === 'function'
15
+ ? confetti . shapeFromPath ( {
16
+ path : 'M0,0 L2,0 L2,1 L0,1 Z' ,
17
+ } )
18
+ : 'square' ;
19
+
20
+ // Adjust particle amount based on screen size.
21
+ const particleLength = ( window . innerWidth + window . innerHeight ) / 50 ;
22
+
9
23
const fireConfetti = ( colors : string [ ] ) => {
10
24
const defaults = {
11
- origin : { y : 0.3 } ,
12
25
spread : 360 ,
26
+ particleCount : 1 ,
27
+ startVelocity : 0 ,
13
28
zIndex : 1000000 ,
14
- colors,
15
29
} ;
16
30
17
- const rectangle = confetti . shapeFromPath ( {
18
- path : 'M0,0 L2,0 L2,1 L0,1 Z' ,
19
- } ) ;
20
-
21
- confetti ( {
22
- ...defaults ,
23
- particleCount : 20 ,
24
- shapes : [ rectangle ] ,
25
- scalar : 4 ,
26
- startVelocity : 60 ,
27
- } ) ;
28
- confetti ( {
29
- ...defaults ,
30
- particleCount : 20 ,
31
- shapes : [ rectangle ] ,
32
- scalar : 2 ,
33
- startVelocity : 40 ,
34
- } ) ;
35
- confetti ( {
36
- ...defaults ,
37
- particleCount : 40 ,
38
- shapes : [ 'circle' ] ,
39
- startVelocity : 20 ,
40
- } ) ;
31
+ for ( let i = 0 ; i < particleLength ; i ++ ) {
32
+ confetti ( {
33
+ ...defaults ,
34
+ colors : [ colors [ randomInRange ( 0 , colors . length ) ] ] ,
35
+ origin : {
36
+ x : Math . random ( ) ,
37
+ y : Math . random ( ) * 0.999 - 0.2 ,
38
+ } ,
39
+ drift : randomInRange ( - 2 , 2 ) ,
40
+ shapes : [ 'circle' ] ,
41
+ } ) ;
42
+ confetti ( {
43
+ ...defaults ,
44
+ colors : [ colors [ randomInRange ( 0 , colors . length ) ] ] ,
45
+ origin : {
46
+ x : Math . random ( ) ,
47
+ y : Math . random ( ) * 0.999 - 0.2 ,
48
+ } ,
49
+ shapes : [ rectangle ] ,
50
+ drift : randomInRange ( - 2 , 2 ) ,
51
+ scalar : randomInRange ( 2 , 4 ) ,
52
+ } ) ;
53
+ }
41
54
} ;
42
55
43
56
interface Props {
0 commit comments