FRENAR
N°08 · Vanilla JS · Physics

Drag Physics

Spring vs inertia. Drag the same element with two different physics models — feel the fundamental difference in perceived quality.

SPRING
INERTIA
drag both elements · compare the feel
// Spring physics — Hooke's law + damping
function springStep(pos, target, velocity, stiffness, damping) {
  const force = (target - pos) * stiffness / 100;
  velocity += force;
  velocity *= 1 - damping / 100;
  pos += velocity;
  return { pos, velocity };
}

// Inertia — velocity decay + boundary bounce
function inertiaStep(pos, velocity, friction, min, max) {
  pos += velocity;
  velocity *= friction / 100;
  if (pos < min || pos > max) {
    velocity *= -0.6; // rebond mur
    pos = Math.max(min, Math.min(max, pos));
  }
  return { pos, velocity };
}
Your turn

Adjust the spring stiffness — at what value does it feel like a rubber band vs a rigid link? What stiffness/damping combination feels most satisfying for a draggable card?

Physics-based interactions that feel alive

Book a session