4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:Tc80,.section-head { padding: 14vh 0 5vh; } .sec-body.closed { display: none; } .section-head .kicker { font-family: var(--mono); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--acc); } .section-head h2 { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -0.03em; margin-top: .6rem; } .section-head p { color: var(--dim); margin-top: .8rem; max-width: 36rem; line-height: 1.6; } .card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; } .card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); } .card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; } .card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; } .tags { display: flex; gap: .35rem; } .tags i { font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap; } .demo { min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center; background: var(--bg2); overflow: hidden; flex: 1; } .order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); } .order b { color: var(--txt); font-weight: 500; } .btn { font: 500 .8rem/1 var(--mono); color: var(--txt); background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: .8em 1.6em; transition: border-color .3s; } .btn:hover { border-color: var(--acc); color: var(--acc); } .demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; } .ai-card .num { color: var(--acc2) !important; } .anchor-tip.show { opacity: 1; transform: translateY(0); } .rm-pop.show { opacity: 1; pointer-events: auto; transform: translateY(0); } #fin-modal.show { display: flex; } .brief a.btn { text-decoration: none; text-align: center; } #palette-overlay.show { display: flex; } .palette { width: min(520px, 92vw); background: var(--bg2); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .palette input { width: 100%; background: transparent; border: 0; outline: 0; color: var(--txt); font: 500 1rem var(--sans); padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); } .palette .p-list { max-height: 46vh; overflow-y: auto; } .palette .p-item { display: flex; gap: .8rem; padding: .7rem 1.2rem; font: 400 .78rem var(--mono); color: var(--dim); cursor: pointer; align-items: baseline; } .palette .p-item .pn { color: var(--acc); flex: none; width: 34px; } .palette .p-item.sel, .palette .p-item:hover { background: rgba(183,255,46,.08); color: var(--txt); } .palette .p-hint { padding: .5rem 1.2rem; font: 400 .6rem var(--mono); color: var(--dim); border-top: 1px solid var(--line); } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }52:T19a5,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // command palette (wired to the whole menu) — Motion Menu import { useEffect, useRef } from "react"; const MARKUP = "

Command palette

\u2318Kwired live

React \u2197

\n \n

it indexes every pattern on this page (\u2026) \u2014
type a name or number, Enter jumps you there

Say: \"add 149\" \u2014 the defining SaaS interaction. This one actually navigates the menu: try \"glass\" or \"128\".

"; export function CommandPaletteWiredWholeMenu() { const hostRef = useRef(null); useEffect(() => { const host = hostRef.current; if (!host) return; const $ = (s: string) => host.querySelector(s) as HTMLElement | null; let disposed = false; const cleanup: Array<() => void> = []; (async () => { if (disposed) return; try { /* ---- 149 · command palette (wired to the whole menu) ---- */ { const overlay = document.createElement('div'); overlay.id = 'palette-overlay'; overlay.innerHTML = `

↑↓ navigate · Enter jump · Esc close

`; document.body.appendChild(overlay); const input = overlay.querySelector('#palette-input'); const listEl = overlay.querySelector('#palette-list'); let index = null, results = [], sel = 0; function buildIndex() { if (index) return; index = [...document.querySelectorAll('article.card')].map((card) => ({ num: card.querySelector('.num')?.textContent.trim() || '', title: card.querySelector('h3')?.textContent.trim() || '', card, })).filter((x) => x.num); } // The palette indexes every article.card on the page — state that count instead of a // number typed at authoring time, which drifts the moment a card is added or removed // (this one read "158" while the page had grown to 566). buildIndex(); input.placeholder = `search ${index.length} patterns — try 'glass', 'quote', or a number…`; const labCount = document.getElementById('mm-lab-count'); if (labCount) labCount.textContent = index.length; function renderList(q) { const query = q.trim().toLowerCase(); results = index.filter((x) => !query || x.num.includes(query) || x.title.toLowerCase().includes(query)) .sort((a, b) => { const as = a.title.toLowerCase().startsWith(query) || a.num === query ? 0 : 1; const bs = b.title.toLowerCase().startsWith(query) || b.num === query ? 0 : 1; return as - bs; }).slice(0, 9); sel = 0; listEl.innerHTML = results.map((x, i) => `

${x.num}${x.title}

`).join('') || '

nothing matches

'; listEl.querySelectorAll('.p-item[data-i]').forEach((el) => el.addEventListener('click', () => jump(results[Number(el.dataset.i)]))); } function jump(hit) { if (!hit) return; close(); const body = hit.card.closest('.sec-body'); if (body?.classList.contains('closed')) { body.previousElementSibling.querySelector('.section-head').click(); } requestAnimationFrame(() => { const y = window.scrollY + hit.card.getBoundingClientRect().top - innerHeight * 0.18; (window.lenis ? window.lenis.scrollTo(y, { duration: 1 }) : window.scrollTo(0, y)); gsap.fromTo(hit.card, { boxShadow: '0 0 0 2px rgba(183,255,46,0.9)' }, { boxShadow: '0 0 0 2px rgba(183,255,46,0)', duration: 1.6, delay: 0.6 }); }); } function open() { buildIndex(); overlay.classList.add('show'); input.value = ''; renderList(''); input.focus(); } function close() { overlay.classList.remove('show'); } document.getElementById('palette-open').addEventListener('click', open); window.addEventListener('keydown', (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); overlay.classList.contains('show') ? close() : open(); } if (!overlay.classList.contains('show')) return; if (e.key === 'Escape') close(); if (e.key === 'ArrowDown') { sel = Math.min(sel + 1, results.length - 1); paint(); e.preventDefault(); } if (e.key === 'ArrowUp') { sel = Math.max(sel - 1, 0); paint(); e.preventDefault(); } if (e.key === 'Enter') jump(results[sel]); }); function paint() { listEl.querySelectorAll('.p-item').forEach((el, i) => el.classList.toggle('sel', i === sel)); } input.addEventListener('input', () => renderList(input.value)); overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); }); } } catch (err: any) { console.warn("[motion-menu] command-palette-wired-whole-menu failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default CommandPaletteWiredWholeMenu; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","gsap",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"gsap"}]]}]}],["$","li","lenis",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lenis","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lenis"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://motion-menu-two.vercel.app/r/command-palette-wired-whole-menu.json","proxyUrl":"https://shadcnregistry.com/r/motion-menu/command-palette-wired-whole-menu","itemId":"@motion-menu/command-palette-wired-whole-menu"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"motion-menu/command-palette-wired-whole-menu.html","content":"

149

Command palette

⌘Kwired live

React ↗

\n \n

it indexes every pattern on this page (…) —
type a name or number, Enter jumps you there

Say: \"add 149\" — the defining SaaS interaction. This one actually navigates the menu: try \"glass\" or \"128\".

","type":"registry:file","target":"motion-menu/command-palette-wired-whole-menu.html"},{"path":"motion-menu/command-palette-wired-whole-menu.css","content":"$51","type":"registry:file","target":"motion-menu/command-palette-wired-whole-menu.css"},{"path":"components/motion-menu/command-palette-wired-whole-menu.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

Command Palette (wired To The Whole Menu)

Installation

Files

motion-menu

components

Styles