hyperframes-slide-work-stat

Stat Slide (HyperFrames)

When to use

• When emphasizing performance, KPIs, or statistical figures
• When the number itself is the core of the message
• When showing 1–3 metrics on one screen

HTML structure

<div id="s-N" class="scene clip"
     data-start="..." data-duration="6" data-track-index="0">
  <div class="eyebrow">카테고리</div>
  <div class="scene-title">메인 타이틀</div>
  <div class="stats">
    <div class="stat" id="s-N-st1">
      <div class="num">120만</div>
      <div class="label">월간 활성 사용자</div>
    </div>
    <div class="stat" id="s-N-st2">
      <div class="num">40%</div>
      <div class="label">운영 비용 절감</div>
    </div>
    <div class="stat" id="s-N-st3">
      <div class="num">3.2s</div>
      <div class="label">평균 응답 시간</div>
    </div>
  </div>
</div>

CSS essentials

• .stats — display: grid; grid-template-columns: repeat(3, 1fr); gap: 48–64px; margin-top: 64px
  • For 2 metrics, repeat(2, 1fr), for 1, center align
• .stat — border-top: 2px solid rgba(...); padding-top: 32px; display: flex; flex-direction: column
• .stat .num — 110–140px, weight 800, line-height 1, negative letter-spacing, optional gradient text-clip
• .stat .label — 22–28px, weight 500, dim 색, line-height 1.4, margin-top: 18–20px
• Numbers font-variant-numeric: tabular-numsto strengthen alignment

GSAP entrance

const start = 22.4;
tl.from("#s-N .eyebrow",     { y: -15, opacity: 0, duration: 0.5, ease: "power3.out" }, start + 0.2);
tl.from("#s-N .scene-title", { y: 40,  opacity: 0, duration: 0.7, ease: "expo.out"   }, start + 0.4);
tl.from("#s-N-st1", { scale: 0.9, y: 30, opacity: 0, duration: 0.6, ease: "back.out(1.4)" }, start + 0.9);
tl.from("#s-N-st2", { scale: 0.9, y: 30, opacity: 0, duration: 0.6, ease: "back.out(1.4)" }, start + 1.1);
tl.from("#s-N-st3", { scale: 0.9, y: 30, opacity: 0, duration: 0.6, ease: "back.out(1.4)" }, start + 1.3);

• If the number itself needs to count up, gsap.to({ textContent: targetNumber, snap: { textContent: 1 } }) pattern can be added
• A simple fade-in is often enough — count up only deterministically

Visualization hints (optional)

Next to the number, bar/ring if auxiliary visualization is needed, as a separate DOM element:

<div class="stat-with-bar">
  <div class="num">120만</div>
  <div class="bar-track"><div class="bar-fill" style="width: 85%;"></div></div>
  <div class="label">월간 활성 사용자 · 목표 대비 85%</div>
</div>

• bar — horizontal progress bar, GSAP width: 0 → target% animation
• ring — SVG stroke-dasharray circular gauge with tween
• If not, the number alone is enough

Selection criteria

• % 값 → ring (intuitively express percentages)
• Size/amount/speed comparison → bar
• Single value emphasis → number only, no visualization

Markdown detection rules (when building a generator)

# [성과] 서비스 성장 지표

$ 120만
월간 활성 사용자

$ 40%
비용 절감률

• $ The line starting with is the number (value)
• The immediately following line is the description (label)
• Separate metrics with a blank line

Visualization hint:

$ 120만 [bar:85]
월간 활성 사용자

$ 40% [ring:40]
운영 비용 절감

Writing principles

• Numbers short and impactful (1.2M, 40%, 3.2s)
• Keep descriptions to one line
• 1–3 is appropriate — if 4 or more, splitor title-bulletsswitch to
• Including units in numbers makes them easier to read