Difficulty Mode Selector

Here is another experiment with variable fonts in UI. I like that you can animate text property directly to communicate a particular UI state (classically, we used to manipulate their transform component — position, scale, rotation, opacity). It enriches the experience with typographic power. In this case, the text is not only a bearer of meaning but an actor of interactions with users.

I considered using an XR pointer as the main input in this example. PointerEnter/PointerClick/PointerExit events for the UI states are processed by the text properties (weight and color) and PointerDown by the UI panel itself (rotation around the X axis). I love to leverage spatial transformations to make interactions a little bit more fun and engaging.