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:Ta7c,.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; } .demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; } /* ---------- Section H · AI layer ---------- */ .ai-card { border-color: rgba(122,92,255,.4) !important; } .ai-card .num { color: var(--acc2) !important; } .ai-badge { position: absolute; top: 12px; left: 14px; font: 400 .6rem var(--mono); color: var(--acc2); border: 1px solid rgba(122,92,255,.4); border-radius: 99px; padding: .3em .7em; z-index: 4; } .chat-demo { width: 84%; display: flex; flex-direction: column; gap: .55rem; font-size: .78rem; } .chat-demo .msg { padding: .6rem .85rem; border-radius: 12px; max-width: 85%; line-height: 1.45; min-height: 1em; } .chat-demo .user { align-self: flex-end; background: rgba(255,255,255,.08); border-bottom-right-radius: 3px; } .chat-demo .bot { align-self: flex-start; background: rgba(122,92,255,.16); border: 1px solid rgba(122,92,255,.3); border-bottom-left-radius: 3px; } .scrim.bot { bottom: 0; height: 34%; } .scrim.bot .s-l1 { backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(transparent 30%, #000 70%); mask-image: linear-gradient(transparent 30%, #000 70%); } .scrim.bot .s-l2 { backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(transparent 55%, #000 90%); mask-image: linear-gradient(transparent 55%, #000 90%); } .scrim.bot .s-l3 { backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(transparent 75%, #000 100%); mask-image: linear-gradient(transparent 75%, #000 100%); } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }52:Tc89,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // concierge chat — Motion Menu // Calls the Motion Menu shared runtime (webglDemo / canvas2dDemo / art helpers). // Install `motion-menu-runtime` and mount it once at the app root, or the effect // below throws ReferenceError on first paint. import { useEffect, useRef } from "react"; const MARKUP = "

Concierge chat

Claude APIstreaming

React \u2197 See the code \u2192

\n simulation\n

Say: \"add 50\" \u2014 a styling/product advisor that streams answers, knows the catalog, and hands off to checkout.

"; export function ConciergeChat() { 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 { /* ---- 50 · concierge chat ---- */ (async function chatLoop() { const u = document.getElementById('chat-u'); const b = document.getElementById('chat-b'); const exchanges = [ ['Anniversary gift, she wears silver, under $150?', 'Three picks: the Luna cuff, the Signet chain, or the Vesper studs — the cuff ships fastest. Want it wrapped?'], ['Do these hoops go with a September wedding look?', 'Yes — pair the Aster hoops with something matte, not glossy. Here are two sets guests bought together.'], ['I need to fit out a 6-desk office by March.', 'Doable. I can draft a costed plan from the catalog — sit-stand desks, task chairs, acoustics — in about a minute.'], ]; let i = 0; while (true) { const [q, a] = exchanges[i % exchanges.length]; b.textContent = ''; u.textContent = ''; await typeInto(u, q, 24); await wait(500); await typeInto(b, a, 14); await wait(2600); i++; } })(); } catch (err: any) { console.warn("[motion-menu] concierge-chat failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default ConciergeChat; 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":[]}],["$","$L4e",null,{"registryDependencies":["@motionmenu/motion-menu-runtime"]}]]}],["$","$L4f",null,{"sourceUrl":"https://motion-menu-two.vercel.app/r/concierge-chat.json","proxyUrl":"https://shadcnregistry.com/r/motion-menu/concierge-chat","itemId":"@motion-menu/concierge-chat"}],["$","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/concierge-chat.html","content":"

Concierge chat

Claude APIstreaming

React ↗See the code →

\n simulation\n

Say: \"add 50\" — a styling/product advisor that streams answers, knows the catalog, and hands off to checkout.

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

Concierge Chat

Installation

Files

motion-menu

components

Styles