{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "device-mockup-zoom",
  "title": "Device Mockup Zoom",
  "description": "Pull back from a UI to reveal it inside a device frame.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/device-mockup-zoom/index.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Easing, interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface DeviceMockupZoomProps {\n  children?: ReactNode;\n  device?: \"laptop\" | \"phone\";\n  frameColor?: string;\n  screenColor?: string;\n  background?: string;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nfunction DefaultScreen() {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background: \"linear-gradient(135deg, #0ea5e9 0%, #9333ea 100%)\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        color: \"white\",\n        fontFamily: FONT_FAMILY,\n        fontSize: 32,\n        fontWeight: 700,\n        letterSpacing: \"-0.03em\",\n      }}\n    >\n      Your UI\n    </div>\n  );\n}\n\nexport function DeviceMockupZoom({\n  children,\n  device = \"laptop\",\n  frameColor = \"#1f1f1f\",\n  screenColor = \"#0a0a0a\",\n  background = \"#fafafa\",\n  speed = 1,\n  className,\n}: DeviceMockupZoomProps) {\n  const frame = useCurrentFrame() * speed;\n  const { durationInFrames } = useVideoConfig();\n\n  const scale = interpolate(frame, [0, durationInFrames], [2, 1], {\n    extrapolateRight: \"clamp\",\n    easing: Easing.bezier(0.22, 1, 0.36, 1),\n  });\n\n  const screen = children ?? <DefaultScreen />;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        overflow: \"hidden\",\n      }}\n    >\n      <div\n        style={{\n          transform: `scale(${scale})`,\n          transformOrigin: \"center center\",\n          willChange: \"transform\",\n        }}\n      >\n        {device === \"laptop\" ? (\n          <div style={{ position: \"relative\" }}>\n            {/* Screen body */}\n            <div\n              style={{\n                width: 720,\n                height: 440,\n                background: frameColor,\n                borderRadius: 16,\n                padding: 16,\n                boxShadow: \"0 30px 80px rgba(0,0,0,0.25)\",\n              }}\n            >\n              <div\n                style={{\n                  position: \"relative\",\n                  width: \"100%\",\n                  height: \"100%\",\n                  background: screenColor,\n                  borderRadius: 6,\n                  overflow: \"hidden\",\n                }}\n              >\n                {screen}\n              </div>\n            </div>\n            {/* Base */}\n            <div\n              style={{\n                width: 820,\n                height: 18,\n                background: frameColor,\n                borderBottomLeftRadius: 14,\n                borderBottomRightRadius: 14,\n                marginLeft: -50,\n                marginTop: -2,\n                boxShadow: \"0 10px 24px rgba(0,0,0,0.18)\",\n              }}\n            />\n            <div\n              style={{\n                width: 120,\n                height: 6,\n                background: \"#0a0a0a\",\n                marginLeft: \"auto\",\n                marginRight: \"auto\",\n                borderBottomLeftRadius: 8,\n                borderBottomRightRadius: 8,\n                marginTop: -1,\n              }}\n            />\n          </div>\n        ) : (\n          <div\n            style={{\n              width: 280,\n              height: 560,\n              background: frameColor,\n              borderRadius: 44,\n              padding: 14,\n              boxShadow: \"0 30px 80px rgba(0,0,0,0.25)\",\n              position: \"relative\",\n            }}\n          >\n            <div\n              style={{\n                position: \"relative\",\n                width: \"100%\",\n                height: \"100%\",\n                background: screenColor,\n                borderRadius: 32,\n                overflow: \"hidden\",\n              }}\n            >\n              {screen}\n            </div>\n            <div\n              style={{\n                position: \"absolute\",\n                top: 22,\n                left: \"50%\",\n                transform: \"translateX(-50%)\",\n                width: 90,\n                height: 22,\n                background: \"#0a0a0a\",\n                borderRadius: 14,\n              }}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/device-mockup-zoom.tsx"
    }
  ],
  "type": "registry:component"
}