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.
animation
difficulty mode
interaction design
microinteractions
motion ui
pointer
selector
switch
typography
ui
ui animation
ux
variable fonts
xr
xr design
View all tags
Posted on
Jun 2, 2023
More by Oleg Frolov View profile
Like