Pretext

A little bit ago, this thing called Pretext went viral. I wanted to mess around with it and this article exists so that I could have some text to mess around with.

If you don't know what Pretext is, it's a JavaScript library for dynamically laying out text. You know how in Microsoft Word when you inset a picture or shape, if you choose tight, it wraps the text tightly around your picture? Pretext is like that, but while Word can only treat all shapes like squares, Pretext can wrap around any shape. And it does it a trillion times per second, so if there is anything moving on the page, the text wraps around it fluidly.

Pretext was created by this guy called Cheng Lou and it pretty much immediately went viral when people started using it to do cool things. My favorite is this illustrated tapestry where a dragon follows your mouse around and breathes fire, burning away the words on a medieval book. I wanted to create my own page where you can type in anything you think of and it will create an AI image that you can then interact with the page with. I think it's neat, go ahead and mess around with it.

More interesting than the page itself is the process of working on it with AI (Claude Code specifically). This was one of my first projects working with an AI coding tool. Claude has the ability to make impossible tasks easy and seemingly easy tasks infuriating. For this page, I told it what I wanted and let it rip overnight. It made a simple page with a few shapes and the underlying Pretext interactions. Some of the shapes were janky SVGs but overall it worked great. With this as a jumping-off point, I told it that I wanted the page to look like a sunset. It created 3 variants and I chose the one I liked best. The page was 90% of the way ready and I had barely had to do any work.

If you’ve ever built anything with AI, you know that this is a trap. It gives you a shell that looks pretty good, but as soon as you try to build out the details, it feels like repeatedly slamming your face into a wall. Claude Code always looks for the shortest path to completing whatever you asked it to do, even if that path sets it up poorly for the obvious next step. It does a great job of going from A to B, but a terrible job of keeping in mind that we’re going to have to go to C, then D, then all the way to Z.

Once you’re in the spiral, the only solve is to recognize it and instruct Claude to take a step back. Some things that we think would be easy are incredibly hard. To get the windmill at the bottom working correctly took hours of troubleshooting, waiting for Claude to draw a windmill, telling it, “No, this doesn’t look right. Here, use this other example. No, that doesn’t look right either.”

At the time, I was using Claude 4.6, which was before they had relatively solid SVG image gen capabilities. Now, doing something like this would be much, much quicker, which shows how quickly AI has moved in just a few months. But in a way, I’m glad I had to deal with the obtuse process previously.

Learning to work around the limitations of a tool helps you to understand it better, especially when you are not familiar with the underlying work that the tool is doing. Learning to work around that A-to-B mindset that AI coding tools tend to have means getting better at knowing when to let Claude keep going and when to stop it and explain where you’re trying to end up.

The annoying thing is that it feels like you waste the most time on the most trivial aspects. You tell Claude what you want, and it gets you 80% of the way there right away. You think you’re so close to the finish line, but instead, it’s pulling teeth to adjust relatively straightforward things.

A lot of what you learn about working with AI changes because the tech is developing so quickly. But this is something that feels like it holds true most of the time. The work of refinement is far harder than the work of generation.

Anyways, the only point of this article really is to have some text and to have that text be something I actually wrote instead of some random placeholder generated by Claude. I think I’ve got enough here now. Thanks for checking this little project out.