Get the latest tech news

Scroll snapping, state queries, monster hunter, and gamification

I tried to tackle UI gamification with a Monster Hunter-inspired select element. This demo covers my approach to CSS, scripting, and accessibility.

I started this demo while waiting for that last entry to be released, so visually it has more of a Monster Hunter Wold vibe (the previous version). We have a bit of an offset for the frame, that is because we are using the icon size to calculate the top, this should be fixed when we position the text inside of our options. The combination of customizable select, anchor positioning, and scroll-snap creates possibilities I wouldn’t have imagined a few years ago.

Get the Android app