{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "container-scroll",
  "title": "Container Scroll",
  "description": "A device frame that un-tilts from a 3D perspective and scales to rest as you scroll — the classic product hero.",
  "dependencies": ["framer-motion"],
  "registryDependencies": ["@godui/godui-theme"],
  "files": [
    {
      "path": "packages/components/src/container-scroll/container-scroll.tsx",
      "content": "\"use client\";\n\nimport {\n  motion,\n  useReducedMotion,\n  useScroll,\n  useSpring,\n  useTransform,\n} from \"framer-motion\";\nimport * as React from \"react\";\n\nexport type ContainerScrollProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Headline block rendered above the device, rising as you scroll. */\n  header?: React.ReactNode;\n  /** The \"screen\" content — an image, video, or live UI. */\n  children: React.ReactNode;\n};\n\n// SPRING.smooth — surfaces / shared-layout feel.\nconst SPRING = { stiffness: 320, damping: 32, mass: 0.9 } as const;\n\nconst ContainerScroll = React.forwardRef<HTMLDivElement, ContainerScrollProps>(\n  ({ header, children, className, ...props }, ref) => {\n    const reduce = useReducedMotion();\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    React.useImperativeHandle(\n      ref,\n      () => containerRef.current as HTMLDivElement,\n    );\n\n    const { scrollYProgress } = useScroll({ target: containerRef });\n\n    const rotateX = useSpring(\n      useTransform(scrollYProgress, [0, 1], [20, 0]),\n      SPRING,\n    );\n    const scale = useSpring(\n      useTransform(scrollYProgress, [0, 1], [1.05, 1]),\n      SPRING,\n    );\n    const translateY = useSpring(\n      useTransform(scrollYProgress, [0, 1], [0, -100]),\n      SPRING,\n    );\n\n    const frame = (\n      <div className=\"mx-auto w-full max-w-5xl rounded-2xl border border-border bg-card p-2 shadow-2xl md:p-3\">\n        <div className=\"aspect-[16/10] size-full overflow-hidden rounded-xl bg-muted [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover\">\n          {children}\n        </div>\n      </div>\n    );\n\n    // Reduced motion: a calm, upright device with no scroll-driven transforms.\n    if (reduce) {\n      return (\n        <div\n          ref={containerRef}\n          data-slot=\"container-scroll\"\n          className={`flex flex-col items-center px-4 py-16 ${className ?? \"\"}`}\n          {...props}\n        >\n          {header ? <div className=\"mb-10 text-center\">{header}</div> : null}\n          {frame}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        data-slot=\"container-scroll\"\n        className={`relative flex h-[60rem] items-center justify-center p-4 md:h-[80rem] md:p-20 ${className ?? \"\"}`}\n        {...props}\n      >\n        <div className=\"relative w-full [perspective:1000px]\">\n          {header ? (\n            <motion.div\n              style={{ translateY }}\n              className=\"mx-auto mb-10 max-w-3xl text-center\"\n            >\n              {header}\n            </motion.div>\n          ) : null}\n          <motion.div\n            style={{ rotateX, scale }}\n            className=\"[transform-style:preserve-3d]\"\n          >\n            {frame}\n          </motion.div>\n        </div>\n      </div>\n    );\n  },\n);\nContainerScroll.displayName = \"ContainerScroll\";\n\nexport { ContainerScroll };\n",
      "type": "registry:ui",
      "target": "components/godui/container-scroll.tsx"
    }
  ],
  "type": "registry:ui"
}