I’ve put together a massive gallery featuring 200 awesome visual demos created entirely with Claude. These pieces were all generated using scripts—no human assistance involved (except for some themes like city names). Just click anywhere to dive into the next one. Each demo showcases its own unique animations, patterns, and artistic flair.
Some of my favourites
Learnings
Examples are Everything: Including examples of great demos in the prompt made a huge difference. It dramatically improved the output quality and made the demos way more interesting. The AI started generating much more visually captivating content. To see the difference yourself, demos 1-100 were created with a basic prompt, while demos 101-200 benefited from the enhanced prompt.
Dealing with Outdated Knowledge: Claude sometimes referenced outdated Phaser.js methods, especially createEmitter. I tried to work around this by adding examples using the latest Phaser.js version, but it didn’t always pan out. Claude also occasionally ignored instructions to avoid certain methods and even hallucinated non-existent APIs, like quadratic bezier curves. About 30% of the time, I had to regenerate the demo to get it right. In hindsight, using Canvas directly instead of the Phaser.js framework might have yielded better results.
Switching APIs: Claude outperformed OpenAI for this project, so I switched to the Claude API pretty quickly. The newer reasoning models, like o1-preview, were even better than the 4o model, but using them for all 200 demos would have been too pricey.
Conclusion
This was a fun project. It only cost me about $15 plus taxes to use the Claude API. Next up, I’d love to add a self-feedback loop so Claude can review its creation and improve the code. I’m also excited to try this again once the new models are released.