{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timing-tower",
  "title": "Timing Tower",
  "description": "A racing timing tower reorders until the hero car sits at a big P1 with a gap time.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "files": [
    {
      "path": "registry/remocn/timing-tower/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont as loadMono } from \"@remotion/google-fonts/GeistMono\";\nimport { loadFont as loadManrope } from \"@remotion/google-fonts/Manrope\";\nimport { loadFont } from \"@remotion/google-fonts/Saira\";\nimport type React from \"react\";\nimport {\n  AbsoluteFill,\n  Easing,\n  interpolate,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nconst { fontFamily: saira } = loadFont(\"normal\", {\n  weights: [\"400\", \"500\"],\n  subsets: [\"latin\"],\n});\nconst { fontFamily: mono } = loadMono(\"normal\", {\n  weights: [\"400\", \"500\"],\n  subsets: [\"latin\"],\n});\nconst manrope = loadManrope(\"normal\", {\n  weights: [\"600\"],\n  subsets: [\"latin\"],\n});\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\n/** Full logo as on remocn.dev: R mark (0.76em tall, baseline-aligned) + \"emocn\" in Manrope 600. */\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\nexport interface TimingTowerProps {\n  /** Three-letter code of the hero car, the one that climbs to P1. */\n  code?: string;\n  /** The nine other cars, leader first. The hero starts behind the seventh. */\n  field?: string[];\n  /** Lap the tower opens on. One lap ticks per overtake. */\n  lap?: number;\n  /** Race distance shown after the slash in the lap counter. */\n  laps?: number;\n  /** The poster's interval to P2. */\n  interval?: string;\n  /** Small label over the poster interval. */\n  intervalLabel?: string;\n  /** The live dot in the tower header. */\n  accent?: string;\n  theme?: \"dark\" | \"light\";\n  speed?: number;\n}\n\n// Beat sheet (internal clock = frame + 4, 30fps, speed 1):\n//   0–16   the tower wipes in from the left edge, header first, rows staggered\n//          2 frames apart; the giant \"P8\" rises on the right\n//  14–93   seven laps, one every ~11 frames, the gaps rewriting on each tick:\n//          the hero swaps up one row per lap (9-frame eased swap, nudged out\n//          of line while it passes), the row and the giant numeral flash the\n//          aurora \"personal best\" green, the numeral rolls to the new place;\n//          a few other cars swap behind it so the whole tower lives\n//  93      P1: the hero row and the numeral turn aurora purple for good\n// 110–130  the tower peels off to the left, bottom row first; the numeral\n//          slides left and the code, team logo and interval wipe in beside it\n// 130–     poster hold: \"P1 · RMC\" with the interval counted up to +12.408\nconst LAP_AT = [14, 28, 41, 53, 64, 74, 84];\nconst SWAP = 9;\nconst EXIT_AT = 110;\n\nconst EASE = Easing.bezier(0.22, 1, 0.36, 1);\nconst SWAP_EASE = Easing.bezier(0.65, 0, 0.35, 1);\nconst EXIT_EASE = Easing.bezier(0.55, 0, 0.85, 0.35);\nconst MOVE = Easing.bezier(0.7, 0, 0.2, 1);\nconst CLAMP = {\n  extrapolateLeft: \"clamp\",\n  extrapolateRight: \"clamp\",\n} as const;\n\n// gradients.sh \"aurora\": bg #03050b, #a0f0c8 #3fb5a3 #5147b6 #b25c9c.\nconst AURORA = [\"#A0F0C8\", \"#3FB5A3\", \"#5147B6\", \"#B25C9C\"] as const;\nconst GREEN = `linear-gradient(180deg, ${AURORA[0]} 0%, ${AURORA[1]} 100%)`;\nconst PURPLE = `linear-gradient(165deg, ${AURORA[3]} 0%, #7A4FB8 45%, ${AURORA[2]} 100%)`;\n\nconst THEMES = {\n  dark: {\n    stage: \"#0A0A0B\",\n    row: \"#141417\",\n    rowEdge: \"#1F1F23\",\n    pos: \"#F3F2EF\",\n    posInk: \"#0A0A0B\",\n    head: \"#1C1C20\",\n    ink: \"#F3F2EF\",\n    dim: \"#8A8990\",\n    faint: \"#3A3A40\",\n    stripes: [\"#6E6D74\", \"#4E4D54\", \"#9A99A0\", \"#5E5D64\", \"#3E3D44\"],\n    greenInk: AURORA[0],\n    ground: 1,\n  },\n  light: {\n    stage: \"#F5F4F0\",\n    row: \"#FFFFFF\",\n    rowEdge: \"#E6E4DE\",\n    pos: \"#121214\",\n    posInk: \"#F5F4F0\",\n    head: \"#121214\",\n    ink: \"#121214\",\n    dim: \"#7E7D77\",\n    faint: \"#C9C7C0\",\n    stripes: [\"#9A9993\", \"#BDBBB4\", \"#6E6D68\", \"#AEACA5\", \"#85847E\"],\n    greenInk: \"#1F8C7B\",\n    ground: 0.55,\n  },\n} as const;\n\nfunction ramp(t: number, from: number, len: number) {\n  return interpolate(t, [from, from + len], [0, 1], CLAMP);\n}\n\n/** Up in 1 frame, eases back over `len`. */\nfunction flash(d: number, len: number) {\n  if (d < 0 || d > len + 1) return 0;\n  if (d < 1) return d;\n  const k = 1 - (d - 1) / len;\n  return k * k;\n}\n\nfunction hash(n: number) {\n  const s = Math.sin(n * 127.1 + 311.7) * 43758.5453;\n  return s - Math.floor(s);\n}\n\n// Swaps per lap, as slot pairs (0 = P1). The first pair of every lap is the\n// hero passing the car ahead; the rest shuffle the field behind it.\nconst SWAPS: number[][][] = [\n  [[6, 7]],\n  [\n    [5, 6],\n    [2, 3],\n  ],\n  [\n    [4, 5],\n    [8, 9],\n  ],\n  [[3, 4]],\n  [\n    [2, 3],\n    [6, 7],\n  ],\n  [[1, 2]],\n  [\n    [0, 1],\n    [8, 9],\n  ],\n];\n\nexport function TimingTower({\n  code = \"RMC\",\n  field = [\"KRV\", \"DLA\", \"MTS\", \"BRN\", \"OKO\", \"VAL\", \"PIR\", \"SAN\", \"TOR\"],\n  lap = 41,\n  laps = 58,\n  interval = \"+12.408\",\n  intervalLabel = \"Gap to P2\",\n  accent = \"#3B5BFD\",\n  theme = \"dark\",\n  speed = 1,\n}: TimingTowerProps) {\n  // Starts four frames in, so frame 0 already shows the tower wiping in.\n  const t = useCurrentFrame() * speed + 4;\n  const { width: W, height: H } = useVideoConfig();\n  const c = THEMES[theme];\n  const u = Math.min(W / 1280, H / 720);\n\n  // ── Orders per lap ────────────────────────────────────────────────────────\n  const cars = [...field.slice(0, 7), code, ...field.slice(7, 9)];\n  const hero = 7;\n  const orders: number[][] = [cars.map((_, i) => i)];\n  for (const pairs of SWAPS) {\n    const next = [...orders[orders.length - 1]];\n    for (const [a, b] of pairs) {\n      const tmp = next[a];\n      next[a] = next[b];\n      next[b] = tmp;\n    }\n    orders.push(next);\n  }\n  let k = 0;\n  while (k < LAP_AT.length && t >= LAP_AT[k]) k++;\n  const from = orders[Math.max(0, k - 1)];\n  const to = orders[k];\n  const swapP = k === 0 ? 1 : SWAP_EASE(ramp(t, LAP_AT[k - 1], SWAP));\n  const slotIn = (order: number[], car: number) => order.indexOf(car);\n  const heroSlot = slotIn(to, hero);\n  const heroPos = heroSlot + 1;\n  const p1At = LAP_AT[LAP_AT.length - 1];\n  const p1 = SWAP_EASE(ramp(t, p1At + SWAP - 1, 6));\n\n  // ── Layout ────────────────────────────────────────────────────────────────\n  const towerX = 64 * u;\n  const towerW = 388 * u;\n  const headH = 58 * u;\n  const pitch = 50 * u;\n  const rowH = 46 * u;\n  const towerY = (H - (headH + 8 * u + 10 * pitch - (pitch - rowH))) / 2;\n  const rowsY = towerY + headH + 8 * u;\n  const posW = 50 * u;\n\n  const enter = (delay: number) => EASE(ramp(t, delay, 9));\n  const exitP = (slot: number) =>\n    EXIT_EASE(ramp(t, EXIT_AT + (9 - slot) * 0.8, 9));\n  const exitDX = towerX + towerW + 60 * u;\n\n  const lapNow = lap + k;\n  const lapFlash = k > 0 ? flash(t - LAP_AT[k - 1], 8) : 0;\n\n  // Interval to the car ahead: rewritten every lap, leader shows \"Leader\".\n  const gapText = (slot: number) => {\n    if (slot === 0) return \"Leader\";\n    const v = 0.18 + 1.6 * hash(slot * 13.1 + k * 7.7);\n    return `+${v.toFixed(3)}`;\n  };\n\n  // Hero flash on every pass.\n  const passFlash = LAP_AT.reduce(\n    (a, at) => Math.max(a, flash(t - at - 3, 12)),\n    0,\n  );\n\n  // ── Giant numeral & poster ────────────────────────────────────────────────\n  const giantFs = 400 * u;\n  const cellW = 0.58 * giantFs;\n  const posterP = MOVE(ramp(t, EXIT_AT + 7, 18));\n  const blockIn = (d: number) => EASE(ramp(t, EXIT_AT + 15 + d, 12));\n  const giantShift = (1 - posterP) * 420 * u;\n  const giantIn = EASE(ramp(t, 6, 12));\n  const intervalNum = Number.parseFloat(interval.replace(/[^0-9.]/g, \"\")) || 0;\n  const decimals = (interval.split(\".\")[1] ?? \"\").length;\n  const countP = Easing.bezier(0.22, 1, 0.36, 1)(ramp(t, EXIT_AT + 19, 18));\n  const intervalText = `${interval.trim().startsWith(\"-\") ? \"−\" : \"+\"}${(intervalNum * countP).toFixed(decimals)}`;\n\n  // Which digit is rolling in the giant numeral.\n  const lastPass = k > 0 ? LAP_AT[k - 1] : -100;\n  const rollP = SWAP_EASE(ramp(t, lastPass + 2, 8));\n  const prevPos = k > 0 ? slotIn(from, hero) + 1 : heroPos;\n\n  // One glyph, stacked: ink, then the green flash and the purple P1 fill as\n  // clip-text copies on top (each glyph clips its own gradient).\n  const glyph = (ch: string | number) => {\n    const fills: [string, number][] = [\n      [GREEN, passFlash * (1 - p1)],\n      [PURPLE, p1],\n    ];\n    return (\n      <span style={{ position: \"relative\", display: \"inline-block\" }}>\n        <span style={{ color: c.ink, opacity: 1 - p1 }}>{ch}</span>\n        {fills.map(([fill, op]) =>\n          op > 0 ? (\n            <span\n              key={fill}\n              style={{\n                position: \"absolute\",\n                left: 0,\n                top: 0,\n                opacity: op,\n                backgroundImage: fill,\n                WebkitBackgroundClip: \"text\",\n                backgroundClip: \"text\",\n                color: \"transparent\",\n              }}\n            >\n              {ch}\n            </span>\n          ) : null,\n        )}\n      </span>\n    );\n  };\n\n  const digitLayer = (n: number, y: number, key: string) => (\n    <div\n      key={key}\n      style={{\n        position: \"absolute\",\n        left: 0,\n        top: 0,\n        width: cellW,\n        height: giantFs,\n        transform: `translateY(${y}px)`,\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n      }}\n    >\n      {glyph(n)}\n    </div>\n  );\n\n  const giantText = (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        fontFamily: saira,\n        fontWeight: 500,\n        fontSize: giantFs,\n        lineHeight: 1,\n        letterSpacing: \"-0.03em\",\n        fontVariantNumeric: \"tabular-nums\",\n      }}\n    >\n      {glyph(\"P\")}\n      <div\n        style={{\n          position: \"relative\",\n          width: cellW,\n          height: giantFs,\n          overflow: \"hidden\",\n          marginLeft: -0.02 * giantFs,\n        }}\n      >\n        {rollP < 1 && prevPos !== heroPos\n          ? [\n              digitLayer(prevPos, -rollP * giantFs, \"out\"),\n              digitLayer(heroPos, (1 - rollP) * giantFs, \"in\"),\n            ]\n          : digitLayer(heroPos, 0, \"now\")}\n      </div>\n    </div>\n  );\n\n  const giantW = 0.62 * giantFs + cellW;\n\n  // Aurora ground under the poster, gently drifting.\n  const drift = interpolate(t, [0, 165], [0, 8], CLAMP);\n  const ground = [\n    `radial-gradient(34% 60% at ${62 - drift}% 30%, color-mix(in oklab, ${AURORA[3]} 55%, transparent) 0%, transparent 70%)`,\n    `radial-gradient(34% 60% at ${84 - drift}% 38%, color-mix(in oklab, ${AURORA[2]} 65%, transparent) 0%, transparent 70%)`,\n    `radial-gradient(30% 55% at ${30 + drift}% 34%, color-mix(in oklab, ${AURORA[1]} 35%, transparent) 0%, transparent 70%)`,\n    `linear-gradient(180deg, transparent 40%, color-mix(in oklab, ${AURORA[2]} 30%, transparent) 72%, transparent 100%)`,\n  ].join(\", \");\n  const groundOp = c.ground * (0.25 * giantIn + 0.75 * p1);\n\n  // Rows, hero rendered last so it passes over the others.\n  const drawOrder = cars.map((_, i) => i).filter((i) => i !== hero);\n  drawOrder.push(hero);\n\n  const rows = drawOrder.map((car) => {\n    const a = slotIn(from, car);\n    const b = slotIn(to, car);\n    const slot = a + (b - a) * swapP;\n    const settled = b;\n    const isHero = car === hero;\n    const passing = a !== b && b < a ? Math.sin(Math.PI * swapP) : 0;\n    const ent = enter(3 + settled * 1.2);\n    const ex = exitP(settled);\n    const x = towerX - (1 - ent) * (towerW + towerX) - ex * exitDX;\n    const y = rowsY + slot * pitch;\n    const stripe = isHero ? PURPLE : c.stripes[(car * 3) % c.stripes.length];\n    return (\n      <div\n        key={cars[car]}\n        style={{\n          position: \"absolute\",\n          left: x + posW + 4 * u + passing * 14 * u,\n          top: y,\n          width: towerW - posW - 4 * u,\n          height: rowH,\n          background: c.row,\n          boxShadow: `inset 0 0 0 ${1 * u}px ${c.rowEdge}`,\n          display: \"flex\",\n          alignItems: \"center\",\n          overflow: \"hidden\",\n        }}\n      >\n        {isHero ? (\n          <>\n            <div\n              style={{\n                position: \"absolute\",\n                inset: 0,\n                background: `linear-gradient(90deg, ${AURORA[1]} 0%, color-mix(in oklab, ${AURORA[1]} 25%, transparent) 100%)`,\n                opacity: passFlash * (1 - p1) * 0.85,\n              }}\n            />\n            <div\n              style={{\n                position: \"absolute\",\n                inset: 0,\n                background: `linear-gradient(90deg, ${AURORA[3]} 0%, #7A4FB8 40%, ${AURORA[2]} 100%)`,\n                clipPath: `inset(0 ${(1 - p1) * 100}% 0 0)`,\n              }}\n            />\n          </>\n        ) : null}\n        <div\n          style={{\n            position: \"relative\",\n            width: 6 * u,\n            height: rowH - 16 * u,\n            marginLeft: 12 * u,\n            background: isHero ? GREEN : stripe,\n            flexShrink: 0,\n          }}\n        />\n        <div\n          style={{\n            position: \"relative\",\n            marginLeft: 14 * u,\n            fontFamily: saira,\n            fontWeight: 500,\n            fontSize: 27 * u,\n            letterSpacing: \"0.06em\",\n            color: isHero && (p1 > 0.5 || passFlash > 0.4) ? \"#FFFFFF\" : c.ink,\n            flex: 1,\n            paddingTop: 1 * u,\n          }}\n        >\n          {cars[car]}\n        </div>\n        <div\n          style={{\n            position: \"relative\",\n            marginRight: 18 * u,\n            fontFamily: saira,\n            fontWeight: 400,\n            fontSize: 22 * u,\n            fontVariantNumeric: \"tabular-nums\",\n            letterSpacing: settled === 0 ? \"0.08em\" : \"0.01em\",\n            textTransform: \"uppercase\",\n            color: isHero && p1 > 0.5 ? \"#FFFFFF\" : c.dim,\n          }}\n        >\n          {gapText(settled)}\n        </div>\n      </div>\n    );\n  });\n\n  // Position boxes stay put; the cars move past them.\n  const posBoxes = cars.map((_, s) => {\n    const ent = enter(3 + s * 1.2);\n    const ex = exitP(s);\n    return (\n      <div\n        key={`pos-${s + 1}`}\n        style={{\n          position: \"absolute\",\n          left: towerX - (1 - ent) * (towerW + towerX) - ex * exitDX,\n          top: rowsY + s * pitch,\n          width: posW,\n          height: rowH,\n          background: c.pos,\n          color: c.posInk,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          fontFamily: saira,\n          fontWeight: 500,\n          fontSize: 25 * u,\n          fontVariantNumeric: \"tabular-nums\",\n        }}\n      >\n        {s + 1}\n      </div>\n    );\n  });\n\n  const headEnt = enter(0);\n  const headEx = exitP(-1);\n\n  const label: React.CSSProperties = {\n    fontFamily: mono,\n    fontWeight: 500,\n    fontSize: 16 * u,\n    letterSpacing: \"0.14em\",\n    textTransform: \"uppercase\",\n    color: c.dim,\n  };\n\n  return (\n    <AbsoluteFill style={{ background: c.stage, overflow: \"hidden\" }}>\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: ground,\n          opacity: groundOp,\n        }}\n      />\n\n      {/* Tower header: lap counter. */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: towerX - (1 - headEnt) * (towerW + towerX) - headEx * exitDX,\n          top: towerY,\n          width: towerW,\n          height: headH,\n          background: c.head,\n          display: \"flex\",\n          alignItems: \"center\",\n          paddingLeft: 18 * u,\n          paddingRight: 18 * u,\n          gap: 12 * u,\n          overflow: \"hidden\",\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            left: 0,\n            top: 0,\n            right: 0,\n            height: 4 * u,\n            background: `linear-gradient(90deg, ${AURORA[0]} 0%, ${AURORA[1]} 35%, ${AURORA[2]} 70%, ${AURORA[3]} 100%)`,\n          }}\n        />\n        <div\n          style={{\n            width: 9 * u,\n            height: 9 * u,\n            background: accent,\n            opacity: Math.floor(t / 15) % 2 === 0 ? 1 : 0.35,\n          }}\n        />\n        <div\n          style={{\n            fontFamily: saira,\n            fontWeight: 500,\n            fontSize: 26 * u,\n            letterSpacing: \"0.08em\",\n            color: \"#F3F2EF\",\n            flex: 1,\n            paddingTop: 2 * u,\n          }}\n        >\n          LAP{\" \"}\n          <span\n            style={{\n              fontVariantNumeric: \"tabular-nums\",\n              color: lapFlash > 0.3 ? AURORA[0] : \"#F3F2EF\",\n            }}\n          >\n            {lapNow}\n          </span>\n          <span style={{ color: \"#8A8990\" }}>/{laps}</span>\n        </div>\n        <div style={{ ...label, color: \"#8A8990\", fontSize: 13 * u }}>\n          Interval\n        </div>\n      </div>\n\n      {posBoxes}\n      {rows}\n\n      {/* Giant numeral; slides left into the poster with the info block. */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 52 * u,\n            transform: `translateX(${giantShift}px)`,\n          }}\n        >\n          <div\n            style={{\n              position: \"relative\",\n              width: giantW,\n              height: giantFs,\n              transform: `translateY(${(1 - giantIn) * 60 * u}px)`,\n              opacity: giantIn,\n            }}\n          >\n            <div\n              style={{\n                ...label,\n                position: \"absolute\",\n                left: 0.02 * giantFs,\n                top: 0.06 * giantFs,\n                opacity: 1 - posterP,\n              }}\n            >\n              {code} · Position\n            </div>\n            {giantText}\n          </div>\n\n          {/* Poster block: code, team, interval. */}\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"flex-start\",\n              width: 400 * u,\n            }}\n          >\n            <div style={{ overflow: \"hidden\" }}>\n              <div\n                style={{\n                  fontFamily: saira,\n                  fontWeight: 500,\n                  fontSize: 150 * u,\n                  lineHeight: 0.9,\n                  letterSpacing: \"0.02em\",\n                  color: c.ink,\n                  transform: `translateY(${(1 - blockIn(0)) * 100}%)`,\n                }}\n              >\n                {code}\n              </div>\n            </div>\n            <div\n              style={{\n                marginTop: 18 * u,\n                opacity: blockIn(3),\n                transform: `translateX(${(1 - blockIn(3)) * -30 * u}px)`,\n              }}\n            >\n              <RemocnLogo fontSize={46 * u} color={c.ink} />\n            </div>\n            <div\n              style={{\n                marginTop: 34 * u,\n                width: 360 * u,\n                height: 2 * u,\n                background: c.faint,\n                transformOrigin: \"0 0\",\n                transform: `scaleX(${blockIn(5)})`,\n              }}\n            />\n            <div\n              style={{\n                ...label,\n                marginTop: 16 * u,\n                opacity: blockIn(6),\n              }}\n            >\n              {intervalLabel}\n            </div>\n            <div\n              style={{\n                marginTop: 4 * u,\n                fontFamily: saira,\n                fontWeight: 500,\n                fontSize: 78 * u,\n                lineHeight: 1,\n                letterSpacing: \"-0.01em\",\n                fontVariantNumeric: \"tabular-nums\",\n                color: c.greenInk,\n                opacity: blockIn(6),\n                transform: `translateX(${(1 - blockIn(6)) * -30 * u}px)`,\n              }}\n            >\n              {intervalText}\n            </div>\n          </div>\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/timing-tower.tsx"
    }
  ],
  "type": "registry:component"
}