How I built this hungry caterpillar app with Replit × Pretext 🐛🍓

Here's how I coded this cute hungry caterpillar app using the coolest new library that just dropped. First, I drew the caterpillar and the little fruit it's going to eat. Then, I dragged them straight into Replit and added in this big chunk of text. This is what the caterpillar's going to crawl through. Next, I imported the Pretext library, which is what makes this whole project possible. Normally, when text loads on a website, it jumps around like this because the browser is measuring every word in real time. Pretext does all the measuring instantly upfront, so the text can flow around my caterpillar like liquid. To make sure it works, you mainly need these three functions. This one reads every single word and measures how wide it is. This one runs 120 times a second. Every time the caterpillar moves, it figures out where the line of text goes around it. And this one just hands you back the actual words to draw on the screen. Then, I put it all together. The caterpillar crawls through the text and every segment pushes the words out of the way in real time. Every time it eats a fruit, it grows a new segment. So, the longer you play, the more chaos you cause. And if you want a bonus step, use the MediaPipe library to control the caterpillar with your actual hand. Honestly, my caterpillar's looking pretty well-fed. Try it out yourself and follow me to see some more cool coding projects.