@caddis/cli 0.0.0 → 0.2.0

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

@@ -0,0 +1,261 @@
+"use client";
+/**
+ * node-shape.template.tsx — Spring-constrained particle component template.
+ *
+ * USAGE:
+ *   1. Copy this file and rename it (e.g. JSpringArt.tsx, ConstellationArt.tsx)
+ *   2. Replace the `buildTargets()` body with your shape points (use shape-sampler.ts)
+ *   3. Tune the physics constants for your use-case (see SKILL.md physics table)
+ *   4. Export and import into your page
+ *
+ * DEPENDENCIES: none (copy themeRgb from canvas-utils.ts if needed)
+ */
+import { useEffect, useRef } from "react";
+
+// ── Physics constants — tune these per SKILL.md table ─────────────────────────
+const LINK = 72;            // max distance between connected nodes (px)
+const MAX_SPEED = 1.4;      // velocity cap
+const FRICTION = 0.88;      // damping for letter/shape nodes
+const AMBIENT_FRICTION = 0.985; // damping for free-floating ambient nodes
+const REPEL_R = 85;         // mouse repulsion radius (px)
+const REPEL_F = 0.5;        // repulsion force strength
+const DRIFT = 0.06;         // random jitter per frame on shape nodes
+
+// ── Target point type ──────────────────────────────────────────────────────────
+interface Target {
+  tx: number;       // x target (CSS px)
+  ty: number;       // y target
+  spring: number;   // spring constant — how strongly node returns to target
+  r: number;        // visual radius
+  alpha: number;    // visual opacity
+  isDot?: boolean;  // special node with pulsing ring (e.g. tittle of "j")
+}
+
+// ── REPLACE THIS with your shape ──────────────────────────────────────────────
+// Options:
+//   - Call sampleText("J", size) from shape-sampler.ts
+//   - Call sampleConstellation(size) or any other preset
+//   - Define points manually (bezier, grids, SVG)
+//
+// The function receives the canvas size in CSS pixels and returns targets.
+function buildTargets(size: number): Target[] {
+  const cx = size * 0.5;
+  const cy = size * 0.5;
+  const targets: Target[] = [];
+
+  // Example: a simple cross / plus pattern
+  const ARM = 5;
+  for (let i = -ARM; i <= ARM; i++) {
+    const step = size * 0.06;
+    // Horizontal arm
+    targets.push({ tx: cx + i * step, ty: cy, spring: 0.036, r: 2.2, alpha: 0.9 });
+    // Vertical arm (avoid duplicate centre)
+    if (i !== 0) {
+      targets.push({ tx: cx, ty: cy + i * step, spring: 0.036, r: 2.2, alpha: 0.9 });
+    }
+  }
+  // Centre node — marked as dot for pulse ring
+  targets.push({ tx: cx, ty: cy, spring: 0.038, r: 4.5, alpha: 1.0, isDot: true });
+
+  return targets;
+}
+
+// ── Particle ───────────────────────────────────────────────────────────────────
+interface Pt {
+  x: number; y: number;
+  vx: number; vy: number;
+  tx: number; ty: number;
+  spring: number;
+  r: number;
+  alpha: number;
+  isDot: boolean;
+  isShape: boolean;   // true = letter/shape node; false = ambient
+}
+
+// CSS-variable colour reader — keeps theme changes instant
+function themeRgb(v: string): [number, number, number] {
+  const ch = getComputedStyle(document.documentElement)
+    .getPropertyValue(v).trim().split(/\s+/).map(Number);
+  return [ch[0] ?? 100, ch[1] ?? 100, ch[2] ?? 100];
+}
+
+// ── Component ──────────────────────────────────────────────────────────────────
+//
+// Props: size (px), ambientCount (free-floating halo nodes)
+//
+export function NodeShapeArt({
+  size = 300,
+  ambientCount = 14,
+}: {
+  size?: number;
+  ambientCount?: number;
+}) {
+  const ref = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    // DPR-correct canvas
+    const ctx = el.getContext("2d")!;
+    const dpr = window.devicePixelRatio || 1;
+    el.width = size * dpr;
+    el.height = size * dpr;
+    ctx.scale(dpr, dpr);
+
+    // ── Build shape nodes ──────────────────────────────────────────────────
+    const shapeTargets = buildTargets(size);
+    const pts: Pt[] = shapeTargets.map(t => ({
+      x: t.tx + (Math.random() - 0.5) * 20,
+      y: t.ty + (Math.random() - 0.5) * 20,
+      vx: 0, vy: 0,
+      tx: t.tx, ty: t.ty,
+      spring: t.spring,
+      r: t.r,
+      alpha: t.alpha,
+      isDot: t.isDot ?? false,
+      isShape: true,
+    }));
+
+    // ── Add ambient halo nodes ─────────────────────────────────────────────
+    const cx = size * 0.5, cy = size * 0.48;
+    for (let i = 0; i < ambientCount; i++) {
+      const angle = (i / ambientCount) * Math.PI * 2;
+      const spread = size * (0.28 + Math.random() * 0.17);
+      const ax = cx + Math.cos(angle) * spread * 0.75;
+      const ay = cy + Math.sin(angle) * spread;
+      pts.push({
+        x: ax, y: ay,
+        vx: (Math.random() - 0.5) * 0.3,
+        vy: (Math.random() - 0.5) * 0.3,
+        tx: ax, ty: ay,
+        spring: 0,
+        r: Math.random() * 1.2 + 0.6,
+        alpha: 0.35 + Math.random() * 0.3,
+        isDot: false,
+        isShape: false,
+      });
+    }
+
+    // ── Mouse tracking ─────────────────────────────────────────────────────
+    const mouse = { x: -9999, y: -9999 };
+    const onMove = (e: MouseEvent) => {
+      const r = el.getBoundingClientRect();
+      mouse.x = e.clientX - r.left;
+      mouse.y = e.clientY - r.top;
+    };
+    const onLeave = () => { mouse.x = -9999; mouse.y = -9999; };
+    el.addEventListener("mousemove", onMove);
+    el.addEventListener("mouseleave", onLeave);
+
+    let raf: number;
+    let frame = 0;
+
+    const tick = () => {
+      ctx.clearRect(0, 0, size, size);
+      const [nr, ng, nb] = themeRgb("--accent-strong");
+      const [lr, lg, lb] = themeRgb("--accent-soft");
+      const { x: mx, y: my } = mouse;
+
+      // ── Connection lines ───────────────────────────────────────────────
+      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;
+          const dy = pts[i].y - pts[j].y;
+          const d = Math.sqrt(dx * dx + dy * dy);
+          if (d < LINK) {
+            const a = (1 - d / LINK) * 0.28;
+            ctx.beginPath();
+            ctx.moveTo(pts[i].x, pts[i].y);
+            ctx.lineTo(pts[j].x, pts[j].y);
+            ctx.strokeStyle = `rgba(${lr},${lg},${lb},${a.toFixed(3)})`;
+            ctx.lineWidth = 0.65;
+            ctx.stroke();
+          }
+        }
+      }
+
+      // ── Update and draw nodes ──────────────────────────────────────────
+      pts.forEach(p => {
+        // Mouse repulsion
+        const mdx = p.x - mx, mdy = p.y - my;
+        const md = Math.sqrt(mdx * mdx + mdy * mdy);
+        if (md < REPEL_R && md > 0) {
+          const f = ((REPEL_R - md) / REPEL_R) * REPEL_F;
+          p.vx += (mdx / md) * f;
+          p.vy += (mdy / md) * f;
+        }
+
+        if (p.isShape) {
+          // Spring-back to target
+          p.vx += (p.tx - p.x) * p.spring + (Math.random() - 0.5) * DRIFT;
+          p.vy += (p.ty - p.y) * p.spring + (Math.random() - 0.5) * DRIFT;
+          p.vx *= FRICTION;
+          p.vy *= FRICTION;
+        } else {
+          // Free float with soft wall bounce
+          p.vx *= AMBIENT_FRICTION;
+          p.vy *= AMBIENT_FRICTION;
+          if (p.x < 8 || p.x > size - 8) p.vx *= -1;
+          if (p.y < 8 || p.y > size - 8) p.vy *= -1;
+        }
+
+        // Velocity cap
+        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;
+
+        // Draw
+        const near = md < REPEL_R;
+        let nodeR = near ? p.r * 1.3 : p.r;
+        const nodeA = near ? Math.min(1, p.alpha * 1.15) : p.alpha;
+
+        // Special dot: pulsing ring
+        if (p.isDot) {
+          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.18)`;
+          ctx.lineWidth = 1;
+          ctx.stroke();
+        }
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, nodeR, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(${nr},${ng},${nb},${nodeA.toFixed(3)})`;
+        ctx.fill();
+      });
+
+      frame++;
+      raf = requestAnimationFrame(tick);
+    };
+
+    // Reduced-motion: draw one static frame at target positions, skip the loop.
+    // Never return early before drawing — that leaves the canvas blank (worse than animation).
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      pts.forEach(p => {
+        if (p.isShape) { p.x = p.tx; p.y = p.ty; }
+      });
+      tick();
+      cancelAnimationFrame(raf);
+      return;
+    }
+
+    tick();
+    return () => {
+      cancelAnimationFrame(raf);
+      el.removeEventListener("mousemove", onMove);
+      el.removeEventListener("mouseleave", onLeave);
+    };
+  }, [size, ambientCount]);
+
+  return (
+    <canvas
+      ref={ref}
+      style={{ width: size, height: size, cursor: "crosshair" }}
+      aria-hidden="true"
+    />
+  );
+}

