Thank you for the compliment! I did spend a lot of time designing a nice experience on both desktop and mobile. Even the scrollbar to select words was non trivial as I wanted the words to be of different size, yet avoid flickering when scrolling!
Thank you for the compliment! I did spend a lot of time designing a nice experience on both desktop and mobile. Even the scrollbar to select words was non trivial as I wanted the words to be of different size, yet avoid flickering when scrolling!
I was focused on the data initially scrolling through until I suddenly realised, wow, this is really nice!
One very minor note: if your scroll device reports pixel-perfect deltas rather than discrete scroll-wheel ticks (e.g. logitech mx master, laptop touchpad, etc), the behaviour in the word search box is a bit weird. Arrow keys work fine though.
I did test it with my mac touchpad without issue. Maybe the problem is that I wanted to make discrete scroll-wheel ticks work. I just tried a fix by normalising deltaMode to pixels.
If you could just paste this in your console, I would have a better idea:
document.querySelector('.wall').addEventListener('wheel', e =>
console.log(e.deltaMode, e.deltaY.toFixed(2), e.defaultPrevented ? 'PAGE' : 'native'), true)> Arthur Conan Doyle, The Lost World
Hyperscroll - special mode turned on with a button next to scroll that turns off scroll friction and let's you scroll into infinity (wheel keeps turning after you lift your finger).
Basically when scrolling, the frame around words will have a stable top edge to avoid flickering, and it took me a few iterations to make it work.
I tested multiple designs, some of them inspired by word clouds and the size variation stuck afterwards.