Smooth Caret

a text field whose caret glides to where it is going instead of jumping: click, type or use the arrow keys and it travels there, stretching into a short streak on a long move.

key insight: a textarea has no Range into its own text, so the caret is measured off a hidden mirror of the field, laid out with the same width, padding, font and wrapping, with the text after the caret in a span whose first line box is the caret. the native caret is painted transparent and a drawn one follows.

the head and the tail of the caret are two springs, so a long move leaves a streak behind it, and a move to a new line travels as one piece rather than smearing across two.