cybersemics
[Liminal UI] Begin implementing a new design for Gesture Menu
Begin implementing a new design for Gesture Menu, starting with the background glow and overlay.
The Gesture Menu appears while the user is inputting a gesture in em. It shows the user the command they are about to activate, and also shows a list of other commands that the user can activate at that moment.
The new design for the Gesture Menu is made up of a few elements put together – these are shown below:
We'll be working with the first two elements – the overlay and the glow – which are used together to create a backdrop which separates the Gesture Menu from the contents of the app underneath.
We won't redesign the Gesture Menu's other elements quite yet. Implementing the new design elements bit by bit, rather than all at once, will help us prevent merge conflicts and long PR rounds.
1. Overlay
Design notes
- This layer separates the contents of the Gesture Menu from the contents of the rest of the app.
-
The overlay is made up of:
- A linear gradient, which transitions from black at the top to fully transparent at the bottom.
- A progressive blur backdrop filter which blurs the app's contents underneath, starting from really blurry at the top to not blurry at all at the bottom. This creates the impression of depth.
- See
#3in the top row of mocks below – "Philosophy" is much less blurry than the thoughts above it, which can't be read at all.
- See
-
The overlay should change height depending on the size of the list of commands.
- Look at the image below for reference.
- Look at the top three mocks below. See how "Poetry", "Trips", "Books" and "Films" are clearly visible in
#3– while in#2, the overlay obscures them. See in#1, how they are even more obscured. - Look at the bottom three mocks. The blue rectangle shows the position and size of the overflow layer. Note that the overlay is consistently larger than the list of commands by a fixed amount, highlighted in red. Perhaps this could be implemented as a
padding-bottom?
Implementation notes
- You can find the exact gradient used in the design in its Figma component.
- Progressive backdrop blur can be done with pure CSS, but it's not a standard feature/single property. It might require some experimentation to get this effect working.
- Christina implemented progressive backdrop blur in the Command Center using masks – that might be a good example to follow.
2. Glow
Design notes
- This is a simple translucent image that displays on top of the overlay. This brings our "liminal" design style onto the interface.
- Take a look at the image below. The first mock just shows the overlay layer. The second image brings in the glow layer, overlaid on top – which completes the interface.
Implementation notes
- A WEBP image for the background glow is available in the assets folder.
- The glow needs to scale smoothly and responsively depending on device width. Take a look at the image below for reference, which shows how this should roughly look on some different device sizes. Roughly speaking, the image should stay aligned to the centre of the screen.
Note: For now, please ignore the contents of the Gesture Menu and how it breaks into multiple columns – we'll tackle that in an upcoming PR. Just look at how the background glow and blur scales gracefully across different device sizes. That's the behaviour we'd like to see in this PR.
Please feel free to ask any questions, or if there's anything I can help clarify!
I think we will need breakpoints at least for determining the number of columns.
@raineorshine That is still planned, but I wanted to address that work in the next PR as there's already a fair bit going on inside this PR.
Right now, this PR just works on implementing the new background and blurring UX of the Gesture Menu. Let me know if you think I should rework this.
I'm fine with splitting work into multiple PR's, just want to make sure it's communicated clearly.
The mockups show a design that only makes sense with breakpoints and you say "We don't want to create discrete breakpoints" which is not true. Perhaps you meant to say to ignore the content and only use the mockups as a reference for the background and blurring? Mockups carry a lot of weight, so the above message is rather confusing to me. I wanted to point it out as I think it could use some clarification for the developer that gets assigned.
Perhaps you meant to say to ignore the content and only use the mockups as a reference for the background and blurring?
Thank you for pointing that out – yes, this was what I meant. The mockups should be treated as references specifically for the background and blurring in this PR, not the content layout. I see how this could be confusing, so I've updated the PR description with clearer messaging.