feat(particles): repulse hover + stars + wobble + constellation links

- Hover: partículas huyen del cursor con repulse (factor 4, radio 120px)
- Click/tap: genera 5 partículas en el punto tocado
- Formas: 75% círculos + 25% estrellas de 4 puntas (inset 0.45)
- Wobble: oscilación orgánica en todas las partículas
- Links: red de constelaciones tenue (indigo, opacity 0.12)
- Colores: cyan, indigo, blanco, lavanda, cian claro, amarillo pálido
- Opacity + size animation para twinkle y pulso

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: devsart95

src/components/StarfieldCanvas.tsx

@@ -6,59 +6,80 @@ import type { ISourceOptions } from '@tsparticles/engine'
 const OPTIONS: ISourceOptions = {
   fpsLimit: 60,
   background: { color: { value: 'transparent' } },
+  detectRetina: true,
+
   particles: {
-    number: { value: 160 },
+    number: { value: 130 },
+
     color: {
-      value: ['#ffffff', '#bfdbfe', '#a5f3fc', '#e9d5ff', '#fef9c3', '#c7d2fe'],
+      value: ['#ffffff', '#38bdf8', '#818cf8', '#c4b5fd', '#67e8f9', '#fef9c3'],
+    },
+
+    shape: {
+      type: ['circle', 'circle', 'circle', 'star'],   // 75% circles, 25% stars
+      options: {
+        star: { sides: 4, inset: 0.45 },
+      },
     },
-    shape: { type: 'circle' },
+
     opacity: {
-      value: { min: 0.04, max: 0.9 },
+      value: { min: 0.06, max: 0.95 },
       animation: {
         enable: true,
-        speed: { min: 0.3, max: 1.8 },
+        speed: { min: 0.4, max: 2 },
         sync: false,
       },
     },
+
     size: {
-      value: { min: 0.2, max: 2.2 },
+      value: { min: 0.4, max: 2.8 },
       animation: {
         enable: true,
-        speed: 1.2,
+        speed: { min: 0.8, max: 2.5 },
         sync: false,
       },
     },
+
     links: {
       enable: true,
-      distance: 150,
+      distance: 140,
       color: '#818cf8',
-      opacity: 0.1,
+      opacity: 0.12,
       width: 0.7,
     },
+
+    wobble: {
+      enable: true,
+      distance: 8,
+      speed: { angle: 8, move: 10 },
+    },
+
     move: {
       enable: true,
-      speed: { min: 0.05, max: 0.45 },
+      speed: { min: 0.08, max: 0.5 },
       direction: 'none',
       random: true,
       straight: false,
       outModes: { default: 'out' },
     },
   },
+
   interactivity: {
     detectsOn: 'window',
     events: {
-      onHover: { enable: true, mode: 'grab' },
-      onClick: { enable: true, mode: 'push' },
+      onHover: { enable: true, mode: 'repulse' },
+      onClick:  { enable: true, mode: 'push' },
     },
     modes: {
-      grab: {
-        distance: 200,
-        links: { opacity: 0.55, color: '#38bdf8' },
+      repulse: {
+        distance: 120,
+        duration: 0.5,
+        factor: 4,
+        speed: 1,
       },
-      push: { quantity: 3 },
+      push: { quantity: 5 },
     },
   },
-  detectRetina: true,
 }
 
 export function StarfieldCanvas() {
@@ -76,12 +97,7 @@ export function StarfieldCanvas() {
     <Particles
       id="tsparticles"
       options={OPTIONS}
-      style={{
-        position: 'fixed',
-        inset: 0,
-        zIndex: 0,
-        pointerEvents: 'none',
-      }}
+      style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}
     />
   )
 }