04Counter trigger

<main class="stage">
  <section class="cu is-demo" id="cu" aria-label="Counter trigger">
    <header class="cu__head">
      <p class="cu__title">Counter trigger</p>
      <p class="cu__attr"><code>requestAnimationFrame</code></p>
    </header>
    <div class="cu__view" id="cu-view" tabindex="0" role="region" aria-label="Stats block — try scrolling">
      <div class="cu__track">
        <p class="cu__lead">Scroll down and the number counts up</p>
        <article class="cu__card" id="cu-card">
          <p class="cu__cap">Projects completed</p>
          <p class="cu__num">
            <b class="cu__numcur" id="cu-num">0</b><span class="cu__tape" aria-hidden="true"><i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i><i>10</i><i>11</i><i>12</i><i>13</i><i>14</i><i>15</i><i>16</i><i>17</i><i>18</i><i>19</i><i>20</i><i>21</i><i>22</i><i>23</i><i>24</i><i>25</i><i>26</i><i>27</i><i>28</i><i>29</i><i>30</i><i>31</i><i>32</i><i>33</i><i>34</i><i>35</i><i>36</i><i>37</i><i>38</i><i>39</i><i>40</i><i>41</i><i>42</i><i>43</i><i>44</i><i>45</i><i>46</i><i>47</i><i>48</i><i>49</i><i>50</i><i>51</i><i>52</i><i>53</i><i>54</i><i>55</i><i>56</i><i>57</i><i>58</i><i>59</i><i>60</i><i>61</i><i>62</i><i>63</i><i>64</i><i>65</i><i>66</i><i>67</i><i>68</i><i>69</i><i>70</i><i>71</i><i>72</i><i>73</i><i>74</i><i>75</i><i>76</i><i>77</i><i>78</i><i>79</i><i>80</i><i>81</i><i>82</i><i>83</i><i>84</i><i>85</i><i>86</i><i>87</i><i>88</i><i>89</i><i>90</i><i>91</i><i>92</i><i>93</i><i>94</i><i>95</i><i>96</i><i>97</i><i>98</i><i>99</i><i>100</i><i>101</i><i>102</i><i>103</i><i>104</i><i>105</i><i>106</i><i>107</i><i>108</i><i>109</i><i>110</i><i>111</i><i>112</i><i>113</i><i>114</i><i>115</i><i>116</i><i>117</i><i>118</i><i>119</i><i>120</i><i>121</i><i>122</i><i>123</i><i>124</i><i>125</i><i>126</i><i>127</i><i>128</i><i>129</i><i>130</i><i>131</i><i>132</i><i>133</i><i>134</i><i>135</i><i>136</i><i>137</i><i>138</i><i>139</i><i>140</i><i>141</i><i>142</i><i>143</i><i>144</i><i>145</i><i>146</i><i>147</i><i>148</i><i>149</i><i>150</i><i>151</i><i>152</i><i>153</i><i>154</i><i>155</i><i>156</i><i>157</i><i>158</i><i>159</i><i>160</i><i>161</i><i>162</i><i>163</i><i>164</i><i>165</i><i>166</i><i>167</i><i>168</i><i>169</i><i>170</i><i>171</i><i>172</i><i>173</i><i>174</i><i>175</i><i>176</i><i>177</i><i>178</i><i>179</i><i>180</i><i>181</i><i>182</i><i>183</i><i>184</i><i>185</i><i>186</i><i>187</i><i>188</i><i>189</i><i>190</i><i>191</i><i>192</i><i>193</i><i>194</i><i>195</i><i>196</i><i>197</i><i>198</i><i>199</i><i>200</i><i>201</i><i>202</i><i>203</i><i>204</i><i>205</i><i>206</i><i>207</i><i>208</i><i>209</i><i>210</i><i>211</i><i>212</i><i>213</i><i>214</i><i>215</i><i>216</i><i>217</i><i>218</i><i>219</i><i>220</i><i>221</i><i>222</i><i>223</i><i>224</i><i>225</i><i>226</i><i>227</i><i>228</i><i>229</i><i>230</i><i>231</i><i>232</i><i>233</i><i>234</i><i>235</i><i>236</i><i>237</i><i>238</i><i>239</i><i>240</i><i>241</i><i>242</i><i>243</i><i>244</i><i>245</i><i>246</i><i>247</i><i>248</i></span>
          </p>
          <span class="cu__bar" aria-hidden="true"><i class="cu__barfill" id="cu-bar"></i></span>
          <p class="cu__done" id="cu-done">Count complete — observer stopped</p>
        </article>
        <p class="cu__more">Nothing more below</p>
      </div>
    </div>
    <footer class="cu__foot">Scroll back up — it never counts twice</footer>
  </section>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 카운터 트리거 — 뷰포트 진입 순간 requestAnimationFrame 으로 0 부터 목표까지 올린다
