← Back to context

Comment by Labo333

16 hours ago

Author here :)

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 know HN prefers we focus on the content and not the design but I have join in to say that word scrolling experience was brilliant.

I was focused on the data initially scrolling through until I suddenly realised, wow, this is really nice!

You did a fantastic job; very to-the-point with effective visualisations. Kudos!

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.

  • Thank you!

    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)

    • FWIW I got a bunch of "(-)10.00 native" in the console, "PAGE" never showed up no matter what I tried. Firefox, also a Logitech mouse, no trackpad though.

  • On a compatible Logitech device, browsing through the word search box benefits a lot from enabling hyperscroll.

Congratulations! I was going to comment on the scroll field in particular when I saw this. I didn't even realize you had to hand-craft the component, but it's such a nice UI idea in general, the way the scrolling works and how the content above changes.

  • Thanks! The real and probably unnecessary pain was having the words in different sizes.

I just wanted to pop in and say that I found the site delightful. It’s aesthetic, concise, and everything works so quickly and responsively.