{
  "name": "device-mockup-zoom",
  "type": "registry:block",
  "description": "Cinematic laptop, phone, or browser mockup with staged UI and slow camera pullback",
  "dependencies": [
    "remotion",
    "@remotion/google-fonts"
  ],
  "registryDependencies": [
    "layout",
    "motion-tokens",
    "springs"
  ],
  "files": [
    {
      "path": "registry/bases/default/scenes/device-mockup-zoom/index.tsx",
      "type": "registry:block",
      "content": "import { loadFont } from \"@remotion/google-fonts/Inter\";\nimport {\n  AbsoluteFill,\n  Img,\n  interpolate,\n  spring,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\nimport { getSafeAreaPadding, scaleFont } from \"@/remotion/lib/layout\";\nimport { DURATION, EASING, STAGGER } from \"@/remotion/lib/motion-tokens\";\nimport { springSmooth } from \"@/remotion/lib/springs\";\n\nconst { fontFamily } = loadFont(\"normal\", {\n  weights: [\"500\", \"600\", \"700\", \"800\"],\n  subsets: [\"latin\"],\n});\n\nexport type DeviceMockupZoomProps = {\n  src?: string;\n  title?: string;\n  subtitle?: string;\n  eyebrow?: string;\n  children?: React.ReactNode;\n  device?: \"phone\" | \"browser\" | \"laptop\";\n  backgroundColor?: string;\n  accentColor?: string;\n};\n\nconst COLORS = {\n  bg: \"#080810\",\n  panel: \"#0d111b\",\n  panelSoft: \"#111827\",\n  screen: \"#f6f1e8\",\n  ink: \"#111827\",\n  muted: \"#6b7280\",\n  line: \"rgba(17, 24, 39, 0.12)\",\n  chrome: \"#171b26\",\n  chromeLight: \"#242a3a\",\n  accent: \"#e8b86d\",\n  teal: \"#2dd4bf\",\n  rose: \"#f472b6\",\n} as const;\n\nconst clampProgress = (\n  frame: number,\n  input: [number, number],\n  output: [number, number],\n) =>\n  interpolate(frame, input, output, {\n    easing: EASING.enter,\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\ntype MockupContentProps = {\n  frame: number;\n  accentColor: string;\n};\n\nconst BrowserDashboard: React.FC<MockupContentProps> = ({\n  frame,\n  accentColor,\n}) => {\n  const bars = [0.46, 0.72, 0.58, 0.9, 0.66, 0.82, 0.54];\n  const graphProgress = clampProgress(frame, [18, 64], [0, 1]);\n  const rowProgress = clampProgress(frame, [28, 70], [0, 1]);\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        background: COLORS.screen,\n        color: COLORS.ink,\n        display: \"grid\",\n        gridTemplateColumns: \"22% 1fr\",\n        fontFamily,\n      }}\n    >\n      <div\n        style={{\n          borderRight: `1px solid ${COLORS.line}`,\n          padding: \"5% 6%\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"6%\",\n          background: \"#fffaf1\",\n        }}\n      >\n        <div\n          style={{\n            width: \"58%\",\n            height: \"5%\",\n            borderRadius: 999,\n            background: accentColor,\n          }}\n        />\n        {[\"Overview\", \"Funnels\", \"Segments\", \"Exports\"].map((item, index) => (\n          <div\n            key={item}\n            style={{\n              height: \"7%\",\n              borderRadius: 12,\n              padding: \"0 10%\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"9%\",\n              background:\n                index === 0 ? \"rgba(232, 184, 109, 0.22)\" : \"transparent\",\n              color: index === 0 ? COLORS.ink : COLORS.muted,\n              fontSize: 12,\n              fontWeight: 700,\n            }}\n          >\n            <span\n              style={{\n                width: 8,\n                height: 8,\n                borderRadius: 99,\n                background: index === 0 ? accentColor : COLORS.line,\n              }}\n            />\n            {item}\n          </div>\n        ))}\n        <div style={{ flex: 1 }} />\n        <div\n          style={{\n            borderRadius: 18,\n            padding: \"11%\",\n            background: COLORS.ink,\n            color: \"#fffaf1\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: 10,\n          }}\n        >\n          <div style={{ fontSize: 11, color: \"#d1d5db\", fontWeight: 700 }}>\n            This week\n          </div>\n          <div style={{ fontSize: 26, lineHeight: 1, fontWeight: 800 }}>\n            42%\n          </div>\n          <div\n            style={{\n              height: 6,\n              borderRadius: 99,\n              background: \"rgba(255,255,255,0.18)\",\n              overflow: \"hidden\",\n            }}\n          >\n            <div\n              style={{\n                width: `${72 * rowProgress}%`,\n                height: \"100%\",\n                borderRadius: 99,\n                background: COLORS.teal,\n              }}\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        style={{\n          padding: \"4.5%\",\n          display: \"grid\",\n          gridTemplateRows: \"auto 1fr auto\",\n          gap: \"4%\",\n        }}\n      >\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            gap: \"5%\",\n          }}\n        >\n          <div>\n            <div style={{ fontSize: 13, color: COLORS.muted, fontWeight: 700 }}>\n              Launch console\n            </div>\n            <div style={{ fontSize: 34, lineHeight: 1.05, fontWeight: 800 }}>\n              Campaign health\n            </div>\n          </div>\n          <div\n            style={{\n              borderRadius: 999,\n              padding: \"10px 16px\",\n              background: COLORS.ink,\n              color: \"#fffaf1\",\n              fontSize: 13,\n              fontWeight: 800,\n            }}\n          >\n            Live\n          </div>\n        </div>\n\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"1.35fr 0.75fr\",\n            gap: \"4%\",\n            minHeight: 0,\n          }}\n        >\n          <div\n            style={{\n              borderRadius: 26,\n              background: \"#ffffff\",\n              border: `1px solid ${COLORS.line}`,\n              padding: \"5%\",\n              display: \"flex\",\n              flexDirection: \"column\",\n              justifyContent: \"space-between\",\n              boxShadow: \"0 22px 50px rgba(17, 24, 39, 0.08)\",\n            }}\n          >\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"end\",\n                gap: \"3%\",\n                height: \"56%\",\n              }}\n            >\n              {bars.map((bar, index) => (\n                <div\n                  key={index}\n                  style={{\n                    flex: 1,\n                    height: `${Math.max(10, bar * 100 * graphProgress)}%`,\n                    borderRadius: \"16px 16px 6px 6px\",\n                    background:\n                      index === 3\n                        ? accentColor\n                        : index === 5\n                          ? COLORS.teal\n                          : \"#d8deea\",\n                  }}\n                />\n              ))}\n            </div>\n            <div\n              style={{\n                display: \"grid\",\n                gridTemplateColumns: \"repeat(3, 1fr)\",\n                gap: \"3%\",\n              }}\n            >\n              {[\n                [\"Reach\", \"1.8M\", COLORS.teal],\n                [\"CTR\", \"8.4%\", accentColor],\n                [\"Trial\", \"+312\", COLORS.rose],\n              ].map(([label, value, color]) => (\n                <div\n                  key={label}\n                  style={{\n                    borderRadius: 18,\n                    padding: \"12%\",\n                    background: \"#f8fafc\",\n                    border: `1px solid ${COLORS.line}`,\n                  }}\n                >\n                  <div\n                    style={{ fontSize: 11, color: COLORS.muted, fontWeight: 700 }}\n                  >\n                    {label}\n                  </div>\n                  <div\n                    style={{\n                      marginTop: 5,\n                      fontSize: 24,\n                      lineHeight: 1,\n                      fontWeight: 800,\n                      color,\n                    }}\n                  >\n                    {value}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <div\n            style={{\n              display: \"grid\",\n              gridTemplateRows: \"1fr 1fr\",\n              gap: \"7%\",\n              minHeight: 0,\n            }}\n          >\n            {[\n              [\"Audience matched\", \"84%\", COLORS.teal],\n              [\"Creative ready\", \"12\", accentColor],\n            ].map(([label, value, color]) => (\n              <div\n                key={label}\n                style={{\n                  borderRadius: 24,\n                  padding: \"10%\",\n                  background: \"#ffffff\",\n                  border: `1px solid ${COLORS.line}`,\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  justifyContent: \"space-between\",\n                }}\n              >\n                <div\n                  style={{ fontSize: 12, color: COLORS.muted, fontWeight: 700 }}\n                >\n                  {label}\n                </div>\n                <div style={{ fontSize: 34, lineHeight: 1, fontWeight: 800 }}>\n                  {value}\n                </div>\n                <div\n                  style={{\n                    height: 7,\n                    borderRadius: 99,\n                    background: \"#e5e7eb\",\n                    overflow: \"hidden\",\n                  }}\n                >\n                  <div\n                    style={{\n                      width: `${(label === \"Audience matched\" ? 84 : 62) * rowProgress}%`,\n                      height: \"100%\",\n                      borderRadius: 99,\n                      background: color,\n                    }}\n                  />\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"repeat(3, 1fr)\",\n            gap: \"3%\",\n          }}\n        >\n          {[\"North America\", \"Creator ads\", \"Paid social\"].map((item, index) => (\n            <div\n              key={item}\n              style={{\n                borderRadius: 16,\n                padding: \"12px 14px\",\n                background: \"#ffffff\",\n                border: `1px solid ${COLORS.line}`,\n                color: index === 1 ? COLORS.ink : COLORS.muted,\n                fontSize: 12,\n                fontWeight: 800,\n              }}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst PhoneChecklist: React.FC<MockupContentProps> = ({\n  frame,\n  accentColor,\n}) => {\n  const progress = clampProgress(frame, [18, 62], [0, 1]);\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        background: \"#fff8ed\",\n        color: COLORS.ink,\n        fontFamily,\n        padding: \"9% 8%\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"5%\",\n      }}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n        }}\n      >\n        <div>\n          <div style={{ fontSize: 10, color: COLORS.muted, fontWeight: 800 }}>\n            Launch app\n          </div>\n          <div style={{ fontSize: 24, lineHeight: 1, fontWeight: 800 }}>\n            Today\n          </div>\n        </div>\n        <div\n          style={{\n            width: 38,\n            height: 38,\n            borderRadius: 14,\n            background: COLORS.ink,\n            color: \"#fffaf1\",\n            display: \"grid\",\n            placeItems: \"center\",\n            fontSize: 15,\n            fontWeight: 800,\n          }}\n        >\n          3\n        </div>\n      </div>\n\n      <div\n        style={{\n          borderRadius: 28,\n          padding: \"8%\",\n          background: COLORS.ink,\n          color: \"#fffaf1\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 12,\n        }}\n      >\n        <div style={{ fontSize: 12, color: \"#d1d5db\", fontWeight: 700 }}>\n          Active campaign\n        </div>\n        <div style={{ fontSize: 30, lineHeight: 1, fontWeight: 800 }}>\n          91%\n        </div>\n        <div\n          style={{\n            height: 8,\n            borderRadius: 99,\n            background: \"rgba(255,255,255,0.16)\",\n            overflow: \"hidden\",\n          }}\n        >\n          <div\n            style={{\n              width: `${91 * progress}%`,\n              height: \"100%\",\n              borderRadius: 99,\n              background: accentColor,\n            }}\n          />\n        </div>\n      </div>\n\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n        {[\n          [\"Audience locked\", COLORS.teal],\n          [\"Brief approved\", accentColor],\n          [\"Exports queued\", COLORS.rose],\n        ].map(([label, color], index) => {\n          const itemProgress = clampProgress(\n            frame,\n            [26 + index * STAGGER.tight, 52 + index * STAGGER.tight],\n            [0, 1],\n          );\n          return (\n            <div\n              key={label}\n              style={{\n                borderRadius: 18,\n                padding: \"13px 14px\",\n                background: \"#ffffff\",\n                border: `1px solid ${COLORS.line}`,\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 11,\n                opacity: itemProgress,\n                translate: `${(1 - itemProgress) * 14}px 0px`,\n              }}\n            >\n              <div\n                style={{\n                  width: 18,\n                  height: 18,\n                  borderRadius: 99,\n                  background: color,\n                }}\n              />\n              <div style={{ fontSize: 13, fontWeight: 800 }}>{label}</div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\ntype DeviceShellProps = {\n  children: React.ReactNode;\n  device: \"phone\" | \"browser\" | \"laptop\";\n  accentColor: string;\n  progress: number;\n  width: number;\n};\n\nconst DeviceShell: React.FC<DeviceShellProps> = ({\n  children,\n  device,\n  accentColor,\n  progress,\n  width,\n}) => {\n  const isPhone = device === \"phone\";\n  const isLaptop = device === \"laptop\";\n  const isBrowser = device === \"browser\";\n\n  const radius = isPhone ? scaleFont(56, width) : scaleFont(18, width);\n  const chromePad = isPhone\n    ? scaleFont(9, width)\n    : isBrowser\n      ? scaleFont(10, width)\n      : scaleFont(7, width);\n  const screenRadius = isPhone\n    ? radius - chromePad * 0.7\n    : isBrowser\n      ? scaleFont(12, width)\n      : scaleFont(3, width);\n  const buttonWidth = scaleFont(3, width);\n  const buttonColor = \"#0c0e15\";\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          width: isLaptop ? \"92%\" : \"100%\",\n          aspectRatio: isPhone ? \"0.4615\" : \"1.6\",\n          borderRadius: radius,\n          background: `linear-gradient(145deg, ${COLORS.chromeLight}, ${COLORS.chrome})`,\n          padding: chromePad,\n          boxShadow: `0 ${scaleFont(34, width)}px ${scaleFont(90, width)}px rgba(0,0,0,0.42), 0 0 ${scaleFont(96, width) * progress}px ${accentColor}33, inset 0 0 0 1px rgba(255,255,255,0.1)`,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: isBrowser ? scaleFont(8, width) : 0,\n        }}\n      >\n        {isPhone ? (\n          <>\n            {/* Mute switch + volume rocker */}\n            <div\n              style={{\n                position: \"absolute\",\n                left: -buttonWidth,\n                top: \"16%\",\n                width: buttonWidth,\n                height: scaleFont(9, width),\n                borderRadius: `${buttonWidth}px 0 0 ${buttonWidth}px`,\n                background: buttonColor,\n              }}\n            />\n            <div\n              style={{\n                position: \"absolute\",\n                left: -buttonWidth,\n                top: \"26%\",\n                width: buttonWidth,\n                height: scaleFont(16, width),\n                borderRadius: `${buttonWidth}px 0 0 ${buttonWidth}px`,\n                background: buttonColor,\n              }}\n            />\n            <div\n              style={{\n                position: \"absolute\",\n                left: -buttonWidth,\n                top: \"37%\",\n                width: buttonWidth,\n                height: scaleFont(16, width),\n                borderRadius: `${buttonWidth}px 0 0 ${buttonWidth}px`,\n                background: buttonColor,\n              }}\n            />\n            {/* Power button */}\n            <div\n              style={{\n                position: \"absolute\",\n                right: -buttonWidth,\n                top: \"22%\",\n                width: buttonWidth,\n                height: scaleFont(22, width),\n                borderRadius: `0 ${buttonWidth}px ${buttonWidth}px 0`,\n                background: buttonColor,\n              }}\n            />\n          </>\n        ) : isBrowser ? (\n          <div\n            style={{\n              height: scaleFont(32, width),\n              borderRadius: scaleFont(14, width),\n              background: \"rgba(255,255,255,0.06)\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: scaleFont(8, width),\n              padding: `0 ${scaleFont(12, width)}px`,\n            }}\n          >\n            {[COLORS.rose, COLORS.accent, COLORS.teal].map((color) => (\n              <span\n                key={color}\n                style={{\n                  width: scaleFont(10, width),\n                  height: scaleFont(10, width),\n                  borderRadius: 99,\n                  background: color,\n                }}\n              />\n            ))}\n            <div\n              style={{\n                flex: 1,\n                height: scaleFont(16, width),\n                borderRadius: 999,\n                background: \"rgba(255,255,255,0.08)\",\n                marginLeft: scaleFont(8, width),\n              }}\n            />\n          </div>\n        ) : (\n          <div\n            style={{\n              height: scaleFont(15, width),\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n            }}\n          >\n            <div\n              style={{\n                width: scaleFont(5, width),\n                height: scaleFont(5, width),\n                borderRadius: \"50%\",\n                background: \"#05060a\",\n                boxShadow: \"inset 0 0 0 1px rgba(255,255,255,0.18)\",\n              }}\n            />\n          </div>\n        )}\n\n        <div\n          style={{\n            flex: 1,\n            minHeight: 0,\n            position: \"relative\",\n            borderRadius: screenRadius,\n            overflow: \"hidden\",\n            background: COLORS.panel,\n            border: \"1px solid rgba(255,255,255,0.08)\",\n          }}\n        >\n          {children}\n          {isPhone ? (\n            <div\n              style={{\n                position: \"absolute\",\n                top: \"2.6%\",\n                left: \"50%\",\n                transform: \"translateX(-50%)\",\n                width: \"34%\",\n                height: scaleFont(9, width),\n                borderRadius: 999,\n                background: \"#000\",\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-end\",\n                padding: `0 ${scaleFont(6, width)}px`,\n                pointerEvents: \"none\",\n              }}\n            >\n              <div\n                style={{\n                  width: scaleFont(4, width),\n                  height: scaleFont(4, width),\n                  borderRadius: \"50%\",\n                  background: \"#1e2230\",\n                  boxShadow: \"inset 0 0 0 1px rgba(255,255,255,0.06)\",\n                }}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n\n      {isLaptop ? (\n        <>\n          <div\n            style={{\n              width: \"104%\",\n              height: 2,\n              background:\n                \"linear-gradient(90deg, transparent, rgba(0,0,0,0.55) 12%, rgba(0,0,0,0.55) 88%, transparent)\",\n            }}\n          />\n          <div\n            style={{\n              width: \"104%\",\n              height: scaleFont(30, width),\n              borderRadius: `0 0 ${scaleFont(16, width)}px ${scaleFont(16, width)}px`,\n              background:\n                \"linear-gradient(180deg, #30384b 0%, #171b26 60%, #0b0d14 100%)\",\n              boxShadow: `0 ${scaleFont(24, width)}px ${scaleFont(50, width)}px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.16)`,\n              display: \"flex\",\n              justifyContent: \"center\",\n            }}\n          >\n            <div\n              style={{\n                marginTop: scaleFont(6, width),\n                width: \"16%\",\n                height: scaleFont(4, width),\n                borderRadius: 3,\n                background: \"rgba(255,255,255,0.1)\",\n              }}\n            />\n          </div>\n          <div\n            style={{\n              width: \"82%\",\n              height: scaleFont(18, width),\n              borderRadius: \"50%\",\n              background: \"rgba(0,0,0,0.28)\",\n              filter: `blur(${scaleFont(12, width)}px)`,\n              marginTop: scaleFont(10, width),\n            }}\n          />\n        </>\n      ) : null}\n    </div>\n  );\n};\n\nexport const DeviceMockupZoom: React.FC<DeviceMockupZoomProps> = ({\n  src,\n  title,\n  subtitle,\n  eyebrow,\n  children,\n  device = \"laptop\",\n  backgroundColor = COLORS.bg,\n  accentColor = COLORS.accent,\n}) => {\n  const frame = useCurrentFrame();\n  const { width, height, fps } = useVideoConfig();\n  const safe = getSafeAreaPadding({ width, height });\n  const resolvedDevice = device;\n  const portrait = height > width;\n  const hasCopy = Boolean(title || subtitle || eyebrow);\n\n  const camera = spring({\n    fps,\n    frame,\n    config: springSmooth,\n    delay: 8,\n    durationInFrames: 58,\n  });\n  const copyProgress = clampProgress(frame, [0, DURATION.normal], [0, 1]);\n  const deviceProgress = clampProgress(frame, [STAGGER.normal, 64], [0, 1]);\n  const accentProgress = clampProgress(frame, [20, 72], [0, 1]);\n  const cameraScale = interpolate(camera, [0, 1], [1.18, 0.95], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const cameraY = interpolate(camera, [0, 1], [scaleFont(20, width), 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const gridTemplateColumns = hasCopy && !portrait ? \"0.66fr 1.34fr\" : \"1fr\";\n  const mainMaxWidth =\n    resolvedDevice === \"phone\"\n      ? portrait\n        ? \"58%\"\n        : hasCopy\n          ? \"42%\"\n          : \"32%\"\n      : resolvedDevice === \"laptop\"\n        ? portrait\n          ? \"96%\"\n          : hasCopy\n            ? \"100%\"\n            : \"86%\"\n      : portrait\n        ? \"96%\"\n        : hasCopy\n          ? \"100%\"\n          : \"82%\";\n\n  const screenContent = children ?? (\n    <>\n      {src ? (\n        <Img\n          src={src}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            objectFit: \"cover\",\n            scale: 1 + accentProgress * 0.06,\n          }}\n        />\n      ) : resolvedDevice === \"phone\" ? (\n        <PhoneChecklist frame={frame} accentColor={accentColor} />\n      ) : (\n        <BrowserDashboard frame={frame} accentColor={accentColor} />\n      )}\n    </>\n  );\n\n  return (\n    <AbsoluteFill style={{ background: backgroundColor, overflow: \"hidden\" }}>\n      <AbsoluteFill\n        style={{\n          background: `radial-gradient(circle at 72% 42%, ${accentColor}30 0, transparent 32%), radial-gradient(circle at 16% 82%, ${COLORS.teal}20 0, transparent 26%), linear-gradient(135deg, #080810 0%, #10131d 54%, #07070d 100%)`,\n        }}\n      />\n      <AbsoluteFill\n        style={{\n          opacity: 0.16,\n          backgroundImage:\n            \"linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px)\",\n          backgroundSize: `${scaleFont(56, width)}px ${scaleFont(56, width)}px`,\n          maskImage: \"radial-gradient(circle at 68% 44%, black, transparent 72%)\",\n        }}\n      />\n\n      <div\n        style={{\n          position: \"relative\",\n          zIndex: 1,\n          width,\n          height,\n          paddingLeft: safe.paddingLeft,\n          paddingRight: safe.paddingRight,\n          paddingTop: safe.paddingTop,\n          paddingBottom: safe.paddingBottom,\n          color: \"#f8fafc\",\n          fontFamily,\n          display: \"grid\",\n          gridTemplateColumns,\n          alignItems: \"center\",\n          gap: hasCopy\n            ? portrait\n              ? scaleFont(42, width)\n              : scaleFont(54, width)\n            : 0,\n        }}\n      >\n        {hasCopy ? (\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: scaleFont(18, width),\n              maxWidth: portrait ? \"100%\" : scaleFont(430, width),\n              opacity: copyProgress,\n              translate: `0px ${(1 - copyProgress) * scaleFont(18, width)}px`,\n            }}\n          >\n            {eyebrow ? (\n              <div\n                style={{\n                  alignSelf: \"flex-start\",\n                  borderRadius: 999,\n                  padding: `${scaleFont(9, width)}px ${scaleFont(14, width)}px`,\n                  background: \"rgba(255,255,255,0.08)\",\n                  border: \"1px solid rgba(255,255,255,0.12)\",\n                  color: accentColor,\n                  fontSize: scaleFont(16, width),\n                  lineHeight: 1,\n                  fontWeight: 800,\n                }}\n              >\n                {eyebrow}\n              </div>\n            ) : null}\n            {title ? (\n              <div\n                style={{\n                  fontSize: scaleFont(portrait ? 58 : 64, width),\n                  lineHeight: 0.98,\n                  fontWeight: 800,\n                  maxWidth: \"11ch\",\n                }}\n              >\n                {title}\n              </div>\n            ) : null}\n            {subtitle ? (\n              <div\n                style={{\n                  color: \"#cbd5e1\",\n                  fontSize: scaleFont(portrait ? 28 : 24, width),\n                  lineHeight: 1.35,\n                  fontWeight: 600,\n                  maxWidth: \"28ch\",\n                }}\n              >\n                {subtitle}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n\n        <div\n          style={{\n            width: \"100%\",\n            maxWidth: mainMaxWidth,\n            justifySelf: \"center\",\n            opacity: deviceProgress,\n            scale: cameraScale,\n            translate: `0px ${cameraY}px`,\n          }}\n        >\n          <DeviceShell\n            device={resolvedDevice}\n            accentColor={accentColor}\n            progress={accentProgress}\n            width={width}\n          >\n            {screenContent}\n          </DeviceShell>\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "spatial",
    "drive": "spatial",
    "tier": "advanced"
  }
}