cybersemics
[Liminal UI] Implement new drawer with second stage, gesture interactions & smooth animations
After refactoring in #3283, add a second stage to the Command Center drawer, with proper animations & gestures.
Background
- The initial stage of the Command Center, which has just been implemented, provides quick access to common commands.
- However, to fully replace the toolbar, we need an interface that provides quick access to any command in em.
- This is what the Expanded View does. Tap the arrow at the bottom of the Command Center, and the Command Center slides up further to reveal a list of every command in the app, grouped by category.
In this issue, we will focus on the mechanics of the drawer's second stage – ensuring its animation and gestural interactions are implemented. So instead of implementing the new expanded view's list of commands (as seen in mockup #3 above), we will just use the existing CommandTable as a placeholder. Mockup #2 shows what we're aiming for in this PR.
To get a feel for how the drawer should interact and animate, you can use the interactive Figma prototype.
- Click and hold a thought in the prototype to open the Command Center.
- Then, click the ⌃ arrow to see how the Expanded View should behave.
🧩 Scope
This issue focuses entirely on implementing the mechanics of the drawer:
- [ ] adding a second stage to the Command Center drawer
- [ ] fading out the "Done" button as the Command Center expands
- [ ] ensuring gestures, animation, transitions, and interactions all behave as described below
For this PR, it's sufficient to just drop in the existing CommandTable into the expanded view – the primary focus for this PR is getting the two-stage drawer experience right.
📝 Notes
Interactions
The user can tap the ⌃ arrow to expand the Command Center.
When the Command Center is expanded, the ⌃ arrow fades out, and a ⌄ arrow fades in at the top of the Command Center. Tapping the ⌄ arrow returns to the standard view.
As well as the tapping the arrows, users can open and close the Expanded View with swipe gestures:
- [ ] Swipe up from the Standard View: reveals the Expanded View.
- [ ] Swipe down from the Expanded View: returns to the Standard View.
- This should only trigger if the Expanded View’s content scroll position is at the top, so the gesture doesn’t conflict with normal scrolling.
- [ ] Swipe down again from the Standard View → closes the Command Center entirely (same as the current behavior).
Animations
The Figma prototype shows these visually, but just to give a checklist of the changes between the standard and expanded views and how those animate:
When moving from standard view (screenshot #2) to expanded view (screenshot #3):
- [ ] The buttons from the standard view fade out and slide up.
- [ ] The CommandTable fades in and slides up.
- [ ] The "Done" button fades out.
- [ ] The ⌃ arrow fades from the bottom, and a ⌄ fades in at the top.
- [ ] The drawer gets slightly taller, which moves the header and blur/falloff elements upwards, creating more space for the expanded views' content.
- In our designs, the Command Center goes from taking 330px height of the screen in standard view to 380px. So that's a height increase of 50px.
- In the current implementation, I don't think the Command Center doesn't have an absolute size set. That's ok – and the height increase doesn't have to exactly align with any given number – just need a little more vertical space for the list of commands to be effective in the expanded view.
- Note: the glow overlay does not change position, or size – that stays fixed.
Tying animations to gesture state
When swiping up or down, all of these animations should move gracefully with the finger. The drawer and its contents should feel like they’re physically connected to the gesture.
-
Example:
If the drawer is animating from 30 % to 50 % height, its height should follow the finger’s position smoothly — 31 %, 32 %, … 49 %, 50 %. - All other transitions (for example, fading out the Done button, or fading the glow out when closing the Command Center) should be synchronized with the finger’s motion.
- Nothing should “jump” once the gesture ends – every element should move as part of one continuous, fluid animation.
Ultimately: The interface should feel _directly manipulable – elements respond in real time to the user’s touch, making the Command Center feel liquid, malleable, and effortless to interact with.
Hopefully this all makes sense! Let me know if you have any questions about this.
