{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"iphone-3d-mockup","type":"registry:block","title":"iPhone 3D mockup","description":"A 3D iPhone mockup to beautifully showcase your app on landing pages. It is built purely with React and CSS with no external dependencies, keeping your site fast.","files":[{"path":"registry/100xui/blocks/iphone-3d-mockup/components/iphone-3d-mockup.tsx","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport function IPhone3DMockup({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-[400px] w-[200px] items-center justify-center rounded-[45px] transform-3d\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative flex size-full [transform:translateZ(calc(0.05*200px))] justify-center rounded-[45px] bg-[#F1AF88] p-[2px]\">\n        {children}\n        <div className=\"absolute top-[12px] z-30 flex h-[calc(0.04*400px)] w-[calc(0.28*200px)] justify-end rounded-full bg-black p-1\">\n          <div\n            className=\"aspect-square shrink-0 rounded-full bg-black\"\n            style={{\n              backgroundImage: `\n          radial-gradient(circle at 50% 65%, rgba(100, 30, 140, 0.3) 0%, transparent 80%),\n          radial-gradient(circle at 50% 50%, rgba(0, 150, 160, 0.25) 0%, rgba(0, 100, 120, 0.1) 25%, transparent 100%),\n          radial-gradient(circle at 50% 50%, rgba(20, 30, 160, 0.3) 0%, rgba(10, 15, 80, 0.4) 20%, transparent 90%)\n        `,\n            }}\n          />\n        </div>\n        <div className=\"absolute inset-x-0 inset-y-[45px] z-10 border-y-[3px] border-[#923B15]\" />\n        <div className=\"absolute inset-x-[45px] inset-y-0 z-10 border-x-[3px] border-[#923B15]\" />\n      </div>\n      <div className=\"absolute inset-0 [transform:translateZ(calc(-0.05*200px))] rounded-[45px] bg-[#E46E3D]\" />\n\n      <div\n        className=\"absolute inset-y-[45px] flex w-[calc(0.10*200px)] flex-col justify-around border-y-[3px] border-[#923B15] bg-[#E46E3D] px-[5px] [backface-visibility:hidden] transform-3d\"\n        style={{\n          transform: \"rotateY(90deg) translateZ(calc(200px*0.5)) \",\n        }}\n      >\n        <IPhone3DMockupSideButton className=\"aspect-[0.17]\" />\n        <div\n          className=\"bg-blue aspect-[0.17] w-full rounded-full bg-[#F1AF88]\"\n          style={{\n            boxShadow: \"rgba(170,71,27,1) inset 0px 0px 0px 1px\",\n          }}\n        />\n      </div>\n\n      <div\n        className=\"absolute inset-y-[45px] w-[calc(0.10*200px)] border-y-[3px] border-[#923B15] bg-[#E46E3D] px-[5px] pt-[10px] transform-3d\"\n        style={{\n          transform: \"rotateY(-90deg) translateZ(calc(200px*0.5))\",\n        }}\n      >\n        <div className=\"space-y-3 transform-3d\">\n          <IPhone3DMockupSideButton className=\"aspect-[0.6]\" />\n          <div className=\"space-y-1.5 transform-3d\">\n            <IPhone3DMockupSideButton className=\"aspect-[0.25]\" />\n            <IPhone3DMockupSideButton className=\"aspect-[0.25]\" />\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"absolute inset-x-[45px] h-[calc(0.10*200px)] border-x-[3px] border-[#923B15] bg-[#E46E3D]\"\n        style={{\n          transform: \"rotateX(90deg) translateZ(calc(400px*0.5))\",\n        }}\n      />\n      <div\n        className=\"absolute inset-x-[45px] h-[calc(0.10*200px)] border-x-[3px] border-[#923B15] bg-[#E46E3D]\"\n        style={{\n          transform: \"rotateX(-90deg) translateZ(calc(400px*0.5))\",\n        }}\n      />\n    </div>\n  );\n}\n\nexport function IPhone3DMockupScreen({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"relative isolate z-20 size-full overflow-hidden rounded-[calc(45px-2px)] border-[4px] border-black bg-white\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nfunction IPhone3DMockupSideButton({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"flex aspect-[0.17] w-full justify-center rounded-full transform-3d\",\n        className\n      )}\n    >\n      <div className=\"absolute inset-0 rounded-full bg-[#923B15] shadow shadow-[#AA471B]\" />\n      <div\n        className=\"absolute inset-0 rounded-full bg-[#F1AF88]\"\n        style={{\n          transform: \"translateZ(3px)\",\n        }}\n      />\n      <div\n        className=\"w-[3px] border-[#923B15] bg-linear-to-r from-[#923B15] to-[#F1AF88] to-95%\"\n        style={{\n          transform: \"rotateY(-90deg) translateX(50%)\",\n        }}\n      />\n    </div>\n  );\n}\n","type":"registry:component"}]}