How did this example use text inputs?

Can anyone explain to me how this guy used text that was part of the document in his animation? I have been studying the code for quite a while, and am slightly confused. It is amazing.

@coolcomfort22 Are you asking about the “Run Pen” and the Gears? That’s very simple to do as a Lottie animation. I can help you if you want.

Sorry for not explaining myself well. Notice how if you type into the input, then hit enter, the text will split apart (if you typed a long enough value). Somehow, the creator turns the input text into a shape and then it splits up. I am trying to figure out how to replicate that exactly.

I have created a blank after effects composition with a single text that says “text”. I have disabled converting texts to shapes, and I have rendered it out. Now how can I get it to where I can replace that text within my HTML document?

To be honest, that sounds like a CSS coding thing. I think the div here is split, see screenshots, and I think that’s how they’re doing it.

It is far more complex a solution. Look at the javascript. Notice how when you click “Next” it splits the text up, rendering the user generated text to the ae animation.