hyperframes-card-news-work-stat

Card News Work: Stat

Role

statis a card that builds a message with a single number. Use it only when numbers are central, such as years, quantities, ratios, rankings, and periods.

Allowed classes:

<div id="c-N" class="card clip stat-card"
     data-start="..." data-duration="5" data-track-index="0">

Structure

<div id="c-N" class="card clip stat-card"
     data-start="10" data-duration="5" data-track-index="0">
  <div class="eyebrow">By the Numbers</div>
  <div class="stat-num">1,000<span class="stat-unit">+</span></div>
  <div class="stat-label">핵심 지표 라벨</div>
  <div class="stat-desc">지표를 설명하는 한 줄. 출처·기간이 필요하면 여기에 넣는다.</div>
  <div class="page-indicator">03 · 08</div>
</div>

Content rules

• Place only one number per card.
• stat-numis recommended to be around 8 characters max. If long, separate the unit into stat-unit.
• stat-labelis one message, 1-2 lines.
• stat-descis supporting context, 1-2 sentences.
• For chronological explanations where numbers are not central, send to image-featureor rewrite the sentence to be number-centered.

CSS rules

.card.stat-card {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 96px 72px;
}
.stat-num {
  font-size: 160px;
  font-weight: 820;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  font-size: 58px;
  font-weight: 620;
}
.stat-label {
  margin-top: 38px;
  font-size: 56-64px;
  font-weight: 760-820;
  line-height: 1.08;
  letter-spacing: -0.019em;
}
.stat-desc {
  margin-top: 24px;
  font-size: 28-32px;
  line-height: 1.38-1.45;
}

Variations

• light: background: #f5f5f7, text #1d1d1f.
• dark: class="card clip stat-card dark" possible. However, data-skillis still stat.
• In the brand style, use CTA blue sparingly for buttons/links rather than for number emphasis. Use it limitedly only for the degree of number units.

GSAP

tl.from("#c-N .eyebrow", { y: -15, opacity: 0, duration: 0.5, ease: "power3.out" }, s + 0.2);
tl.from("#c-N .stat-num", { scale: 0.88, opacity: 0, duration: 0.8, ease: "back.out(1.4)" }, s + 0.5);
tl.from("#c-N .stat-label", { y: 22, opacity: 0, duration: 0.65, ease: "power2.out" }, s + 1.1);
tl.from("#c-N .stat-desc", { y: 16, opacity: 0, duration: 0.55, ease: "power2.out" }, s + 1.5);
tl.from("#c-N .page-indicator", { opacity: 0, duration: 0.4, ease: "power2.out" }, s + 2.0);

Checks

• data-skill="stat"record in overview as
• emphasize only one number
• description supports the number
• does not degenerate into long paragraphs or bullet lists