{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-pagination",
  "type": "registry:ui",
  "title": "Scroll Pagination",
  "description": "Minimal flip-counter pagination with direction-aware vertical flip, progress bar, and spring physics.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/ruixenui/scroll-pagination.tsx",
      "content": "\"use client\";\n\nimport { useState, useRef, useCallback, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\n/**\n * Scroll Pagination — Rauno Freiberg craft.\n *\n * Minimal flip-counter pagination. Single page number displayed\n * at center with direction-aware vertical flip on change.\n * Glass pill container. Arrow buttons with spring hover.\n * Scroll wheel or keyboard to navigate. Audio tick on every flip.\n */\n\n/* ── Audio singleton ── */\n\nlet _a: AudioContext | null = null;\nlet _b: AudioBuffer | null = null;\n\nfunction getCtx(): AudioContext {\n  if (!_a)\n    _a = new (window.AudioContext ||\n      (window as unknown as { webkitAudioContext: typeof AudioContext })\n        .webkitAudioContext)();\n  if (_a.state === \"suspended\") _a.resume();\n  return _a;\n}\n\nfunction getBuf(ac: AudioContext): AudioBuffer {\n  if (_b && _b.sampleRate === ac.sampleRate) return _b;\n  const len = Math.floor(ac.sampleRate * 0.003);\n  const buf = ac.createBuffer(1, len, ac.sampleRate);\n  const ch = buf.getChannelData(0);\n  for (let i = 0; i < len; i++)\n    ch[i] = (Math.random() * 2 - 1) * (1 - i / len) ** 4;\n  _b = buf;\n  return buf;\n}\n\nfunction tick(ref: React.MutableRefObject<number>) {\n  const now = performance.now();\n  if (now - ref.current < 25) return;\n  ref.current = now;\n  try {\n    const ac = getCtx();\n    const src = ac.createBufferSource();\n    const g = ac.createGain();\n    src.buffer = getBuf(ac);\n    g.gain.value = 0.06;\n    src.connect(g).connect(ac.destination);\n    src.start();\n  } catch {\n    /* silent */\n  }\n}\n\n/* ── Types ── */\n\ninterface ScrollPaginationProps {\n  totalPages?: number;\n  onChange?: (page: number) => void;\n  sound?: boolean;\n}\n\n/* ── CSS ── */\n\nconst CSS = `.sp{--sp-bg:rgba(255,255,255,.72);--sp-border:rgba(0,0,0,.06);--sp-shadow:0 0 0 .5px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);--sp-ink:0,0,0}.dark .sp,[data-theme=\"dark\"] .sp{--sp-bg:rgba(30,30,32,.82);--sp-border:rgba(255,255,255,.06);--sp-shadow:0 0 0 .5px rgba(255,255,255,.04),0 2px 4px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.3);--sp-ink:255,255,255}.sp-btn{cursor:pointer;border:none;background:none;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;transition:background .12s}.sp-btn:hover{background:rgba(var(--sp-ink),.05)}.sp-btn:active{background:rgba(var(--sp-ink),.08)}`;\n\n/* ── Constants ── */\n\nconst SPRING = { type: \"spring\" as const, stiffness: 500, damping: 35 };\n\nfunction clamp(v: number, lo: number, hi: number) {\n  return Math.max(lo, Math.min(hi, v));\n}\n\n/* ── Component ── */\n\nexport function ScrollPagination({\n  totalPages = 20,\n  onChange,\n  sound = true,\n}: ScrollPaginationProps) {\n  const [active, setActive] = useState(0);\n  const [dir, setDir] = useState(1);\n  const lastSound = useRef(0);\n  const scrollAccum = useRef(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const go = useCallback(\n    (next: number) => {\n      const c = clamp(next, 0, totalPages - 1);\n      if (c === active) return;\n      setDir(c > active ? 1 : -1);\n      if (sound) tick(lastSound);\n      setActive(c);\n      onChange?.(c);\n    },\n    [active, totalPages, onChange, sound],\n  );\n\n  // Wheel\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const handler = (e: WheelEvent) => {\n      e.preventDefault();\n      scrollAccum.current += e.deltaY;\n      if (Math.abs(scrollAccum.current) >= 40) {\n        const d = Math.sign(scrollAccum.current);\n        scrollAccum.current = 0;\n        go(active + d);\n      }\n    };\n    el.addEventListener(\"wheel\", handler, { passive: false });\n    return () => el.removeEventListener(\"wheel\", handler);\n  }, [go, active]);\n\n  const progress = totalPages > 1 ? active / (totalPages - 1) : 0;\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"sp\"\n      style={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        gap: 2,\n        background: \"var(--sp-bg)\",\n        border: \"1px solid var(--sp-border)\",\n        boxShadow: \"var(--sp-shadow)\",\n        borderRadius: 14,\n        padding: \"4px 6px\",\n        backdropFilter: \"blur(16px)\",\n        WebkitBackdropFilter: \"blur(16px)\",\n        userSelect: \"none\",\n      }}\n    >\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n\n      {/* Prev */}\n      <button\n        className=\"sp-btn\"\n        onClick={() => go(active - 1)}\n        style={{ opacity: active === 0 ? 0.2 : 1 }}\n        disabled={active === 0}\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n          <path\n            d=\"M8.5 3.5L5.5 7L8.5 10.5\"\n            stroke={`rgba(var(--sp-ink),.55)`}\n            strokeWidth=\"1.4\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      {/* Number display */}\n      <div\n        style={{\n          position: \"relative\",\n          width: 48,\n          height: 32,\n          overflow: \"hidden\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          <motion.span\n            key={active}\n            initial={{ y: dir * 18, opacity: 0, filter: \"blur(2px)\" }}\n            animate={{ y: 0, opacity: 1, filter: \"blur(0px)\" }}\n            exit={{ y: dir * -18, opacity: 0, filter: \"blur(2px)\" }}\n            transition={SPRING}\n            style={{\n              position: \"absolute\",\n              fontSize: 15,\n              fontWeight: 560,\n              color: `rgba(var(--sp-ink),.85)`,\n              fontVariantNumeric: \"tabular-nums\",\n              letterSpacing: \"-0.01em\",\n            }}\n          >\n            {active + 1}\n          </motion.span>\n        </AnimatePresence>\n      </div>\n\n      {/* Next */}\n      <button\n        className=\"sp-btn\"\n        onClick={() => go(active + 1)}\n        style={{ opacity: active === totalPages - 1 ? 0.2 : 1 }}\n        disabled={active === totalPages - 1}\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n          <path\n            d=\"M5.5 3.5L8.5 7L5.5 10.5\"\n            stroke={`rgba(var(--sp-ink),.55)`}\n            strokeWidth=\"1.4\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      {/* Progress bar */}\n      <div\n        style={{\n          position: \"absolute\",\n          bottom: 0,\n          left: 6,\n          right: 6,\n          height: 2,\n          borderRadius: 1,\n          background: `rgba(var(--sp-ink),.04)`,\n          overflow: \"hidden\",\n        }}\n      >\n        <motion.div\n          animate={{ width: `${progress * 100}%` }}\n          transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n          style={{\n            height: \"100%\",\n            borderRadius: 1,\n            background: `rgba(var(--sp-ink),.18)`,\n          }}\n        />\n      </div>\n\n      {/* Total label */}\n      <span\n        style={{\n          fontSize: 11,\n          fontWeight: 400,\n          color: `rgba(var(--sp-ink),.3)`,\n          marginLeft: 4,\n          marginRight: 4,\n          fontVariantNumeric: \"tabular-nums\",\n        }}\n      >\n        / {totalPages}\n      </span>\n    </div>\n  );\n}\n\nexport default ScrollPagination;\n",
      "type": "registry:ui",
      "target": "components/ruixen/scroll-pagination.tsx"
    }
  ]
}