react-mission-control

# npm
npm install react-mission-control
 
# pnpm
pnpm add react-mission-control

import { MCProvider, MCWrapper }
  from "react-mission-control"
 
<MCProvider>
  <MCWrapper>
    <YourComponent />
  </MCWrapper>
</MCProvider>

// component
<MCTrigger>activate</MCTrigger>
 
// hook
const { activate } = useMCActions()

all wrapped components zoom out into a grid. click any component to focus it. press escape to return.

mission control for your interface.

<MCProvider
  shortcut="ArrowUp+ArrowUp"
  blurAmount={10}
  onActivate={() => ...}
  onDeactivate={() => ...}
/>

:root {
  --mc-highlight: rgba(64,156,255,0.85);
  --mc-backdrop-bg: rgba(0,0,0,0.3);
  --mc-transition-duration: 0.2s;
  --mc-border-radius: 8px;
}