diff --git a/app/globals.css b/app/globals.css index 034cf35..731634a 100644 --- a/app/globals.css +++ b/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% { diff --git a/components/cursor-effects.tsx b/components/cursor-effects.tsx index 1c62dbd..ed6ca0f 100644 --- a/components/cursor-effects.tsx +++ b/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() { ) : (
+ > + + )} ))} diff --git a/next.config.mjs b/next.config.mjs index f5cbc38..4e36b2d 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,5 +1,7 @@ /** @type {import('next').NextConfig} */ const nextConfig = { + output: 'export', + distDir: 'out', eslint: { ignoreDuringBuilds: true, },