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:

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

Notice the difference in this 200x100 video:

Left side of the video
<div
  style={{
    translate: interpolate(frame, [0, 200], ['0px 0px', '0px 50px']),
  }}
>
  hi there
</div>

Right side of the video
<div
  style={{
    translate: interpolate(frame, [0, 200], ['0px 0px', '0px 50px']),
    transform: 'perspective(100px)',
    willChange: 'transform',
  }}
>
  hi there
</div>

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