Эффект добавления текста React,js

Я делаю браузерную консоль. По сути это блок в который я передаю текст, этот текст постепенно накапливается(в глобальном состоянии) и отображается.

Я хочу создать такой эффект появления нового текста (добавленного к предыдущей строке), что новый текст сначала появляется поверх всего, а затем плавно сдвигает существующий текст вверх.

Как такое реализовать или есть ли какая нибудь "Волшебная" либа? Можно разделять текст на блоки, но тогда придётся взаимодействовать с сервисом который отвечает за добавление текста. Я хочу анимировать только появление новой длины. В состоянии компонента можно хранить предыдущую длину и новую, в случае, если новая длина больше предыдущей, то добавить новый текст в блок и анимировать его, но тут есть проблема, я работаю с ansi цветами в своей консоли и при таком подходе следующий текст будет терять цвет(либа).