// $easing 은 easeOutCubic 의 CSS 베지어 근사(주제 그 자체라 토큰 대신 이 곡선을 쓴다)
$duration: $dur-loop;
$easing: cubic-bezier(.215, .61, .355, 1);
$color: $subject-blue;
$tape-row: 40px; // 카운터 테이프 한 칸 높이 — 창 높이와 같아야 숫자가 정확히 정렬된다

@include stage($stage-ink);

.cu {
  // 미리보기가 트랙을 밀어 올리는 거리. 카드와 그 아래 한 줄이 모두 뷰포트 안에 들어가는 값이라
  // 어느 프레임을 poster 로 잘라도 경계에 반쯤 걸친 글자가 남지 않는다 (좁은폭에서는 아래 미디어쿼리가 다시 잡는다)
  --cu-flow: -160px;
  box-sizing: border-box;
  width: min(400px, 100%);
  border-radius: $r-card;
  background: $subject-cream;
  color: $subject-ink;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  overflow: hidden;
  box-shadow: $shadow-raised;
}

.cu__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: $sp-2;
  padding: $sp-2 $sp-3;
}
.cu__title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.cu__attr {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
  color: rgba($subject-ink, .72);
  code { font-family: "Consolas", "Menlo", monospace; }
}

.cu__view {
  box-sizing: border-box;
  height: 170px;
  overflow-y: auto;
  margin: 0 $sp-3;
  padding: 0 $sp-2;
  outline: none;
  background: rgba($subject-ink, .05);
  border: 1px solid rgba($subject-ink, .14);
  border-radius: $r-sm;
}
.cu__track {
  padding-top: $sp-2;
  padding-bottom: $sp-6; // 스크롤 여유
}
.cu__lead {
  margin: 0 0 148px; // 카드 top 이 뷰포트 바닥(170px) 에 딱 닿게 — 진입 전 관찰되지 않는다
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  color: rgba($subject-ink, .72);
}

