Lab May 29, 2026 5 min read

Mano Loca

A 90s sticky hand toy built with Verlet integration. Drag the handle or the hand: it sticks to walls, stretches slime threads when pulled off, and vibrates on impact.

Sticky hand toys are 90s vending machine loot. Gummy rubber, a string, you throw it at a wall and it sticks. Stretch too far and it peels off trailing threads. The physics is programmable: stiffness, gravity, bounciness are just numbers.

Drag the green handle at the top or the hand at the bottom. Fling the hand at a wall. Pull it off slowly.

Mano Loca: sticky hand physics

// Verlet step: position remembers where it was.
// Difference between current and previous IS the velocity.
points.forEach(p => {
  if (p.stuck || p === grabbed) return;
  const vx = (p.x - p.oldX) * FRICTION;
  const vy = (p.y - p.oldY) * FRICTION;
  p.oldX = p.x; p.oldY = p.y;
  p.x += vx;
  p.y += vy + GRAVITY;
});

// Constraint pass, 25x per frame for stability
for (let iter = 0; iter < 25; iter++) {
  for (let i = 0; i < points.length - 1; i++) {
    const a = points[i], b = points[i + 1];
    const dx = b.x - a.x, dy = b.y - a.y;
    const dist = Math.sqrt(dx * dx + dy * dy);
    const correction = (REST_DIST - dist) / dist * STIFFNESS;
    if (!a.stuck) { a.x -= dx * correction * 0.5; a.y -= dy * correction * 0.5; }
    if (!b.stuck) { b.x += dx * correction * 0.5; b.y += dy * correction * 0.5; }
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mano Loca</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body { background: #050508; overflow: hidden; width: 100vw; height: 100vh; }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(57,255,20,0.08) 0%, transparent 70%),
        radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 100% 100%, 40px 40px;
      pointer-events: none;
    }

    canvas { position: fixed; inset: 0; cursor: grab; touch-action: none; display: block; }
    canvas:active { cursor: grabbing; }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

  <script>
    class ManoLoca {
      constructor() {
        this.canvas = document.getElementById('canvas');
        this.ctx    = this.canvas.getContext('2d');
        this.dpr    = window.devicePixelRatio || 1;

        this.SEGMENTS  = 16;
        this.REST_DIST = 18;
        this.GRAVITY   = 1.4;
        this.FRICTION  = 0.97;
        this.STIFFNESS = 0.95;
        this.COLOR     = '#39ff14';
        this.MARGIN    = 30;

        this.points       = [];
        this.ripples      = [];
        this.slimeThreads = [];
        this.squash       = 1.0;
        this.targetSquash = 1.0;
        this.mouse        = { x: 0, y: 0, grabbed: null };

        this.resize();
        this.setupEvents();
        window.addEventListener('resize', () => this.resize());
        requestAnimationFrame(() => this.loop());
      }

      W() { return this.canvas.width  / this.dpr; }
      H() { return this.canvas.height / this.dpr; }

      resize() {
        this.dpr = window.devicePixelRatio || 1;
        this.canvas.width  = Math.round(window.innerWidth  * this.dpr);
        this.canvas.height = Math.round(window.innerHeight * this.dpr);
        this.canvas.style.width  = window.innerWidth  + 'px';
        this.canvas.style.height = window.innerHeight + 'px';
        this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
        this.initRope();
      }

      initRope() {
        this.points = [];
        const cx = this.W() / 2;
        const M  = this.MARGIN;
        for (let i = 0; i <= this.SEGMENTS; i++) {
          this.points.push({
            x: cx, y: 40 + i * this.REST_DIST,
            oldX: cx, oldY: 40 + i * this.REST_DIST,
            stuck: i === this.SEGMENTS,
            stuckPos: i === this.SEGMENTS ? { x: cx, y: M } : null
          });
        }
        const hand = this.points[this.SEGMENTS];
        hand.x = cx; hand.y = M; hand.oldX = cx; hand.oldY = M;
        this.ripples = []; this.slimeThreads = [];
        this.squash = 1.0; this.targetSquash = 1.0;
      }

      addRipple(x, y) {
        this.ripples.push({ x, y, r: 5, opacity: 0.6, life: 1.0 });
      }

      addSlime(ox, oy, endPt) {
        const n = 3 + Math.floor(Math.random() * 3);
        for (let i = 0; i < n; i++) {
          this.slimeThreads.push({
            start:     { x: ox + (Math.random() - 0.5) * 20, y: oy + (Math.random() - 0.5) * 20 },
            endPoint:  endPt,
            life:      1.0,
            thickness: 1 + Math.random() * 2,
            curve:     (Math.random() - 0.5) * 40
          });
        }
      }

      setupEvents() {
        const grab = (x, y) => {
          const handle = this.points[0], hand = this.points[this.SEGMENTS];
          if (Math.hypot(handle.x - x, handle.y - y) < 100) return handle;
          if (Math.hypot(hand.x   - x, hand.y   - y) < 100) return hand;
          return null;
        };

        this.canvas.addEventListener('mousemove', e => {
          this.mouse.x = e.clientX; this.mouse.y = e.clientY;
        });
        this.canvas.addEventListener('mousedown', e => {
          const pt = grab(e.clientX, e.clientY);
          if (pt) { this.mouse.grabbed = pt; if (pt === this.points[this.SEGMENTS]) pt.stuck = false; }
        });
        window.addEventListener('mouseup', () => { this.mouse.grabbed = null; });

        this.canvas.addEventListener('touchstart', e => {
          const t = e.touches[0];
          const pt = grab(t.clientX, t.clientY);
          if (pt) { this.mouse.grabbed = pt; if (pt === this.points[this.SEGMENTS]) pt.stuck = false; }
          this.mouse.x = t.clientX; this.mouse.y = t.clientY;
        }, { passive: true });
        this.canvas.addEventListener('touchmove', e => {
          e.preventDefault();
          this.mouse.x = e.touches[0].clientX; this.mouse.y = e.touches[0].clientY;
        }, { passive: false });
        this.canvas.addEventListener('touchend', () => { this.mouse.grabbed = null; });
      }

      update() {
        const cw = this.W(), ch = this.H();
        const hand = this.points[this.SEGMENTS], handle = this.points[0];
        const M = this.MARGIN;

        for (let i = this.ripples.length - 1; i >= 0; i--) {
          const r = this.ripples[i];
          r.r += 3; r.opacity -= 0.015; r.life -= 0.015;
          if (r.life <= 0) this.ripples.splice(i, 1);
        }
        for (let i = this.slimeThreads.length - 1; i >= 0; i--) {
          this.slimeThreads[i].life -= 0.02;
          if (this.slimeThreads[i].life <= 0) this.slimeThreads.splice(i, 1);
        }

        this.squash += (this.targetSquash - this.squash) * 0.2;

        if (hand.stuck) {
          this.targetSquash = 1.2;
          const dx   = hand.x - handle.x, dy = hand.y - handle.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          const maxS = ch * 0.7;
          if (dist > maxS || (this.mouse.grabbed === handle && dist > maxS * 0.9)) {
            this.addSlime(hand.x, hand.y, hand);
            hand.stuck = false; this.targetSquash = 1.0;
          } else if (hand.stuckPos) {
            hand.x = hand.stuckPos.x + (handle.x - hand.stuckPos.x) * 0.05;
            hand.y = hand.stuckPos.y + (handle.y - hand.stuckPos.y) * 0.05;
          }
        } else {
          this.targetSquash = 1.0;
          if (this.mouse.grabbed !== hand &&
              (hand.x < M || hand.x > cw - M || hand.y < M || hand.y > ch - M)) {
            hand.stuck = true;
            hand.stuckPos = { x: hand.x, y: hand.y };
            this.targetSquash = 1.35;
            hand.x = Math.max(M, Math.min(cw - M, hand.x));
            hand.y = Math.max(M, Math.min(ch - M, hand.y));
            hand.oldX = hand.x; hand.oldY = hand.y;
            this.addRipple(hand.x, hand.y);
            navigator.vibrate?.(30);
          }
        }

        this.points.forEach(p => {
          if (p.stuck || p === this.mouse.grabbed) return;
          const vx = (p.x - p.oldX) * this.FRICTION;
          const vy = (p.y - p.oldY) * this.FRICTION;
          p.oldX = p.x; p.oldY = p.y;
          p.x += vx; p.y += vy + this.GRAVITY;
        });

        if (this.mouse.grabbed) {
          this.mouse.grabbed.x = this.mouse.grabbed.oldX = this.mouse.x;
          this.mouse.grabbed.y = this.mouse.grabbed.oldY = this.mouse.y;
        }

        for (let iter = 0; iter < 25; iter++) {
          for (let i = 0; i < this.points.length - 1; i++) {
            const a = this.points[i], b = this.points[i + 1];
            const dx = b.x - a.x, dy = b.y - a.y;
            const dist = Math.sqrt(dx * dx + dy * dy);
            if (!dist) continue;
            const pct = ((this.REST_DIST - dist) / dist) * this.STIFFNESS;
            const ox = dx * pct, oy = dy * pct;
            if (!a.stuck && a !== this.mouse.grabbed) { a.x -= ox * 0.5; a.y -= oy * 0.5; }
            if (!b.stuck && b !== this.mouse.grabbed) { b.x += ox * 0.5; b.y += oy * 0.5; }
          }
        }
      }

      drawHand(x, y, angle) {
        const ctx = this.ctx;
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle + Math.PI / 2);
        ctx.scale(3.0 * this.squash, 3.0 * this.squash);

        ctx.fillStyle   = 'rgba(57, 255, 20, 0.8)';
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
        ctx.lineWidth   = 0.5;
        ctx.shadowBlur  = 15;
        ctx.shadowColor = 'rgba(57, 255, 20, 0.6)';

        const FL = 18, FW = 4, SP = Math.PI / 7;
        for (let fi = -1; fi <= 2; fi++) {
          ctx.save();
          ctx.rotate(fi * SP);
          ctx.beginPath();
          ctx.roundRect?.(-FW/2, -FL, FW, FL, 4) ?? ctx.rect(-FW/2, -FL, FW, FL);
          ctx.fill(); ctx.stroke();
          ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
          ctx.beginPath(); ctx.ellipse(-1, -FL/2, 1, FL/3, 0, 0, Math.PI * 2); ctx.fill();
          ctx.fillStyle = 'rgba(57, 255, 20, 0.8)';
          ctx.restore();
        }

        ctx.save();
        ctx.rotate(-Math.PI / 2.5);
        ctx.beginPath();
        ctx.roundRect?.(-FW/2, -FL*0.7, FW, FL*0.7, 4) ?? ctx.rect(-FW/2, -FL*0.7, FW, FL*0.7);
        ctx.fill(); ctx.stroke();
        ctx.restore();
        ctx.restore();
      }

      draw() {
        const ctx = this.ctx;
        ctx.clearRect(0, 0, this.W(), this.H());

        this.slimeThreads.forEach(t => {
          const cpX = (t.start.x + t.endPoint.x) / 2 + t.curve;
          const cpY = (t.start.y + t.endPoint.y) / 2;
          ctx.beginPath(); ctx.moveTo(t.start.x, t.start.y);
          ctx.quadraticCurveTo(cpX, cpY, t.endPoint.x, t.endPoint.y);
          ctx.strokeStyle = `rgba(57,255,20,${t.life * 0.6})`;
          ctx.lineWidth = t.thickness * t.life; ctx.stroke();
          if (t.life > 0.5) {
            ctx.beginPath();
            ctx.arc((t.start.x + t.endPoint.x)/2 + t.curve*0.5, cpY, t.thickness*1.5, 0, Math.PI*2);
            ctx.fillStyle = `rgba(57,255,20,${t.life*0.8})`; ctx.fill();
          }
        });

        this.ripples.forEach(r => {
          ctx.beginPath(); ctx.arc(r.x, r.y, r.r, 0, Math.PI*2);
          ctx.strokeStyle = `rgba(57,255,20,${r.opacity})`; ctx.lineWidth = 2; ctx.stroke();
        });

        ctx.beginPath(); ctx.moveTo(this.points[0].x, this.points[0].y);
        this.points.slice(1).forEach(p => ctx.lineTo(p.x, p.y));
        ctx.strokeStyle = this.COLOR; ctx.lineWidth = 6;
        ctx.lineCap = ctx.lineJoin = 'round'; ctx.stroke();

        ctx.beginPath(); ctx.arc(this.points[0].x, this.points[0].y, 10, 0, Math.PI*2);
        ctx.fillStyle = this.COLOR; ctx.fill();

        const hand = this.points[this.SEGMENTS], prev = this.points[this.SEGMENTS - 1];
        this.drawHand(hand.x, hand.y, Math.atan2(hand.y - prev.y, hand.x - prev.x));
      }

      loop() {
        this.update(); this.draw();
        requestAnimationFrame(() => this.loop());
      }
    }

    new ManoLoca();
  </script>
</body>
</html>

The formula

x New position. Where the point ends up this frame. += Add to the current position and store it back. Runs every frame. (x − xPrev) Inertia. Current position minus previous position is the implicit velocity — no separate variable needed. + Inertia and forces are additive. The point moves by both at once. ax Acceleration: gravity, friction, any force applied this frame.

Hover each part.

Each point stores its current position and its previous position. The difference is velocity. No separate velocity variable needed. At each frame: move by that difference, apply gravity, then pull all the constraint distances back toward their rest length.

The constraint pass runs 25 times per frame. One iteration would leave the rope wobbly. 25 makes it feel like rubber. The stiffness constant (0.95) scales how aggressively each constraint pushes back: at 1.0 it is rigid, at 0.5 it stretches and bounces.

The sticking mechanic

When the hand crosses within 30px of any edge, it locks to that position. While stuck, it follows the handle with a 5% lerp: enough to show the tension, not enough to pull free. It only peels off when the rope is stretched past 2.5x its natural length, or when you grab the handle and pull it past 90% of that limit.

The slime threads spawn at the moment of separation: 3 to 6 quadratic curves from the stuck position to the hand, each with a random midpoint offset and thickness. They decay over about 50 frames. The blobs are small filled arcs at the midpoint, just one extra arc() call per thread.

The vibration on impact (navigator.vibrate(30)) fires on mobile when the hand sticks. 30ms. Most people don’t expect it. That tap is what makes it feel like a real surface.

Tuning the feel

Parameter	Default	Lower	Higher
`GRAVITY`	1.4	Floaty, slow drop	Heavy, fast drop
`FRICTION`	0.97	Damps quickly	Swings forever
`STIFFNESS`	0.95	Stretchy, elastic	Rigid, snaps back
`SEGMENTS`	16	Short, stubby rope	Long, heavy tail
`REST_DIST`	18px	Compact coil	Loose, wide swing

Slime is the same code with STIFFNESS: 0.7 and FRICTION: 0.99. Rubber band is STIFFNESS: 0.99 and GRAVITY: 0.4. One set of numbers, very different personality.