{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"idle-attract","type":"registry:block","title":"idle attract","description":"\"the site performs 175\" — when the visitor goes still, the page starts a self-running show. Museum-mode; any movement hands control back.","author":"Motion Menu","categories":["role-chrome","global","feel","js"],"dependencies":["gsap"],"registryDependencies":[],"meta":{"number":"175","slug":"idle-attract","framework":"react","docs":"https://motion-menu-two.vercel.app/p/idle-attract.md"},"files":[{"path":"motion-menu/idle-attract.html","type":"registry:file","target":"motion-menu/idle-attract.html","content":"
\n
175

Idle attract mode

JS
React ↗
\n

stop moving for 4 seconds…

\n

Say: \"the site performs 175\" — when the visitor goes still, the page starts a self-running show. Museum-mode; any movement hands control back.

\n
"},{"path":"motion-menu/idle-attract.css","type":"registry:file","target":"motion-menu/idle-attract.css","content":".sec-body.closed { display: none; }\n\n.card {\n border: 1px solid var(--line); border-radius: 14px; background: var(--card);\n overflow: hidden; display: flex; flex-direction: column;\n }\n\n.card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); }\n\n.card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; }\n\n.card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; }\n\n.tags { display: flex; gap: .35rem; }\n\n.tags i {\n font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim);\n border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap;\n }\n\n.demo {\n min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center;\n background: var(--bg2); overflow: hidden; flex: 1;\n }\n\n.order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); }\n\n.order b { color: var(--txt); font-weight: 500; }\n\n.demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; }\n\n.demo-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font: 400 .65rem var(--mono); color: var(--dim); pointer-events: none; z-index: 4; }\n\n.ai-card .num { color: var(--acc2) !important; }\n\n/* ---------- expansion wave 175–188 ---------- */\n .attract { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }\n\n.at-orb { width: 28px; height: 28px; border-radius: 50%; background: var(--acc); opacity: 0; }\n\n.demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }"},{"path":"components/motion-menu/idle-attract.tsx","type":"registry:component","content":"// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS.\n\"use client\";\n// idle attract — Motion Menu\nimport { useEffect, useRef } from \"react\";\n\nconst MARKUP = \"
\\n
175

Idle attract mode

JS
React \\u2197
\\n

stop moving for 4 seconds\\u2026

\\n

Say: \\\"the site performs 175\\\" \\u2014 when the visitor goes still, the page starts a self-running show. Museum-mode; any movement hands control back.

\\n
\";\n\nexport function IdleAttract() {\n const hostRef = useRef(null);\n\n useEffect(() => {\n const host = hostRef.current;\n if (!host) return;\n const $ = (s: string) => host.querySelector(s) as HTMLElement | null;\n let disposed = false;\n const cleanup: Array<() => void> = [];\n\n (async () => {\n if (disposed) return;\n try {\n /* ---- 175 · idle attract ---- */\n {\n const zone = document.getElementById('attract');\n const orb = zone.querySelector('.at-orb');\n const hint = document.getElementById('attract-hint');\n let last = performance.now(), playing = false, tl = null;\n zone.closest('.demo').addEventListener('pointermove', () => {\n last = performance.now();\n if (playing) {\n playing = false;\n tl?.kill();\n gsap.to(orb, { opacity: 0, duration: 0.4 });\n hint.textContent = 'stop moving for 4 seconds…';\n }\n });\n setInterval(() => {\n if (playing || zone.closest('.sec-body')?.classList.contains('closed')) return;\n if (performance.now() - last > 4000) {\n playing = true;\n hint.textContent = 'attract mode — move to take back control';\n gsap.set(orb, { opacity: 1 });\n tl = gsap.timeline({ repeat: -1 })\n .to(orb, { x: 90, y: -40, scale: 1.6, duration: 1.2, ease: 'sine.inOut' })\n .to(orb, { x: -90, y: 30, scale: 0.8, duration: 1.4, ease: 'sine.inOut' })\n .to(orb, { x: 0, y: 0, scale: 1, duration: 1.1, ease: 'sine.inOut' });\n }\n }, 600);\n }\n } catch (err: any) {\n console.warn(\"[motion-menu] idle-attract failed to start:\", err);\n }\n })();\n\n return () => {\n disposed = true;\n cleanup.forEach((fn) => { try { fn(); } catch (_) {} });\n };\n }, []);\n\n return
;\n}\n\nexport default IdleAttract;\n"}]}