Invisible Ink
The other month I did a little project i called "7 days of play". The premise was to spend 2-3 hrs each day exploring an idea with AI and see what I could create at the end of it.
Turns out that was the easy part and creating the blog post was the challenge, as I've been sitting on these for a month and only now got round to posting about the first one. Which was a project was a quick creative game I could distract the kids for 5 mins with on my phone. So I gave Claude the challenge to create a canvas where you can draw something, but invisible to begin with and you would need to shake the phone to reveal your sketch.
The drawing side was easy enough: strokes recorded on a hidden offscreen canvas so nothing shows on screen until the shake fires. Once I knew the illustration function worked correctly I slowly worked the opacity all the way down to fully transparent on the strokes, as this felt the most engaging and you have that slight moment of delayed gratification.
The opening particle animation went through a few iterations. Initially it was a gentle rain from the top, but that took to long so got Claude to pack the particles tighter and sped things up, then changed the launch point to a single top-centre origin, but again that took to long. In the interest of speed at getting to the meat of the game i switched to more of a bucket dump. Instead of a stream, everything drops at once like sand tipping out from a height. That's the version that stuck, just slowed back down by 50% to give it the right weight.
The pile shape underneath took some back and forth too. Tried matching a sketch with a sharper peak and irregular edges using noise, but it didn't land the way I wanted so I rolled it back to the simpler central mound, if i'm honest i'm still not happy with it and when i find the time i'll probably tweak it into a more rounded and random bottom.
On the technical side, the main challenge was mobile. Android (Pixel 10) wasn't triggering the shake at all, turned out the motion listener was being gated behind a button tap, which meant it never actually attached on Android since it doesn't need permission. Fixed by attaching it immediately on page load and keeping the iOS permission request only where it's actually required. Canvas also got set to 70vh on mobile so it fills the screen properly rather than sitting in a tiny box.
The whole thing is packaged as a single self-contained HTML file ready to drop onto a page embed element.
