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>

then

or

// 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;
}