Playground

Move the cursor with the buttons (or click a word), change the options on the right, and slow it down to see each move. The code under the panel is the options object for what you see.

{
  duration: {
    word: 240,
    sentence: 340,
  },
  easing: easeOutCubic,
  sentenceShape: { pad: 2, radius: 5 },
  wordShape: { pad: 1.5, radius: 4 },
}

Things to try:

• 4× slower and word →: the leading edge reaches the next word first, then the trailing edge catches up.
• next line: the same stretch, vertically, while the cursor glides along the line.
• other column: the sentence outline cannot morph between columns, so it fades through nothing.
• ease-out back: an overshoot reads as playful; a reader usually wants the default.