package/bundles/antigravity-plugin/skills/particle-art/references/shape-sampler.ts

@@ -0,0 +1,281 @@
+/**
+ * shape-sampler.ts — Target-point generators for all particle-art shapes.
+ *
+ * Each function returns an array of [x, y] coordinates in CSS pixel space,
+ * ready to use as spring-node target positions.
+ *
+ * Copy the function(s) you need into your component file.
+ */
+
+export type Point = [number, number];
+
+// ─── Text / Initials → Points ─────────────────────────────────────────────────
+//
+// Renders text onto an off-screen canvas at large size, samples non-transparent
+// pixels, then scales back to the target size with optional density control.
+//
+// Usage:
+//   const pts = sampleText("j", 300, { nodeCount: 28, font: "bold 200px serif" });
+//
+export function sampleText(
+  text: string,
+  size: number,
+  opts: {
+    nodeCount?: number;    // approximate number of nodes to return
+    font?: string;         // CSS font string (default: bold 180px sans-serif)
+    offsetX?: number;      // manual x offset if letter drifts
+    offsetY?: number;      // manual y offset
+  } = {},
+): Point[] {
+  const { nodeCount = 30, font = `bold 180px sans-serif`, offsetX = 0, offsetY = 0 } = opts;
+
+  // Render at 4× size for better sampling resolution
+  const SCALE = 4;
+  const offW = size * SCALE;
+  const offH = size * SCALE;
+
+  const oc = document.createElement("canvas");
+  oc.width = offW;
+  oc.height = offH;
+  const oc2 = oc.getContext("2d")!;
+  oc2.fillStyle = "#fff";
+  oc2.font = font.replace(/(\d+)px/, (_, n) => `${parseInt(n) * SCALE}px`);
+  oc2.textAlign = "center";
+  oc2.textBaseline = "middle";
+  oc2.fillText(text, offW / 2 + offsetX * SCALE, offH / 2 + offsetY * SCALE);
+
+  const { data } = oc2.getImageData(0, 0, offW, offH);
+  const candidates: Point[] = [];
+
+  // Sample every Nth pixel so we don't collect millions of points
+  const step = Math.max(1, Math.floor(offW / 80));
+  for (let y = 0; y < offH; y += step) {
+    for (let x = 0; x < offW; x += step) {
+      if (data[(y * offW + x) * 4] > 128) {
+        candidates.push([x / SCALE, y / SCALE]);
+      }
+    }
+  }
+
+  if (candidates.length === 0) return [];
+
+  // Downsample to nodeCount using spatial stratification
+  return stratifiedSample(candidates, nodeCount);
+}
+
+// ─── Preset Shapes ────────────────────────────────────────────────────────────
+
+export function sampleConstellation(size: number, nodeCount = 32): Point[] {
+  const pts: Point[] = [];
+  const cx = size / 2, cy = size / 2;
+  const r = size * 0.38;
+  // Main ring of nodes
+  for (let i = 0; i < Math.floor(nodeCount * 0.6); i++) {
+    const a = (i / Math.floor(nodeCount * 0.6)) * Math.PI * 2;
+    const jitter = size * 0.06;
+    pts.push([
+      cx + Math.cos(a) * (r + (srand(i, 0) - 0.5) * jitter),
+      cy + Math.sin(a) * (r + (srand(i, 1) - 0.5) * jitter),
+    ]);
+  }
+  // Inner cluster
+  const inner = nodeCount - pts.length;
+  for (let i = 0; i < inner; i++) {
+    const a = srand(i + 100, 0) * Math.PI * 2;
+    const d = srand(i + 100, 1) * r * 0.5;
+    pts.push([cx + Math.cos(a) * d, cy + Math.sin(a) * d]);
+  }
+  return pts;
+}
+
+export function sampleHelix(size: number, nodeCount = 36): Point[] {
+  const pts: Point[] = [];
+  const cx = size / 2;
+  const spread = size * 0.20;
+  for (let i = 0; i < nodeCount; i++) {
+    const t = i / (nodeCount - 1);
+    const y = size * 0.1 + t * size * 0.8;
+    const a = t * Math.PI * 4; // 2 full turns
+    pts.push(
+      [cx + Math.cos(a) * spread, y],
+      [cx - Math.cos(a) * spread, y],
+    );
+  }
+  return pts.slice(0, nodeCount);
+}
+
+export function sampleSpiral(size: number, nodeCount = 40): Point[] {
+  const pts: Point[] = [];
+  const cx = size / 2, cy = size / 2;
+  const maxR = size * 0.42;
+  for (let i = 0; i < nodeCount; i++) {
+    const t = i / nodeCount;
+    const a = t * Math.PI * 6; // 3 turns
+    const r = t * maxR;
+    pts.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
+  }
+  return pts;
+}
+
+export function sampleDNA(size: number, nodeCount = 40): Point[] {
+  const pts: Point[] = [];
+  const cx = size / 2;
+  const spread = size * 0.18;
+  const rungs = Math.floor(nodeCount / 3);
+  for (let i = 0; i < rungs; i++) {
+    const t = i / (rungs - 1);
+    const y = size * 0.08 + t * size * 0.84;
+    const a = t * Math.PI * 5;
+    const lx = cx + Math.cos(a) * spread;
+    const rx = cx - Math.cos(a) * spread;
+    pts.push([lx, y], [rx, y]);
+    // Cross-rung node at midpoint every other step
+    if (i % 2 === 0 && pts.length < nodeCount) {
+      pts.push([(lx + rx) / 2, y]);
+    }
+  }
+  return pts.slice(0, nodeCount);
+}
+
+export function sampleHexGrid(size: number, nodeCount = 36): Point[] {
+  const pts: Point[] = [];
+  const rows = 5, cols = 7;
+  const hx = size / (cols + 0.5);
+  const hy = size / (rows + 0.5) * 0.87;
+  const ox = hx * 0.5, oy = hy * 0.5;
+
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const x = ox + c * hx + (r % 2 === 0 ? 0 : hx / 2);
+      const y = oy + r * hy;
+      if (x > 0 && x < size && y > 0 && y < size) pts.push([x, y]);
+    }
+  }
+  return stratifiedSample(pts, nodeCount);
+}
+
+export function sampleWave(size: number, nodeCount = 36): Point[] {
+  const pts: Point[] = [];
+  const rows = 4;
+  const perRow = Math.ceil(nodeCount / rows);
+  for (let r = 0; r < rows; r++) {
+    const baseY = size * (0.2 + r * 0.18);
+    for (let i = 0; i < perRow; i++) {
+      const t = i / (perRow - 1);
+      const x = size * 0.08 + t * size * 0.84;
+      const y = baseY + Math.sin(t * Math.PI * 2 + r) * size * 0.06;
+      pts.push([x, y]);
+    }
+  }
+  return pts.slice(0, nodeCount);
+}
+
+export function sampleInfinity(size: number, nodeCount = 36): Point[] {
+  const pts: Point[] = [];
+  const cx = size / 2, cy = size / 2;
+  const a = size * 0.38, b = size * 0.18;
+  for (let i = 0; i < nodeCount; i++) {
+    const t = (i / nodeCount) * Math.PI * 2;
+    // Lemniscate of Bernoulli
+    const denom = 1 + Math.sin(t) ** 2;
+    const x = cx + (a * Math.cos(t)) / denom;
+    const y = cy + (b * Math.sin(t) * Math.cos(t)) / denom;
+    pts.push([x, y]);
+  }
+  return pts;
+}
+
+// ─── SVG Path → Points ────────────────────────────────────────────────────────
+//
+// Samples points along an SVG path element (must be in the DOM or created
+// via document.createElementNS). Pass the path's `d` attribute string.
+//
+// Usage:
+//   const pts = sampleSVGPath("M10,80 C40,10 65,10 95,80 S150,150 180,80", 300, 28);
+//
+export function sampleSVGPath(d: string, size: number, nodeCount = 30): Point[] {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.style.position = "absolute";
+  svg.style.opacity = "0";
+  svg.style.pointerEvents = "none";
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", d);
+  svg.appendChild(path);
+  document.body.appendChild(svg);
+
+  const len = path.getTotalLength();
+  const pts: Point[] = [];
+  // Get bounding box to normalize to [0, size]
+  const bbox = path.getBBox();
+  const scaleX = size / (bbox.width || 1);
+  const scaleY = size / (bbox.height || 1);
+  const s = Math.min(scaleX, scaleY) * 0.85; // 85% padding
+  const offX = (size - bbox.width * s) / 2 - bbox.x * s;
+  const offY = (size - bbox.height * s) / 2 - bbox.y * s;
+
+  for (let i = 0; i < nodeCount; i++) {
+    const pt = path.getPointAtLength((i / (nodeCount - 1)) * len);
+    pts.push([pt.x * s + offX, pt.y * s + offY]);
+  }
+
+  document.body.removeChild(svg);
+  return pts;
+}
+
+// ─── Polygon / Custom Coordinate Array ────────────────────────────────────────
+//
+// Takes raw [x, y] pairs (in any coordinate space) and normalizes to [0, size].
+//
+// Usage:
+//   const pts = samplePolygon([[0,0],[1,0],[0.5,1]], 300, 30);
+//
+export function samplePolygon(
+  coords: Point[],
+  size: number,
+  nodeCount = 30,
+): Point[] {
+  if (coords.length === 0) return [];
+
+  // Normalize to [0, 1]
+  const xs = coords.map(p => p[0]);
+  const ys = coords.map(p => p[1]);
+  const minX = Math.min(...xs), maxX = Math.max(...xs);
+  const minY = Math.min(...ys), maxY = Math.max(...ys);
+  const rangeX = maxX - minX || 1;
+  const rangeY = maxY - minY || 1;
+  const s = Math.min(size / rangeX, size / rangeY) * 0.85;
+
+  // Interpolate along polygon edges
+  const edges: Point[] = [];
+  for (let i = 0; i < coords.length; i++) {
+    const a = coords[i];
+    const b = coords[(i + 1) % coords.length];
+    const steps = Math.max(2, Math.ceil(nodeCount / coords.length));
+    for (let j = 0; j < steps; j++) {
+      const t = j / steps;
+      edges.push([
+        ((a[0] + (b[0] - a[0]) * t) - minX) * s + (size - rangeX * s) / 2,
+        ((a[1] + (b[1] - a[1]) * t) - minY) * s + (size - rangeY * s) / 2,
+      ]);
+    }
+  }
+  return stratifiedSample(edges, nodeCount);
+}
+
+// ─── Internal Helpers ─────────────────────────────────────────────────────────
+
+// Deterministic pseudo-random (avoids hydration mismatch)
+function srand(x: number, y: number): number {
+  return (Math.abs(Math.sin(x * 127.1 + y * 311.7) * 43758.5453)) % 1;
+}
+
+// Spatial stratified downsampling — spreads chosen points evenly across the space
+function stratifiedSample(pts: Point[], n: number): Point[] {
+  if (pts.length <= n) return pts;
+  const step = pts.length / n;
+  const result: Point[] = [];
+  for (let i = 0; i < n; i++) {
+    result.push(pts[Math.floor(i * step)]);
+  }
+  return result;
+}