Anchored Scrolling
Raycast uses a scrolling threshold for list navigation. The selection moves down to a specific point, then locks in place while the list scrolls, providing a stable visual anchor and a clear sense of boundary when the end is reached.
Press down arrow in a long list. At first, nothing scrolls, just the highlight moves.
Keep going. Around 70% down the viewport, something shifts. The highlight locks in place, and now the world moves instead. The list scrolls up beneath your anchored cursor. Until the end, when it releases again, letting you land on that final item.
Three states. One gesture. Perfect.
This should literally be implemented in any CMDK menu.
Why It Works
- Progressive Engagement: The interface doesn't scroll immediately. This reduces distracting motion for small, localized navigations (e.g., moving down two or three items). It only engages the more disruptive full-list scroll when the user demonstrates intent to navigate further down.
- Stable Spatial Anchor: The "lock-in" threshold acts as a predictable anchor for the user's eye. During a long scroll, you don't have to track a moving target; you know exactly where to look. This makes scanning long lists significantly faster and less demanding.
- Tactile Feedback & Finality: The final "docking" of the last item provides a clear, physical-feeling end-stop. There is no ambiguity. The transition from a scrolling state (where the list moves) back to a selection state (where the highlight moves) signals the boundary with absolute clarity.
Bonus Tip
You may noticed that the input field itself is still anchored. Its position never change as the menu length change.
If you directly put the entire panel on the center, the input field's position will vary based on the panel height.