I've been thinking a lot about interactions lately. Something as simple as an input deserves way more attention than it traditionally gets. The example I've created below takes that to the extreme, but the idea remains: things don't have to be the way they are because that's how they've always been.
This little guy I made below is the essence of that way of thinking. It's playful and fun to interact with, and yet the end state remains the same: I input something, and I get something back in return. In this case, I've hard coded the question and answer to avoid hooking up a model, but I see this primarily as a complement or replacement for the help widgets one encounters on a modern site.
First, try it out, then read on for a few details. You can click on the little guy or press Enter to start.
I had a conversation with a friend recently about whimsy and the lack thereof in my life. In my work as an engineer, this feels easily solvable with small interactions that feel much larger than the effort it takes to create them. It seems like model "thinking" has been given the flashing text treatment and everyone decided that was going to be it forever. I think (see what I did there?) "thinking" should look more like "thinking".
Technically speaking, I'm using a combination of two elements (the little guy and the input itself) that swap z-index positions based on the interaction state. motion ties these states together for a smooth delivery of information to the user.
Enjoy!