I vibe coded a cursor for my digital garden (this website) and I hate that I love it.

I was looking around the internet for web design inspiration and happened upon graffio.co, a web design firm based in what appears to be Adelaide, Australia. I first perused the site on mobile, and thought it had beautiful typography, clean animations, and an overall appealing minimalist design. When I checked it out again on desktop I discovered their inverted cursor effect and was blown away by something so trivial. I had to make one for my website.

Unfortunately my coding skills, especially javascript, leave a lot to be desired. I’m more of a DevOps/sysadmin-and even thats being generous. But I really like putting things together and building, and hosting things. So that’s my justification for using Claude. The Linux community makes me feels bad for using generative AI sometimes, but it is what it is. I can’t deny I’ve learned a lot, though I will also admit that it has definitely held back learning at times. It is tough to resist laziness when these models are more than willing to just do all the work for you. I feel the need to justify my use of it because I’m very into the Linux space and so much of that culture is against using LLMs in general. I agree in many ways. Though Linux devs are a bit more serious and grizzled than your typical MacBook Pro using web developer. I imagine a C++/Rust kernel developer scoffing at an AI model for not being able to reverse engineer an obscure kernel driver. But for something dumb and trivial like iteratively building a cool javascript riddled cursor effect for a vibe-coded digital-garden personal website? Well you can’t stop me. And boy is it tough out there in the job market. It’s impossible to keep up with the list of job requirements and frameworks and tool-kits they expect you to already know.

When replicating this I was amazed at how many layers their cursor had. I naively thought it was just an inverted cursor that followed the mouse. Nope. The effects are subtle, but only become apparent when trying to replicate exactly. It has a surprising amount of features. My favorite is this sticky effect on buttons and animations that upon release shakes in response to the release, creating a very tactile experience. I feel I replicated this particular effect quite nicely, thought not exactly. The varying degrees of physics that respond distinctly to different speeds is something I’d never have been able to replicate on my own. The math involved inside the code for all of this is crazy.

It still wasn’t quite right though. The inverted circle that follows the cursor also has an ease-in effect as it catches up to the mouse. It took me an embarrassing amount of time to realize this was the effect I was missing, once replicated I finally felt accomplished. It also grows when hovering over a link and has proven very difficult to figure out how to achieve the amorphous shape it makes when doing so, which I still haven’t replicated.

Please check it out, its fun. If you’re here on mobile you’ll have to bookmark or something to check it out later on desktop. This is one of my proudest “vibe coding” achievements, which is such a pathetic statement that now I don’t know how to live with myself.