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:T6c3,.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; } .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; } .ai-card .num { color: var(--acc2) !important; } /* ---------- Sections S/T/U/V · full domain build ---------- */ .spin-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; } .spin-canvas:active { cursor: grabbing; } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }52:T1196,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // 360° viewer — 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 = "

360\u00b0 viewer

jewelrydrag

React \u2197

drag to spin \u00b7 flick for momentum

Say: \"PDPs spin with 123\" \u2014 the multi-angle inspection jewelry buyers demand. Production feeds it a photo turntable or our GLBs.

"; export function 360Viewer() { 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 { /* ---- 123 · 360° viewer ---- */ canvas2dDemo('spin360', (d) => { const s = { a: 0.6, v: 0.4, dragging: false, lx: 0, lt: 0 }; d.canvas.addEventListener('pointerdown', (e) => { s.dragging = true; s.v = 0; s.lx = e.clientX; s.lt = performance.now(); d.canvas.setPointerCapture(e.pointerId); }); d.canvas.addEventListener('pointermove', (e) => { if (!s.dragging) return; const now = performance.now(); const dx = e.clientX - s.lx; s.a += dx * 0.012; s.v = dx / Math.max(now - s.lt, 1) * 12; s.lx = e.clientX; s.lt = now; }); const end = () => (s.dragging = false); d.canvas.addEventListener('pointerup', end); d.canvas.addEventListener('pointercancel', end); return (t, delta) => { if (!s.dragging) { s.a += s.v * delta; s.v *= Math.pow(0.25, delta); } const { ctx, w, h } = d; ctx.clearRect(0, 0, w, h); const cx = w / 2, cy = h / 2 + 10; const a = s.a; const squash = Math.abs(Math.sin(a)) * 0.8 + 0.2; // band ctx.save(); ctx.translate(cx, cy); ctx.scale(1, squash); ctx.lineWidth = 13; const grad = ctx.createLinearGradient(-60, -60, 60, 60); grad.addColorStop(0, '#f0f0f6'); grad.addColorStop(0.5, '#9a9aa8'); grad.addColorStop(1, '#e8e8ee'); ctx.strokeStyle = grad; ctx.beginPath(); ctx.arc(0, 0, 58, 0, Math.PI * 2); ctx.stroke(); // moving glint on band ctx.strokeStyle = 'rgba(255,255,255,.9)'; ctx.lineWidth = 4; ctx.beginPath(); ctx.arc(0, 0, 58, a * 1.4, a * 1.4 + 0.5); ctx.stroke(); ctx.restore(); // gem riding the band edge const gy = cy - 58 * squash; ctx.save(); ctx.translate(cx, gy); ctx.fillStyle = '#b7ff2e'; ctx.beginPath(); ctx.moveTo(0, -14); ctx.lineTo(11, 0); ctx.lineTo(0, 10); ctx.lineTo(-11, 0); ctx.closePath(); ctx.fill(); ctx.fillStyle = 'rgba(255,255,255,.85)'; const sp = Math.abs(Math.sin(a * 2.3)); ctx.beginPath(); ctx.arc(4 - sp * 8, -5, 1.6 + sp * 1.6, 0, Math.PI * 2); ctx.fill(); ctx.restore(); ctx.fillStyle = 'rgba(232,232,238,0.4)'; ctx.font = '10px monospace'; ctx.textAlign = 'center'; ctx.fillText(`${String(Math.round(((a % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2) / Math.PI / 2 * 360)).padStart(3, '0')}°`, cx, h - 12); }; }); } catch (err: any) { console.warn("[motion-menu] 360-viewer failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default 360Viewer; 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/360-viewer.json","proxyUrl":"https://shadcnregistry.com/r/motion-menu/360-viewer","itemId":"@motion-menu/360-viewer"}],["$","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/360-viewer.html","content":"

123

360° viewer

jewelrydrag

React ↗

drag to spin · flick for momentum

Say: \"PDPs spin with 123\" — the multi-angle inspection jewelry buyers demand. Production feeds it a photo turntable or our GLBs.

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

360° Viewer

Installation

Files

motion-menu

components

Styles