{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "macro-click",
  "title": "Macro Click",
  "description": "A site-builder UI in macro: a cursor clicks and the page headline and hero fill in.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "registryDependencies": ["@remocn/gsh"],
  "files": [
    {
      "path": "registry/remocn/macro-click/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont as loadGeist } from \"@remotion/google-fonts/Geist\";\nimport { loadFont as loadGeistMono } from \"@remotion/google-fonts/GeistMono\";\nimport type React from \"react\";\nimport {\n  AbsoluteFill,\n  Easing,\n  Img,\n  interpolate,\n  spring,\n  staticFile,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\nimport type { GradientParams } from \"@/lib/remocn/gsh/gradient-engine\";\nimport { GshGround } from \"@/lib/remocn/gsh/gsh-ground\";\nimport type { GshPresetId } from \"@/lib/remocn/gsh/presets\";\n\nconst geist = loadGeist(\"normal\", {\n  weights: [\"300\", \"400\"],\n  subsets: [\"latin\"],\n});\nconst mono = loadGeistMono(\"normal\", {\n  weights: [\"400\"],\n  subsets: [\"latin\"],\n});\n\nconst ENTER = Easing.bezier(0.32, 0.72, 0, 1);\nconst MOVE = Easing.bezier(0.65, 0, 0.35, 1);\nconst CAM = Easing.bezier(0.87, 0, 0.13, 1);\nconst HEAVY = { mass: 1, damping: 26, stiffness: 120 };\nconst CARD = { mass: 0.8, damping: 18, stiffness: 160 };\nconst CHIP = { mass: 0.5, damping: 12, stiffness: 200 };\n\nconst B = {\n  pan: 0,\n  cursor: 6,\n  hover: 30,\n  press: 36,\n  busy: 40,\n  live: 60,\n  url: 64,\n  pull: 72,\n  title: 84,\n  toast: 102,\n  end: 150,\n};\n\nconst ramp = (f: number, start: number, dur: number, easing = ENTER) =>\n  interpolate(f, [start, start + dur], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing,\n  });\n\nconst mix = (a: number, b: number, t: number) => a + (b - a) * t;\n\nconst REMOCN_R_PATH =\n  \"M 0.01 0.81 C 0.01 1.73, 0.36 2.79, 1.09 4.13 C 4.91 11.04, 13.45 17.16, 21.7 18.9 C 22.94 19.16, 23.18 19.16, 51.39 19.27 C 76.07 19.36, 80.02 19.4, 81.32 19.57 C 89.89 20.69, 96.2 24.68, 99.38 31.01 C 103.19 38.56, 102.53 50.1, 97.91 57.07 C 94.66 61.96, 89.68 64.99, 83.26 66 C 82.81 66.07, 70.18 66.83, 55.2 67.69 C 24.82 69.43, 27.03 69.23, 24.18 70.4 C 19.9 72.15, 14.84 75.7, 10.65 79.89 C 4.86 85.68, 1.3 91.91, 0.25 98.13 C 0.12 98.85, 0.08 103.13, 0.04 116.66 L 0 134.26 9.5 134.26 L 19 134.26 19.05 119.41 C 19.1 103.27, 19.08 103.82, 19.82 101.04 C 21.79 93.65, 27.86 88.75, 36.45 87.63 C 37.23 87.53, 39.41 87.5, 43.57 87.53 C 50.12 87.59, 50.75 87.65, 53.22 88.45 C 56.61 89.56, 59.67 91.86, 62.02 95.07 C 62.52 95.76, 69.35 103.85, 77.2 113.07 C 85.04 122.28, 91.63 130.04, 91.85 130.32 C 92.07 130.59, 92.5 131.34, 92.82 131.97 C 93.52 133.35, 94.11 133.93, 95.06 134.13 C 95.5 134.23, 98.97 134.26, 106.36 134.23 L 117.01 134.19 100.82 113.07 C 91.91 101.45, 84.52 91.78, 84.39 91.57 C 83.36 89.89, 83.66 87.53, 85.09 86 C 85.79 85.25, 86.36 84.94, 88.07 84.38 C 96.18 81.72, 104.15 76.62, 109.97 70.36 C 120.59 58.93, 124.06 44.32, 119.44 30.43 C 114.59 15.81, 101.93 4.02, 87.64 0.83 C 83.93 0.01, 88.09 0.08, 41.85 0.04 L 0.01 0 0.01 0.81 Z\";\n\ntype IconName =\n  | \"plus\"\n  | \"frame\"\n  | \"text\"\n  | \"pen\"\n  | \"play\"\n  | \"chevron\"\n  | \"page\"\n  | \"check\"\n  | \"arrowUpRight\"\n  | \"layers\"\n  | \"dots\";\n\nfunction Icon({\n  name,\n  size,\n  color,\n  stroke = 1.5,\n}: {\n  name: IconName;\n  size: number;\n  color: string;\n  stroke?: number;\n}) {\n  const p = {\n    fill: \"none\",\n    stroke: color,\n    strokeWidth: stroke,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n  };\n  const d: Record<IconName, React.ReactNode> = {\n    plus: <path {...p} d=\"M12 5v14M5 12h14\" />,\n    frame: <path {...p} d=\"M8 3v18M16 3v18M3 8h18M3 16h18\" />,\n    text: <path {...p} d=\"M5 6V4.5h14V6M12 4.5v15M9 19.5h6\" />,\n    pen: <path {...p} d=\"m4 20 4-1 11-11-3-3L5 16l-1 4ZM14 7l3 3\" />,\n    play: <path {...p} d=\"M8 5.5v13l10-6.5-10-6.5Z\" />,\n    chevron: <path {...p} d=\"m7 10 5 5 5-5\" />,\n    page: <path {...p} d=\"M7 3h7l4 4v14H7V3ZM14 3v4h4\" />,\n    check: <path {...p} d=\"m5.5 12.5 4 4 9-9\" />,\n    arrowUpRight: <path {...p} d=\"M7 17 17 7M9 7h8v8\" />,\n    layers: (\n      <path {...p} d=\"m12 4 8 4-8 4-8-4 8-4ZM4 12l8 4 8-4M4 16l8 4 8-4\" />\n    ),\n    dots: (\n      <>\n        <circle cx=\"6\" cy=\"12\" r=\"1.3\" fill={color} />\n        <circle cx=\"12\" cy=\"12\" r=\"1.3\" fill={color} />\n        <circle cx=\"18\" cy=\"12\" r=\"1.3\" fill={color} />\n      </>\n    ),\n  };\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width={size}\n      height={size}\n      style={{ display: \"block\", flexShrink: 0 }}\n      aria-hidden\n    >\n      {d[name]}\n    </svg>\n  );\n}\n\nfunction Pointer({ size, dark }: { size: number; dark: boolean }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width={size}\n      height={size}\n      style={{\n        display: \"block\",\n        filter: \"drop-shadow(0 3px 6px rgba(0,0,0,0.3))\",\n      }}\n      aria-hidden\n    >\n      <path\n        d=\"M5 3.2v16.2l4.3-4.1 2.8 6.3 2.6-1.1-2.8-6.2h6z\"\n        fill={dark ? \"#ffffff\" : \"#0d0f16\"}\n        stroke={dark ? \"#0d0f16\" : \"#ffffff\"}\n        strokeWidth={1.3}\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\ntype WindowState = {\n  hover: number;\n  pressScale: number;\n  busy: number;\n  live: number;\n  url: number;\n  spin: number;\n};\n\nexport interface MacroClickProps {\n  theme?: \"dark\" | \"light\";\n  accent?: string;\n  title?: string;\n  docTitle?: string;\n  publishLabel?: string;\n  busyLabel?: string;\n  liveLabel?: string;\n  url?: string;\n  toast?: string;\n  pages?: string[];\n  heroLine?: string;\n  src?: string;\n  ground?: GshPresetId;\n  groundParams?: Partial<GradientParams>;\n}\n\nexport function MacroClick({\n  theme = \"dark\",\n  accent = \"#3B5BFD\",\n  title = \"One click. It's live.\",\n  docTitle = \"Launch site\",\n  publishLabel = \"Publish\",\n  busyLabel = \"Publishing\",\n  liveLabel = \"Live\",\n  url = \"remocn.dev/launch\",\n  toast = \"Your site is live\",\n  pages = [\"Home\", \"Pricing\", \"Changelog\", \"Docs\"],\n  heroLine = \"Ship the launch today.\",\n  src = staticFile(\"templates/launch-anything/horizon.jpg\"),\n  ground,\n  groundParams,\n}: MacroClickProps) {\n  const frame = useCurrentFrame();\n  const { width, height, fps } = useVideoConfig();\n  const dark = theme === \"dark\";\n  const portrait = height > width * 1.2;\n  const stageW = portrait ? 1080 : 1280;\n  const stageH = portrait ? 1920 : 720;\n  const s = width / stageW;\n\n  const ink = dark ? \"#eef0f6\" : \"#101219\";\n  const soft = dark ? \"rgba(230,233,244,0.68)\" : \"rgba(16,18,25,0.64)\";\n  const muted = dark ? \"rgba(230,233,244,0.42)\" : \"rgba(16,18,25,0.42)\";\n  const hair = dark ? \"rgba(255,255,255,0.08)\" : \"rgba(16,18,25,0.09)\";\n  const chrome = dark ? \"#15161c\" : \"#ffffff\";\n  const panel = dark ? \"#121318\" : \"#fbfbfc\";\n  const canvas = dark ? \"#0b0c10\" : \"#eeeef1\";\n  const green = \"#2fcf86\";\n\n  const W = 1120;\n  const H = 640;\n  const barH = 52;\n  const sideW = 220;\n  const rightW = 236;\n  const btnW = 96;\n  const btnH = 32;\n  const btnX = W - 12 - btnW;\n  const btnY = (barH - btnH) / 2;\n  const target = { x: btnX + btnW / 2, y: btnY + btnH / 2 };\n\n  const pressDip = spring({ frame: frame - B.press, fps, config: CHIP });\n  const pressUp = spring({ frame: frame - B.press - 4, fps, config: CHIP });\n  const st: WindowState = {\n    hover: ramp(frame, B.hover - 3, 6),\n    pressScale: 1 - 0.07 * pressDip + 0.07 * pressUp,\n    busy: ramp(frame, B.busy, 6) * (1 - ramp(frame, B.live, 6)),\n    live: spring({ frame: frame - B.live, fps, config: CHIP }),\n    url: spring({ frame: frame - B.url, fps, config: CARD }),\n    spin: frame * 22,\n  };\n\n  const pull = ramp(frame, B.pull, 36, CAM);\n  const pullPrev = ramp(frame - 1, B.pull, 36, CAM);\n  const settle = spring({ frame: frame - B.pull - 10, fps, config: HEAVY });\n  const zEnd = portrait ? 0.88 : 1;\n  const zStart = portrait ? 3.6 : 3.3;\n  const breath =\n    0.02 * ramp(frame, B.pull + 36, B.end - B.pull - 36, Easing.linear);\n  const Z =\n    mix(zStart, zEnd, pull) *\n    (1 + breath) *\n    (1 + 0.03 * ramp(frame, 0, B.pull, Easing.linear) * (1 - pull));\n\n  const panFocus = {\n    x: mix(target.x - 210, target.x - 20, ramp(frame, B.pan, 34, MOVE)),\n    y: target.y + 6,\n  };\n  const screenFocus = { x: stageW / 2, y: portrait ? 900 : 380 };\n  const centerScreen = { x: stageW / 2, y: portrait ? 1130 : 372 };\n  const finalFocus = {\n    x: centerScreen.x + (target.x - W / 2) * zEnd,\n    y: centerScreen.y + (target.y - H / 2) * zEnd,\n  };\n  const fx = mix(panFocus.x, target.x, pull);\n  const fy = mix(panFocus.y, target.y, pull);\n  const px = mix(screenFocus.x, finalFocus.x, pull);\n  const py = mix(screenFocus.y, finalFocus.y, pull);\n  const winLeft = px - fx * Z;\n  const winTop = py - fy * Z;\n  const pullBlur = Math.min(4, Math.abs(pull - pullPrev) * 30);\n\n  const rotX = mix(10, 0, pull) + mix(0, 3, settle) * pull;\n  const rotY = mix(-14, 0, pull) + mix(0, -4, settle) * pull;\n\n  const dof = 1 - pull;\n  const focusR = mix(70, 900, pull);\n\n  const cursorStart = { x: target.x + 160, y: target.y + 150 };\n  const cursorEnd = { x: target.x + 8, y: target.y + 6 };\n  const cP = ramp(frame, B.cursor, 24, MOVE);\n  const cPrev = ramp(frame - 1, B.cursor, 24, MOVE);\n  const cX =\n    mix(cursorStart.x, cursorEnd.x, cP) +\n    30 * ramp(frame, B.live + 6, 18, MOVE);\n  const cY =\n    mix(cursorStart.y, cursorEnd.y, cP) -\n    Math.sin(Math.PI * cP) * 30 +\n    24 * ramp(frame, B.live + 6, 18, MOVE);\n  const cBlur = Math.min(3, Math.abs(cP - cPrev) * 220 * 0.04);\n  const cScale = 1 - 0.14 * pressDip + 0.14 * pressUp;\n\n  const toastIn = spring({ frame: frame - B.toast, fps, config: CHIP });\n  const titleIn = ramp(frame, B.title, 15);\n\n  const renderWindow = (sharp: boolean) => {\n    const pubBg = dark ? \"#f4f5f8\" : \"#0f1015\";\n    const pubInk = dark ? \"#0f1015\" : \"#ffffff\";\n    return (\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          borderRadius: 14,\n          overflow: \"hidden\",\n          background: canvas,\n          boxShadow: sharp\n            ? dark\n              ? \"inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.3), 0 30px 60px rgba(0,0,0,0.45), 0 80px 140px rgba(0,0,0,0.5)\"\n              : \"0 1px 2px rgba(20,24,40,0.06), 0 24px 50px rgba(20,24,40,0.1), 0 70px 130px rgba(20,24,40,0.14)\"\n            : undefined,\n          border: `1px solid ${hair}`,\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            left: 0,\n            right: 0,\n            top: 0,\n            height: barH,\n            background: chrome,\n            borderBottom: `1px solid ${hair}`,\n            display: \"flex\",\n            alignItems: \"center\",\n            padding: \"0 12px\",\n            gap: 6,\n          }}\n        >\n          <div\n            style={{\n              height: 32,\n              padding: \"0 8px\",\n              borderRadius: 8,\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 6,\n              background: dark\n                ? \"rgba(255,255,255,0.05)\"\n                : \"rgba(16,18,25,0.04)\",\n            }}\n          >\n            <svg viewBox=\"0 0 124.06 134.26\" height={15} width={14} aria-hidden>\n              <path fill={ink} d={REMOCN_R_PATH} />\n            </svg>\n            <Icon name=\"chevron\" size={14} color={muted} />\n          </div>\n          <div\n            style={{ width: 1, height: 20, background: hair, margin: \"0 6px\" }}\n          />\n          {([\"plus\", \"frame\", \"text\", \"pen\"] as IconName[]).map((n) => (\n            <div\n              key={n}\n              style={{\n                width: 32,\n                height: 32,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n              }}\n            >\n              <Icon name={n} size={18} color={soft} />\n            </div>\n          ))}\n          <div\n            style={{\n              position: \"absolute\",\n              left: 0,\n              right: 0,\n              top: 0,\n              height: barH,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: 8,\n              fontSize: 15,\n              color: ink,\n              pointerEvents: \"none\",\n            }}\n          >\n            {docTitle}\n            <span\n              style={{\n                fontFamily: mono.fontFamily,\n                fontSize: 12,\n                color: muted,\n                padding: \"2px 7px\",\n                borderRadius: 6,\n                border: `1px solid ${hair}`,\n              }}\n            >\n              main\n            </span>\n          </div>\n          <div style={{ flex: 1 }} />\n          <div\n            style={{\n              height: 30,\n              padding: \"0 10px\",\n              borderRadius: 8,\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 7,\n              fontFamily: mono.fontFamily,\n              fontSize: 13,\n              color: soft,\n              marginRight: 10,\n              opacity: st.url,\n              transform: `translateX(${mix(18, 0, st.url)}px)`,\n              border: `1px solid ${hair}`,\n            }}\n          >\n            {url}\n            <Icon name=\"arrowUpRight\" size={13} color={muted} />\n          </div>\n          <div style={{ display: \"flex\", marginRight: 6 }}>\n            {[\n              { t: \"AK\", c: \"#e0703b\" },\n              { t: \"JM\", c: \"#5a7bff\" },\n            ].map((a, i) => (\n              <div\n                key={a.t}\n                style={{\n                  width: 28,\n                  height: 28,\n                  borderRadius: 14,\n                  background: a.c,\n                  color: \"#fff\",\n                  fontSize: 11,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  marginLeft: i ? -7 : 0,\n                  boxShadow: `0 0 0 2px ${chrome}`,\n                }}\n              >\n                {a.t}\n              </div>\n            ))}\n          </div>\n          <div\n            style={{\n              width: 32,\n              height: 32,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n            }}\n          >\n            <Icon name=\"play\" size={16} color={soft} />\n          </div>\n          <div\n            style={{\n              height: btnH,\n              padding: \"0 12px\",\n              borderRadius: 9,\n              display: \"flex\",\n              alignItems: \"center\",\n              fontSize: 14,\n              color: ink,\n              background: dark\n                ? \"rgba(255,255,255,0.06)\"\n                : \"rgba(16,18,25,0.05)\",\n              marginRight: 6 + btnW,\n            }}\n          >\n            Invite\n          </div>\n          <div\n            style={{\n              position: \"absolute\",\n              left: btnX,\n              top: btnY,\n              width: btnW,\n              height: btnH,\n              borderRadius: 9,\n              transform: `scale(${st.pressScale})`,\n              background: pubBg,\n              boxShadow: dark\n                ? `inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 ${3 * st.hover}px rgba(255,255,255,0.12)`\n                : `inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 ${3 * st.hover}px rgba(16,18,25,0.1)`,\n              overflow: \"hidden\",\n            }}\n          >\n            <div\n              style={{\n                position: \"absolute\",\n                inset: 0,\n                background: `color-mix(in oklab, ${green} ${dark ? 22 : 16}%, ${chrome})`,\n                boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${green} 45%, transparent)`,\n                borderRadius: 9,\n                opacity: Math.min(1, st.live),\n              }}\n            />\n            <div\n              style={{\n                position: \"absolute\",\n                inset: 0,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                fontSize: 14,\n                color: pubInk,\n                opacity: 1 - Math.max(st.busy, Math.min(1, st.live)),\n              }}\n            >\n              {publishLabel}\n            </div>\n            <div\n              style={{\n                position: \"absolute\",\n                inset: 0,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                gap: 6,\n                fontSize: 13,\n                color: pubInk,\n                opacity: st.busy,\n              }}\n            >\n              <svg\n                width={14}\n                height={14}\n                viewBox=\"0 0 24 24\"\n                aria-hidden\n                style={{ transform: `rotate(${st.spin}deg)` }}\n              >\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"9\"\n                  fill=\"none\"\n                  stroke={pubInk}\n                  strokeOpacity={0.25}\n                  strokeWidth={2.5}\n                />\n                <path\n                  d=\"M12 3a9 9 0 0 1 9 9\"\n                  fill=\"none\"\n                  stroke={pubInk}\n                  strokeWidth={2.5}\n                  strokeLinecap=\"round\"\n                />\n              </svg>\n              {busyLabel}\n            </div>\n            <div\n              style={{\n                position: \"absolute\",\n                inset: 0,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                gap: 7,\n                fontSize: 14,\n                color: ink,\n                opacity: Math.min(1, st.live),\n                transform: `translateY(${mix(8, 0, Math.min(1, st.live))}px)`,\n              }}\n            >\n              <span\n                style={{\n                  width: 8,\n                  height: 8,\n                  borderRadius: 4,\n                  background: green,\n                  boxShadow: `0 0 0 3px color-mix(in oklab, ${green} 30%, transparent)`,\n                  transform: `scale(${st.live})`,\n                }}\n              />\n              {liveLabel}\n              <Icon name=\"check\" size={14} color={green} stroke={2} />\n            </div>\n          </div>\n        </div>\n\n        <div\n          style={{\n            position: \"absolute\",\n            left: 0,\n            top: barH,\n            bottom: 0,\n            width: sideW,\n            background: panel,\n            borderRight: `1px solid ${hair}`,\n            padding: \"14px 10px\",\n            boxSizing: \"border-box\",\n          }}\n        >\n          <div\n            style={{\n              display: \"flex\",\n              gap: 14,\n              padding: \"0 8px 12px\",\n              fontSize: 14,\n            }}\n          >\n            <span style={{ color: ink }}>Pages</span>\n            <span style={{ color: muted }}>Layers</span>\n            <span style={{ color: muted }}>Assets</span>\n          </div>\n          {pages.map((pg, i) => (\n            <div\n              key={pg}\n              style={{\n                height: 34,\n                borderRadius: 8,\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 10,\n                padding: \"0 10px\",\n                fontSize: 14,\n                color: i === 0 ? ink : soft,\n                background:\n                  i === 0\n                    ? dark\n                      ? \"rgba(255,255,255,0.06)\"\n                      : \"rgba(16,18,25,0.05)\"\n                    : \"transparent\",\n              }}\n            >\n              <Icon name=\"page\" size={16} color={i === 0 ? soft : muted} />\n              {i === 0 ? pg : `/${pg.toLowerCase()}`}\n            </div>\n          ))}\n          <div style={{ height: 1, background: hair, margin: \"12px 6px\" }} />\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 10,\n              padding: \"0 10px\",\n              fontSize: 14,\n              color: muted,\n              height: 30,\n            }}\n          >\n            <Icon name=\"layers\" size={16} color={muted} />\n            Components\n          </div>\n        </div>\n\n        <div\n          style={{\n            position: \"absolute\",\n            right: 0,\n            top: barH,\n            bottom: 0,\n            width: rightW,\n            background: panel,\n            borderLeft: `1px solid ${hair}`,\n            padding: 16,\n            boxSizing: \"border-box\",\n            fontSize: 13,\n            color: muted,\n          }}\n        >\n          <div\n            style={{ display: \"flex\", gap: 14, fontSize: 14, marginBottom: 16 }}\n          >\n            <span style={{ color: ink }}>Design</span>\n            <span>Prototype</span>\n          </div>\n          {[\n            [\"Position\", \"Relative\"],\n            [\"Width\", \"1200 Fill\"],\n            [\"Height\", \"Fit content\"],\n            [\"Gap\", \"24\"],\n          ].map(([k, v]) => (\n            <div\n              key={k}\n              style={{ display: \"flex\", alignItems: \"center\", height: 34 }}\n            >\n              <span style={{ width: 74 }}>{k}</span>\n              <span\n                style={{\n                  flex: 1,\n                  height: 26,\n                  borderRadius: 6,\n                  background: dark\n                    ? \"rgba(255,255,255,0.05)\"\n                    : \"rgba(16,18,25,0.04)\",\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  padding: \"0 8px\",\n                  color: soft,\n                  fontFamily: mono.fontFamily,\n                  fontSize: 12,\n                }}\n              >\n                {v}\n              </span>\n            </div>\n          ))}\n          <div style={{ height: 1, background: hair, margin: \"12px 0\" }} />\n          <div style={{ marginBottom: 10 }}>Fill</div>\n          <div style={{ display: \"flex\", gap: 8 }}>\n            {[accent, dark ? \"#f4f5f8\" : \"#101219\", \"#e0703b\", green].map(\n              (c) => (\n                <span\n                  key={c}\n                  style={{\n                    width: 26,\n                    height: 26,\n                    borderRadius: 7,\n                    background: c,\n                    boxShadow: `inset 0 0 0 1px ${hair}`,\n                  }}\n                />\n              ),\n            )}\n          </div>\n        </div>\n\n        <div\n          style={{\n            position: \"absolute\",\n            left: sideW + 48,\n            right: rightW + 48,\n            top: barH + 44,\n            bottom: 0,\n          }}\n        >\n          <div\n            style={{\n              position: \"absolute\",\n              left: 0,\n              top: -24,\n              fontSize: 12,\n              color: muted,\n              display: \"flex\",\n              gap: 8,\n              alignItems: \"center\",\n            }}\n          >\n            <span>Desktop</span>\n            <span style={{ fontFamily: mono.fontFamily }}>1200</span>\n            <span\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 5,\n                color: green,\n                opacity: Math.min(1, st.live),\n              }}\n            >\n              <span\n                style={{\n                  width: 6,\n                  height: 6,\n                  borderRadius: 3,\n                  background: green,\n                }}\n              />\n              {liveLabel}\n            </span>\n          </div>\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              borderRadius: \"8px 8px 0 0\",\n              background: dark ? \"#16171d\" : \"#ffffff\",\n              boxShadow: `0 0 0 1px ${hair}, 0 10px 30px rgba(0,0,0,${dark ? 0.35 : 0.06})`,\n              overflow: \"hidden\",\n            }}\n          >\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                padding: \"16px 22px\",\n                gap: 18,\n                fontSize: 12,\n                color: soft,\n              }}\n            >\n              <svg\n                viewBox=\"0 0 124.06 134.26\"\n                height={14}\n                width={13}\n                aria-hidden\n              >\n                <path fill={ink} d={REMOCN_R_PATH} />\n              </svg>\n              <div style={{ flex: 1 }} />\n              <span>Product</span>\n              <span>Pricing</span>\n              <span>Docs</span>\n              <span\n                style={{\n                  padding: \"5px 10px\",\n                  borderRadius: 7,\n                  background: ink,\n                  color: dark ? \"#111\" : \"#fff\",\n                }}\n              >\n                Start free\n              </span>\n            </div>\n            <div\n              style={{\n                padding: \"26px 22px 0\",\n                fontSize: 38,\n                lineHeight: 1.04,\n                letterSpacing: \"-0.035em\",\n                fontWeight: 300,\n                color: ink,\n                maxWidth: 300,\n              }}\n            >\n              {heroLine}\n            </div>\n            <div\n              style={{\n                padding: \"12px 22px\",\n                fontSize: 12,\n                color: muted,\n                maxWidth: 260,\n                lineHeight: 1.45,\n              }}\n            >\n              Write the brief, pick the beats and render the film before lunch.\n            </div>\n            <div\n              style={{\n                position: \"absolute\",\n                left: 22,\n                right: 22,\n                bottom: 0,\n                height: 170,\n                borderRadius: \"10px 10px 0 0\",\n                overflow: \"hidden\",\n              }}\n            >\n              <Img\n                src={src}\n                style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  const resolvedGround: GshPresetId =\n    ground ?? (dark ? \"velvet-hour\" : \"paper-crease\");\n  const resolvedParams =\n    groundParams ??\n    (dark\n      ? undefined\n      : {\n          kind: \"mist\",\n          colors: [\"#c9cfe6\", \"#e7e3f3\", \"#f4f1ec\", \"#8a90b8\"],\n          background: \"#f1f0ed\",\n        });\n\n  const sharpMask =\n    dof > 0.01\n      ? `radial-gradient(circle at ${fx}px ${fy}px, #000 ${focusR}px, transparent ${focusR * 2.4}px)`\n      : undefined;\n\n  return (\n    <AbsoluteFill style={{ fontFamily: geist.fontFamily, overflow: \"hidden\" }}>\n      <GshGround\n        preset={resolvedGround}\n        params={resolvedParams}\n        timeOffset={6}\n        timeScale={0.6}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          width: stageW,\n          height: stageH,\n          transform: `scale(${s})`,\n          transformOrigin: \"0 0\",\n          perspective: 2400,\n        }}\n      >\n        {portrait ? (\n          <div\n            style={{\n              position: \"absolute\",\n              left: 90,\n              right: 90,\n              top: 560,\n              overflow: \"hidden\",\n              paddingBottom: 12,\n              opacity: pull > 0.3 ? 1 : 0,\n            }}\n          >\n            <div\n              style={{\n                fontSize: 96,\n                lineHeight: 1.02,\n                letterSpacing: \"-0.045em\",\n                fontWeight: 300,\n                color: ink,\n                transform: `translateY(${mix(110, 0, titleIn)}%)`,\n              }}\n            >\n              {title}\n            </div>\n          </div>\n        ) : null}\n        <div\n          style={{\n            position: \"absolute\",\n            left: winLeft,\n            top: winTop,\n            width: W,\n            height: H,\n            transformOrigin: \"0 0\",\n            transform: `scale(${Z})`,\n            filter: pullBlur > 0.3 ? `blur(${pullBlur}px)` : undefined,\n          }}\n        >\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              transformStyle: \"preserve-3d\",\n              transformOrigin: `${fx}px ${fy}px`,\n              transform: `rotateX(${rotX}deg) rotateY(${rotY}deg)`,\n            }}\n          >\n            {dof > 0.01 ? (\n              <div\n                style={{\n                  position: \"absolute\",\n                  inset: 0,\n                  filter: `blur(${2.4 * dof}px)`,\n                }}\n              >\n                {renderWindow(false)}\n              </div>\n            ) : null}\n            <div\n              style={{\n                position: \"absolute\",\n                inset: 0,\n                WebkitMaskImage: sharpMask,\n                maskImage: sharpMask,\n              }}\n            >\n              {renderWindow(true)}\n            </div>\n            <div\n              style={{\n                position: \"absolute\",\n                left: cX,\n                top: cY,\n                opacity:\n                  ramp(frame, B.cursor, 4) * (1 - ramp(frame, B.pull + 18, 9)),\n                transform: `scale(${cScale})`,\n                transformOrigin: \"20% 15%\",\n                filter: cBlur > 0.3 ? `blur(${cBlur}px)` : undefined,\n              }}\n            >\n              <Pointer size={24} dark={dark} />\n            </div>\n            <div\n              style={{\n                position: \"absolute\",\n                left: W / 2,\n                bottom: 26,\n                transform: `translateX(-50%) translateY(${mix(30, 0, toastIn)}px) scale(${mix(0.86, 1, toastIn)})`,\n                opacity: Math.min(1, toastIn * 1.4),\n                display: frame >= B.toast ? \"flex\" : \"none\",\n                alignItems: \"center\",\n                gap: 12,\n                height: 46,\n                padding: \"0 8px 0 16px\",\n                borderRadius: 14,\n                background: dark ? \"rgba(28,30,38,0.96)\" : \"#ffffff\",\n                boxShadow: dark\n                  ? \"inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 6px rgba(0,0,0,0.3), 0 18px 40px rgba(0,0,0,0.45)\"\n                  : \"0 1px 2px rgba(20,24,40,0.08), 0 14px 36px rgba(20,24,40,0.16)\",\n                border: `1px solid ${hair}`,\n                fontSize: 16,\n                color: ink,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              <span\n                style={{\n                  width: 22,\n                  height: 22,\n                  borderRadius: 11,\n                  background: green,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                }}\n              >\n                <Icon name=\"check\" size={14} color=\"#fff\" stroke={2.2} />\n              </span>\n              {toast}\n              <span\n                style={{\n                  height: 30,\n                  padding: \"0 10px\",\n                  borderRadius: 9,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: 6,\n                  fontFamily: mono.fontFamily,\n                  fontSize: 13,\n                  color: dark ? \"#fff\" : accent,\n                  background: dark\n                    ? `color-mix(in oklab, ${accent} 70%, transparent)`\n                    : `color-mix(in oklab, ${accent} 10%, white)`,\n                }}\n              >\n                {url}\n                <Icon\n                  name=\"arrowUpRight\"\n                  size={13}\n                  color={dark ? \"#fff\" : accent}\n                />\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n}\n\nexport default MacroClick;\n",
      "type": "registry:component",
      "target": "components/remocn/macro-click.tsx"
    }
  ],
  "type": "registry:component"
}