.cu__card {
  box-sizing: border-box;
  display: grid;
  gap: $sp-2;
  padding: $sp-3;
  border-radius: $r-control;
  background: rgba($subject-ink, .04);
  border: 1px solid rgba($subject-ink, .12);
  text-align: center;
}
.cu__cap {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba($subject-ink, .72);
}
.cu__num {
  position: relative;
  height: $tape-row;
  margin: 0;
  overflow: hidden;
}
.cu__numcur,
.cu__tape i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  line-height: $tape-row;
  font-variant-numeric: tabular-nums;
}
.cu__numcur { position: absolute; inset: 0; }
.cu__tape {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cu__tape i {
  display: flex;
  height: $tape-row;
  font-style: normal;
}
.cu.is-demo .cu__tape { display: block; }
.cu.is-demo .cu__numcur { visibility: hidden; } // 미리보기 동안엔 테이프가 숫자를 보여준다

.cu__bar {
  position: relative;
  display: block;
  height: 8px;
  border-radius: $r-pill;
  background: rgba($subject-ink, .12);
  overflow: hidden;
}
.cu__barfill {
  position: absolute;
  inset: 0;
  border-radius: $r-pill;
  background: $color;
  transform: scaleX(0);
  transform-origin: left center; // 채움 막대 — 시작 변에서 자란다 (붙는 지점이 있는 요소 예외)
}
.cu__done {
  justify-self: center;
  margin: 0;
  padding: $sp-1 $sp-3;
  border-radius: $r-pill;
  background: $stage-orange;
  color: $subject-ink;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity $dur-quick $ease-out, transform $dur-quick $ease-pop;
}
.cu__done.is-shown {
  opacity: 1;
  transform: none;
}
.cu__more {
  margin: $sp-2 0 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba($subject-ink, .72);
}

.cu__foot {
  margin-top: $sp-2;
  padding: $sp-2 $sp-3;
  border-top: 1px solid rgba($subject-ink, .12);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba($subject-ink, .72);
}

// 미리보기 — 트랙이 카드를 밀어 올리고, 테이프가 0 부터 248 까지 easeOutCubic 곡선으로 흘러간다
// 테이프·막대는 이징 이동(유령 없음), 완료 배지는 컷 등장
.cu.is-demo {
  .cu__track {
    animation-name: cu-flow;
    animation-duration: $duration;
    animation-timing-function: $ease-spring;
    animation-iteration-count: infinite;
  }
  .cu__tape {
    animation-name: cu-tape;
    animation-duration: $duration;
    animation-iteration-count: infinite;
  }
  .cu__barfill {
    animation-name: cu-bar;
    animation-duration: $duration;
    animation-iteration-count: infinite;
  }
  .cu__done {
    animation-name: cu-done-show, cu-done-pop;
    animation-duration: $duration, $duration;
    animation-timing-function: steps(1, end), $ease-pop;
    animation-iteration-count: infinite, infinite;
  }
}

@keyframes cu-flow {
  0%, 10% { transform: translateY(0); }
  24%, 100% { transform: translateY(var(--cu-flow, -160px)); } // 카드 완전 진입 — 도달 상태로 끝까지, 재시작은 0% 점프
}
@keyframes cu-tape {
  0%, 18% { transform: translateY(0); animation-timing-function: $easing; }
  66%, 100% { transform: translateY($tape-row * -248); }
}
@keyframes cu-bar {
  0%, 18% { transform: scaleX(0); animation-timing-function: $easing; }
  66%, 100% { transform: scaleX(1); }
}
@keyframes cu-done-show {
  0%, 66% { opacity: 0; }
  67%, 100% { opacity: 1; }
}
@keyframes cu-done-pop {
  0%, 66% { transform: translateY(4px); }
  74%, 100% { transform: none; }
}

@media (max-width: 340px) {
  .cu { --cu-flow: -116px; } // 좁은 뷰포트(118px) 에는 카드까지만 담긴다 — 아래 한 줄은 화면 밖에 둔다
  .cu__head { padding: $sp-1 $sp-2; }
  .cu__view { height: 118px; margin: 0 $sp-2; }
  .cu__lead { margin-bottom: 96px; }
  .cu__card { gap: $sp-1; padding: $sp-2 $sp-3; }
  .cu__numcur, .cu__tape i { font-size: 26px; }
  .cu__foot { margin-top: $sp-1; padding: $sp-1 $sp-2; }
}

@media (prefers-reduced-motion: reduce) {
  .cu__done { transition: none !important; }
  .cu.is-demo .cu__track,
  .cu.is-demo .cu__tape,
  .cu.is-demo .cu__barfill,
  .cu.is-demo .cu__done { animation: none !important; }
  .cu.is-demo .cu__tape { display: none !important; }
  .cu.is-demo .cu__numcur { visibility: visible !important; } // 정지 상태에서도 숫자가 보인다
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.cu {
  --cu-flow: -160px;
  box-sizing: border-box;
  width: min(400px, 100%);
  border-radius: 16px;
  background: #fff7e6;
  color: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}

.cu__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
}

.cu__title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.cu__attr {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(23, 20, 26, 0.72);
}
.cu__attr code {
  font-family: "Consolas", "Menlo", monospace;
}

.cu__view {
  box-sizing: border-box;
  height: 170px;
  overflow-y: auto;
  margin: 0 12px;
  padding: 0 8px;
  outline: none;
  background: rgba(23, 20, 26, 0.05);
  border: 1px solid rgba(23, 20, 26, 0.14);
  border-radius: 8px;
}

.cu__track {
  padding-top: 8px;
  padding-bottom: 24px;
}

.cu__lead {
  margin: 0 0 148px;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  color: rgba(23, 20, 26, 0.72);
}

.cu__card {
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(23, 20, 26, 0.04);
  border: 1px solid rgba(23, 20, 26, 0.12);
  text-align: center;
}

.cu__cap {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(23, 20, 26, 0.72);
}

.cu__num {
  position: relative;
  height: 40px;
  margin: 0;
  overflow: hidden;
}

.cu__numcur,
.cu__tape i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  line-height: 40px;
  font-variant-numeric: tabular-nums;
}

