{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reel",
  "title": "Reel",
  "description": "A fixed centered card where images stack on the z-axis and each blooms open over the last via a centre-out mask.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/reel/index.tsx",
      "content": "\"use client\";\n\nimport {\n  AbsoluteFill,\n  Easing,\n  Img,\n  interpolate,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nconst clamp = {\n  extrapolateLeft: \"clamp\" as const,\n  extrapolateRight: \"clamp\" as const,\n};\nconst EASE_OUT = Easing.out(Easing.cubic);\n\nexport type ReelProps = {\n  images: string[];\n  width?: number;\n  height?: number;\n  radius?: number;\n  step?: number;\n  reveal?: number;\n  objectPosition?: string;\n  background?: string;\n};\n\nexport function Reel({\n  images,\n  width = 1180,\n  height = 676,\n  radius = 16,\n  step = 20,\n  reveal = 13,\n  objectPosition = \"top\",\n  background = \"#050506\",\n}: ReelProps) {\n  const frame = useCurrentFrame();\n  const { width: compWidth, height: compHeight } = useVideoConfig();\n  const left = (compWidth - width) / 2;\n  const top = (compHeight - height) / 2;\n\n  return (\n    <AbsoluteFill>\n      {images.map((src, i) => {\n        const p = interpolate(frame, [i * step, i * step + reveal], [0, 1], {\n          ...clamp,\n          easing: EASE_OUT,\n        });\n        if (p <= 0) return null;\n        const inset = (1 - p) * 50;\n        const imgScale = interpolate(p, [0, 1], [1.08, 1], clamp);\n        return (\n          <div\n            key={i}\n            style={{\n              position: \"absolute\",\n              left,\n              top,\n              width,\n              height,\n              zIndex: i,\n              clipPath: `inset(${inset}% ${inset}% round ${radius}px)`,\n              WebkitClipPath: `inset(${inset}% ${inset}% round ${radius}px)`,\n              background,\n              boxShadow: \"0 30px 80px rgba(0,0,0,0.6)\",\n              willChange: \"clip-path\",\n            }}\n          >\n            <Img\n              src={src}\n              style={{\n                width: \"100%\",\n                height: \"100%\",\n                objectFit: \"cover\",\n                objectPosition,\n                scale: `${imgScale}`,\n                willChange: \"transform\",\n              }}\n            />\n            <div\n              style={{\n                position: \"absolute\",\n                inset: 0,\n                borderRadius: radius,\n                border: \"1px solid rgba(255,255,255,0.08)\",\n              }}\n            />\n          </div>\n        );\n      })}\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/reel.tsx"
    }
  ],
  "type": "registry:component"
}