AWESOME AI MOTION
효과Effects / 데이터Data / Nº 289

숫자 롤링Rolling Digits

Rolling Digits
숫자 롤링
다른 이름Also known as · Rolling digits · 롤링 숫자 · Odometer · Number wheel · Odometer Reels · 오도미터 숫자 · vertical-spring-ticker · slot-machine-reveal
289
렌더 추가 예정CLIP COMING숫자 롤링Rolling Digits정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 289. 숫자 롤링 · Rolling Digits · power3.out

각 자릿수가 세로 릴에서 돌아 다음 값에 멈춘다.Each digit rolls vertically inside a clipped number reel.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
점수와 가격의 기계적 갱신을 보여준다.Suggests a mechanical numeric update.
언제 쓰나Use whenUSE WHEN
  • 가격 129의 각 자릿수가 800ms 동안 돌아 정확한 숫자에 멈춘다.
  • 점수와 가격의 기계적 갱신을 보여준다. 기준값과 대상을 함께 표시할 때.
  • Update scores or prices.
  • Keep the encoded values, labels, and visual state synchronized.
과용 주의AvoidAVOID
  • 릴 내부 숫자는 줄 높이 72px로 맞춘다.
분류TagsTAGS
데이터Data데이터 증명Data proof비교Compare설명 영상Explainer video발표Presentation데이터 스토리Data story난이도 중급Intermediatecss
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

가격 129의 각 자릿수가 800ms 동안 돌아 정확한 숫자에 멈춘다.

과용 · 나쁜 사례OVERUSE

통화 기호와 소수점까지 함께 굴린다.

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속800ms500~1200ms최종 숫자에서 정지
자릿수 간격60ms0~100ms왼쪽부터 시작
숫자 높이72px48~96px마스크와 줄 높이 일치
GSAP
const tl=gsap.timeline({paused:true});
reels.forEach((reel,i)=>{
 tl.fromTo(reel,{y:0},{y:-digits[i]*72,duration:0.8,ease:'power3.out'},i*0.06);
});
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 숫자 롤링을 적용해. 자릿수별 마스크 내부 숫자 스트립의 y를 보간한다. 지속 800ms; 자릿수 간격 60ms; 숫자 높이 72px을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Implement Rolling Digits on <target> in <file>. Roll each digit for 800ms with 60ms stagger and 72px digit height; keep punctuation stationary. Use one paused GSAP core timeline, support seeking, and avoid random values and timers.

Codex

<파일>의 설명 장면에서 <대상>에 숫자 롤링을 적용해. 자릿수별 마스크 내부 숫자 스트립의 y를 보간한다. 지속 800ms; 자릿수 간격 60ms; 숫자 높이 72px을 적용한다. 0초, 0.4초, 0.8초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Rolling Digits on <target> in <file>. Roll each digit for 800ms with 60ms stagger and 72px digit height; keep punctuation stationary. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 0.4s, and 0.8s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
paused 타임라인에 숫자 롤링 상태를 넣고 seek 시 0.8초의 좌표와 색을 다시 계산한다.
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 지속 800ms; 자릿수 간격 60ms; 숫자 높이 72px을 싣고 가격 129의 각 자릿수가 800ms 동안 돌아 정확한 숫자에 멈춘다.
Scrolline DeckSCROLL SCRUB
진행률 0~1을 0.8초 구간에 매핑한다. scrub에서는 스프링 대신 power2.out을 쓰고 역방향에서도 라벨과 도형을 함께 갱신한다.
06

잘 맞는 조합Pairs well with

카운트업 · Count-up
Nº 242카운트업Count-upCount-up
하이라이트 스윕 · Highlight Sweep
Nº 089하이라이트 스윕Highlight SweepHighlight Sweep
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo