State Machines + Motion Tokens: Building a Localised Chatbot with dotLottie

Live demo: Localised Chat Bot on CodePen Two things make chatbot animations annoying to build. The first is state management. You want the character to idle, react when clicked, loop while the bot is "thinking", then settle back. So you end up writing something like: if ( state === ' idle ' ) { player . stop (); player . playSegments ([ 0 , 23 ], true ); } else if ( state === ' typing ' ) { player . stop (); player . playSegments ([ 309 , 393 ], true ); } And then you add transitions. And then typing fires while to-active is still mid-play. And then you've got three places in the codebase setting animation state and they're fighting each other. The second is text. The character needs to say something — a greeting, a response, a prompt. So you either bake the text into the animation (and re-export every time it changes), or you float HTML text over the top and fake it. I wanted to build a POC that solves both. The result is a localised chatbot widget where: A named segment system encaps