A ‘Day-Build’ with Cursor and Typescript
What I Built
I built this quantum art exhibition site in about a day, mostly by directing AI agents to do the heavy lifting. Coming from a Python background, tackling a TypeScript project would normally be a bit daunting, but the whole process has been eye-opening.
When the exhibition opens, visitors can scan a QR code which will direct to here and use this site as an interactive guide while walking through the physical installations. Each floating symbol corresponds to an actual quantum-inspired artwork, complete with artist details and exhibition history. Instead of printouts throughout the gallery (expensive, need to be printed, require everyone to be close to read them).
This also means there will be a permanent record of the exhibition with pictures the attendants can go back to in the future.
Coding
Claude helped me scaffold the project structure, create the animated SVG background (which looks so good!), and implement the floating symbols with their modal pop-ups. The interactive elements were surprisingly easy once I figured out the right prompts - all those quantum symbols smoothly drifting around the screen and expanding with details when clicked.
The animated SVG background was a total win - Claude generated this beautiful undulating grid of pastel colors that gives the whole site this ethereal quantum vibe. I couldn’t have hand-coded that SVG animation with all those bezier curves and color gradients without spending hours reading docs.
I achieved the effect above with a happy accident, which was overlaying a static and animated version with transparency on the front-most one. This gives a really nice, busy vibe:
Static background
Animated layer
Combined effect
Deployment
Deployment has been super straightforward too. The project builds to the /dist
directory which gets published via GitHub Pages. I’ve also got it working on Vercel as a backup, which will probably be what I use for the actual exhibition since it’s more reliable.
Both Pages and Vercel will build with every update to the main
branch, and I’ll likely make a live-exhibition
release and move the Vercel deployment over to that when it comes to it.
TypeScript has been a revelation. The static typing caught so many potential bugs before they happened, and the autocomplete in VSCode made development surprisingly smooth. I’m definitely bringing some of these typing practices back to my Python work.
The whole project uses a pretty minimal setup - Webpack for bundling, some simple CSS animations, and vanilla TypeScript without any heavy frameworks. It’s amazing how much you can accomplish with modern web standards and a bit of AI assistance.
Lessons
If I had to do this again, I’d probably spend more time on the audio integration - getting the Web Audio API to behave consistently across browsers was one of the few headaches. But even there, the agents helped me debug most of the issues.
The SVG thing really blew my mind. I wrote a separate thing about it recently
Generally this has been a great experience: the rapid prototyping, the ability to generate complex SVG animations, and the TypeScript guidance all combined to make this possible in about a day of focused work.