{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "phone-mockup-card",
  "type": "registry:ui",
  "title": "Phone Mockup Card",
  "description": "A minimal phone frame card with pixel-perfect status bar, dynamic island, and typography metrics display.",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "registry/ruixenui/phone-mockup-card.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\nimport { IoCellular, IoWifi, IoBatteryFull } from \"react-icons/io5\";\n\ninterface PhoneMockupCardProps {\n  title?: string;\n  bodyText?: string;\n  highlight?: string;\n  secondaryText?: string;\n  metrics?: { label: string; value: string }[];\n  className?: string;\n}\n\nconst ease = [0.2, 0.8, 0.2, 1];\n\nconst stagger = {\n  hidden: {},\n  show: { transition: { staggerChildren: 0.08, delayChildren: 0.25 } },\n};\n\nconst item = {\n  hidden: { opacity: 0, y: 8, filter: \"blur(4px)\" },\n  show: {\n    opacity: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    transition: { duration: 0.5, ease },\n  },\n};\n\nexport default function PhoneMockupCard({\n  title = \"Craft\",\n  bodyText = \"Interfaces shaped by spatial intention — where every surface, shadow, and transition exists with purpose.\",\n  highlight = \"spatial intention\",\n  secondaryText = \"Typography that breathes. Motion that guides. Surfaces that know the light.\",\n  metrics = [\n    { label: \"Tracking\", value: \"–0.02\" },\n    { label: \"Leading\", value: \"1.65\" },\n    { label: \"Weight\", value: \"420\" },\n  ],\n  className,\n}: PhoneMockupCardProps) {\n  const renderBody = () => {\n    if (!highlight || !bodyText.includes(highlight)) return <p>{bodyText}</p>;\n    const i = bodyText.indexOf(highlight);\n    return (\n      <p>\n        {bodyText.slice(0, i)}\n        <span className=\"font-medium text-neutral-800 dark:text-neutral-200\">\n          {highlight}\n        </span>\n        {bodyText.slice(i + highlight.length)}\n      </p>\n    );\n  };\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 24, filter: \"blur(10px)\" }}\n      animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n      transition={{ duration: 0.7, ease }}\n      className={`relative w-full max-w-[340px] ${className ?? \"\"}`}\n      style={{\n        maskImage: \"linear-gradient(to bottom, black 82%, transparent)\",\n        WebkitMaskImage: \"linear-gradient(to bottom, black 82%, transparent)\",\n      }}\n    >\n      {/* device frame */}\n      <div\n        className=\"rounded-t-[46px] border border-neutral-200/80 bg-neutral-100 p-[6px] dark:border-neutral-700/50 dark:bg-neutral-800\"\n        style={{\n          boxShadow: \"0 5px 10px rgba(0,0,0,0.12), 0 8px 30px rgba(0,0,0,0.12)\",\n        }}\n      >\n        {/* screen */}\n        <motion.div\n          variants={stagger}\n          initial=\"hidden\"\n          animate=\"show\"\n          className=\"overflow-hidden rounded-t-[40px] bg-white dark:bg-neutral-950\"\n          style={{\n            boxShadow: \"inset 0 0 0 0.5px rgba(0,0,0,0.1)\",\n          }}\n        >\n          {/* status bar + dynamic island — single row */}\n          <div className=\"relative flex items-center justify-center px-7 pb-1 pt-3\">\n            <span className=\"absolute left-7 text-[12px] font-semibold leading-none text-neutral-800 dark:text-neutral-200\">\n              9:41\n            </span>\n            <div className=\"h-[28px] w-[96px] rounded-full bg-black\" />\n            <div className=\"absolute right-7 flex items-center gap-1\">\n              <IoCellular\n                size={15}\n                className=\"text-neutral-800 dark:text-neutral-200\"\n              />\n              <IoWifi\n                size={16}\n                className=\"text-neutral-800 dark:text-neutral-200\"\n              />\n              <IoBatteryFull\n                size={20}\n                className=\"text-neutral-800 dark:text-neutral-200\"\n              />\n            </div>\n          </div>\n\n          {/* content */}\n          <div className=\"px-6 pb-16 pt-6\">\n            {/* app nav */}\n            <motion.div\n              variants={item}\n              className=\"mb-5 flex items-center justify-between\"\n            >\n              <div className=\"flex items-center gap-2.5\">\n                <div className=\"h-[7px] w-[7px] rounded-full bg-neutral-900 dark:bg-neutral-100\" />\n                <span className=\"text-[15px] font-semibold tracking-[-0.03em] text-neutral-900 dark:text-neutral-100\">\n                  {title}\n                </span>\n              </div>\n              <svg\n                width=\"15\"\n                height=\"15\"\n                viewBox=\"0 0 15 15\"\n                fill=\"currentColor\"\n                className=\"text-neutral-400 dark:text-neutral-600\"\n              >\n                <circle cx=\"2.5\" cy=\"7.5\" r=\"1.2\" />\n                <circle cx=\"7.5\" cy=\"7.5\" r=\"1.2\" />\n                <circle cx=\"12.5\" cy=\"7.5\" r=\"1.2\" />\n              </svg>\n            </motion.div>\n\n            {/* separator */}\n            <motion.div\n              variants={item}\n              className=\"mb-6 h-px bg-neutral-200 dark:bg-neutral-800\"\n            />\n\n            {/* body */}\n            <motion.div\n              variants={item}\n              className=\"space-y-3 text-[13.5px] leading-[1.7] tracking-[-0.01em] text-neutral-500 dark:text-neutral-400\"\n            >\n              {renderBody()}\n              <p className=\"text-neutral-400 dark:text-neutral-500\">\n                {secondaryText}\n              </p>\n            </motion.div>\n\n            {/* metrics */}\n            <motion.div variants={item} className=\"mt-8 grid grid-cols-3 gap-3\">\n              {metrics.map((m) => (\n                <div key={m.label}>\n                  <p className=\"text-[18px] font-light tabular-nums tracking-tight text-neutral-800 dark:text-neutral-200\">\n                    {m.value}\n                  </p>\n                  <p className=\"mt-1 text-[10px] uppercase tracking-[0.06em] text-neutral-400 dark:text-neutral-500\">\n                    {m.label}\n                  </p>\n                </div>\n              ))}\n            </motion.div>\n          </div>\n        </motion.div>\n      </div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/phone-mockup-card.tsx"
    }
  ]
}