{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-sequence",
  "title": "Stat Sequence",
  "description": "Three large stats count up in a row: 10,000+, 99.9% and 4.9.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "files": [
    {
      "path": "registry/remocn/stat-sequence/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont } from \"@remotion/google-fonts/Geist\";\nimport { loadFont as loadMono } from \"@remotion/google-fonts/GeistMono\";\nimport { loadFont as loadManrope } from \"@remotion/google-fonts/Manrope\";\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: sans } = loadFont(\"normal\", {\n  weights: [\"400\", \"500\"],\n  subsets: [\"latin\"],\n});\nconst { fontFamily: mono } = loadMono(\"normal\", {\n  weights: [\"400\"],\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 Stat {\n  /** The number itself, already formatted: \"10,000\", \"99.9\". */\n  value: string;\n  /** Set small and in the accent, top-aligned after the number: \"+\", \"%\", \"★\". */\n  unit?: string;\n  /** One or two words beside the number. */\n  label: string;\n  /** A muted qualifier under the label. */\n  detail?: string;\n}\n\nexport interface StatSequenceProps {\n  stats?: Stat[];\n  /** Product name in the corner lockup. */\n  name?: string;\n  /** Muted text after the lockup. */\n  eyebrow?: string;\n  /** Replaces the default remocn mark in the lockup. */\n  logo?: React.ReactNode;\n  /** Frames each stat owns before the next one cuts in. */\n  beat?: number;\n  accent?: string;\n  /** Playback multiplier. */\n  speed?: number;\n  theme?: \"dark\" | \"light\";\n}\n\nconst DEFAULT_STATS: Stat[] = [\n  {\n    value: \"10,000\",\n    unit: \"+\",\n    label: \"builders\",\n    detail: \"shipping videos every week\",\n  },\n  {\n    value: \"99.9\",\n    unit: \"%\",\n    label: \"uptime\",\n    detail: \"render API, last 12 months\",\n  },\n  { value: \"4.9\", unit: \"★\", label: \"rating\", detail: \"from 1,200 reviews\" },\n];\n\nconst EASE_IO = Easing.bezier(0.65, 0, 0.35, 1);\nconst EASE_OUT = Easing.bezier(0.22, 1, 0.36, 1);\n/** Ease-out that lands about 2% past the mark before settling. */\nconst EASE_LAND = Easing.bezier(0.2, 1.1, 0.36, 1);\nconst EASE_IN = Easing.bezier(0.55, 0, 0.9, 0.3);\nconst CLAMP = {\n  extrapolateLeft: \"clamp\",\n  extrapolateRight: \"clamp\",\n} as const;\n\nconst THEMES = {\n  dark: {\n    bg: \"#0A0A0B\",\n    fg: \"#F3F2EF\",\n    muted: \"#8B8A90\",\n    hair: \"rgba(255,255,255,0.13)\",\n    grain: 0.07,\n    /** gradients.sh \"mesh\" (#ecdcf2 #8796ee #2e45b7 #0e1645), lit from above. */\n    ink: \"linear-gradient(180deg, #F6EEF9 6%, #D4CDF4 40%, #9AA6F1 74%, #6F82EA 100%)\",\n    bar: \"linear-gradient(180deg, #ECDCF2, #8796EE 45%, #2E45B7)\",\n    mesh: [\n      \"radial-gradient(60% 75% at 22% 44%, rgba(46,69,183,0.30) 0%, transparent 68%)\",\n      \"radial-gradient(45% 60% at 8% 92%, rgba(135,150,238,0.10) 0%, transparent 68%)\",\n      \"radial-gradient(70% 80% at 30% 40%, rgba(14,22,69,0.85) 0%, transparent 70%)\",\n    ],\n  },\n  light: {\n    bg: \"#F5F4F0\",\n    fg: \"#121214\",\n    muted: \"#6E6C67\",\n    hair: \"rgba(18,18,20,0.13)\",\n    grain: 0.045,\n    /** the same \"mesh\" palette, inside the type on paper */\n    ink: \"linear-gradient(180deg, #5B6FE6 0%, #2E45B7 38%, #16205E 72%, #0E1645 100%)\",\n    bar: \"linear-gradient(180deg, #8796EE, #2E45B7 55%, #0E1645)\",\n    mesh: [\n      \"radial-gradient(55% 70% at 24% 44%, rgba(236,220,242,0.75) 0%, transparent 68%)\",\n      \"radial-gradient(45% 60% at 10% 90%, rgba(135,150,238,0.14) 0%, transparent 70%)\",\n      \"radial-gradient(70% 80% at 30% 40%, rgba(255,255,255,0.7) 0%, transparent 70%)\",\n    ],\n  },\n} as const;\n\ntype Theme = (typeof THEMES)[keyof typeof THEMES];\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 }}\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\nfunction Star({ size, color }: { size: number; color: string }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden>\n      <path\n        d=\"M12 2.2l2.95 6.2 6.8.86-4.98 4.7 1.27 6.74L12 17.4l-6.04 3.3 1.27-6.74-4.98-4.7 6.8-.86z\"\n        fill={color}\n        strokeLinejoin=\"round\"\n        stroke={color}\n        strokeWidth={0.8}\n      />\n    </svg>\n  );\n}\n\n/**\n * Per-glyph slot motion: each glyph rises from below the mask on `enter`,\n * leaves through the top on `exit`. Returns y in % of the line box and a\n * small blur while the glyph is travelling fast.\n */\nfunction glyph(\n  t: number,\n  i: number,\n  enter: number,\n  exit: number,\n  stagger: number,\n) {\n  const e = interpolate(\n    t,\n    [enter + i * stagger, enter + i * stagger + 12],\n    [0, 1],\n    { ...CLAMP, easing: EASE_LAND },\n  );\n  const x = interpolate(t, [exit + i * 0.4, exit + i * 0.4 + 5], [0, 1], {\n    ...CLAMP,\n    easing: EASE_IN,\n  });\n  const y = (1 - e) * 108 - x * 108;\n  const raw = interpolate(\n    t,\n    [enter + i * stagger, enter + i * stagger + 6],\n    [1, 0],\n    CLAMP,\n  );\n  const blur = raw + x * (1 - x) * 4;\n  return { y, blur, visible: e > 0 && x < 1 };\n}\n\nfunction SlotText({\n  text,\n  t,\n  enter,\n  exit,\n  stagger,\n  u,\n  style,\n  glyphStyle,\n}: {\n  text: string;\n  t: number;\n  enter: number;\n  exit: number;\n  stagger: number;\n  u: number;\n  style?: React.CSSProperties;\n  /** Per-glyph paint, e.g. a clip-text gradient (each glyph box is 1em tall). */\n  glyphStyle?: React.CSSProperties;\n}) {\n  return (\n    <span style={{ display: \"inline-flex\", whiteSpace: \"pre\", ...style }}>\n      {[...text].map((ch, i) => {\n        const g = glyph(t, i, enter, exit, stagger);\n        return (\n          <span\n            key={i}\n            style={{\n              display: \"inline-block\",\n              ...glyphStyle,\n              transform: `translateY(${g.y}%)`,\n              filter: g.blur > 0.05 ? `blur(${g.blur * 3 * u}px)` : undefined,\n              visibility: g.visible ? \"visible\" : \"hidden\",\n            }}\n          >\n            {ch}\n          </span>\n        );\n      })}\n    </span>\n  );\n}\n\n/** The monumental number + its small accent unit, inside one mask. */\nfunction Figure({\n  stat,\n  t,\n  enter,\n  exit,\n  size,\n  u,\n  c,\n  accent,\n}: {\n  stat: Stat;\n  t: number;\n  enter: number;\n  exit: number;\n  size: number;\n  u: number;\n  c: Theme;\n  accent: string;\n}) {\n  const unitIndex = [...stat.value].length;\n  const ug = glyph(t, unitIndex + 1, enter, exit, 1.6);\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"flex-start\",\n        overflow: \"hidden\",\n        padding: `${0.06 * size}px ${0.04 * size}px ${0.02 * size}px 0`,\n        fontFamily: sans,\n        fontWeight: 400,\n        fontSize: size,\n        lineHeight: 1,\n        letterSpacing: \"-0.042em\",\n        fontVariantNumeric: \"tabular-nums\",\n        color: c.fg,\n      }}\n    >\n      <SlotText\n        text={stat.value}\n        t={t}\n        enter={enter}\n        exit={exit}\n        stagger={1.6}\n        u={u}\n        glyphStyle={{\n          backgroundImage: c.ink,\n          backgroundSize: \"100% 100%\",\n          WebkitBackgroundClip: \"text\",\n          backgroundClip: \"text\",\n          color: \"transparent\",\n        }}\n      />\n      {stat.unit ? (\n        <span\n          style={{\n            display: \"inline-flex\",\n            marginLeft: 0.04 * size,\n            marginTop: 0.1 * size,\n            transform: `translateY(${ug.y * 2.2}%)`,\n            visibility: ug.visible ? \"visible\" : \"hidden\",\n            color: accent,\n            fontSize: 0.46 * size,\n            lineHeight: 1,\n            letterSpacing: 0,\n          }}\n        >\n          {stat.unit === \"★\" ? (\n            <Star size={0.42 * size} color={accent} />\n          ) : (\n            stat.unit\n          )}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\n/** Label + detail, each line rising through its own mask. */\nfunction Caption({\n  stat,\n  t,\n  enter,\n  exit,\n  labelSize,\n  detailSize = labelSize * 0.56,\n  c,\n}: {\n  stat: Stat;\n  t: number;\n  enter: number;\n  exit: number;\n  labelSize: number;\n  detailSize?: number;\n  c: Theme;\n}) {\n  const line = (k: number) => {\n    const e = interpolate(t, [enter + k * 3, enter + k * 3 + 14], [0, 1], {\n      ...CLAMP,\n      easing: EASE_OUT,\n    });\n    const x = interpolate(t, [exit + k, exit + k + 5], [0, 1], {\n      ...CLAMP,\n      easing: EASE_IN,\n    });\n    return `translateY(${(1 - e) * 110 - x * 110}%)`;\n  };\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 0.22 * labelSize,\n      }}\n    >\n      <div style={{ overflow: \"hidden\", paddingBottom: 0.12 * labelSize }}>\n        <div\n          style={{\n            transform: line(0),\n            fontFamily: sans,\n            fontWeight: 500,\n            fontSize: labelSize,\n            lineHeight: 1.05,\n            letterSpacing: \"-0.025em\",\n            color: c.fg,\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {stat.label}\n        </div>\n      </div>\n      {stat.detail ? (\n        <div style={{ overflow: \"hidden\", paddingBottom: 0.1 * labelSize }}>\n          <div\n            style={{\n              transform: line(1),\n              fontFamily: sans,\n              fontWeight: 400,\n              fontSize: detailSize,\n              lineHeight: 1.2,\n              letterSpacing: \"-0.005em\",\n              color: c.muted,\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {stat.detail}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport function StatSequence({\n  stats = DEFAULT_STATS,\n  name = \"remocn\",\n  eyebrow = \"in numbers\",\n  logo,\n  beat = 26,\n  accent = \"#3B5BFD\",\n  speed = 1,\n  theme = \"dark\",\n}: StatSequenceProps) {\n  const frame = useCurrentFrame();\n  const { width, height } = useVideoConfig();\n  const t = frame * speed;\n  const u = Math.min(width / 1280, height / 720);\n  const c = THEMES[theme];\n  const n = Math.max(1, stats.length);\n\n  const START = 8;\n  const inAt = (i: number) => START + i * beat;\n  const lastIn = inAt(n - 1);\n  const M = lastIn + 42; // the hero stat starts moving into the summary row\n  const MORPH = 24;\n\n  const F = 196 * u; // monumental size\n  const L = width * 0.08; // left rule of the frame\n  const pad = 30 * u;\n  const colW = (width - 2 * L) / n;\n  const S = Math.min(0.42, (colW - pad * 1.6) / (F * 3.4)); // summary scale\n  const bigTop = height / 2 - F * 0.6;\n  const rowTop = height / 2 - (F * S * 1.12 + 70 * u) / 2;\n\n  const mp = interpolate(t, [M, M + MORPH], [0, 1], {\n    ...CLAMP,\n    easing: EASE_IO,\n  });\n\n  // slow camera drift over the whole shot\n  const drift = interpolate(t, [0, M + MORPH + 40], [0, 1], CLAMP);\n\n  // accent bar: the cut marker. Grows from below on the first stat, swipes\n  // up-and-out / up-and-in on every cut, retires as the row assembles.\n  const barTop = bigTop + 0.18 * F;\n  const barH = 0.72 * F;\n  let barScale = interpolate(t, [inAt(0) - 2, inAt(0) + 10], [0, 1], {\n    ...CLAMP,\n    easing: EASE_OUT,\n  });\n  let barOrigin = \"bottom\";\n  for (let i = 1; i < n; i++) {\n    const cut = inAt(i);\n    if (t >= cut - 4 && t < cut + 1) {\n      barScale = interpolate(t, [cut - 4, cut + 1], [1, 0], {\n        ...CLAMP,\n        easing: EASE_IN,\n      });\n      barOrigin = \"top\";\n    } else if (t >= cut + 1 && t < cut + 10) {\n      barScale = interpolate(t, [cut + 1, cut + 10], [0, 1], {\n        ...CLAMP,\n        easing: EASE_OUT,\n      });\n      barOrigin = \"bottom\";\n    }\n  }\n  if (t >= M - 2) {\n    barScale = interpolate(t, [M - 2, M + 8], [1, 0], {\n      ...CLAMP,\n      easing: EASE_IN,\n    });\n    barOrigin = \"top\";\n  }\n\n  // index ticker, bottom left\n  const idxSize = 15 * u;\n\n  return (\n    <AbsoluteFill style={{ background: c.bg, overflow: \"hidden\" }}>\n      {/* mesh ground: three soft blobs that drift a few % over the shot */}\n      <AbsoluteFill\n        style={{\n          background: c.mesh.join(\", \"),\n          transform: `translate(${drift * 3}%, ${-drift * 2}%) scale(${1.04 + drift * 0.04})`,\n        }}\n      />\n\n      <AbsoluteFill\n        style={{\n          transform: `scale(${1 + drift * 0.025}) translateX(${-drift * 6 * u}px)`,\n          transformOrigin: \"40% 50%\",\n        }}\n      >\n        {/* corner lockup */}\n        <div\n          style={{\n            position: \"absolute\",\n            left: L,\n            top: 52 * u,\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 10 * u,\n            fontFamily: sans,\n            fontSize: 17 * u,\n            lineHeight: 1,\n            opacity: interpolate(t, [0, 12], [0, 1], CLAMP),\n            transform: `translateY(${interpolate(t, [0, 16], [8, 0], { ...CLAMP, easing: EASE_OUT }) * u}px)`,\n          }}\n        >\n          {logo ??\n            (name.trim().toLowerCase() === \"remocn\" ? (\n              <RemocnLogo fontSize={21 * u} color={c.fg} />\n            ) : (\n              <span\n                style={{\n                  color: c.fg,\n                  fontWeight: 500,\n                  fontSize: 19 * u,\n                  letterSpacing: \"-0.02em\",\n                }}\n              >\n                {name}\n              </span>\n            ))}\n          <span\n            style={{\n              width: Math.max(1, u),\n              height: 16 * u,\n              background: c.hair,\n              margin: `0 ${2 * u}px`,\n            }}\n          />\n          <span style={{ color: c.muted, fontWeight: 400 }}>{eyebrow}</span>\n        </div>\n\n        {/* the accent cut bar */}\n        <div\n          style={{\n            position: \"absolute\",\n            left: L,\n            top: barTop,\n            width: 5 * u,\n            height: barH,\n            borderRadius: 3 * u,\n            background: c.bar,\n            transform: `scaleY(${barScale})`,\n            transformOrigin: barOrigin,\n          }}\n        />\n\n        {/* one monumental stat at a time */}\n        {stats.map((stat, i) => {\n          const isLast = i === n - 1;\n          const enter = inAt(i);\n          const exit = isLast ? 1e9 : inAt(i + 1) - 5;\n          if (t < enter - 1 || t > exit + 14) return null;\n          const tx = isLast ? (n - 1) * colW * mp : 0;\n          const ty = isLast ? (rowTop - bigTop) * mp : 0;\n          const sc = isLast ? 1 + (S - 1) * mp : 1;\n          return (\n            <div\n              key={i}\n              style={{\n                position: \"absolute\",\n                left: L + pad,\n                top: bigTop,\n                display: \"flex\",\n                alignItems: \"flex-end\",\n                gap: 34 * u,\n                transformOrigin: \"0 0\",\n                transform: `translate(${tx}px, ${ty}px) scale(${sc})`,\n              }}\n            >\n              <Figure\n                stat={stat}\n                t={t}\n                enter={enter}\n                exit={exit}\n                size={F}\n                u={u}\n                c={c}\n                accent={accent}\n              />\n              <div style={{ paddingBottom: 0.2 * F }}>\n                <Caption\n                  stat={stat}\n                  t={t}\n                  enter={enter + 5}\n                  exit={isLast ? M - 6 : exit}\n                  labelSize={34 * u}\n                  c={c}\n                />\n              </div>\n            </div>\n          );\n        })}\n\n        {/* summary row: column rules, the other figures, labels below */}\n        {stats.map((stat, i) => {\n          const colLeft = L + i * colW;\n          const ruleP = interpolate(\n            t,\n            [M + 6 + i * 3, M + 24 + i * 3],\n            [0, 1],\n            { ...CLAMP, easing: EASE_OUT },\n          );\n          const isLast = i === n - 1;\n          const figEnter = M + 8 + i * 4;\n          return (\n            <div key={`row-${i}`}>\n              <div\n                style={{\n                  position: \"absolute\",\n                  left: colLeft,\n                  top: rowTop - 6 * u,\n                  width: Math.max(1, u),\n                  height: F * S + 120 * u,\n                  background: c.hair,\n                  transform: `scaleY(${ruleP})`,\n                  transformOrigin: \"top\",\n                }}\n              />\n              {!isLast && t >= figEnter - 1 ? (\n                <div\n                  style={{\n                    position: \"absolute\",\n                    left: colLeft + pad,\n                    top: rowTop,\n                    transformOrigin: \"0 0\",\n                    transform: `scale(${S})`,\n                  }}\n                >\n                  <Figure\n                    stat={stat}\n                    t={t}\n                    enter={figEnter}\n                    exit={1e9}\n                    size={F}\n                    u={u}\n                    c={c}\n                    accent={accent}\n                  />\n                </div>\n              ) : null}\n              <div\n                style={{\n                  position: \"absolute\",\n                  left: colLeft + pad,\n                  top: rowTop + F * S * 1.12 + 14 * u,\n                }}\n              >\n                <Caption\n                  stat={stat}\n                  t={t}\n                  enter={M + 16 + i * 4}\n                  exit={1e9}\n                  labelSize={22 * u}\n                  detailSize={15 * u}\n                  c={c}\n                />\n              </div>\n            </div>\n          );\n        })}\n\n        {/* index ticker */}\n        <div\n          style={{\n            position: \"absolute\",\n            left: L,\n            bottom: 48 * u,\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 8 * u,\n            fontFamily: mono,\n            fontWeight: 400,\n            fontSize: idxSize,\n            lineHeight: 1,\n            fontVariantNumeric: \"tabular-nums\",\n            color: c.muted,\n            opacity:\n              interpolate(t, [2, 12], [0, 1], CLAMP) *\n              interpolate(t, [M, M + 10], [1, 0], CLAMP),\n          }}\n        >\n          <span\n            style={{\n              position: \"relative\",\n              display: \"inline-block\",\n              overflow: \"hidden\",\n              height: idxSize * 1.15,\n              width: idxSize * 1.4,\n              color: c.fg,\n            }}\n          >\n            {stats.map((_, i) => (\n              <span\n                key={i}\n                style={{ position: \"absolute\", left: 0, top: idxSize * 0.06 }}\n              >\n                <SlotText\n                  text={String(i + 1).padStart(2, \"0\")}\n                  t={t}\n                  enter={i === 0 ? 2 : inAt(i)}\n                  exit={i === n - 1 ? 1e9 : inAt(i + 1) - 5}\n                  stagger={1}\n                  u={u * 0.3}\n                />\n              </span>\n            ))}\n          </span>\n          <span\n            style={{\n              width: 18 * u,\n              height: Math.max(1, u),\n              background: c.hair,\n            }}\n          />\n          <span>{String(n).padStart(2, \"0\")}</span>\n        </div>\n      </AbsoluteFill>\n\n      <Grain opacity={c.grain} />\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/stat-sequence.tsx"
    }
  ],
  "type": "registry:component"
}