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:T7eb,.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; } /* ---------- Section G · motion systems ---------- */ .drag-view { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; cursor: grab; touch-action: pan-y; } .drag-view:active { cursor: grabbing; } .drag-track { display: flex; gap: 14px; padding: 0 24px; will-change: transform; } .drag-item { flex: 0 0 160px; height: 160px; border-radius: 12px; display: flex; align-items: flex-end; padding: 10px; font: 500 .68rem var(--mono); color: rgba(0,0,0,.55); user-select: none; } .ai-card .num { color: var(--acc2) !important; } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }53:Tecb,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // inertia drag slider — Motion Menu import { useEffect, useRef } from "react"; const MARKUP = "

Inertia drag slider

JS physics

React \u2197

grab and throw it

Say: \"collection slider is 42\" \u2014 flick it and it glides with momentum, rubber-bands at the ends.

"; export function InertiaDragSlider() { 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 { /* ---- 42 · inertia drag slider ---- */ { const view = document.getElementById('drag-view'); const track = document.getElementById('drag-track'); const grads = [ 'linear-gradient(150deg,#b7ff2e,#3a6600)', 'linear-gradient(150deg,#7a5cff,#241a66)', 'linear-gradient(150deg,#0ea5b7,#063a44)', 'linear-gradient(150deg,#ff6e9c,#66102e)', 'linear-gradient(150deg,#ffd76e,#664c06)', 'linear-gradient(150deg,#e8e8ee,#55555f)', ]; grads.forEach((g, i) => { const el = document.createElement('div'); el.className = 'drag-item'; el.style.background = g; el.textContent = `0${i + 1}`; track.appendChild(el); }); const s = { x: 0, v: 0, dragging: false, lastX: 0, lastT: 0 }; const bounds = () => Math.min(0, view.clientWidth - track.scrollWidth - 48); view.addEventListener('pointerdown', (e) => { s.dragging = true; s.v = 0; s.lastX = e.clientX; s.lastT = performance.now(); view.setPointerCapture(e.pointerId); }); view.addEventListener('pointermove', (e) => { if (!s.dragging) return; const now = performance.now(); const dx = e.clientX - s.lastX; s.x += dx; s.v = dx / Math.max(now - s.lastT, 1) * 1000; s.lastX = e.clientX; s.lastT = now; }); const end = () => (s.dragging = false); view.addEventListener('pointerup', end); view.addEventListener('pointercancel', end); gsap.ticker.add((time, deltaMS) => { const delta = Math.min(deltaMS / 1000, 0.05); if (!s.dragging) { s.x += s.v * delta; s.v *= Math.pow(0.06, delta); const min = bounds(); if (s.x > 0) { s.x += (0 - s.x) * 0.18; s.v = 0; } if (s.x < min) { s.x += (min - s.x) * 0.18; s.v = 0; } } track.style.transform = `translateX(${s.x}px)`; }); } } catch (err: any) { console.warn("[motion-menu] inertia-drag-slider failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default InertiaDragSlider; 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"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-menu-two.vercel.app/r/inertia-drag-slider.json","proxyUrl":"https://shadcnregistry.com/r/motion-menu/inertia-drag-slider","itemId":"@motion-menu/inertia-drag-slider"}],["$","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/inertia-drag-slider.html","content":"