Explainer tools · feel lab 01

The next button.

A real step-through animator — the byte-pair merges that turn t·o·k·e·n into token #10346, exactly as o200k does it. Glide is the chosen feel; Pop and Crisp are still here to compare. The next button never moves between presses — that's the rule.

← → keys work too

Sound — tiny synth blip per feel, made in code

Steal this

The whole trick is pointerdown, not click — the press visual starts the instant the finger lands. Release springs back with overshoot. Everything else is garnish.

nextBtn.addEventListener('pointerdown', e => {
  e.preventDefault();               // no focus ring, no delay
  nextBtn.classList.add('pressed'); // scale(.9), 100ms in
  ensureAudio();
});
const release = () => {
  nextBtn.classList.remove('pressed'); // spring back w/ overshoot
  advance();                           // the actual step
};
nextBtn.addEventListener('pointerup', release);
nextBtn.addEventListener('pointercancel', () =>
  nextBtn.classList.remove('pressed'));