Explainer tools · feel lab 02

The drag.

A before/after photo slider for showing edits: Unedited on the left, edited on the right. Grab the divider any time — even mid-scroll. Drag horizontally to compare, drag vertically and the page scrolls like normal, tap to glide, arrow keys nudge. The edit itself was done in code (PIL), listed below.

Trying six dragger designs →

Unedited Edited ← drag →

← → nudge · tap to glide50%

The edit, in code

Warm grade: red channel ×1.05 + 7, blue channel ×0.93
Contrast ×1.18 — dehazes the mountains
Saturation ×1.30 — the pines go deep green
Brightness ×1.03, sharpen ×1.4

Steal this

The divider and the clip both move in pixel space via transform / clip-path — no layout, ever. The container's aspect-ratio is fixed, so dragging can't shift the page. The slider owns every touch (touch-action: none), so it's grabbable even mid-scroll — after 12px the gesture locks by direction: horizontal drives the divider, vertical scrolls the page 1:1 with momentum on release.

ba.addEventListener('pointerdown', e => {
  dragging = true; mode = null;          // undecided yet
  sx = e.clientX; sy = e.clientY;
  ba.setPointerCapture(e.pointerId);     // the slider owns this touch
});
ba.addEventListener('pointermove', e => {
  if(!dragging) return;
  const dx = e.clientX - sx, dy = e.clientY - sy;
  if(!mode && Math.hypot(dx, dy) > 12)
    mode = Math.abs(dx) > Math.abs(dy) ? 'slider' : 'scroll';
  if(mode === 'slider'){
    pos = clamp((e.clientX - rect.left) / width, .02, .98);
    requestAnimationFrame(paint);        // transform + clip-path only
  } else if(mode === 'scroll'){
    window.scrollTo(0, startScrollY - (e.clientY - sy)); // 1:1
    trackVelocity(e);                    // momentum on release
  }
});