@caddis/cli 0.0.0 → 0.2.0

package/bundles/antigravity-plugin/skills/particle-art/references/stipple-morph.template.tsx

@@ -0,0 +1,167 @@
+"use client";
+/**
+ * stipple-morph.template.tsx — Halftone dot cloud that morphs into a letter/shape on hover.
+ *
+ * USAGE:
+ *   1. Copy and rename (e.g. StippleMorph.tsx, HeroHalftone.tsx)
+ *   2. Pass `text` prop to set the target letter/word (default "j")
+ *   3. Adjust COLS × ROWS for dot density
+ *   4. The morph is driven by React synthetic onMouseMove/onMouseLeave — no addEventListener needed
+ *
+ * RENDERING: HTML spans (SSR-safe). Grid A built at module level; Grid B from canvas in useEffect.
+ * INTERACTION: hover canvas → cloud resolves into letter; leave → drifts back
+ * THEMING: --accent-strong CSS var for dot colour
+ */
+import { useEffect, useRef } from "react";
+
+const COLS = 24;
+const ROWS = 18;
+const SCAN_PERIOD = 480;
+const MORPH_SPEED = 0.045; // lerp speed; higher = snappier
+
+function srand(x: number, y: number): number {
+  return (Math.abs(Math.sin(x * 127.1 + y * 311.7) * 43758.5453)) % 1;
+}
+
+function charFor(v: number): string {
+  if (v > 0.68) return "●";
+  if (v > 0.35) return "•";
+  return "·";
+}
+
+// ── Grid A: Gaussian cloud — module-level, SSR-safe ───────────────────────────
+const GRID_A: number[][] = Array.from({ length: ROWS }, (_, yi) =>
+  Array.from({ length: COLS }, (_, xi) => {
+    const nx = (xi / (COLS - 1)) * 2 - 1;
+    const ny = (yi / (ROWS - 1)) * 2 - 1;
+    const dist = Math.sqrt(nx * nx + ny * ny);
+    const base = Math.exp(-(dist * dist) / (2 * 0.28 * 0.28));
+    return Math.max(0, Math.min(1, base + srand(xi * 53, yi * 97) * 0.12 - 0.06));
+  })
+);
+
+// Per-cell breathing params
+const B_PHASE = Array.from({ length: ROWS }, (_, yi) =>
+  Array.from({ length: COLS }, (_, xi) => srand(xi * 71, yi * 113) * Math.PI * 2)
+);
+const B_SPEED = Array.from({ length: ROWS }, (_, yi) =>
+  Array.from({ length: COLS }, (_, xi) => 0.008 + srand(xi, yi) * 0.006)
+);
+const B_AMP = Array.from({ length: ROWS }, (_, yi) =>
+  Array.from({ length: COLS }, (_, xi) => 0.04 + srand(xi + 50, yi) * 0.10)
+);
+
+// ── Grid B: sample canvas text → density map ──────────────────────────────────
+//
+// REPLACE `text` param or call with any string. Single chars work best.
+// For multi-char (e.g. "JS"), reduce font size:
+//   const fontSize = Math.floor(Math.min(ROWS*S*0.8, COLS*S*0.35));
+//
+function buildLetterGrid(text: string): number[][] {
+  const S = 8;
+  const oc = document.createElement("canvas");
+  oc.width  = COLS * S;
+  oc.height = ROWS * S;
+  const ctx = oc.getContext("2d")!;
+  const fontSize = Math.floor(Math.min(ROWS * S * 0.88, COLS * S * 0.55));
+  ctx.fillStyle = "#fff";
+  ctx.font = `bold ${fontSize}px sans-serif`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(text, (COLS * S) / 2, (ROWS * S) / 2);
+  const { data } = ctx.getImageData(0, 0, COLS * S, ROWS * S);
+  return Array.from({ length: ROWS }, (_, yi) =>
+    Array.from({ length: COLS }, (_, xi) => {
+      let sum = 0;
+      for (let dy = 0; dy < S; dy++)
+        for (let dx = 0; dx < S; dx++)
+          sum += data[((yi * S + dy) * COLS * S + (xi * S + dx)) * 4] / 255;
+      return Math.min(1, (sum / (S * S)) * 2.2);
+    })
+  );
+}
+
+// ── Component ──────────────────────────────────────────────────────────────────
+export function StippleMorphArt({ text = "j", className = "" }: { text?: string; className?: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  // Refs for cross-closure state — never stale in the RAF loop
+  const active = useRef(false);
+  const morphRef = useRef(0);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const GRID_B = buildLetterGrid(text);
+    const spans  = Array.from(container.querySelectorAll<HTMLElement>("span[data-xi]"));
+
+    let raf: number;
+    let frame = 0;
+
+    const tick = () => {
+      // Lerp morphStrength toward 0 (idle) or 1 (letter)
+      const m = morphRef.current + ((active.current ? 1 : 0) - morphRef.current) * MORPH_SPEED;
+      morphRef.current = m;
+
+      const cx = COLS / 2, cy = ROWS / 2;
+      const maxR = Math.sqrt(cx * cx + cy * cy);
+      const waveR = ((frame % SCAN_PERIOD) / SCAN_PERIOD) * (maxR + 1);
+
+      spans.forEach(el => {
+        const xi = +el.dataset.xi!;
+        const yi = +el.dataset.yi!;
+        const vA = GRID_A[yi][xi];
+        const vB = GRID_B[yi][xi];
+
+        const breathe = Math.sin(frame * B_SPEED[yi][xi] + B_PHASE[yi][xi]) * B_AMP[yi][xi] * (1 - m * 0.85);
+
+        const dist = Math.sqrt((xi - cx) ** 2 + (yi - cy) ** 2);
+        const diff = dist - waveR;
+        const wave = (Math.abs(diff) < 1.6 ? 0.38 : diff < 0 && diff > -3.5 ? 0.11 : 0) * (1 - m);
+
+        const v = Math.max(0, Math.min(1, vA * (1 - m) + vB * m + breathe + wave));
+        el.style.opacity = v.toFixed(3);
+        const c = charFor(v);
+        if (el.textContent !== c) el.textContent = c;
+      });
+
+      frame++;
+      raf = requestAnimationFrame(tick);
+    };
+    tick();
+    return () => cancelAnimationFrame(raf);
+  }, [text]);
+
+  return (
+    // React synthetic events on the container — reliable across all React modes
+    <div
+      ref={containerRef}
+      className={className}
+      style={{ userSelect: "none", lineHeight: 1.15, cursor: "crosshair" }}
+      onMouseMove={() => { active.current = true; }}
+      onMouseLeave={() => { active.current = false; }}
+      aria-hidden="true"
+    >
+      <div style={{ textAlign: "center", fontSize: "1.1rem", marginBottom: "0.3em", color: "rgb(var(--accent-strong))", opacity: 0.82 }}>
+        ✦
+      </div>
+      {Array.from({ length: ROWS }, (_, yi) => (
+        <div key={yi} style={{ display: "flex", justifyContent: "center", gap: "0.18em" }}>
+          {Array.from({ length: COLS }, (_, xi) => {
+            const v = GRID_A[yi][xi];
+            return (
+              <span
+                key={xi}
+                data-xi={xi}
+                data-yi={yi}
+                style={{ fontSize: "0.68rem", color: "rgb(var(--accent-strong))", opacity: v, transition: "none" }}
+              >
+                {charFor(v)}
+              </span>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

package/bundles/antigravity-plugin/skills/particle-art/references/stipple.template.tsx

@@ -0,0 +1,175 @@
+"use client";
+/**
+ * stipple.template.tsx — Animated Unicode halftone dot component template.
+ *
+ * USAGE:
+ *   1. Copy and rename (e.g. StipplePortrait.tsx, HeroStipple.tsx)
+ *   2. Adjust COLS × ROWS to control dot density
+ *   3. Replace the GRID density function with your own if desired
+ *   4. The scan wave and breathing animation work automatically
+ *
+ * RENDERING: Pure HTML/CSS spans — no canvas. Works with SSR.
+ * THEMING: Uses --accent-strong and --accent-soft CSS vars.
+ *
+ * DEPENDENCIES: none
+ */
+import { useEffect, useRef } from "react";
+
+// ── Grid parameters ────────────────────────────────────────────────────────────
+const COLS = 24;           // horizontal dot count
+const ROWS = 18;           // vertical dot count
+const SCAN_PERIOD = 480;   // frames per scan wave cycle
+
+// ── Dot character selection ────────────────────────────────────────────────────
+function charFor(v: number): string {
+  if (v > 0.68) return "●";
+  if (v > 0.35) return "•";
+  return "·";
+}
+
+// ── Deterministic pseudo-random (SSR-safe, no hydration mismatch) ──────────────
+function srand(x: number, y: number): number {
+  return (Math.abs(Math.sin(x * 127.1 + y * 311.7) * 43758.5453)) % 1;
+}
+
+// ── Pre-compute density grid at module level (stable across re-renders) ────────
+//
+// REPLACE THIS with your own density function.
+// Current: Gaussian falloff from centre — denser at middle, dispersing at edges.
+//
+// `v` is in [0, 1]: 1 = densest (●), 0 = emptiest (·)
+//
+const GRID: number[][] = Array.from({ length: ROWS }, (_, yi) =>
+  Array.from({ length: COLS }, (_, xi) => {
+    // Normalised distance from centre [0, 1]
+    const nx = (xi / (COLS - 1)) * 2 - 1;
+    const ny = (yi / (ROWS - 1)) * 2 - 1;
+    const dist = Math.sqrt(nx * nx + ny * ny);
+
+    // Gaussian envelope
+    const base = Math.exp(-(dist * dist) / (2 * 0.28 * 0.28));
+
+    // Jitter so dots don't look perfectly smooth
+    const jitter = srand(xi * 53, yi * 97) * 0.12 - 0.06;
+
+    return Math.max(0, Math.min(1, base + jitter));
+  })
+);
+
+// ── Animation state per dot ────────────────────────────────────────────────────
+interface DotAnim {
+  el: HTMLElement;
+  v: number;           // density value [0, 1]
+  x: number;           // column index
+  y: number;           // row index
+  phase: number;       // breathing phase offset
+  speed: number;       // breathing speed
+  amp: number;         // breathing amplitude
+}
+
+// ── Component ──────────────────────────────────────────────────────────────────
+//
+// Renders COLS×ROWS dots as animated spans.
+// The scan wave sweeps outward from centre periodically.
+// Each dot breathes (opacity oscillation) independently.
+//
+export function StippleArt({ className = "" }: { className?: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    // Reduced-motion: render static dots, skip animation
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    // Collect all dot spans with their attributes
+    const spans = container.querySelectorAll<HTMLElement>("span[data-v]");
+    const MAX_DOT_R = Math.sqrt(COLS * COLS + ROWS * ROWS) / 2;
+
+    const dots: DotAnim[] = Array.from(spans).map(el => ({
+      el,
+      v: parseFloat(el.dataset.v ?? "0"),
+      x: parseFloat(el.dataset.x ?? "0"),
+      y: parseFloat(el.dataset.y ?? "0"),
+      phase: srand(parseFloat(el.dataset.x ?? "0") * 71, parseFloat(el.dataset.y ?? "0") * 113) * Math.PI * 2,
+      speed: 0.008 + srand(parseFloat(el.dataset.x ?? "0"), parseFloat(el.dataset.y ?? "0")) * 0.006,
+      amp: 0.04 + srand(parseFloat(el.dataset.x ?? "0") + 50, parseFloat(el.dataset.y ?? "0")) * 0.10,
+    }));
+
+    let raf: number;
+    let frame = 0;
+    const cx = COLS / 2, cy = ROWS / 2;
+
+    const tick = () => {
+      const waveR = ((frame % SCAN_PERIOD) / SCAN_PERIOD) * (MAX_DOT_R + 1);
+
+      dots.forEach(d => {
+        const dist = Math.sqrt((d.x - cx) ** 2 + (d.y - cy) ** 2);
+        const diff = dist - waveR;
+
+        // Scan wave ring boost
+        const ringBoost = Math.abs(diff) < 1.6 ? 0.40 : 0;
+        // Trailing glow behind the wave
+        const trailBoost = diff < 0 && diff > -3.5 ? 0.12 : 0;
+        // Per-dot breathing
+        const breathe = Math.sin(frame * d.speed + d.phase) * d.amp;
+
+        const opacity = Math.max(0, Math.min(1, d.v + breathe + ringBoost + trailBoost));
+        d.el.style.opacity = opacity.toFixed(3);
+      });
+
+      frame++;
+      raf = requestAnimationFrame(tick);
+    };
+    tick();
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{ userSelect: "none", lineHeight: 1.15 }}
+      aria-hidden="true"
+    >
+      {/* ✦ glyph above the dot grid */}
+      <div
+        style={{
+          textAlign: "center",
+          fontSize: "1.1rem",
+          letterSpacing: "0.05em",
+          marginBottom: "0.3em",
+          color: "rgb(var(--accent-strong))",
+          opacity: 0.82,
+        }}
+      >
+        ✦
+      </div>
+
+      {/* Dot grid */}
+      {GRID.map((row, yi) => (
+        <div key={yi} style={{ display: "flex", justifyContent: "center", gap: "0.18em" }}>
+          {row.map((v, xi) => (
+            <span
+              key={xi}
+              data-v={v.toFixed(4)}
+              data-x={xi}
+              data-y={yi}
+              style={{
+                fontSize: "0.68rem",
+                color: v > 0.55
+                  ? "rgb(var(--accent-strong))"
+                  : "rgb(var(--accent-soft))",
+                opacity: v,
+                transition: "none",
+              }}
+            >
+              {charFor(v)}
+            </span>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/bundles/antigravity-plugin/skills/particle-art/references/trail-ghost.template.tsx

@@ -0,0 +1,266 @@
+"use client";
+/**
+ * trail-ghost.template.tsx — Spring-morph nodes with phosphorescent trailing effect.
+ *
+ * USAGE:
+ *   1. Copy and rename (e.g. TrailGhost.tsx, HeroTrails.tsx)
+ *   2. Replace `buildTargets` with any shape from shape-sampler.ts
+ *   3. Tune TRAIL_DECAY (lower → shorter trails) and TRAIL_MAX (higher → longer tails)
+ *   4. Background colour is baked into the persistence rect — change "0,0,0" for light mode
+ *
+ * KEY TECHNIQUE: instead of ctx.clearRect() each frame, fill with a semi-transparent rect
+ * (rgba(0,0,0,0.10)). Old frames fade rather than vanish, creating ghostly smeared trails.
+ *
+ * INTERACTION: mousemove → nodes coalesce into letter; mouseleave → drift apart
+ * THEMING: --accent-strong (node colour), --accent-soft (connection lines)
+ */
+import { useEffect, useRef } from "react";
+
+// ── Bezier helper ─────────────────────────────────────────────────────────────
+function cubicBezier(
+  t: number,
+  p0: [number, number], p1: [number, number],
+  p2: [number, number], p3: [number, number],
+): [number, number] {
+  const m = 1 - t;
+  return [
+    m**3*p0[0] + 3*m**2*t*p1[0] + 3*m*t**2*p2[0] + t**3*p3[0],
+    m**3*p0[1] + 3*m**2*t*p1[1] + 3*m*t**2*p2[1] + t**3*p3[1],
+  ];
+}
+
+// ── Target shape — replace or import from shape-sampler.ts ───────────────────
+//
+// CUSTOMISE: swap this function for any sampleText / sampleSVGPath / sampleConstellation call.
+// Return an array of { tx, ty, spring, r, alpha, isDot } objects.
+//
+interface Target { tx: number; ty: number; spring: number; r: number; alpha: number; isDot: boolean }
+
+function buildTargets(size: number): Target[] {
+  const cx = size * 0.50;
+  const stemTop = size * 0.210, stemBot = size * 0.660;
+  const targets: Target[] = [];
+
+  // Tittle (dot above stem)
+  targets.push({ tx: cx, ty: size * 0.130, spring: 0.038, r: 4.5, alpha: 1.0, isDot: true });
+
+  // Vertical stem
+  for (let i = 0; i <= 12; i++)
+    targets.push({ tx: cx, ty: stemTop + (i / 12) * (stemBot - stemTop), spring: 0.036, r: 2.0, alpha: 0.92, isDot: false });
+
+  // Hook (cubic bezier descender)
+  const P0: [number,number] = [cx, stemBot];
+  const P1: [number,number] = [cx, stemBot + size * 0.115];
+  const P2: [number,number] = [cx - size * 0.115, stemBot + size * 0.145];
+  const P3: [number,number] = [cx - size * 0.155, stemBot + size * 0.040];
+  for (let i = 1; i <= 9; i++) {
+    const [bx, by] = cubicBezier(i / 9, P0, P1, P2, P3);
+    targets.push({ tx: bx, ty: by, spring: 0.034, r: 2.0, alpha: 0.88, isDot: false });
+  }
+  return targets;
+}
+
+// ── Types & theme helper ──────────────────────────────────────────────────────
+interface Pt {
+  x: number; y: number; vx: number; vy: number;
+  tx: number; ty: number; springBase: number;
+  r: number; alpha: number; isDot: boolean; isLetter: boolean;
+  trail: { x: number; y: number; a: number }[];
+}
+
+function themeRgb(v: string): [number, number, number] {
+  const ch = getComputedStyle(document.documentElement)
+    .getPropertyValue(v).trim().split(/\s+/).map(Number);
+  return [ch[0], ch[1], ch[2]];
+}
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+const LINK          = 68;    // connection line distance threshold (px)
+const MAX_SPEED     = 1.5;
+const IDLE_FRICTION = 0.984; // low friction → nodes drift organically in idle
+const ACTIVE_FRICTION = 0.88; // snappy convergence on hover
+const DRIFT         = 0.055; // random brownian nudge in idle
+const MORPH_SPEED   = 0.05;  // lerp rate 0→1; higher = faster morph
+const TRAIL_DECAY   = 0.91;  // per-frame alpha multiplier — lower = shorter trails (try 0.80–0.96)
+const TRAIL_MAX     = 50;    // max trail history length per node
+
+// ── Component ─────────────────────────────────────────────────────────────────
+export function TrailGhostArt({ size = 300 }: { size?: number }) {
+  const ref = useRef<HTMLCanvasElement>(null);
+  // useRef for cross-RAF state — never stale in the animation loop
+  const active = useRef(false);
+  const morph  = useRef(0);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const ctx = el.getContext("2d")!;
+    const dpr = window.devicePixelRatio || 1;
+    el.width  = size * dpr;
+    el.height = size * dpr;
+    ctx.scale(dpr, dpr);
+
+    const cx = size * 0.50, cy = size * 0.46;
+
+    // Letter nodes — start scattered, attracted to targets on hover
+    const pts: Pt[] = buildTargets(size).map(t => {
+      const angle = Math.random() * Math.PI * 2;
+      const dist  = size * (0.10 + Math.random() * 0.32);
+      return {
+        x: cx + Math.cos(angle) * dist,
+        y: cy + Math.sin(angle) * dist,
+        vx: (Math.random() - 0.5) * 0.6,
+        vy: (Math.random() - 0.5) * 0.6,
+        tx: t.tx, ty: t.ty, springBase: t.spring,
+        r: t.r, alpha: t.alpha, isDot: t.isDot, isLetter: true,
+        trail: [],
+      };
+    });
+
+    // Ambient nodes — no letter target, add atmosphere
+    // CUSTOMISE: increase count, adjust alpha, starting radius
+    for (let i = 0; i < 10; i++) {
+      const angle = (i / 10) * Math.PI * 2;
+      const dist  = size * (0.24 + Math.random() * 0.18);
+      pts.push({
+        x: cx + Math.cos(angle) * dist * 0.75,
+        y: cy + Math.sin(angle) * dist,
+        vx: (Math.random() - 0.5) * 0.3,
+        vy: (Math.random() - 0.5) * 0.3,
+        tx: cx, ty: cy, springBase: 0,
+        r: Math.random() * 0.9 + 0.5,
+        alpha: 0.30 + Math.random() * 0.20,
+        isDot: false, isLetter: false,
+        trail: [],
+      });
+    }
+
+    // mousemove is more reliable than mouseenter on canvas in React 18
+    const onMove  = () => { active.current = true; };
+    const onLeave = () => { active.current = false; };
+    el.addEventListener("mousemove",  onMove);
+    el.addEventListener("mouseleave", onLeave);
+
+    let raf: number;
+    let frame = 0;
+
+    const tick = () => {
+      // PERSISTENCE ghost — fill instead of clearRect; old pixels fade gradually
+      // CUSTOMISE: increase alpha (e.g. 0.20) for shorter trails; decrease (0.05) for longer
+      ctx.fillStyle = "rgba(0,0,0,0.10)";
+      ctx.fillRect(0, 0, size, size);
+
+      const [nr, ng, nb] = themeRgb("--accent-strong");
+      const [lr, lg, lb] = themeRgb("--accent-soft");
+
+      // Lerp morph 0 (idle) → 1 (letter formed)
+      const m = morph.current + ((active.current ? 1 : 0) - morph.current) * MORPH_SPEED;
+      morph.current = m;
+
+      // Connection lines — faint web between nearby nodes
+      for (let i = 0; i < pts.length; i++) {
+        for (let j = i + 1; j < pts.length; j++) {
+          const dx = pts[i].x - pts[j].x, dy = pts[i].y - pts[j].y;
+          const d  = Math.sqrt(dx * dx + dy * dy);
+          if (d < LINK) {
+            ctx.beginPath();
+            ctx.moveTo(pts[i].x, pts[i].y);
+            ctx.lineTo(pts[j].x, pts[j].y);
+            ctx.strokeStyle = `rgba(${lr},${lg},${lb},${((1 - d / LINK) * 0.14).toFixed(3)})`;
+            ctx.lineWidth = 0.5;
+            ctx.stroke();
+          }
+        }
+      }
+
+      pts.forEach(p => {
+        // 1. Record trail before moving, decay all entries, trim to TRAIL_MAX
+        p.trail.unshift({ x: p.x, y: p.y, a: p.alpha * 0.65 });
+        p.trail.forEach(t => { t.a *= TRAIL_DECAY; });
+        while (p.trail.length > TRAIL_MAX) p.trail.pop();
+
+        // 2. Draw trail — fading, shrinking circles back through history
+        p.trail.forEach((t, i) => {
+          const frac = i / TRAIL_MAX;
+          const r = Math.max(0.2, p.r * (1 - frac * 0.88));
+          ctx.beginPath();
+          ctx.arc(t.x, t.y, r, 0, Math.PI * 2);
+          ctx.fillStyle = `rgba(${nr},${ng},${nb},${Math.max(0, t.a).toFixed(3)})`;
+          ctx.fill();
+        });
+
+        // 3. Physics
+        if (p.isLetter) {
+          // Spring toward target (scales with morph)
+          p.vx += (p.tx - p.x) * p.springBase * m;
+          p.vy += (p.ty - p.y) * p.springBase * m;
+          // Brownian drift fades out as letter forms
+          p.vx += (Math.random() - 0.5) * DRIFT * (1 - m);
+          p.vy += (Math.random() - 0.5) * DRIFT * (1 - m);
+          // Gentle centre gravity in idle so nodes don't escape
+          p.vx += (cx - p.x) * 0.0009 * (1 - m);
+          p.vy += (cy - p.y) * 0.0009 * (1 - m);
+          // Friction blends from idle to active
+          const fr = IDLE_FRICTION + (ACTIVE_FRICTION - IDLE_FRICTION) * m;
+          p.vx *= fr; p.vy *= fr;
+          // Soft wall bounce in idle
+          if (m < 0.15) {
+            if (p.x < 6 || p.x > size - 6) p.vx *= -0.8;
+            if (p.y < 6 || p.y > size - 6) p.vy *= -0.8;
+          }
+        } else {
+          p.vx += (Math.random() - 0.5) * DRIFT * 0.5;
+          p.vy += (Math.random() - 0.5) * DRIFT * 0.5;
+          p.vx += (cx - p.x) * 0.0006;
+          p.vy += (cy - p.y) * 0.0006;
+          p.vx *= IDLE_FRICTION; p.vy *= IDLE_FRICTION;
+          if (p.x < 6 || p.x > size - 6) p.vx *= -0.8;
+          if (p.y < 6 || p.y > size - 6) p.vy *= -0.8;
+        }
+
+        const spd = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
+        if (spd > MAX_SPEED) { p.vx *= MAX_SPEED / spd; p.vy *= MAX_SPEED / spd; }
+        p.x += p.vx; p.y += p.vy;
+
+        // 4. Node head — bright dot on top of trail
+        let nodeR = p.r;
+        if (p.isDot && m > 0.15) {
+          // Pulsing glow ring for the tittle (dot above "j" stem)
+          nodeR = p.r + Math.sin(frame * 0.04) * 0.8;
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, nodeR + 5 + Math.sin(frame * 0.04) * 2, 0, Math.PI * 2);
+          ctx.strokeStyle = `rgba(${nr},${ng},${nb},${(0.20 * m).toFixed(3)})`;
+          ctx.lineWidth = 1;
+          ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, nodeR, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(${nr},${ng},${nb},${p.alpha.toFixed(3)})`;
+        ctx.fill();
+      });
+
+      frame++;
+      raf = requestAnimationFrame(tick);
+    };
+    tick();
+
+    // ⚠️ prefers-reduced-motion: do NOT early-return before drawing (leaves canvas blank).
+    // Correct approach would be: snap all pts to targets, call tick() once, then cancelRAF.
+    // This component always animates — add static-snap logic here if reduced motion is required.
+
+    return () => {
+      cancelAnimationFrame(raf);
+      el.removeEventListener("mousemove",  onMove);
+      el.removeEventListener("mouseleave", onLeave);
+    };
+  }, [size]);
+
+  return (
+    <canvas
+      ref={ref}
+      style={{ width: size, height: size, cursor: "crosshair" }}
+      aria-hidden="true"
+    />
+  );
+}