{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"variable-font-proximity","type":"registry:block","title":"variable-font proximity","description":"\"headline breathes with 57\" — letter weight swells near the cursor. Needs a variable font; Inter is already loaded.","author":"Motion Menu","categories":["role-chrome","text","type"],"dependencies":[],"registryDependencies":["@motionmenu/motion-menu-runtime"],"meta":{"number":"57","slug":"variable-font-proximity","framework":"react","docs":"https://motion-menu-two.vercel.app/p/variable-font-proximity.md"},"files":[{"path":"motion-menu/variable-font-proximity.html","type":"registry:file","target":"motion-menu/variable-font-proximity.html","content":"
\n
57

Variable-font proximity

variable font
React ↗
\n
WEIGHT

move your cursor across the letters

\n

Say: \"headline breathes with 57\" — letter weight swells near the cursor. Needs a variable font; Inter is already loaded.

\n
"},{"path":"motion-menu/variable-font-proximity.css","type":"registry:file","target":"motion-menu/variable-font-proximity.css","content":".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/* ---------- Section I · text & type II ---------- */\n .vf-word { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: .02em; user-select: none; }\n\n.vf-word .ch { display: inline-block; font-variation-settings: 'wght' 300; }\n\n.demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }"},{"path":"components/motion-menu/variable-font-proximity.tsx","type":"registry:component","content":"// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS.\n\"use client\";\n// variable-font proximity — Motion Menu\n// Calls the Motion Menu shared runtime (webglDemo / canvas2dDemo / art helpers).\n// Install `motion-menu-runtime` and mount it once at the app root, or the effect\n// below throws ReferenceError on first paint.\nimport { useEffect, useRef } from \"react\";\n\nconst MARKUP = \"
\\n
57

Variable-font proximity

variable font
React \\u2197
\\n
WEIGHT

move your cursor across the letters

\\n

Say: \\\"headline breathes with 57\\\" \\u2014 letter weight swells near the cursor. Needs a variable font; Inter is already loaded.

\\n
\";\n\nexport function VariableFontProximity() {\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 /* ---- 57 · variable-font proximity ---- */\n {\n const word = document.getElementById('vf-word');\n const chars = splitChars(word);\n const demo = word.closest('.demo');\n demo.addEventListener('mousemove', (e) => {\n chars.forEach((ch) => {\n const r = ch.getBoundingClientRect();\n const d = Math.hypot(e.clientX - (r.left + r.width / 2), e.clientY - (r.top + r.height / 2));\n const w = Math.round(900 - Math.min(d / 130, 1) * 620);\n ch.style.fontVariationSettings = `'wght' ${w}`;\n });\n });\n demo.addEventListener('mouseleave', () => {\n chars.forEach((ch) => (ch.style.fontVariationSettings = `'wght' 300`));\n });\n }\n } catch (err: any) {\n console.warn(\"[motion-menu] variable-font-proximity 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 VariableFontProximity;\n"}]}