docs: use vitepress

docs2/components/home/flows/confetti.ts

@@ -0,0 +1,69 @@
+import confetti from 'canvas-confetti'
+
+export const fireworks = (colors?: string[]) => {
+  return new Promise((resolve) => {
+    const duration = 15 * 1000
+    const animationEnd = Date.now() + duration
+    const defaults = { startVelocity: 60, spread: 360, ticks: 20, zIndex: 0 }
+
+    function randomInRange(min: number, max: number) {
+      return Math.random() * (max - min) + min
+    }
+
+    const interval: any = setInterval(function () {
+      const timeLeft = animationEnd - Date.now()
+
+      if (timeLeft <= 0) {
+        clearInterval(interval)
+        return resolve(true)
+      }
+
+      const particleCount = 50 * (timeLeft / duration)
+      // since particles fall down, start a bit higher than random
+      confetti(
+        Object.assign({}, defaults, {
+          particleCount,
+          origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+          colors,
+        }),
+      )
+      confetti(
+        Object.assign({}, defaults, {
+          particleCount,
+          origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+          colors,
+        }),
+      )
+    }, 250)
+  })
+}
+
+export const cheer = (colors: string[]) => {
+  return new Promise((resolve) => {
+    const end = Date.now() + 2 * 1000
+
+    function frame() {
+      confetti({
+        particleCount: 2,
+        angle: 60,
+        spread: 75,
+        origin: { x: 0 },
+        colors,
+      })
+      confetti({
+        particleCount: 2,
+        angle: 120,
+        spread: 75,
+        origin: { x: 1 },
+        colors,
+      })
+
+      if (Date.now() < end) {
+        requestAnimationFrame(frame)
+      } else {
+        resolve(true)
+      }
+    }
+    frame()
+  })
+}