A thread that takes the color of the work

Sep 29, 20262 min read

The three studies on the home page each have a color of their own: the low sun of Concrete and Light, the tide of Slack Water, the sage of Soft Geometry. The ribbon that runs past them was the same gray the whole way down, as if it had never touched them. Now it picks a little of each up, the way a thread takes dye.

Two moments of the home page side by side on black: at the left the ribbon hangs beside the Slack Water frame, a dark sea with a large white 42, and its metal is cool and blue-gray; at the right it hangs beside the Soft Geometry catalog page, and its metal is sage. — The home page, taken from the running site: the same ribbon beside Slack Water and beside Soft Geometry.

Only the base color

The material is locked down the page on purpose: an earlier version let each section swing the lighting, and the same object read as graphite in one place and white vinyl in another. So nothing about the metal changes here, not the roughness, not the reflections. Only its base color leans towards the study's, at most half way, and only while that study is at the middle of the screen.

Because the ribbon is mostly metal, the base color tints what it reflects rather than painting over it. On black the result reads as light from the work falling on the object, not as a colored ribbon.

// once a frame, while the work is on screen
rows.forEach((r, i) => {
  const d =
    Math.abs(r.top + r.height / 2 - h / 2) / (r.height / 2 + h / 2);
  const weight = 1 - Math.min(1, d);
  if (weight > amt) { amt = weight; idx = i; }
});
tint.lerp(STUDY_TINTS[idx], 0.08);
mix += (Math.min(1, amt * 1.4) * 0.5 - mix) * 0.06;
material.color.copy(BASE).lerp(tint, mix);

And the other way

A fast scroll pulls the thread taut: the slow breath that runs along it flattens at once and comes back over a second or so once the page stops. It is the smallest possible answer to the hand that moves the page, and it never moves the object off the line it is laid on.

All notes