Paper.js Vector Blob — Free Mouse-Reactive Organic Shape Snippet

<div class="pb-wrap">
  <canvas id="pbCanvas" class="pb-canvas" resize></canvas>
  <p class="pb-hint">Move your cursor near the blob — it stretches toward it.</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0c14;color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pb-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.pb-canvas{width:min(90vw,480px);height:min(60vh,360px);border-radius:24px;background:radial-gradient(circle at 30% 25%,#161c34,#0a0c14);border:1px solid #1e2440}
.pb-hint{font-size:12px;color:#6d7291}

paper.setup(document.getElementById('pbCanvas'));

const center = paper.view.center;
const POINTS = 10;
const BASE_RADIUS = 90;

// Build the blob from POINTS points arranged on a circle, each carrying its
// own random phase so the wobble never looks perfectly symmetric.
const points = [];
for (let i = 0; i < POINTS; i++) {
  const angle = (i / POINTS) * Math.PI * 2;
  points.push({
    angle,
    phase: Math.random() * Math.PI * 2,
    speed: 0.6 + Math.random() * 0.6,
  });
}

const path = new paper.Path({
  fillColor: {
    gradient: {
      stops: ['#818cf8', '#38bdf8', '#34d399'],
      radial: true,
    },
    origin: center,
    destination: center.add([BASE_RADIUS, 0]),
  },
  closed: true,
});

let mouse = center.clone();
let targetMouse = center.clone();

paper.view.onMouseMove = (event) => {
  targetMouse = event.point;
};

paper.view.onFrame = (event) => {
  // Ease the tracked mouse position so the pull toward the cursor feels
  // smooth rather than snapping every frame.
  mouse = mouse.add(targetMouse.subtract(mouse).multiply(0.08));

  path.segments = [];
  for (const p of points) {
    const wobble = Math.sin(event.time * p.speed + p.phase) * 10;
    let radius = BASE_RADIUS + wobble;

    const pointPos = center.add(
      new paper.Point({ angle: p.angle * 180 / Math.PI, length: radius })
    );

    // Mouse-reactive distortion: points closer to the cursor get pulled
    // outward toward it, proportional to proximity.
    const toMouse = mouse.subtract(pointPos);
    const dist = toMouse.length;
    const pull = Math.max(0, 1 - dist / 220) * 40;
    const distorted = pointPos.add(toMouse.normalize(pull || 0));

    path.add(distorted);
  }
  path.smooth({ type: 'continuous' });
};