6 ms·

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 wor

by Labo333 21d 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!

jelkand 21d ago
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.
c7b 21d ago
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.
- Labo333 21d ago
  Thanks! The real and probably unnecessary pain was having the words in different sizes.
  - c7b 21d ago
    Frankly, that's the one part I would have done differently. Mixing font sizes rarely looks good, but that's just my personal opinion. If you want to visually indicate intensity, I'd have used color, or rather saturation. Not the text itself, maybe a small pill next to it. But I don't think it's necessary, the order already conveys some sort of ranking, I don't think cardinal information adds much here.
    - Labo333 21d ago
      I think I agree afterwards, but now I developed emotional attachment to that quirk ^^ 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.
black_rabbit_ 21d ago
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.
- Labo333 21d ago
  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)
  - customguy 21d ago
    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.
- imp0cat 21d ago
  On a compatible Logitech device, browsing through the word search box benefits a lot from enabling hyperscroll.
  - Labo333 21d ago
    G502 user here! I also put a draggable scrollbar for the less lucky :)
    - imp0cat 21d ago
      > Some believe what separates men from animals is our ability to reason. Others say it’s language or romantic love, or opposable thumbs. Living here in this lost world, I’ve come to believe it is more than our biology. What truly makes us human is our ability to hyperscroll! > Arthur Conan Doyle, The Lost World
cube00 21d ago
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!
matheusmoreira 21d ago
Mobile experience is great! Thanks for thinking of us!
jkhdigital 21d ago
“non-trivial” is one of those words that seems like it should be a Claude-ism but is actually just the single best word for a concept that comes up extremely often in research and engineering discussions.
- shermantanktop 21d ago
  “Orthogonal” is similar. It’s been commonplace for decades in my world but seems Claude-ish.

by Labo333 21d ago

jelkand 21d ago

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.

c7b 21d ago

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.

Labo333 21d ago
Thanks! The real and probably unnecessary pain was having the words in different sizes.
- c7b 21d ago
  Frankly, that's the one part I would have done differently. Mixing font sizes rarely looks good, but that's just my personal opinion. If you want to visually indicate intensity, I'd have used color, or rather saturation. Not the text itself, maybe a small pill next to it. But I don't think it's necessary, the order already conveys some sort of ranking, I don't think cardinal information adds much here.
  - Labo333 21d ago
    I think I agree afterwards, but now I developed emotional attachment to that quirk ^^ 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.

black_rabbit_ 21d ago

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.

Labo333 21d ago
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)
- customguy 21d ago
  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.
imp0cat 21d ago
On a compatible Logitech device, browsing through the word search box benefits a lot from enabling hyperscroll.
- Labo333 21d ago
  G502 user here! I also put a draggable scrollbar for the less lucky :)
  - imp0cat 21d ago
    > Some believe what separates men from animals is our ability to reason. Others say it’s language or romantic love, or opposable thumbs. Living here in this lost world, I’ve come to believe it is more than our biology. What truly makes us human is our ability to hyperscroll! > Arthur Conan Doyle, The Lost World

cube00 21d ago

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!

matheusmoreira 21d ago

Mobile experience is great! Thanks for thinking of us!

jkhdigital 21d ago

“non-trivial” is one of those words that seems like it should be a Claude-ism but is actually just the single best word for a concept that comes up extremely often in research and engineering discussions.

shermantanktop 21d ago
“Orthogonal” is similar. It’s been commonplace for decades in my world but seems Claude-ish.