4f: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"] 50: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"] 51: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"] 52:Td8c,.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; } canvas.gl { width: 100%; height: 100%; display: block; position: absolute; inset: 0; } .ai-card .num { color: var(--acc2) !important; } .tabs button.on { color: #0a0a0e; } .car-dots i.on { background: var(--acc); transform: scale(1.3); } .chap-dots i.on { background: var(--acc); } /* ---------- Section N · commerce & connected ---------- */ .cfg-ui { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; gap: .5rem; justify-content: center; align-items: center; z-index: 5; flex-wrap: wrap; } .cfg-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; } .cfg-swatch.on { border-color: #fff; } .cfg-finish { font: 500 .62rem var(--mono); color: var(--txt); background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; padding: .4em .9em; } .cfg-finish.on { border-color: var(--acc); color: var(--acc); } .cfg-price { position: absolute; top: 12px; right: 14px; font: 700 1.1rem var(--sans); color: var(--txt); z-index: 5; font-variant-numeric: tabular-nums; } .vfx-btns button.on { border-color: var(--acc); color: var(--acc); } .sw-chip.on { border-color: #fff; transform: scale(1.08); } .calc .c-tiers button.on { border-color: var(--acc); color: var(--acc); } .dims .d-btns button.on { border-color: var(--acc); color: var(--acc); } .samplereq .sr-step.on { display: block; } .samplereq .sr-picks button.on { border-color: #fff; } .volmx tr.on td { background: rgba(183,255,46,.08); color: var(--txt); } .intwall .iw-filters button.on { border-color: var(--acc); color: var(--acc); } .lc-stages button.on { border-color: var(--acc); color: var(--acc); } .install-flow .if-step.on { border-color: var(--acc); color: var(--txt); } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; } .bs-days button.on, .bs-times button.on { border-color: var(--acc); color: var(--acc); } .gw-box.on { border-color: #fff; } .stone.on { color: var(--acc); } .hot-chip.on { opacity: 1; } .lot-chip.on { color: var(--acc); border-color: var(--acc); } .gx-veil.on { opacity: 1; } .fp-pal.on { border-color: var(--acc); color: var(--acc); } .tier-layer.on { opacity: 1; } .tier-btn.on { border-color: var(--acc); color: var(--acc); }53:T11f6,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // 3D configurator — 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 = "

3D configurator

Three.jsreal

React \u2197

$249

Say: \"product page runs 101\" \u2014 live material and finish switching with the price following. This one is fully working.

"; export function 3dConfigurator() { 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 { /* ---- 101 · 3D configurator ---- */ { const COLORS = [ ['silver', 0xd8d8e0, 0], ['gold', 0xd4af6a, 40], ['violet', 0x8b6cff, 25], ]; const FINISHES = [['polished', 0.10, 1.0, 60], ['matte', 0.55, 0.65, 0]]; const state = { color: 0, finish: 0 }; let matRef = null; webglDemo('gl-config', ({ scene, camera }) => { camera.position.z = 5.8; const mat = new THREE.MeshPhysicalMaterial({ color: COLORS[state.color][1], metalness: FINISHES[state.finish][2], roughness: FINISHES[state.finish][1], envMapIntensity: 1.3, }); matRef = mat; const knot = new THREE.Mesh(new THREE.TorusKnotGeometry(1, 0.34, 200, 32), mat); scene.add(knot); const key = new THREE.DirectionalLight(0xffffff, 1.1); key.position.set(4, 6, 4); scene.add(key); return { update(t, delta) { knot.rotation.y += delta * 0.4; knot.rotation.x = Math.sin(t * 0.3) * 0.2; } }; }); const ui = document.getElementById('cfg-ui'); const priceEl = document.getElementById('cfg-price'); const priceObj = { v: 249 }; function apply() { if (matRef) { matRef.color.setHex(COLORS[state.color][1]); matRef.roughness = FINISHES[state.finish][1]; matRef.metalness = FINISHES[state.finish][2]; } const price = 199 + COLORS[state.color][2] + FINISHES[state.finish][3]; gsap.to(priceObj, { v: price, duration: 0.5, onUpdate: () => (priceEl.textContent = '$' + Math.round(priceObj.v)) }); ui.querySelectorAll('.cfg-swatch').forEach((b, i) => b.classList.toggle('on', i === state.color)); ui.querySelectorAll('.cfg-finish').forEach((b, i) => b.classList.toggle('on', i === state.finish)); } COLORS.forEach(([name, hex], i) => { const b = document.createElement('button'); b.className = 'cfg-swatch' + (i === 0 ? ' on' : ''); b.style.background = '#' + hex.toString(16).padStart(6, '0'); b.title = name; b.addEventListener('click', () => { state.color = i; apply(); }); ui.appendChild(b); }); FINISHES.forEach(([name], i) => { const b = document.createElement('button'); b.className = 'cfg-finish' + (i === 0 ? ' on' : ''); b.textContent = name; b.addEventListener('click', () => { state.finish = i; apply(); }); ui.appendChild(b); }); apply(); } } catch (err: any) { console.warn("[motion-menu] 3d-configurator failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default 3dConfigurator; 4b:["$","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","three",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/three","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":"three"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["@motionmenu/motion-menu-runtime"]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-menu-two.vercel.app/r/3d-configurator.json","proxyUrl":"https://shadcnregistry.com/r/motion-menu/3d-configurator","itemId":"@motion-menu/3d-configurator"}],["$","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"}],["$","$L51",null,{"files":[{"path":"motion-menu/3d-configurator.html","content":"

101

3D configurator

Three.jsreal

React ↗

$249

Say: \"product page runs 101\" — live material and finish switching with the price following. This one is fully working.

","type":"registry:file","target":"motion-menu/3d-configurator.html"},{"path":"motion-menu/3d-configurator.css","content":"$52","type":"registry:file","target":"motion-menu/3d-configurator.css"},{"path":"components/motion-menu/3d-configurator.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

3D Configurator

Installation

Files

motion-menu

components

Styles