.cu__numcur {
  position: absolute;
  inset: 0;
}

.cu__tape {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cu__tape i {
  display: flex;
  height: 40px;
  font-style: normal;
}

.cu.is-demo .cu__tape {
  display: block;
}

.cu.is-demo .cu__numcur {
  visibility: hidden;
}

.cu__bar {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.12);
  overflow: hidden;
}

.cu__barfill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #2f6df6;
  transform: scaleX(0);
  transform-origin: left center;
}

.cu__done {
  justify-self: center;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ff4d1f;
  color: #17141a;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease-out, transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.cu__done.is-shown {
  opacity: 1;
  transform: none;
}

.cu__more {
  margin: 8px 0 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(23, 20, 26, 0.72);
}

.cu__foot {
  margin-top: 8px;
  padding: 8px 12px;
  border-top: 1px solid rgba(23, 20, 26, 0.12);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(23, 20, 26, 0.72);
}

.cu.is-demo .cu__track {
  animation-name: cu-flow;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}
.cu.is-demo .cu__tape {
  animation-name: cu-tape;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.cu.is-demo .cu__barfill {
  animation-name: cu-bar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.cu.is-demo .cu__done {
  animation-name: cu-done-show, cu-done-pop;
  animation-duration: 2s, 2s;
  animation-timing-function: steps(1, end), cubic-bezier(0.2, 1.4, 0.4, 1);
  animation-iteration-count: infinite, infinite;
}

@keyframes cu-flow {
  0%, 10% {
    transform: translateY(0);
  }
  24%, 100% {
    transform: translateY(var(--cu-flow, -160px));
  }
}
@keyframes cu-tape {
  0%, 18% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  66%, 100% {
    transform: translateY(-9920px);
  }
}
@keyframes cu-bar {
  0%, 18% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  66%, 100% {
    transform: scaleX(1);
  }
}
@keyframes cu-done-show {
  0%, 66% {
    opacity: 0;
  }
  67%, 100% {
    opacity: 1;
  }
}
@keyframes cu-done-pop {
  0%, 66% {
    transform: translateY(4px);
  }
  74%, 100% {
    transform: none;
  }
}
@media (max-width: 340px) {
  .cu {
    --cu-flow: -116px;
  }
  .cu__head {
    padding: 4px 8px;
  }
  .cu__view {
    height: 118px;
    margin: 0 8px;
  }
  .cu__lead {
    margin-bottom: 96px;
  }
  .cu__card {
    gap: 4px;
    padding: 8px 12px;
  }
  .cu__numcur, .cu__tape i {
    font-size: 26px;
  }
  .cu__foot {
    margin-top: 4px;
    padding: 4px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cu__done {
    transition: none !important;
  }
  .cu.is-demo .cu__track,
  .cu.is-demo .cu__tape,
  .cu.is-demo .cu__barfill,
  .cu.is-demo .cu__done {
    animation: none !important;
  }
  .cu.is-demo .cu__tape {
    display: none !important;
  }
  .cu.is-demo .cu__numcur {
    visibility: visible !important;
  }
}

// Counter trigger — 뷰포트 진입 순간 requestAnimationFrame 으로 0 부터 목표까지 올린다
// easing 은 easeOutCubic, 끝나면 unobserve 로 관찰을 멈춘다
var root = document.getElementById('cu');
var view = document.getElementById('cu-view');
var card = document.getElementById('cu-card');
var numEl = document.getElementById('cu-num');
var bar = document.getElementById('cu-bar');
var done = document.getElementById('cu-done');
var TARGET = 248;
var MS = 1400;
var started = false;
var REDUCE = matchMedia('(prefers-reduced-motion: reduce)').matches;

function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }
function start() {
  if (started) return;
  started = true;
  root.classList.remove('is-demo');
  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) return;
      io.unobserve(entry.target); // 여기서 관찰을 멈춘다 — 다시 올라와도 두 번 세지 않는다
      if (REDUCE) { // reduce 에서는 세지 않고 목표값을 바로 찍는다 — 숫자가 올라가는 것도 움직임이다
        numEl.textContent = String(TARGET);
        bar.style.transform = 'scaleX(1)';
        done.classList.add('is-shown');
        return;
      }
      var t0 = null;
      function tick(ts) {
        if (t0 === null) t0 = ts;
        var p = Math.min((ts - t0) / MS, 1);
        var eased = easeOutCubic(p);
        numEl.textContent = String(Math.round(TARGET * eased));
        bar.style.transform = 'scaleX(' + eased + ')';
        if (p < 1) requestAnimationFrame(tick);
        else done.classList.add('is-shown');
      }
      requestAnimationFrame(tick);
    });
  }, { root: view, threshold: 0.6 });
  io.observe(card);
}
view.addEventListener('scroll', start, { passive: true });
view.addEventListener('pointerdown', start);
view.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') start();
});

