Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 118x 1x 60x 60x 1x 59x 59x 59x | import confetti from 'canvas-confetti'
export const fireConfetti = () => {
const duration = 3000
const animationEnd = Date.now() + duration
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min
const interval: ReturnType<typeof setInterval> = setInterval(() => {
const timeLeft = animationEnd - Date.now()
Iif (timeLeft <= 0) {
return clearInterval(interval)
}
const particleCount = 50 * (timeLeft / duration)
confetti({
...defaults,
particleCount,
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
})
})
}
export const fireGoalCelebration = () => {
const duration = 15 * 1000
const animationEnd = Date.now() + duration
const defaults = { startVelocity: 45, spread: 360, ticks: 100, zIndex: 1000 }
const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min
const interval: ReturnType<typeof setInterval> = setInterval(() => {
const timeLeft = animationEnd - Date.now()
if (timeLeft <= 0) {
return clearInterval(interval)
}
const particleCount = 100 * (timeLeft / duration)
confetti({
...defaults,
particleCount,
origin: { x: randomInRange(0.1, 0.4), y: Math.random() - 0.2 },
})
confetti({
...defaults,
particleCount,
origin: { x: randomInRange(0.6, 0.9), y: Math.random() - 0.2 },
})
}, 250)
}
|