feat: enhance star cursor effects with longer lifetime

Update star particles to last 2 seconds for better magic effect.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>

app/globals.css

@@ -172,6 +172,20 @@
   }
 }
 
+/* Updated animation duration from 0.8s to 1.5s in component */
+
+/* New rainbow star animation that lasts longer and shoots outward */
+@keyframes cursor-rainbow-star {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0) scale(1) rotate(0deg);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(calc(var(--vx) * 50px), calc(var(--vy) * 50px)) scale(0.2) rotate(720deg);
+  }
+}
+
 /* New arc animation that shoots outward */
 @keyframes cursor-arc {
   0% {

components/cursor-effects.tsx

@@ -64,6 +64,18 @@ export function CursorEffects() {
           x: e.clientX,
           y: e.clientY,
           type: "rainbow",
+          color: [
+            "#ff0000",
+            "#ff9a00",
+            "#d0de21",
+            "#4fdc4a",
+            "#3fdad8",
+            "#2fc9e2",
+            "#1c7fee",
+            "#5f15f2",
+            "#ba0cf8",
+            "#fb07d9",
+          ][Math.floor(Math.random() * 10)],
           vx: Math.cos(angle) * speed,
           vy: Math.sin(angle) * speed,
           angle: angle,
@@ -72,10 +84,9 @@ export function CursorEffects() {
 
       setParticles((prev) => [...prev, ...newParticles])
 
-      // Remove old particles after animation
       setTimeout(() => {
         setParticles((prev) => prev.filter((p) => !newParticles.find((np) => np.id === p.id)))
-      }, 1000)
+      }, 2000)
     }
 
     window.addEventListener("mousemove", handleMouseMove)
@@ -98,7 +109,7 @@ export function CursorEffects() {
               className="h-3 w-3 -translate-x-1/2 -translate-y-1/2"
               style={
                 {
-                  animation: "cursor-spark 0.8s ease-out forwards",
+                  animation: "cursor-spark 1.5s ease-out forwards",
                   "--vx": particle.vx,
                   "--vy": particle.vy,
                 } as React.CSSProperties
@@ -110,18 +121,29 @@ export function CursorEffects() {
             </div>
           ) : (
             <div
-              className="h-12 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+              className="h-4 w-4 -translate-x-1/2 -translate-y-1/2"
               style={
                 {
-                  background:
-                    "linear-gradient(to bottom, #ff0000, #ff9a00, #d0de21, #4fdc4a, #3fdad8, #2fc9e2, #1c7fee, #5f15f2, #ba0cf8, #fb07d9)",
-                  animation: "cursor-arc 0.7s ease-out forwards",
-                  transform: `rotate(${(particle.angle || 0) * (180 / Math.PI)}deg)`,
+                  animation: "cursor-rainbow-star 1.8s ease-out forwards",
                   "--vx": particle.vx,
                   "--vy": particle.vy,
                 } as React.CSSProperties
               }
-            />
+            >
+              <svg viewBox="0 0 24 24" fill="url(#rainbow-gradient)">
+                <defs>
+                  <linearGradient id="rainbow-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stopColor="#ff0000" />
+                    <stop offset="20%" stopColor="#ff9a00" />
+                    <stop offset="40%" stopColor="#4fdc4a" />
+                    <stop offset="60%" stopColor="#2fc9e2" />
+                    <stop offset="80%" stopColor="#5f15f2" />
+                    <stop offset="100%" stopColor="#fb07d9" />
+                  </linearGradient>
+                </defs>
+                <path d="M12 0L14.59 9.41L24 12L14.59 14.59L12 24L9.41 14.59L0 12L9.41 9.41L12 0Z" />
+              </svg>
+            </div>
           )}
         </div>
       ))}

next.config.mjs

@@ -1,5 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: 'export',
+  distDir: 'out',
   eslint: {
     ignoreDuringBuilds: true,
   },