Sometimes I get a little half idea that I want to explore, or see something inspiring that someone else has created, and need somewhere to just throw around some code and get the creative juices flowing - this is why I love Codepen and the spontaneity it enables. You can follow me, and see all of my doodles, here.
Fancy Text Animations on Hover/Tap
I ended up liking this technique so much that I used a simplified version of it throughout this website. The animations in the codepen are mostly a little OTT, but it was useful to explore the possibilities.
I wrote this little utility in such a way that the markup could remain as un-sullied as possible, with literally just the addition of a class. The Javascript then does all the heavy lifting on page load.
Moneybox Style Pin Entry Dialog
Moneybox is my current investment app of choice - I don't think that's down to their login animation, but it's certainly pleasing to the eye. My version isn't an exact replica, but was heavily inspired by it.
Split RGB Channels with "multiply" Blend Mode
I pulled this together when I was exploring the CSS mix-blend-mode property. As you'll see if you inspect the code, the HTML is a simple <h1> tag and the JS then rips this apart and performs the magic on page load. I tend to componentise things like this when I plan on using them in the real world, but this one never got over the finish line seemingly!
Want to see more like this? Feel free to check out my profile and follow me over on CodePen itself.