August 30, 2023
Chonky Bubble Nav
I'm often inspired by the UI demos Janum Trivedi shares on Twitter.
One in particular that caught my attention earlier this year, he described as "a chonkier, Apple TV-inspired action menu".
Check out Janum's original concept:
Then the other day, I saw a tweet where Nathan Manousos recreated Janum's concept in Javascript– and did an excellent job! This inspired me to take a shot at creating it in Framer.
I started out by creating a list that includes photo and text. This took about 2 hours.
I tried to emulate a bit of that tactile, touch+force responsiveness that comes with finger tracking, but there's only so far you can get it when it's cursor-based.
In my next iteration, I designed it to be a closed nav that opens on hover. Here's a live demo you can interact with:
There's a lot of micro interactions that went into this, but one of my favorite is when you reach the top or bottom of the list; it shrinks in and then stretches out.
It took quite a number of Framer component variants to make this work, but the main method is by having two variants when the mouse leaves the top or bottom of the menu- one to shrink the menu, and another to fade the white highlight frame out.
One thing Nathan managed to get in Javascript that I didn't in Framer is having the highlight move with your cursor within a single row. To do this in Framer would require an extra 2 variants per list item, in this case another 14 variants- not something I have time for right now, but I may go back to in the future and iterate further.
Nathan also created some really cool visualizations of how this technically works:
If you're into Swift, Janum released a spring-based animation engine called Wave that he used to build the UI concepts he posts.