import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./CountUpOnce.module.scss";

export type CountUpOnceProps = {
  title?: string;
  attr?: string;
  lead?: string;
  cap?: string;
  more?: string;
  doneLabel?: string;
  foot?: string;
  groupLabel?: string;
  viewLabel?: string;
  target?: number;
  ms?: number;
  /** 격자 미리보기용 2초 자동 루프. 사람이 손대면 꺼진다 */
  demo?: boolean;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & {
  "--duration"?: string;
  "--easing"?: string;
  "--color"?: string;
  "--tape-shift"?: string;
};
// ambient 가 얇아 DOM 요소 타입을 못 쓴다 — 필요한 꼴만 로컬 타입으로 선언
type Box<T> = { current: T };
type KeyEvt = { key: string };

function easeOutCubic(t: number): number {
  return 1 - Math.pow(1 - t, 3);
}

export default function CountUpOnce({
  title = "카운터 트리거",
  attr = "requestAnimationFrame",
  lead = "아래로 스크롤하면 숫자가 셉니다",
  cap = "완료한 프로젝트",
  more = "계속 내려도 더 없습니다",
  doneLabel = "카운트 완료 — 관찰 종료",
  foot = "다시 올라와도 두 번 세지 않습니다",
  groupLabel = "카운터 트리거",
  viewLabel = "실적 블록 — 스크롤해 보세요",
  target = 248,
  ms = 1400,
  demo = true,
  duration = 2000,
  easing = "cubic-bezier(.215, .61, .355, 1)",
  color = "#2f6df6",
}: CountUpOnceProps) {
  const [live, setLive] = useState(demo);
  const [done, setDone] = useState(false);
  const viewRef = useRef<HTMLDivElement>(null) as unknown as Box<HTMLDivElement | null>;
  const cardRef = useRef<HTMLElement>(null) as unknown as Box<HTMLElement | null>;
  const numRef = useRef<HTMLElement>(null) as unknown as Box<HTMLElement | null>;
  const barRef = useRef<HTMLElement>(null) as unknown as Box<HTMLElement | null>;

  useEffect(() => {
    if (live) return;
    const view = viewRef.current;
    const card = cardRef.current;
    if (!view || !card) return;
    let raf = 0;
    // reduce 에서는 세지 않고 목표값을 바로 찍는다 — 숫자가 올라가는 것도 움직임이다
    const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
    // 진입 순간 requestAnimationFrame 으로 0 부터 목표까지 — 끝나면 unobserve 로 두 번 세지 않는다
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          io.unobserve(entry.target); // 여기서 관찰을 멈춘다
          if (reduce) {
            if (numRef.current) numRef.current.textContent = String(target);
            if (barRef.current) barRef.current.style.transform = "scaleX(1)";
            setDone(true);
            return;
          }
          let t0: number | null = null;
          const tick = (ts: number) => {
            if (t0 === null) t0 = ts;
            const p = Math.min((ts - t0) / ms, 1);
            const eased = easeOutCubic(p);
            if (numRef.current) numRef.current.textContent = String(Math.round(target * eased));
            if (barRef.current) barRef.current.style.transform = "scaleX(" + eased + ")";
            if (p < 1) raf = requestAnimationFrame(tick);
            else setDone(true);
          };
          raf = requestAnimationFrame(tick);
        });
      },
      { root: view, threshold: 0.6 }
    );
    io.observe(card);
    return () => {
      io.disconnect();
      cancelAnimationFrame(raf);
    };
  }, [live, target, ms]);

  const vars: Vars = {
    "--duration": `${duration}ms`,
    "--easing": easing,
    "--color": color,
    "--tape-shift": `${-target * 40}px`, // 테이프 마지막 칸(목표 숫자) 까지의 이동거리 — 칸 높이 40px
  };

  const rows =
    live && target >= 0 && target < 1000
      ? Array.from({ length: target + 1 }, (_, i) => i)
      : [];

  return (
    <section
      className={`${styles.cu} ${live ? styles.isDemo : ""}`}
      style={vars}
      aria-label={groupLabel}
    >
      <header className={styles.head}>
        <p className={styles.title}>{title}</p>
        <p className={styles.attr}><code>{attr}</code></p>
      </header>
      <div
        className={styles.view}
        ref={viewRef as unknown as Box<HTMLDivElement>}
        onScroll={() => setLive(false)}
        onPointerDown={() => setLive(false)}
        onKeyDown={(e: KeyEvt) => {
          if (e.key === "ArrowDown" || e.key === "ArrowUp") setLive(false);
        }}
        tabIndex={0}
        role="region"
        aria-label={viewLabel}
      >
        <div className={styles.track}>
          <p className={styles.lead}>{lead}</p>
          <article
            className={styles.card}
            ref={cardRef as unknown as Box<HTMLElement>}
          >
            <p className={styles.cap}>{cap}</p>
            <p className={styles.num}>
              {live ? (
                <span className={styles.tape} aria-hidden="true">
                  {rows.map((i) => (<i key={i}>{i}</i>))}
                </span>
              ) : (
                <b
                  className={styles.numcur}
                  ref={numRef as unknown as Box<HTMLElement>}
                >
                  0
                </b>
              )}
            </p>
            <span className={styles.bar} aria-hidden="true">
              <i
                className={styles.barfill}
                ref={barRef as unknown as Box<HTMLElement>}
              />
            </span>
            <p className={`${styles.done} ${done ? styles.isShown : ""}`}>{doneLabel}</p>
          </article>
          <p className={styles.more}>{more}</p>
        </div>
      </div>
      <footer className={styles.foot}>{foot}</footer>
    </section>
  );
}