{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cinematic-image",
  "title": "Cinematic Image",
  "description": "Cinematic scale-down settle (110% → 100%) for large images inside an overflow-hidden frame.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://motion.asmitsah.dev/r/provider.json"
  ],
  "files": [
    {
      "path": "components/motion/cinematic-image.tsx",
      "content": "\"use client\";\n\nimport * as m from \"motion/react-m\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cinematicScale, durations, ease, viewportOnce } from \"@/lib/motion\";\n\ntype CinematicImageProps = {\n  children: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n};\n\n/**\n * Cinematic scale-DOWN settle (110% → 100%) for LARGE images only.\n * The wrapper (or a parent) MUST be `overflow-hidden` so the 1.1 scale is\n * clipped — otherwise the oversized image overflows and shifts layout.\n * Never apply this to titles/text; those stay a straight rise, no scale.\n */\nexport function CinematicImage({ children, className, style }: CinematicImageProps) {\n  return (\n    <m.div\n      className={className}\n      style={style}\n      initial={cinematicScale.initial}\n      whileInView={cinematicScale.animate}\n      viewport={viewportOnce}\n      transition={{ duration: durations.slow, ease: ease.out }}\n    >\n      {children}\n    </m.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/motion/cinematic-image.tsx"
    }
  ],
  "type": "registry:component"
}