Animate streaming text with a one-line hook

[Music] today we're going to build a use animated text hook that lets you turn this uh on the left here into this we're simulating kind of a streaming text response maybe the kind you would see from open AI on the left and we're seeing how this hook can basically smooth it out it can be interrupted with new chunks that are streamed in we can pause start it again we can reset it and we're going to learn how to build this from scratch and then we're going to finally come over to a real kind of production application this is an open source app and it lets you ask questions

and you'll see it has some streaming right here for the answer so we're going to come here right to where our answer is we're going to try out our hook and uh let's see where we actually use this right here in the UI we'll change this with animated answer and then we'll see as soon as we press this our animated Hook is working great so this is a really fun one I think you'll get a lot of use out of this hook and uh as we can see it works great kind of no matter which react app you're

using and so let's build this from scratch starting with our demo app uh to start here I've got this little playground and uh I can press play to start kind of a simulated streaming here using an interval and um just some text here on the client but if I hit start we get a chunk we can resume it and we can reset it and so here we want to write our little use animated text hook so let's start with just saying let animated text equals use animated text

this is going to be our signature and it's going to wrap this text right here and um down here where we're rendering text we'll render animated text just like that and uh we need to go ahead and Define this hook so let's define it this is going to take in text as a string and for now we'll return text so we are are using our new hook

but it's not doing anything other than return the text and so let's start working on this actual hook so how can we actually animate this text well um let's get a single Chunk in here just like that actually let's go ahead and default this um just to get started hello world something like that and we won't worry about the interval for now so we have some text we're passing it into our hook and how might we animate this well

um we can call do slice and pass in a starting index and an ending index and we see here if it's 0 0 we don't see any of the text but if I make this one or two or three or four then um we can start to append characters basically return bigger and bigger chunks of the text that's passed in and that will create this animation effect so if we had some State called be

the cursor for the cursor position and we start this out at zero and we make this cursor then if we can update this state 1 2 3 then we should be able to drive our animation so how can we uh animate this cursor State well um I like using frame or motion for animation there's a bunch of cool options we have when we do use frame or motion for Curves and easings and things like that so let's go ahead and bring in the animate function from frame REM motion now uh if we ever

call animate like this imperatively we need to do it inside of an effect so let's go ahead and grab use effect and we'll bring this in right here and uh anime is pretty cool we can actually just animate from and to a single number and this will kick off an animation but this doesn't do us much good in order to figure out when this number is changing we can pass an option right here um to the third argument of