View mini Catbot Live: mew!
Sunday Funday... Updated my server hub which had been snoozing for a bit. The page was screaming AI-created and it was bothering me. I finally had a second to sit with it and make it feel a little bit more me-like. I get paid $0 for doing stuff like this, and I do it for pure entertainment value.
Sometimes in life, there is a point where you realize it is much faster to drop in a vector graphic, than try to reinvent the whole damn thing with CSS. Don't get me wrong, I love CSS, but I had a plan, and it absolutely had to happen.
The first part of my plan was to have blacklights casting onto to page content. I soon realized that the best placement for them was horizontally and shining down. But, before I could place my blacklights, I had to have my graphic. Generally, I am not satisfied with clipart and stock. I want my own thing, because apparently I am a digital brat.
So I chose the fast method of finding reference images of the exact blacklight I had in mind and giving them to Gemini to produce a mockup starting point. After A few renditions, I got something workable. I took that version and dropped it in illustrator, where I vectorized it using outlines and tweaked to taste. I nearly ended up with a whole damn schematic of blacklights and scaffolding.
Rabbit holes are so easy to fall into. Anyways, happy with my new creation, I used it as my blacklight on the page, and mounted it snuggly to the ceiling with some scaffolding. Perfect.
Then it was time to turn the lights on. That was a little bit of css-figuring that involved gradients and placement via percent. This could have also been a rabbit hole, but this is enough for now. π€£ After I got the lights appearing properly, I realized it would be WAY COOLER to have a button. So I made a fun button that toggles the blacklights on and off, which also alters how the text and borders appear on the page.
And then I realized... I have a purrfect platform for a mini catbot to walk across! π€£β¨ So, having the full scale catbot at my disposal, I used claude to generate a 'mini catbot'. Mini Catbot will follow your cursor above the scaffolding, bat at the power button, and meow. And of course I updated some of the content which also served as a reminder I have more work to do. No homework or studying today... just 'fuzzacating' LOL
Claude handled the simple animation very well, I cannot take credit for that. But I do absolutely love it. β¨
Now my page feels much better! πΉ
Top comments (7)
Happy to see Catbot again! π» I missed her. Looking forward to seeing her develop even more!
This is so cute and creative! πΈβ¨
I love the blacklight idea, and Mini Catbot is such a fun touch.
Following the cursor and batting at the button makes the page feel really alive. Great work! π
Wow πβ€οΈ
Small playful projects are great places to keep the operational path visible too. A short note on asset size, load time, and fallback behavior when effects are unavailable would turn the visual experiment into a useful reference for making delight survive slower devices and constrained connections.
Whoah! its back! ^_^ Congratulation!
Small playful projects are great places to keep the operational path visible too. A short note on asset size, load time, and the fallback behavior when effects are unavailable would turn the visual experiment into a useful reference for making delight survive slower devices and constrained connections.
The "faster to drop in a vector than reinvent it in CSS" realization is the one that saves hobby projects β and the blacklight toggle changing text and borders along with the light is a nice touch most people would skip.
Genuinely curious about mini Catbot's cursor-following: is that requestAnimationFrame, or CSS transitions on transform? The latter is way cheaper but tends to look floaty if the easing isn't right.