카운트업Count-up

Count-up

카운트업

다른 이름Also known as · 숫자 증가 · Number counter · Interpolated count ticker · 보간 숫자 티커 · Count up · Number tween · Large Number Count Up · 대형 숫자 카운트업

242

도판Fig. 242. 카운트업 · Count-up · power2.out

재생 속도Speed

숫자가 0에서 목표값까지 감속하며 증가하는 표현An animation in which a number increases from 0 to its target value while decelerating.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

수치의 누적과 최종 규모Communicates numerical accumulation and the final magnitude.

언제 쓰나Use whenUSE WHEN

수치의 누적과 최종 규모를 보여줄 때
토큰 수가 0에서 939로 올라간 뒤 토큰 단위를 보여준다와 같은 장면을 만들 때

When showing numerical accumulation and the final magnitude
When counting tokens from 0 to 939 and then revealing the token unit

과용 주의AvoidAVOID

최종 상태를 0.5초 이상 유지한다
동일 화면에서 불필요한 주홍 강조를 추가하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

토큰 수가 0에서 939로 올라간 뒤 토큰 단위를 보여준다

과용 · 나쁜 사례OVERUSE

모든 통계가 동시에 빨리 바뀌어 최종값을 읽기 어렵다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
목표값	939	1~999999	정수로 반올림해 표시
지속	1.65s	1.0~2.0s	도착 전 감속을 읽을 시간
출발	0.30s	0.2~0.4s	초기 0 홀드
단위 등장	2.02s	1.9~2.3s	숫자 도착 뒤 표시

GSAP

const counter = {value:0};
tl.to(counter, {value:939, duration:1.65, ease:'power2.out', onUpdate:()=>{document.querySelector('#value').textContent=Math.round(counter.value);}}, .3);
tl.fromTo('#unit', {y:12,opacity:0}, {y:0,opacity:1,duration:.3}, 2.02);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 카운트업 효과를 적용해. 토큰 수가 0에서 939로 올라간 뒤 토큰 단위를 보여준다. 목표값 939; 지속 1.65s; 출발 0.30s; 단위 등장 2.02s로 만들고 이징은 power2.out를 써. GSAP 타임라인 하나로 제어하고 2.5초부터 3초까지 완성 상태를 유지해.

Apply Count-up to <target>. Count tokens from 0 to 939, then show the token unit. Use these settings: target value 939; duration 1.65s; start 0.30s; unit reveal at 2.02s; ease power2.out. Control everything with a single GSAP timeline and hold the completed state from 2.5 to 3 seconds.

Codex

<파일>의 데이터 장면에 카운트업 효과를 구현해. 목표값 939; 지속 1.65s; 출발 0.30s; 단위 등장 2.02s를 적용하고 이징은 power2.out로 지정해. 0초, 0.75초, 1.75초, 2.9초를 캡처해서 시작 상태와 진행 변화, 최종 상태의 잘림과 겹침을 확인해. Math.random과 타이머 없이 타임라인으로 재생하고 마지막 0.5초 이상 정지해.

Implement Count-up in the data scene in <file>. Use these settings: target value 939; duration 1.65s; start 0.30s; unit reveal at 2.02s; ease power2.out. Capture at 0, 0.75, 1.75, and 2.9 seconds to check the initial state, progression, and any clipping or overlap in the final state. Play using a timeline without Math.random or timers, and hold still for at least the final 0.5 seconds.