{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-orbital-image-wheel",
  "title": "Orbital Image Wheel Demo",
  "description": "Demo showing the Orbital Image Wheel component.",
  "registryDependencies": [
    "@unlumen-ui/orbital-image-wheel"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/orbital-image-wheel/index.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport Lenis from \"lenis\";\n\nimport {\n  OrbitalImageWheel,\n  type OrbitalImageWheelProps,\n} from \"@/components/unlumen-ui/orbital-image-wheel\";\n\ntype OrbitalImageWheelDemoProps = Pick<\n  OrbitalImageWheelProps,\n  | \"turns\"\n  | \"blur\"\n  | \"dim\"\n  | \"brightnessBoost\"\n  | \"darknessStrength\"\n  | \"minSaturation\"\n  | \"saturationStrength\"\n  | \"focusSpread\"\n  | \"scaleEffect\"\n  | \"scrollSensitivity\"\n  | \"itemWidth\"\n  | \"itemHeight\"\n  | \"wheelSize\"\n  | \"cropRatio\"\n  | \"scrollLength\"\n  | \"captionOffset\"\n  | \"showCaption\"\n  | \"subtitleDirection\"\n  | \"subtitleSpeed\"\n  | \"subtitleStagger\"\n> & {\n  imageCount?: number;\n  smooth?: boolean;\n};\n\nconst LABELS = [\n  \"Neural\",\n  \"Capsule\",\n  \"Vision\",\n  \"Fusion\",\n  \"Pulse\",\n  \"Signal\",\n  \"Orbit\",\n  \"Clinic\",\n  \"Vault\",\n  \"Prism\",\n  \"Quantum\",\n  \"Nova\",\n];\n\nconst SUBTITLES = [\n  \"AI diagnostics\",\n  \"Precision delivery\",\n  \"Imaging stack\",\n  \"Research pipeline\",\n  \"Real-time monitoring\",\n  \"Clinical workflow\",\n  \"Predictive screening\",\n  \"Data mesh\",\n  \"Bioinformatics\",\n  \"Automated QA\",\n  \"Companion model\",\n  \"Lab insights\",\n];\n\nexport default function OrbitalImageWheelDemo({\n  turns = 4,\n  blur = 4,\n  dim = 40,\n  brightnessBoost = 30,\n  darknessStrength = 1.05,\n  minSaturation = 55,\n  saturationStrength = 0.6,\n  focusSpread = 0.34,\n  scaleEffect = 0.06,\n  scrollSensitivity = 0.7,\n  itemWidth = 220,\n  itemHeight = 300,\n  wheelSize = 2200,\n  cropRatio = 0.75,\n  scrollLength = 330,\n  captionOffset = 8,\n  showCaption = true,\n  subtitleDirection = \"top\",\n  subtitleSpeed = 1,\n  subtitleStagger = 0.018,\n  imageCount = 20,\n  smooth = true,\n}: OrbitalImageWheelDemoProps) {\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [previewWidth, setPreviewWidth] = useState(900);\n\n  useEffect(() => {\n    const node = scrollContainerRef.current;\n    if (!node) return;\n\n    const update = () => setPreviewWidth(node.clientWidth || 900);\n    update();\n\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n\n    return () => observer.disconnect();\n  }, []);\n\n  useEffect(() => {\n    const wrapper = scrollContainerRef.current;\n    const content = contentRef.current;\n    if (!smooth || !wrapper || !content) return;\n\n    const lenis = new Lenis({\n      wrapper,\n      content,\n      smoothWheel: true,\n      wheelMultiplier: 0.95,\n      lerp: 0.09,\n    });\n\n    let rafId = 0;\n    const raf = (time: number) => {\n      lenis.raf(time);\n      rafId = window.requestAnimationFrame(raf);\n    };\n\n    rafId = window.requestAnimationFrame(raf);\n\n    return () => {\n      window.cancelAnimationFrame(rafId);\n      lenis.destroy();\n    };\n  }, [smooth]);\n\n  const images = useMemo(() => {\n    const qualityBias = Math.max(1, Math.round(previewWidth / 900));\n    const targetWidth = Math.max(220, Math.round(itemWidth));\n    const targetHeight = Math.max(280, Math.round(itemHeight));\n\n    return Array.from({ length: imageCount }, (_, i) => ({\n      src: `https://picsum.photos/seed/oiw${i + 1}/${targetWidth * qualityBias}/${targetHeight * qualityBias}`,\n      alt: `Orbital image ${i + 1}`,\n      label: LABELS[i % LABELS.length],\n      subtitle: SUBTITLES[i % SUBTITLES.length],\n    }));\n  }, [imageCount, itemWidth, itemHeight, previewWidth]);\n\n  const reloadKey = useMemo(\n    () =>\n      [\n        turns,\n        blur,\n        dim,\n        brightnessBoost,\n        darknessStrength,\n        minSaturation,\n        saturationStrength,\n        focusSpread,\n        scaleEffect,\n        scrollSensitivity,\n        itemWidth,\n        itemHeight,\n        wheelSize ?? \"\",\n        cropRatio,\n        scrollLength,\n        captionOffset,\n        showCaption,\n        subtitleDirection,\n        subtitleSpeed,\n        subtitleStagger,\n        imageCount,\n        smooth,\n      ].join(\"|\"),\n    [\n      turns,\n      blur,\n      dim,\n      brightnessBoost,\n      darknessStrength,\n      minSaturation,\n      saturationStrength,\n      focusSpread,\n      scaleEffect,\n      scrollSensitivity,\n      itemWidth,\n      itemHeight,\n      wheelSize,\n      cropRatio,\n      scrollLength,\n      captionOffset,\n      showCaption,\n      subtitleDirection,\n      subtitleSpeed,\n      subtitleStagger,\n      imageCount,\n      smooth,\n    ],\n  );\n\n  return (\n    <div ref={scrollContainerRef} className=\"h-full w-full overflow-y-auto\">\n      <div ref={contentRef}>\n        <OrbitalImageWheel\n          key={reloadKey}\n          images={images}\n          turns={turns}\n          blur={blur}\n          dim={dim}\n          brightnessBoost={brightnessBoost}\n          darknessStrength={darknessStrength}\n          minSaturation={minSaturation}\n          saturationStrength={saturationStrength}\n          focusSpread={focusSpread}\n          scaleEffect={scaleEffect}\n          scrollSensitivity={scrollSensitivity}\n          itemWidth={itemWidth}\n          itemHeight={itemHeight}\n          wheelSize={wheelSize}\n          cropRatio={cropRatio}\n          scrollLength={scrollLength}\n          captionOffset={captionOffset}\n          showCaption={showCaption}\n          subtitleDirection={subtitleDirection}\n          subtitleSpeed={subtitleSpeed}\n          subtitleStagger={subtitleStagger}\n          scrollContainerRef={scrollContainerRef}\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/demo/components/unlumen/orbital-image-wheel.tsx"
    }
  ],
  "type": "registry:ui"
}