{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pill-morph",
  "title": "Pill Morph",
  "description": "A logo pill opens into a product card, splits into feature pills and becomes an app tile.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "registryDependencies": ["@remocn/gsh"],
  "files": [
    {
      "path": "registry/remocn/pill-morph/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont } from \"@remotion/google-fonts/Figtree\";\nimport { loadFont as loadManrope } from \"@remotion/google-fonts/Manrope\";\nimport type React from \"react\";\nimport { useEffect, useId, useMemo, useState } from \"react\";\nimport {\n  AbsoluteFill,\n  continueRender,\n  delayRender,\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 figtree = loadFont(\"normal\", {\n  weights: [\"300\", \"400\"],\n  subsets: [\"latin\"],\n});\nconst manrope = loadManrope(\"normal\", {\n  weights: [\"600\"],\n  subsets: [\"latin\"],\n});\nconst sans = figtree.fontFamily;\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\nfunction RemocnLogo({ fontSize, color }: { fontSize: number; color: string }) {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"baseline\",\n        color,\n        fontFamily: manrope.fontFamily,\n        fontWeight: 600,\n        fontSize,\n        letterSpacing: \"-0.025em\",\n        lineHeight: 1,\n      }}\n    >\n      <svg\n        viewBox=\"0 0 124.06 134.26\"\n        style={{ height: \"0.76em\", width: \"auto\" }}\n        aria-hidden\n      >\n        <path fill=\"currentColor\" d={REMOCN_R_PATH} />\n      </svg>\n      <span style={{ marginLeft: \"0.04em\" }}>emocn</span>\n    </div>\n  );\n}\n\nlet measureCtx: CanvasRenderingContext2D | null = null;\nfunction textWidth(s: string, size: number, family: string, weight: number) {\n  if (!measureCtx && typeof document !== \"undefined\") {\n    measureCtx = document.createElement(\"canvas\").getContext(\"2d\");\n  }\n  if (!measureCtx) return s.length * size * 0.52;\n  measureCtx.font = `${weight} ${size}px \"${family}\"`;\n  return measureCtx.measureText(s).width;\n}\n\nfunction measure(\n  version: number,\n  name: string,\n  features: string[],\n  labelSize: number,\n  featSize: number,\n) {\n  return {\n    version,\n    logo:\n      labelSize * 0.742 +\n      textWidth(\"emocn\", labelSize, manrope.fontFamily, 600) -\n      labelSize * 0.025 * 5,\n    name: textWidth(name, labelSize, sans, 400),\n    feats: features.map((f) => textWidth(f, featSize, sans, 400)),\n  };\n}\n\nfunction useFontVersion() {\n  const [handle] = useState(() => delayRender(\"pill-morph: fonts\"));\n  const [version, setVersion] = useState(0);\n  useEffect(() => {\n    const bump = () => setVersion((v) => v + 1);\n    Promise.all([figtree.waitUntilDone(), manrope.waitUntilDone()]).then(() => {\n      bump();\n      continueRender(handle);\n    });\n    if (typeof document === \"undefined\") return;\n    document.fonts.addEventListener(\"loadingdone\", bump);\n    return () => document.fonts.removeEventListener(\"loadingdone\", bump);\n  }, [handle]);\n  return version;\n}\n\nexport interface PillMorphProps {\n  features?: [string, string, string];\n  logo?: React.ReactNode;\n  name?: string;\n  src?: string;\n  children?: React.ReactNode;\n  accent?: string;\n  speed?: number;\n  theme?: \"dark\" | \"light\";\n  ground?: GshPresetId;\n  groundParams?: Partial<GradientParams>;\n}\n\nconst EASE_OUT = Easing.bezier(0.22, 1, 0.36, 1);\nconst CARD = { mass: 0.8, damping: 18, stiffness: 160 };\nconst CHIP = { mass: 0.5, damping: 12, stiffness: 200 };\nconst MORPH = { damping: 200 };\nconst CLAMP = {\n  extrapolateLeft: \"clamp\",\n  extrapolateRight: \"clamp\",\n} as const;\n\nconst THEMES = {\n  dark: {\n    base: \"#04050A\",\n    scrim: \"4,5,10\",\n    surface: \"#17181C\",\n    fg: \"#F3F2EF\",\n    muted: \"rgba(243,242,239,0.55)\",\n    block: \"rgba(255,255,255,0.06)\",\n    blockHi: \"rgba(255,255,255,0.11)\",\n    hair: \"rgba(255,255,255,0.08)\",\n    imgLine: \"rgba(255,255,255,0.1)\",\n    ring: \"rgba(255,255,255,0.1)\",\n    rim: \"rgba(255,255,255,0.16)\",\n    shadow: \"rgba(0,0,0,0.6)\",\n  },\n  light: {\n    base: \"#EEF0F6\",\n    scrim: \"244,244,247\",\n    surface: \"#FFFFFF\",\n    fg: \"#121214\",\n    muted: \"rgba(18,18,20,0.55)\",\n    block: \"rgba(18,18,20,0.05)\",\n    blockHi: \"rgba(18,18,20,0.09)\",\n    hair: \"rgba(18,18,20,0.08)\",\n    imgLine: \"rgba(0,0,0,0.1)\",\n    ring: \"rgba(18,18,20,0.09)\",\n    rim: \"rgba(255,255,255,1)\",\n    shadow: \"rgba(40,44,70,0.22)\",\n  },\n} as const;\n\ntype Palette = (typeof THEMES)[keyof typeof THEMES];\n\nconst lerp = (a: number, b: number, k: number) => a + (b - a) * k;\n\nconst FEATURE_ICONS = [\n  \"M2.5 5.5h7v7h-7zM6.5 5.5V3.5h7v7h-4\",\n  \"M2 3.5h12v9H2zM4.5 8h4.5M11 8h.5M4.5 10.5h7\",\n  \"M2 3.5h12v9H2zM2 10.5c3.5-3.5 7-3.5 12-1.5M10.5 6.5h.01\",\n];\n\nconst SCENES = [\n  { name: \"Intro\", len: \"0:02\" },\n  { name: \"Product\", len: \"0:03\" },\n  { name: \"Captions\", len: \"0:02\" },\n  { name: \"Pricing\", len: \"0:02\" },\n  { name: \"Changelog\", len: \"0:02\" },\n  { name: \"Outro\", len: \"0:01\" },\n];\n\nconst CLIPS = [\n  [0, 0.17, 0],\n  [0.18, 0.5, 1],\n  [0.51, 0.74, 0],\n  [0.75, 1, 0],\n] as const;\n\nfunction Editor({\n  w,\n  h,\n  u,\n  p,\n  accent,\n  t,\n}: {\n  w: number;\n  h: number;\n  u: number;\n  p: Palette;\n  accent: string;\n  t: number;\n}) {\n  const side = w * 0.27;\n  const fs = 16 * u;\n  const row = (i: number) =>\n    interpolate(t, [34 + i * 3, 50 + i * 3], [0, 1], {\n      ...CLAMP,\n      easing: EASE_OUT,\n    });\n  const play = interpolate(t, [40, 110], [0.24, 0.47], CLAMP);\n  const secs = play * 12;\n  const tc = `0:${String(Math.floor(secs)).padStart(2, \"0\")}.${String(Math.floor((secs % 1) * 30)).padStart(2, \"0\")}`;\n  const right = side + 16 * u;\n  const rw = w - right;\n  const prevH = h * 0.62;\n  const barY = prevH + 12 * u;\n  const trackY = barY + 34 * u;\n  const trackH = h - trackY;\n  return (\n    <div style={{ position: \"absolute\", inset: 0, fontFamily: sans }}>\n      {SCENES.map((sc, i) => (\n        <div\n          key={sc.name}\n          style={{\n            position: \"absolute\",\n            left: 0,\n            top: i * 42 * u,\n            width: side - 12 * u,\n            height: 34 * u,\n            borderRadius: 8 * u,\n            background: i === 1 ? p.block : \"transparent\",\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 9 * u,\n            padding: `0 ${10 * u}px`,\n            boxSizing: \"border-box\",\n            fontSize: fs,\n            color: i === 1 ? p.fg : p.muted,\n            opacity: row(i),\n            transform: `translateX(${(1 - row(i)) * -10 * u}px)`,\n          }}\n        >\n          <div\n            style={{\n              width: 7 * u,\n              height: 7 * u,\n              borderRadius: \"50%\",\n              background: i === 1 ? accent : p.blockHi,\n              flexShrink: 0,\n            }}\n          />\n          <span style={{ flex: 1 }}>{sc.name}</span>\n          <span style={{ fontVariantNumeric: \"tabular-nums\", opacity: 0.8 }}>\n            {sc.len}\n          </span>\n        </div>\n      ))}\n      <div\n        style={{\n          position: \"absolute\",\n          left: side,\n          top: 0,\n          bottom: 0,\n          width: 1,\n          background: p.hair,\n        }}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: right,\n          top: 0,\n          width: rw,\n          height: prevH,\n          borderRadius: 10 * u,\n          overflow: \"hidden\",\n          opacity: row(1),\n          transform: `translateY(${(1 - row(1)) * 12 * u}px)`,\n        }}\n      >\n        <Img\n          src={staticFile(\"reel/reel-5.jpg\")}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            objectFit: \"cover\",\n            transform: `scale(${1.04 + play * 0.1})`,\n          }}\n        />\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            borderRadius: 10 * u,\n            boxShadow: `inset 0 0 0 1px ${p.imgLine}`,\n            background:\n              \"linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.42) 100%)\",\n          }}\n        />\n        <div\n          style={{\n            position: \"absolute\",\n            left: 16 * u,\n            bottom: 14 * u,\n            fontSize: 22 * u,\n            letterSpacing: \"-0.02em\",\n            color: \"#FFFFFF\",\n            opacity: row(3),\n          }}\n        >\n          Launch day, in one take\n        </div>\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          left: right,\n          top: barY,\n          width: rw,\n          height: 24 * u,\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 10 * u,\n          fontSize: fs,\n          color: p.muted,\n          fontVariantNumeric: \"tabular-nums\",\n          opacity: row(2),\n        }}\n      >\n        <svg\n          width={14 * u}\n          height={14 * u}\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden\n        >\n          <path\n            d=\"M4.5 3.2v9.6l8-4.8z\"\n            stroke={p.fg}\n            strokeWidth={1.5}\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n        <span style={{ color: p.fg }}>{tc}</span>\n        <span>/ 0:12.00</span>\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          left: right,\n          top: trackY,\n          width: rw,\n          height: trackH,\n          opacity: row(3),\n          transform: `translateY(${(1 - row(3)) * 10 * u}px)`,\n        }}\n      >\n        {CLIPS.map(([a, b, on]) => (\n          <div\n            key={a}\n            style={{\n              position: \"absolute\",\n              left: `${a * 100}%`,\n              width: `calc(${(b - a) * 100}% - ${3 * u}px)`,\n              top: 0,\n              height: trackH * 0.52,\n              borderRadius: 6 * u,\n              background: on ? accent : p.blockHi,\n              boxShadow: on\n                ? \"inset 0 1px 0 rgba(255,255,255,0.22)\"\n                : `inset 0 0 0 1px ${p.hair}`,\n            }}\n          />\n        ))}\n        <div\n          style={{\n            position: \"absolute\",\n            left: \"30%\",\n            width: \"36%\",\n            bottom: 0,\n            height: trackH * 0.3,\n            borderRadius: 5 * u,\n            background: p.block,\n            boxShadow: `inset 0 0 0 1px ${p.hair}`,\n          }}\n        />\n        <div\n          style={{\n            position: \"absolute\",\n            left: `${play * 100}%`,\n            top: -6 * u,\n            bottom: -2 * u,\n            width: 1.5 * u,\n            background: p.fg,\n            borderRadius: u,\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface Shape {\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n  r: [number, number, number, number];\n}\n\nexport function PillMorph({\n  name = \"\",\n  features = [\"Transitions\", \"Captions\", \"Backgrounds\"],\n  logo,\n  src,\n  children,\n  accent = \"#3B5BFD\",\n  speed = 1,\n  theme = \"dark\",\n  ground,\n  groundParams,\n}: PillMorphProps) {\n  const t = useCurrentFrame() * speed;\n  const { fps, width, height } = useVideoConfig();\n  const tall = height > width;\n  const u = tall ? width / 760 : Math.min(width / 1280, height / 720);\n  const p = THEMES[theme];\n  const dark = theme === \"dark\";\n  const resolvedGround: GshPresetId | undefined =\n    ground ?? (groundParams ? undefined : dark ? \"velvet-hour\" : \"glasswork\");\n  const gid = `goo${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const fontVersion = useFontVersion();\n  const cx = width / 2;\n  const cy = height / 2;\n\n  const sp = (\n    start: number,\n    config: { mass?: number; damping?: number; stiffness?: number },\n  ) =>\n    spring({\n      frame: t - start,\n      fps,\n      config,\n    });\n  const fade = (a: number, b: number) =>\n    interpolate(t, [a, b], [0, 1], { ...CLAMP, easing: EASE_OUT });\n\n  const labelSize = 23 * u;\n  const featSize = (tall ? 26 : 23) * u;\n  const markSize = 24 * u;\n  const pad = 20 * u;\n  const widths = useMemo(\n    () => measure(fontVersion, name, features, labelSize, featSize),\n    [fontVersion, name, features, labelSize, featSize],\n  );\n  const labelW = logo ? markSize + 9 * u + widths.name : widths.logo;\n  const w0 = labelW + pad * 2;\n  const h0 = 52 * u;\n  const cw = tall ? width * 0.86 : Math.min(width * 0.6, 760 * u);\n  const ch = tall ? cw * 0.86 : Math.min(height * 0.64, 450 * u);\n  const cr = 28 * u;\n  const barH = 66 * u;\n  const pws = widths.feats.map((fw) => Math.max(170 * u, fw + 92 * u));\n  const total = pws[0] + pws[1] + pws[2];\n  const gap = (tall ? 18 : 30) * u;\n  const tile = (tall ? 220 : 164) * u;\n  const tileR = (tall ? 58 : 44) * u;\n  const tileCy = cy - 22 * u;\n\n  const appear = sp(-4, CARD);\n  const wP = sp(18, MORPH);\n  const hP = sp(24, MORPH);\n  const collapse = sp(102, MORPH);\n  const split = sp(116, CARD);\n  const merge = sp(168, MORPH);\n  const settle = sp(182, CHIP);\n\n  let w = lerp(w0, cw, wP);\n  let h = lerp(h0, ch, hP);\n  w = lerp(w, total, collapse);\n  h = lerp(h, barH, collapse);\n  const rCard = Math.min(h / 2, lerp(h0 / 2, cr, hP));\n  const r = Math.min(h / 2, lerp(rCard, h / 2, collapse));\n  const lift = (1 - appear) * 14 * u;\n  const scale0 = 0.94 + 0.06 * appear;\n\n  const shapes: Shape[] = [];\n  if (t < 116) {\n    shapes.push({\n      x: cx - (w * scale0) / 2,\n      y: cy - (h * scale0) / 2 + lift,\n      w: w * scale0,\n      h: h * scale0,\n      r: [r, r, r, r],\n    });\n  } else {\n    const spread = Math.max(0, split) * (1 - merge);\n    const g = gap * spread;\n    const k = w / total;\n    let left = cx - (w + g * 2) / 2;\n    pws.forEach((pw0, i) => {\n      const pw = pw0 * k;\n      const ph = h;\n      const inner = r * Math.min(1, Math.max(0, split));\n      const segCx = left + pw / 2;\n      left += pw + g;\n      const mx = lerp(segCx, cx, merge);\n      const mw =\n        lerp(pw, tile, merge) * (1 + 0.06 * Math.max(0, settle - merge));\n      const mh = lerp(ph, tile, merge);\n      const mr = lerp(r, tileR, merge);\n      const rr: [number, number, number, number] =\n        i === 0\n          ? [r, inner, inner, r]\n          : i === 2\n            ? [inner, r, r, inner]\n            : [inner, inner, inner, inner];\n      const rm = rr.map((v) => lerp(v, mr, merge)) as Shape[\"r\"];\n      shapes.push({\n        x: mx - mw / 2,\n        y: lerp(cy, tileCy, merge) - mh / 2,\n        w: mw,\n        h: mh,\n        r: rm,\n      });\n    });\n  }\n\n  const labelOut = 1 - fade(103, 112);\n  const content = fade(34, 52) * (1 - fade(96, 106));\n  const featIn = (i: number) =>\n    fade(122 + i * 3, 136 + i * 3) * (1 - fade(164 + i * 2, 172 + i * 2));\n  const tileFill = fade(176, 194);\n  const markIn = fade(186, 202);\n  const nameIn = fade(196, 216);\n\n  const s0 = shapes[0];\n  const labelX = t < 116 ? s0.x + pad * scale0 : 0;\n  const labelY =\n    t < 116 ? s0.y + Math.min(s0.h / 2, 30 * u) - (labelSize * scale0) / 2 : 0;\n\n  const drift = interpolate(t, [0, 240], [1, 1.035]);\n  const tileGlow = fade(178, 200);\n  const blur = 12 * u;\n\n  return (\n    <AbsoluteFill style={{ background: p.base, overflow: \"hidden\" }}>\n      <GshGround\n        preset={resolvedGround}\n        params={groundParams}\n        timeOffset={dark ? 4 : 5}\n        timeScale={0.45}\n      />\n      <AbsoluteFill\n        style={{\n          background: `radial-gradient(60% 60% at 50% 48%, rgba(${p.scrim},${dark ? 0.5 : 0.36}) 0%, rgba(${p.scrim},${dark ? 0.18 : 0.1}) 100%)`,\n        }}\n      />\n      <svg width={0} height={0} style={{ position: \"absolute\" }} aria-hidden>\n        <defs>\n          <filter\n            id={gid}\n            x=\"-10%\"\n            y=\"-10%\"\n            width=\"120%\"\n            height=\"120%\"\n            colorInterpolationFilters=\"sRGB\"\n          >\n            <feGaussianBlur\n              in=\"SourceGraphic\"\n              stdDeviation={blur}\n              result=\"blur\"\n            />\n            <feColorMatrix\n              in=\"blur\"\n              type=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 26 -12\"\n              result=\"goo\"\n            />\n            <feMorphology\n              in=\"goo\"\n              operator=\"erode\"\n              radius={Math.max(1, u)}\n              result=\"inner\"\n            />\n            <feComposite in=\"goo\" in2=\"inner\" operator=\"out\" result=\"ring\" />\n            <feFlood floodColor={p.ring} result=\"ringColor\" />\n            <feComposite\n              in=\"ringColor\"\n              in2=\"ring\"\n              operator=\"in\"\n              result=\"hair\"\n            />\n            <feOffset in=\"goo\" dy={1.5 * u} result=\"low\" />\n            <feComposite in=\"goo\" in2=\"low\" operator=\"out\" result=\"top\" />\n            <feFlood floodColor={p.rim} result=\"rimColor\" />\n            <feComposite in=\"rimColor\" in2=\"top\" operator=\"in\" result=\"rim\" />\n            <feMerge>\n              <feMergeNode in=\"goo\" />\n              <feMergeNode in=\"hair\" />\n              <feMergeNode in=\"rim\" />\n            </feMerge>\n          </filter>\n        </defs>\n      </svg>\n\n      <AbsoluteFill\n        style={{\n          transform: `scale(${drift})`,\n          opacity: interpolate(appear, [0, 0.4], [0, 1], CLAMP),\n        }}\n      >\n        <AbsoluteFill\n          style={{\n            filter: `drop-shadow(0 ${16 * u}px ${28 * u}px ${p.shadow})`,\n          }}\n        >\n          <AbsoluteFill style={{ filter: `url(#${gid})` }}>\n            {shapes.map((s, i) => (\n              <div\n                key={i}\n                style={{\n                  position: \"absolute\",\n                  left: s.x,\n                  top: s.y,\n                  width: s.w,\n                  height: s.h,\n                  borderRadius: `${s.r[0]}px ${s.r[1]}px ${s.r[2]}px ${s.r[3]}px`,\n                  background: p.surface,\n                }}\n              />\n            ))}\n          </AbsoluteFill>\n        </AbsoluteFill>\n\n        {t < 116 ? (\n          <div\n            style={{\n              position: \"absolute\",\n              left: labelX,\n              top: labelY,\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 9 * u * scale0,\n              opacity: labelOut * fade(-2, 9),\n              transform: `scale(${scale0})`,\n              transformOrigin: \"0 0\",\n            }}\n          >\n            {logo ? (\n              <>\n                {logo}\n                <span\n                  style={{\n                    fontFamily: sans,\n                    fontWeight: 400,\n                    fontSize: labelSize,\n                    letterSpacing: \"-0.02em\",\n                    color: p.fg,\n                    lineHeight: `${markSize}px`,\n                  }}\n                >\n                  {name}\n                </span>\n              </>\n            ) : (\n              <div\n                style={{\n                  height: labelSize,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                }}\n              >\n                <RemocnLogo fontSize={labelSize} color={p.fg} />\n              </div>\n            )}\n          </div>\n        ) : null}\n\n        {t < 116 && content > 0 ? (\n          <div\n            style={{\n              position: \"absolute\",\n              left: s0.x + 22 * u,\n              top: s0.y + 64 * u,\n              width: cw - 44 * u,\n              height: ch - 86 * u,\n              opacity: content,\n              overflow: \"hidden\",\n              borderRadius: 12 * u,\n              clipPath: `inset(0 0 ${Math.max(0, ch - 86 * u - (s0.h - 86 * u))}px 0)`,\n            }}\n          >\n            {children ??\n              (src ? (\n                <Img\n                  src={src}\n                  style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n                />\n              ) : (\n                <Editor\n                  w={cw - 44 * u}\n                  h={ch - 86 * u}\n                  u={u}\n                  p={p}\n                  accent={accent}\n                  t={t}\n                />\n              ))}\n          </div>\n        ) : null}\n\n        {t >= 116\n          ? shapes.map((s, i) => {\n              const k = featIn(i);\n              if (k <= 0) return null;\n              return (\n                <div\n                  key={features[i]}\n                  style={{\n                    position: \"absolute\",\n                    left: s.x,\n                    top: s.y,\n                    width: s.w,\n                    height: s.h,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    gap: 10 * u,\n                    fontFamily: sans,\n                    fontWeight: 400,\n                    fontSize: featSize,\n                    letterSpacing: \"-0.01em\",\n                    color: p.fg,\n                    whiteSpace: \"nowrap\",\n                    opacity: k,\n                    transform: `translateY(${(1 - k) * 6 * u}px)`,\n                  }}\n                >\n                  <svg\n                    width={featSize * 0.95}\n                    height={featSize * 0.95}\n                    viewBox=\"0 0 16 16\"\n                    fill=\"none\"\n                    aria-hidden\n                  >\n                    <path\n                      d={FEATURE_ICONS[i % FEATURE_ICONS.length]}\n                      stroke={p.muted}\n                      strokeWidth={1.5}\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                  {features[i]}\n                </div>\n              );\n            })\n          : null}\n\n        {tileFill > 0 && t >= 116 ? (\n          <div\n            style={{\n              position: \"absolute\",\n              left: shapes[1].x,\n              top: shapes[1].y,\n              width: shapes[1].w,\n              height: shapes[1].h,\n              borderRadius: `${shapes[1].r[0]}px`,\n              background: `linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,0.14) 100%), ${accent}`,\n              opacity: tileFill,\n              boxShadow: `inset 0 ${1.5 * u}px 0 rgba(255,255,255,0.3), 0 ${18 * u}px ${48 * u}px -${10 * u}px ${accent}${Math.round(\n                tileGlow * 140,\n              )\n                .toString(16)\n                .padStart(2, \"0\")}`,\n            }}\n          />\n        ) : null}\n\n        {markIn > 0 ? (\n          <div\n            style={{\n              position: \"absolute\",\n              left: cx - tile / 2,\n              top: tileCy - tile / 2,\n              width: tile,\n              height: tile,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              opacity: markIn,\n              transform: `translateY(${(1 - markIn) * 6 * u}px) scale(${0.92 + 0.08 * markIn})`,\n            }}\n          >\n            {logo ?? (\n              <svg\n                viewBox=\"0 0 124.06 134.26\"\n                height={tile * 0.46}\n                width={(tile * 0.46 * 124.06) / 134.26}\n                style={{ marginLeft: tile * 0.03 }}\n                aria-hidden\n              >\n                <path fill=\"#FFFFFF\" d={REMOCN_R_PATH} />\n              </svg>\n            )}\n          </div>\n        ) : null}\n        {nameIn > 0 ? (\n          <div\n            style={{\n              position: \"absolute\",\n              left: 0,\n              right: 0,\n              top: tileCy + tile / 2 + 30 * u,\n              display: \"flex\",\n              justifyContent: \"center\",\n              opacity: nameIn,\n              transform: `translateY(${(1 - nameIn) * 10 * u}px)`,\n            }}\n          >\n            {logo ? (\n              <span\n                style={{\n                  fontFamily: sans,\n                  fontWeight: 400,\n                  fontSize: 28 * u,\n                  letterSpacing: \"-0.02em\",\n                  color: p.fg,\n                }}\n              >\n                {name}\n              </span>\n            ) : (\n              <RemocnLogo fontSize={34 * u} color={p.fg} />\n            )}\n          </div>\n        ) : null}\n      </AbsoluteFill>\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/pill-morph.tsx"
    }
  ],
  "type": "registry:component"
}