{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "launch-date",
  "title": "Launch Date",
  "description": "A calendar month draws itself, days sweep on and the launch date glows in a ring.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "files": [
    {
      "path": "registry/remocn/launch-date/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont } from \"@remotion/google-fonts/Sora\";\nimport type React from \"react\";\nimport { useId } from \"react\";\nimport {\n  AbsoluteFill,\n  Easing,\n  interpolate,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nconst { fontFamily: sora } = loadFont(\"normal\", {\n  weights: [\"300\", \"400\", \"500\"],\n  subsets: [\"latin\"],\n});\n\n/**\n * gradients.sh \"halo\" palette: [#fff4ec, #ffb36b, #e2457a, #3d4dff]. The ring\n * that circles the day is drawn in it, tightens into a full stop that keeps\n * it, and leaves a soft halo ring behind the lockup. The blue end is the\n * accent, so the palette lands on the brand.\n */\nconst HALO = [\"#fff4ec\", \"#ffb36b\", \"#e2457a\", \"#3d4dff\"] as const;\n\n/**\n * Beat sheet (30fps, speed 1):\n * 0–30     the month draws itself as hairlines; header and day numbers settle.\n * 14–44    days light up in a quick sweep from the 1st to the launch day.\n * 30–88    slow eased push toward the launch day; the rest of the grid\n *          drifts out of focus.\n * 66–90    an accent stroke circles the day.\n * 92–124   the grid falls away; the day slides into a huge \"10.30\" lockup\n *          while the circle tightens into the accent full stop.\n * 120–180  label lands, long hold.\n */\n\nexport interface LaunchDateValue {\n  /** 1–12. */\n  month: number;\n  day: number;\n  year: number;\n}\n\nexport interface LaunchDateProps {\n  date?: LaunchDateValue;\n  /** Short line under the lockup. */\n  label?: string;\n  /** \"month-day\" renders 10.30, \"day-month\" renders 30.10. */\n  order?: \"month-day\" | \"day-month\";\n  accent?: string;\n  /** Playback multiplier. */\n  speed?: number;\n  theme?: \"dark\" | \"light\";\n}\n\nconst MONTHS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\",\n];\nconst WEEKDAYS = [\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\",\n  \"Sunday\",\n];\n\nconst EASE_IO = Easing.bezier(0.65, 0, 0.35, 1);\nconst EASE_PUSH = Easing.bezier(0.5, 0, 0.3, 1);\nconst EASE_OUT = Easing.bezier(0.22, 1, 0.36, 1);\nconst EASE_IN = Easing.bezier(0.55, 0, 0.9, 0.4);\nconst CLAMP = {\n  extrapolateLeft: \"clamp\",\n  extrapolateRight: \"clamp\",\n} as const;\n\nconst PALETTES = {\n  dark: {\n    bg: \"#0A0A0B\",\n    stage: \"rgba(255,255,255,0.055)\",\n    fg: \"#F3F2EF\",\n    muted: \"#85848A\",\n    faint: \"#4A4A50\",\n    line: \"rgba(255,255,255,0.13)\",\n    lit: \"rgba(255,255,255,0.075)\",\n    grain: 0.065,\n    /** Peak opacity of the halo behind the lockup. */\n    halo: 1,\n    /** Halo ring stops, top-left → bottom-right, before the accent. */\n    haloStops: [HALO[0], HALO[1], HALO[2]],\n  },\n  light: {\n    bg: \"#F5F4F0\",\n    stage: \"rgba(255,255,255,0.85)\",\n    fg: \"#121214\",\n    muted: \"#6E6C67\",\n    faint: \"#B9B6AE\",\n    line: \"rgba(18,18,20,0.13)\",\n    lit: \"rgba(18,18,20,0.05)\",\n    grain: 0.045,\n    halo: 0.9,\n    haloStops: [HALO[1], HALO[1], HALO[2]],\n  },\n} as const;\n\ntype Palette = (typeof PALETTES)[keyof typeof PALETTES];\n\n/** Day of week, 0 = Monday (Sakamoto). Pure arithmetic, no Date. */\nfunction weekday(year: number, month: number, day: number) {\n  const t = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4];\n  const y = month < 3 ? year - 1 : year;\n  const sun0 =\n    (y +\n      Math.floor(y / 4) -\n      Math.floor(y / 100) +\n      Math.floor(y / 400) +\n      t[month - 1] +\n      day) %\n    7;\n  return (sun0 + 6) % 7;\n}\n\nfunction daysIn(year: number, month: number) {\n  if (month === 2) {\n    const leap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;\n    return leap ? 29 : 28;\n  }\n  return [4, 6, 9, 11].includes(month) ? 30 : 31;\n}\n\nconst pad = (n: number) => String(n).padStart(2, \"0\");\n\nfunction Grain({ opacity }: { opacity: number }) {\n  const id = `g${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  return (\n    <svg\n      width=\"100%\"\n      height=\"100%\"\n      style={{ position: \"absolute\", inset: 0, opacity, pointerEvents: \"none\" }}\n      aria-hidden\n    >\n      <filter id={id}>\n        <feTurbulence\n          type=\"fractalNoise\"\n          baseFrequency=\"0.9\"\n          numOctaves={2}\n          seed={11}\n          stitchTiles=\"stitch\"\n        />\n        <feColorMatrix values=\"0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.9 0\" />\n      </filter>\n      <rect width=\"100%\" height=\"100%\" filter={`url(#${id})`} />\n    </svg>\n  );\n}\n\ninterface CellProps {\n  t: number;\n  day: number;\n  col: number;\n  row: number;\n  cellW: number;\n  cellH: number;\n  hero: boolean;\n  launchDay: number;\n  heroRow: number;\n  heroCol: number;\n  p: Palette;\n  u: number;\n}\n\nfunction DayCell({\n  t,\n  day,\n  col,\n  row,\n  cellW,\n  cellH,\n  hero,\n  launchDay,\n  heroRow,\n  heroCol,\n  p,\n  u,\n}: CellProps) {\n  // settle in with the grid\n  const appear = interpolate(t, [8 + row * 2.5, 24 + row * 2.5], [0, 1], {\n    ...CLAMP,\n    easing: EASE_OUT,\n  });\n  // sweep: day 1 → launch day across ~28 frames\n  const step = 28 / Math.max(1, launchDay);\n  const hit = 16 + (day - 1) * step;\n  const swept = day <= launchDay;\n  const flash = swept\n    ? interpolate(t, [hit, hit + 3, hit + 14], [0, 1, 0], CLAMP)\n    : 0;\n  const after = swept ? interpolate(t, [hit, hit + 10], [0, 1], CLAMP) : 0;\n  const numO = appear * (0.38 + 0.62 * flash + 0.22 * after * (1 - flash));\n  // fall away: ripple outward from the launch day\n  const dist = Math.hypot(col - heroCol, (row - heroRow) * 1.3);\n  const f0 = 90 + dist * 2.2;\n  const fall = interpolate(t, [f0, f0 + 18], [0, 1], {\n    ...CLAMP,\n    easing: EASE_IN,\n  });\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: col * cellW,\n        top: row * cellH,\n        width: cellW,\n        height: cellH,\n        transform: `perspective(${900 * u}px) translateY(${fall * cellH * 0.9}px) rotateX(${-fall * 55}deg)`,\n        transformOrigin: \"50% 100%\",\n        opacity: 1 - fall,\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 1.5 * u,\n          borderRadius: 6 * u,\n          background: p.lit,\n          opacity: flash + (hero ? after * 0.9 : after * 0.25),\n        }}\n      />\n      {hero ? null : (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            fontFamily: sora,\n            fontWeight: 300,\n            fontSize: cellH * 0.3,\n            fontVariantNumeric: \"tabular-nums\",\n            letterSpacing: \"-0.02em\",\n            color: p.fg,\n            opacity: numO,\n          }}\n        >\n          {day}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function LaunchDate({\n  date = { month: 10, day: 30, year: 2026 },\n  label = \"Coming soon\",\n  order = \"month-day\",\n  accent = \"#3B5BFD\",\n  speed = 1,\n  theme = \"dark\",\n}: LaunchDateProps) {\n  const t = useCurrentFrame() * speed;\n  const { width, height } = useVideoConfig();\n  const u = height / 720;\n  const p: Palette = PALETTES[theme];\n\n  const month = Math.min(12, Math.max(1, Math.round(date.month)));\n  const total = daysIn(date.year, month);\n  const launchDay = Math.min(total, Math.max(1, Math.round(date.day)));\n  const lead = weekday(date.year, month, 1);\n  const rows = Math.ceil((lead + total) / 7);\n\n  // ---- calendar layout (grid space, origin at the grid's top-left) ----\n  const cellH = Math.min(height * 0.64, height) / (rows + 1.7);\n  const cellW = Math.min(cellH * 1.38, (width * 0.62) / 7);\n  const gridW = cellW * 7;\n  const headH = cellH * 1.1;\n  const dowH = cellH * 0.6;\n  const gridH = headH + dowH + rows * cellH;\n  const bodyTop = headH + dowH;\n  const heroIdx = lead + launchDay - 1;\n  const heroCol = heroIdx % 7;\n  const heroRow = Math.floor(heroIdx / 7);\n  const heroGX = (heroCol + 0.5) * cellW;\n  const heroGY = bodyTop + (heroRow + 0.5) * cellH;\n\n  // ---- camera: screen = C + (g - F) * s ----\n  const cx = width / 2;\n  const cy = height * 0.5;\n  const push = interpolate(t, [20, 90], [0, 1], {\n    ...CLAMP,\n    easing: EASE_PUSH,\n  });\n  const S = 2.5;\n  const s =\n    interpolate(push, [0, 1], [0.94, S]) *\n    interpolate(t, [0, 20], [0.97, 1], CLAMP);\n  const fx = interpolate(push, [0, 1], [gridW / 2, heroGX]);\n  const fy = interpolate(push, [0, 1], [gridH / 2, heroGY]);\n  const toScreen = (gx: number, gy: number) => ({\n    x: cx + (gx - fx) * s,\n    y: cy + (gy - fy) * s,\n  });\n  const gridOrigin = toScreen(0, 0);\n  const dof = interpolate(push, [0.35, 1], [0, 2.4 * u], CLAMP);\n  const linesOut = interpolate(t, [86, 104], [1, 0], CLAMP);\n  const headOut = interpolate(t, [60, 84], [1, 0], CLAMP);\n\n  // ---- lockup (screen space) ----\n  const F = Math.min(height * 0.34, (width * 0.7) / 2.7);\n  const groupW = F * 1.14;\n  const dotW = F * 0.27;\n  const lockW = groupW * 2 + dotW;\n  const lockCY = height * 0.45;\n  const lockLeft = cx - lockW / 2;\n  const dayFirst = order === \"day-month\";\n  const daySlotX = dayFirst\n    ? lockLeft + groupW / 2\n    : lockLeft + lockW - groupW / 2;\n  const dotD = F * 0.135;\n  const dotX = cx;\n  const dotY = lockCY + F * 0.364 - dotD / 2;\n\n  // hero day: follows its cell, then glides to the lockup slot\n  const hand = interpolate(t, [92, 120], [0, 1], { ...CLAMP, easing: EASE_IO });\n  const heroCell = toScreen(heroGX, heroGY);\n  const heroFont0 = cellH * 0.3 * s;\n  const heroX = interpolate(hand, [0, 1], [heroCell.x, daySlotX]);\n  const heroY = interpolate(hand, [0, 1], [heroCell.y, lockCY]);\n  const heroFont = interpolate(hand, [0, 1], [heroFont0, F]);\n  const heroWeight = 300;\n  const heroTrack = interpolate(hand, [0, 1], [-0.02, -0.06]);\n  const heroAppear = interpolate(\n    t,\n    [8 + heroRow * 2.5, 24 + heroRow * 2.5],\n    [0, 1],\n    { ...CLAMP, easing: EASE_OUT },\n  );\n  const heroHit = 16 + (launchDay - 1) * (28 / Math.max(1, launchDay));\n  const heroLit = interpolate(t, [heroHit, heroHit + 3], [0.38, 1], CLAMP);\n\n  // circle: draws around the day, rides along with it, then tightens into\n  // the full stop of the lockup\n  const draw = interpolate(t, [64, 90], [0, 1], { ...CLAMP, easing: EASE_OUT });\n  const ringW0 = Math.max(2, 2.5 * u * (s / S));\n  const rideR = heroFont * interpolate(hand, [0, 1], [1.2, 0.7]);\n  const rideW = ringW0 * interpolate(hand, [0, 1], [1, 1.7]);\n  const shrink = interpolate(t, [114, 136], [0, 1], {\n    ...CLAMP,\n    easing: EASE_IO,\n  });\n  // stays a hairline while it tightens, fills only once it is dot-sized\n  const close = interpolate(t, [124, 134], [0, 1], {\n    ...CLAMP,\n    easing: EASE_IO,\n  });\n  const outerR = interpolate(shrink, [0, 1], [rideR + rideW / 2, dotD / 2]);\n  const ringW = Math.min(outerR, interpolate(close, [0, 1], [rideW, outerR]));\n  const ringR = outerR - ringW / 2;\n  const ringX = interpolate(shrink, [0, 1], [heroX, dotX]);\n  const ringY = interpolate(shrink, [0, 1], [heroY, dotY]);\n  const ringBox = ringR + ringW + 4;\n  const circ = 2 * Math.PI * ringR;\n  const ringId = `ring${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  // the echo: as the full stop lands, the ring it came from rings out once\n  // more, wide, and stays behind the lockup as a halo of the same light\n  const echo = interpolate(t, [124, 164], [0, 1], {\n    ...CLAMP,\n    easing: EASE_OUT,\n  });\n  const echoR = dotD / 2 + (height * 0.37 - dotD / 2) * echo;\n  const echoO = interpolate(t, [124, 130], [0, 1], CLAMP);\n  const haloSpin = interpolate(t, [124, 195], [-30, 10], CLAMP);\n  const haloId = `halo${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const blurId = `hb${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  // the other half of the lockup\n  const other = interpolate(t, [128, 152], [0, 1], {\n    ...CLAMP,\n    easing: EASE_OUT,\n  });\n  const labelP = (d: number) =>\n    interpolate(t, [140 + d, 164 + d], [0, 1], { ...CLAMP, easing: EASE_OUT });\n  const labelTop = lockCY + F * 0.5 + 40 * u;\n  const otherValue = pad(month);\n  const fullDate = `${WEEKDAYS[weekday(date.year, month, launchDay)]}, ${MONTHS[month - 1]} ${launchDay}, ${date.year}`;\n\n  const lines: React.ReactNode[] = [];\n  for (let r = 0; r <= rows; r++) {\n    const d = r * 2;\n    const k = interpolate(t, [d, d + 16], [0, 1], {\n      ...CLAMP,\n      easing: EASE_IO,\n    });\n    lines.push(\n      <div\n        key={`h${r}`}\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: bodyTop + r * cellH,\n          width: gridW,\n          height: Math.max(1, u),\n          background: p.line,\n          transformOrigin: \"0 50%\",\n          transform: `scaleX(${k})`,\n        }}\n      />,\n    );\n  }\n  for (let c = 1; c < 7; c++) {\n    const d = 4 + c * 2;\n    const k = interpolate(t, [d, d + 16], [0, 1], {\n      ...CLAMP,\n      easing: EASE_IO,\n    });\n    lines.push(\n      <div\n        key={`v${c}`}\n        style={{\n          position: \"absolute\",\n          left: c * cellW,\n          top: bodyTop,\n          width: Math.max(1, u),\n          height: rows * cellH,\n          background: p.line,\n          transformOrigin: \"50% 0\",\n          transform: `scaleY(${k})`,\n        }}\n      />,\n    );\n  }\n\n  const cells: React.ReactNode[] = [];\n  for (let d = 1; d <= total; d++) {\n    const i = lead + d - 1;\n    cells.push(\n      <DayCell\n        key={d}\n        t={t}\n        day={d}\n        col={i % 7}\n        row={Math.floor(i / 7)}\n        cellW={cellW}\n        cellH={cellH}\n        hero={d === launchDay}\n        launchDay={launchDay}\n        heroRow={heroRow}\n        heroCol={heroCol}\n        p={p}\n        u={u}\n      />,\n    );\n  }\n\n  // a slow push that never quite stops, so the hold stays alive\n  const drift = interpolate(t, [90, 195], [1, 1.035], CLAMP);\n  const headIn = interpolate(t, [4, 26], [0, 1], {\n    ...CLAMP,\n    easing: EASE_OUT,\n  });\n\n  return (\n    <AbsoluteFill style={{ background: p.bg, overflow: \"hidden\" }}>\n      <AbsoluteFill\n        style={{\n          background: `radial-gradient(ellipse 60% 70% at 50% 40%, ${p.stage}, transparent 75%)`,\n        }}\n      />\n\n      <AbsoluteFill style={{ transform: `scale(${drift})` }}>\n        {echoO > 0 ? (\n          <svg\n            width={width}\n            height={height}\n            style={{ position: \"absolute\", inset: 0, overflow: \"visible\" }}\n            aria-hidden\n          >\n            <defs>\n              <linearGradient\n                id={haloId}\n                gradientUnits=\"userSpaceOnUse\"\n                x1={dotX - echoR}\n                y1={lockCY - echoR}\n                x2={dotX + echoR}\n                y2={lockCY + echoR}\n                gradientTransform={`rotate(${haloSpin} ${dotX} ${lockCY})`}\n              >\n                <stop offset=\"0%\" stopColor={p.haloStops[0]} />\n                <stop offset=\"38%\" stopColor={p.haloStops[1]} />\n                <stop offset=\"70%\" stopColor={p.haloStops[2]} />\n                <stop offset=\"100%\" stopColor={accent} />\n              </linearGradient>\n              <filter id={blurId} x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n                <feGaussianBlur stdDeviation={16 * u} />\n              </filter>\n            </defs>\n            <g opacity={echoO * p.halo}>\n              <circle\n                cx={dotX}\n                cy={lockCY}\n                r={echoR}\n                fill=\"none\"\n                stroke={`url(#${haloId})`}\n                strokeWidth={34 * u}\n                filter={`url(#${blurId})`}\n                opacity={0.55}\n              />\n              <circle\n                cx={dotX}\n                cy={lockCY}\n                r={echoR}\n                fill=\"none\"\n                stroke={`url(#${haloId})`}\n                strokeWidth={interpolate(echo, [0, 1], [4, 1.6]) * u}\n              />\n            </g>\n          </svg>\n        ) : null}\n        {/* the month, in grid space under the camera */}\n        <div\n          style={{\n            position: \"absolute\",\n            left: gridOrigin.x,\n            top: gridOrigin.y,\n            width: gridW,\n            height: gridH,\n            transformOrigin: \"0 0\",\n            transform: `scale(${s})`,\n            filter: dof > 0.05 ? `blur(${dof / s}px)` : undefined,\n          }}\n        >\n          <div\n            style={{\n              position: \"absolute\",\n              left: cellW * 0.12,\n              right: cellW * 0.12,\n              top: 0,\n              height: headH,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              opacity: headIn * headOut,\n              transform: `translateY(${(1 - headIn) * 10 * u}px)`,\n            }}\n          >\n            <span\n              style={{\n                fontFamily: sora,\n                fontWeight: 500,\n                fontSize: cellH * 0.5,\n                letterSpacing: \"-0.04em\",\n                color: p.fg,\n              }}\n            >\n              {MONTHS[month - 1]}\n            </span>\n            <span\n              style={{\n                fontFamily: sora,\n                fontWeight: 400,\n                fontSize: cellH * 0.3,\n                letterSpacing: \"-0.02em\",\n                fontVariantNumeric: \"tabular-nums\",\n                color: p.muted,\n              }}\n            >\n              {date.year}\n            </span>\n          </div>\n          <div\n            style={{\n              position: \"absolute\",\n              left: 0,\n              top: headH,\n              width: gridW,\n              height: dowH,\n              display: \"flex\",\n              opacity: headIn * headOut,\n            }}\n          >\n            {WEEKDAYS.map((w, i) => (\n              <div\n                key={w}\n                style={{\n                  width: cellW,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  fontFamily: sora,\n                  fontWeight: 400,\n                  fontSize: cellH * 0.17,\n                  letterSpacing: \"0.1em\",\n                  textTransform: \"uppercase\",\n                  color: i > 4 ? p.faint : p.muted,\n                }}\n              >\n                {w.slice(0, 3)}\n              </div>\n            ))}\n          </div>\n          <div style={{ position: \"absolute\", inset: 0, opacity: linesOut }}>\n            {lines}\n          </div>\n          <div style={{ position: \"absolute\", left: 0, top: bodyTop }}>\n            {cells}\n          </div>\n        </div>\n\n        {/* accent ring → full stop */}\n        <svg\n          width={ringBox * 2}\n          height={ringBox * 2}\n          viewBox={`${-ringBox} ${-ringBox} ${ringBox * 2} ${ringBox * 2}`}\n          style={{\n            position: \"absolute\",\n            left: ringX - ringBox,\n            top: ringY - ringBox,\n            overflow: \"visible\",\n          }}\n          aria-hidden\n        >\n          <defs>\n            <linearGradient\n              id={ringId}\n              gradientUnits=\"userSpaceOnUse\"\n              x1={-ringBox}\n              y1={-ringBox}\n              x2={ringBox}\n              y2={ringBox}\n            >\n              <stop offset=\"8%\" stopColor={HALO[1]} />\n              <stop offset=\"50%\" stopColor={HALO[2]} />\n              <stop offset=\"92%\" stopColor={accent} />\n            </linearGradient>\n          </defs>\n          <circle\n            r={ringR}\n            fill=\"none\"\n            stroke={`url(#${ringId})`}\n            strokeWidth={ringW}\n            strokeLinecap=\"round\"\n            strokeDasharray={circ}\n            strokeDashoffset={circ * (1 - draw)}\n            transform=\"rotate(-118)\"\n          />\n        </svg>\n\n        {/* the launch day, in screen space so it can leave the grid */}\n        <div\n          style={{\n            position: \"absolute\",\n            left: heroX - F * 2,\n            top: heroY - F,\n            width: F * 4,\n            height: F * 2,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            fontFamily: sora,\n            fontWeight: heroWeight,\n            fontSize: heroFont,\n            lineHeight: 1,\n            letterSpacing: `${heroTrack}em`,\n            fontVariantNumeric: \"tabular-nums\",\n            color: p.fg,\n            opacity: heroAppear * heroLit,\n            filter:\n              dof > 0.05 && hand < 0.01 ? `blur(${dof * 0.15}px)` : undefined,\n          }}\n        >\n          {pad(launchDay)}\n        </div>\n\n        {/* the other half of the lockup, revealed from behind the full stop */}\n        <div\n          style={{\n            position: \"absolute\",\n            left: dayFirst ? cx + dotW / 2 : lockLeft,\n            top: lockCY - F,\n            width: groupW,\n            height: F * 2,\n            overflow: \"hidden\",\n          }}\n        >\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              fontFamily: sora,\n              fontWeight: 300,\n              fontSize: F,\n              lineHeight: 1,\n              letterSpacing: \"-0.06em\",\n              fontVariantNumeric: \"tabular-nums\",\n              color: p.fg,\n              opacity: other,\n              transform: `translateX(${(dayFirst ? -1 : 1) * (1 - other) * groupW * 0.55}px)`,\n            }}\n          >\n            {otherValue}\n          </div>\n        </div>\n\n        {/* label */}\n        <div\n          style={{\n            position: \"absolute\",\n            left: 0,\n            right: 0,\n            top: labelTop,\n            display: \"flex\",\n            justifyContent: \"center\",\n            alignItems: \"center\",\n            gap: 16 * u,\n            fontFamily: sora,\n            fontSize: 21 * u,\n            lineHeight: 1,\n          }}\n        >\n          <span\n            style={{\n              color: p.fg,\n              fontWeight: 500,\n              letterSpacing: \"-0.02em\",\n              opacity: labelP(0),\n              transform: `translateY(${(1 - labelP(0)) * 12 * u}px)`,\n            }}\n          >\n            {label}\n          </span>\n          <div\n            style={{\n              width: Math.max(1, u),\n              height: 20 * u,\n              background: p.line,\n              transform: `scaleY(${labelP(3)})`,\n            }}\n          />\n          <span\n            style={{\n              color: p.muted,\n              fontWeight: 400,\n              letterSpacing: \"-0.015em\",\n              fontVariantNumeric: \"tabular-nums\",\n              opacity: labelP(6),\n              transform: `translateY(${(1 - labelP(6)) * 12 * u}px)`,\n            }}\n          >\n            {fullDate}\n          </span>\n        </div>\n      </AbsoluteFill>\n      <Grain opacity={p.grain} />\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/launch-date.tsx"
    }
  ],
  "type": "registry:component"
}