{
  "$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/bases/editframe/components/device-mockup-zoom/index.tsx",
      "content": "\"use client\";\n\nimport { Timegroup } from \"@editframe/react\";\nimport type { ReactNode, CSSProperties } from \"react\";\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nconst DefaultScreen = () => (\n  <div\n    style={{\n      alignItems: \"center\",\n      background: \"linear-gradient(135deg, #0ea5e9 0%, #9333ea 100%)\",\n      color: \"white\",\n      display: \"flex\",\n      fontFamily: FONT_FAMILY,\n      fontSize: 32,\n      fontWeight: 700,\n      inset: 0,\n      justifyContent: \"center\",\n      letterSpacing: \"-0.03em\",\n      position: \"absolute\",\n    }}\n  >\n    Your UI\n  </div>\n);\n\nexport interface DeviceMockupZoomProps {\n  children?: ReactNode;\n  device?: \"laptop\" | \"phone\";\n  frameColor?: string;\n  screenColor?: string;\n  background?: string;\n  speed?: number;\n  fps?: number;\n  durationInFrames?: number;\n  width?: number;\n  height?: number;\n  className?: string;\n}\n\nexport const DeviceMockupZoom = ({\n  children,\n  device = \"laptop\",\n  frameColor = \"#1f1f1f\",\n  screenColor = \"#0a0a0a\",\n  background = \"#fafafa\",\n  speed = 1,\n  fps = 30,\n  durationInFrames = 120,\n  width = 1280,\n  height = 720,\n  className,\n}: DeviceMockupZoomProps) => {\n  const safeSpeed = Math.max(0.01, speed);\n  const durationMs = (durationInFrames / fps) * 1000;\n  const scaleDurationMs = ((durationInFrames / fps) * 1000) / safeSpeed;\n\n  const screen = children ?? <DefaultScreen />;\n\n  const containerStyle: CSSProperties = {\n    alignItems: \"center\",\n    background,\n    display: \"flex\",\n    height,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    width,\n  };\n\n  return (\n    <Timegroup\n      className={className}\n      duration={`${durationMs}ms`}\n      mode=\"fixed\"\n      style={containerStyle}\n    >\n      <>\n        <style>{`\n          @keyframes framecn-device-zoom {\n            from { transform: scale(2); }\n            to { transform: scale(1); }\n          }\n        `}</style>\n        <div\n          style={{\n            animation: `framecn-device-zoom ${scaleDurationMs}ms cubic-bezier(0.22, 1, 0.36, 1) backwards`,\n            transformOrigin: \"center center\",\n          }}\n        >\n          {device === \"laptop\" ? (\n            <div style={{ position: \"relative\" }}>\n              {/* Screen body */}\n              <div\n                style={{\n                  background: frameColor,\n                  borderRadius: 16,\n                  boxShadow: \"0 30px 80px rgba(0,0,0,0.25)\",\n                  height: 440,\n                  padding: 16,\n                  width: 720,\n                }}\n              >\n                <div\n                  style={{\n                    background: screenColor,\n                    borderRadius: 6,\n                    height: \"100%\",\n                    overflow: \"hidden\",\n                    position: \"relative\",\n                    width: \"100%\",\n                  }}\n                >\n                  {screen}\n                </div>\n              </div>\n              {/* Base */}\n              <div\n                style={{\n                  background: frameColor,\n                  borderBottomLeftRadius: 14,\n                  borderBottomRightRadius: 14,\n                  boxShadow: \"0 10px 24px rgba(0,0,0,0.18)\",\n                  height: 18,\n                  marginLeft: -50,\n                  marginTop: -2,\n                  width: 820,\n                }}\n              />\n              <div\n                style={{\n                  background: \"#0a0a0a\",\n                  borderBottomLeftRadius: 8,\n                  borderBottomRightRadius: 8,\n                  height: 6,\n                  marginLeft: \"auto\",\n                  marginRight: \"auto\",\n                  marginTop: -1,\n                  width: 120,\n                }}\n              />\n            </div>\n          ) : (\n            <div\n              style={{\n                background: frameColor,\n                borderRadius: 44,\n                boxShadow: \"0 30px 80px rgba(0,0,0,0.25)\",\n                height: 560,\n                padding: 14,\n                position: \"relative\",\n                width: 280,\n              }}\n            >\n              <div\n                style={{\n                  background: screenColor,\n                  borderRadius: 32,\n                  height: \"100%\",\n                  overflow: \"hidden\",\n                  position: \"relative\",\n                  width: \"100%\",\n                }}\n              >\n                {screen}\n              </div>\n              <div\n                style={{\n                  background: \"#0a0a0a\",\n                  borderRadius: 14,\n                  height: 22,\n                  left: \"50%\",\n                  position: \"absolute\",\n                  top: 22,\n                  transform: \"translateX(-50%)\",\n                  width: 90,\n                }}\n              />\n            </div>\n          )}\n        </div>\n      </>\n    </Timegroup>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/framecn/device-mockup-zoom.tsx"
    }
  ],
  "type": "registry:component"
}