How to make a screen feel soft.

The studio makes one tactile object per year, so the site avoids a typical catalogue grid at the top. Instead, the first act is three unlabelled experiments. You can disturb them before you learn what is for sale.

That ordering makes the site about the sensation first: a generous rounded field, heavy Nunito type, objects that look compressible, and copy that cares about the particular pause after a squeeze.

Each blob is a high-detail three.js icosahedron with a physically based clay material. A tiny rim-light addition in the material shader gives the edges a gentle waxy lift, while soft WebGL shadows anchor the forms to the tray.

Pointer hits use a raycaster. While a blob is held, its target follows the pointer on a flat plane. Every frame, position and three scale axes are pulled toward their targets by damped springs. Velocity stretches the grabbed form; when released, the home target takes over and the blob visibly overshoots before it settles.

function spring(value, velocity, target, stiffness, damping, dt) {
  velocity += (target - value) * stiffness * dt;
  velocity *= Math.exp(-damping * dt);
  return [value + velocity * dt, velocity];
}

blob.velocity.addScaledVector(
  destination.clone().sub(blob.group.position),
  (grabbed === blob ? 60 : 18) * dt
);
blob.velocity.multiplyScalar(Math.exp(-(grabbed === blob ? 8 : 5.8) * dt));
blob.group.position.addScaledVector(blob.velocity, dt);

const targetScale = blob.base.clone();
if (grabbed === blob) {
  targetScale.x += Math.min(blob.velocity.length() * .1, .18);
  targetScale.y -= Math.min(blob.velocity.length() * .065, .11);
}

The colours deliberately resemble a toy box left in warm daylight. The ink is a softened charcoal rather than pure black; it has enough contrast for the body copy without making the page feel sharp.

Three review passes, from a reliable tray to a fuller small-world experience.