hyperframes/docs/catalog/blocks/mk-progress-stat.mdx

---
title: "Count-Up Stat Card"
description: "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes"
---

import { InstallCommand } from "/snippets/install-command.jsx";

## Install

<InstallCommand command="npx hyperframes add mk-progress-stat" item="mk-progress-stat" />

That writes one file: `compositions/mk-progress-stat.html`.

<iframe
  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
  title="mk-progress-stat preview"
  loading="lazy"
  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-progress-stat.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png");document.body.appendChild(p)});<\/script></body></html>`}
/>

## Add it to your video

It runs for 7 seconds at 1920×1080. Paste this into your composition:

```html index.html
<div
  data-composition-id="mk-progress-stat"
  data-composition-src="compositions/mk-progress-stat.html"
  data-start="0"
  data-duration="7"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>
```

Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.

## Source

<Accordion title="mk-progress-stat.html">

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background: transparent;
        overflow: hidden;
      }
      #mk-ps-root {
        /* ---- mk tokens: override in the host to re-skin the family ---- */
        --mk-font: "Inter", -apple-system, sans-serif;
        --mk-ink: #1d1d1f;
        --mk-ink-dim: #6e6e73;
        --mk-ink-dark: #f5f5f7;
        --mk-ink-dim-dark: #a1a1a6;
        --mk-accent: #0071e3;
        --mk-accent-dark: #7d5cff;

        position: relative;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background: transparent; /* overlays footage or mk-background */
      }
      #mk-ps-group {
        position: absolute;
        font-family: var(--mk-font);
      }
      #mk-ps-num {
        font-weight: 600;
        font-size: 190px;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--mk-ink);
        font-variant-numeric: tabular-nums;
      }
      #mk-ps-label {
        margin-top: 10px;
        font-weight: 500;
        font-size: 42px;
        letter-spacing: -0.01em;
        color: var(--mk-ink);
      }
      #mk-ps-track {
        position: relative;
        margin-top: 28px;
        height: 6px;
        border-radius: 3px;
        background: rgba(29, 29, 31, 0.1);
        overflow: hidden;
      }
      #mk-ps-fill {
        position: absolute;
        inset: 0;
        border-radius: 3px;
        background: var(--mk-accent);
        transform-origin: left center;
      }
      #mk-ps-caption {
        margin-top: 22px;
        font-weight: 400;
        font-size: 30px;
        color: var(--mk-ink-dim);
      }
      .mk-dark #mk-ps-num,
      .mk-dark #mk-ps-label {
        color: var(--mk-ink-dark);
      }
      .mk-dark #mk-ps-caption {
        color: var(--mk-ink-dim-dark);
      }
      .mk-dark #mk-ps-track {
        background: rgba(245, 245, 247, 0.18);
      }
      .mk-dark #mk-ps-fill {
        background: var(--mk-accent-dark);
      }
    </style>
  </head>
  <body>
    <div
      id="mk-ps-root"
      data-composition-id="mk-progress-stat"
      data-start="0"
      data-duration="7"
      data-width="1920"
      data-height="1080"
    >
      <div id="mk-ps-group">
        <div id="mk-ps-num">0</div>
        <div id="mk-ps-label"></div>
        <div id="mk-ps-track"><div id="mk-ps-fill"></div></div>
        <div id="mk-ps-caption"></div>
      </div>
      <div
        id="mk-ps-drv"
        class="clip"
        data-start="0"
        data-duration="7"
        data-track-index="0"
        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
      ></div>
    </div>
    <script>
      (function () {
        window.__timelines = window.__timelines || {};

        /* ---- published parameters (inspector-style CONFIG) ----
           A "22 · Goals reached" progress card: big count-up
           numeral, label, thin accent track filling to value/max, caption. */
        var CONFIG = {
          scheme: "light", // "light" | "dark"
          value: 22,
          suffix: "", // e.g. "%", "K"
          label: "Goals reached",
          caption: "Great job, we are getting closer!",
          max: 30, // track fills to value/max
          trackWidth: 480, // px
          x: 1300, // group left edge; null = centered
          y: 250, // group top edge; null = centered
          animationIn: true,
          animationOut: true,
        };

        var DUR = 7;
        var root = document.getElementById("mk-ps-root");
        var group = document.getElementById("mk-ps-group");
        var num = document.getElementById("mk-ps-num");
        var fill = document.getElementById("mk-ps-fill");

        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
        document.getElementById("mk-ps-label").textContent = CONFIG.label;
        document.getElementById("mk-ps-caption").textContent = CONFIG.caption;
        document.getElementById("mk-ps-track").style.width = CONFIG.trackWidth + "px";

        /* position (measure after filling text) */
        var rect = group.getBoundingClientRect();
        group.style.left =
          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
        group.style.top =
          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";

        var tl = gsap.timeline({ paused: true });

        if (CONFIG.animationIn) {
          gsap.set(group, { opacity: 0, y: 28 });
          tl.to(group, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);
        }

        /* count-up + track fill on the same ease (the data-viz recipe) */
        var st = { v: 0 };
        tl.to(
          st,
          {
            v: CONFIG.value,
            duration: 1.6,
            ease: "power2.out",
            onUpdate: function () {
              num.textContent = Math.round(st.v) + CONFIG.suffix;
            },
          },
          0.5,
        );
        gsap.set(fill, { scaleX: 0 });
        tl.to(fill, { scaleX: CONFIG.value / CONFIG.max, duration: 1.6, ease: "power2.out" }, 0.5);

        if (CONFIG.animationOut) {
          tl.to(group, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
        }
        tl.set(root, { visibility: "hidden" }, DUR - 0.02);

        window.__timelines["mk-progress-stat"] = tl;
      })();
    </script>
  </body>
</html>
```

</Accordion>

{/* hf:generated-footer */}

Tagged `data-viz` `stat` `minimal`.

## Related topics

- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)