Labo333
Joined 11 years ago
Joined 11 years ago
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.
I added the search bar, increased the data to 1000 PR a day (more than 50M words total) and added a feature to explore the other clusters as well. I hope the page is not getting cluttered.
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)I asked Claude for a few original designs, then iterated a lot for the UI. It called this design "Rasterfeld", which is a word that means "field of grids", a term used in swiss design https://docs.mew.design/blog/swiss-design-style/ as @alwa said.
The 3 primary colors refer more to pop art and Bauhaus.
I'm really eager for a nice book about "design" that would document all those styles, if someone has a recommendation.
I did experiment and a stacked chart seemed the most clear, with the important cluster at the bottom.
Founder & CTO of reduck.ai