{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "interactive-image-compare-lens",
  "type": "registry:ui",
  "title": "Image Compare Lens",
  "description": "Split-screen before and after comparison slider with interactive dragger handle and visual contrast.",
  "category": "layout",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/layout/interactive-image-compare-lens/interactive-image-compare-lens.tsx",
      "type": "registry:ui",
      "target": "components/ui/interactive-image-compare-lens.tsx",
      "content": "import React, { useState } from 'react';\nimport { ArrowsLeftRight } from '@phosphor-icons/react';\n\nexport const InteractiveImageCompareLens: React.FC = () => {\n  const [sliderPos, setSliderPos] = useState(50);\n\n  return (\n    <div className=\"relative w-full max-w-md h-[220px] rounded-3xl overflow-hidden border border-zinc-200 dark:border-white/10 select-none shadow-xl\">\n      {/* Before Image (Grayscale / Dark) */}\n      <div className=\"absolute inset-0 bg-gradient-to-br from-zinc-900 to-zinc-950 flex items-center justify-center\">\n        <span className=\"font-mono text-xs uppercase tracking-widest text-zinc-500 font-bold\">\n          [LEGACY FRAMEWORK]\n        </span>\n      </div>\n\n      {/* After Image (Luminous Gradient) */}\n      <div\n        className=\"absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 flex items-center justify-center overflow-hidden\"\n        style={{ clipPath: `inset(0 ${100 - sliderPos}% 0 0)` }}\n      >\n        <span className=\"font-mono text-xs uppercase tracking-widest text-white font-bold\">\n          [COOKI UI ECOSYSTEM]\n        </span>\n      </div>\n\n      {/* Divider Bar */}\n      <div\n        className=\"absolute top-0 bottom-0 w-1 bg-white cursor-ew-resize shadow-2xl\"\n        style={{ left: `${sliderPos}%` }}\n      >\n        <div className=\"absolute top-1/2 -translate-y-1/2 -translate-x-1/2 flex h-7 w-7 items-center justify-center rounded-full bg-white text-zinc-900 shadow-xl border border-zinc-300\">\n          <ArrowsLeftRight size={14} weight=\"bold\" />\n        </div>\n      </div>\n\n      {/* Slider input handle */}\n      <input\n        type=\"range\"\n        min={0}\n        max={100}\n        value={sliderPos}\n        onChange={(e) => setSliderPos(Number(e.target.value))}\n        className=\"absolute inset-0 opacity-0 cursor-ew-resize w-full h-full\"\n      />\n    </div>\n  );\n};\n"
    }
  ]
}