Text subpixel rendering

Chrome will by default always render text to align it with the closest pixel.
That means that a text with margin-top: 10px and margin-top: 10.4px will be rendered identically.

This leads to an oscillation effect can make your animations less smooth and more jarring.

To counter this effect, you can render your text with:

• A transform property
• An additional perspective() transform
• A willChange: "transform" CSS property

Notice the difference in this 200x100 video:

<video src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/smooth-text.mp4" playsInline muted autoPlay loop style={{ width: '100%', border: '2px solid var(--text-color)', borderRadius: 4, }} />

<div
  style={{
    transform: 'translateY(' + interpolate(frame, [0, 200], [0, 50]) + 'px)',
  }}
>
  hi there
</div>

<div
  style={{
    transform: 'perspective(100px) translateY(' + interpolate(frame, [0, 200], [0, 50]) + 'px)',
    willChange: 'transform',
  }}
>
  hi there
</div>

Consider using this optimization only during rendering as excessive will-change: transform will use more resources.