카운트다운Countdown Ticker

Countdown Ticker

카운트다운

다른 이름Also known as · Countdown clock · 목표 시점 카운트다운 · Numeric Countdown Beat · 숫자 카운트다운 박자 · Karaoke Count In

313

렌더 추가 예정CLIP COMING카운트다운Countdown Ticker정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 313. 카운트다운 · Countdown Ticker · power2.out

남은 일·시·분·초가 일정한 간격으로 줄어들며 자릿수가 교체되는 카운트다운Remaining days, hours, minutes and seconds tick down at a steady interval with digit swaps.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

마감이나 사건까지 남은 시간이 눈으로 줄어드는 긴장감을 준다The shrinking time to a deadline or event builds tension you can see.

언제 쓰나Use whenUSE WHEN

행사·출시·마감까지 남은 시간을 보여 줄 때
타이머가 끝나는 순간까지 긴장감을 쌓을 때

Showing time left to an event, launch or deadline
Building tension until a timer ends

과용 주의AvoidAVOID

숫자 폰트는 tabular-nums로 자릿수 폭을 고정한다
목표 시각은 화면에 명시한다. 남은 시간만 있으면 언제까지인지 알 수 없다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

"02일 14:59:58"에서 초 단위 숫자가 1초마다 250ms 세로 교체로 줄어들고 초가 0이 되는 순간 분이 함께 바뀐다

과용 · 나쁜 사례OVERUSE

초 숫자만 갱신하고 분·시가 갱신되지 않거나 자릿수 폭이 변해 숫자가 좌우로 흔들린다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
갱신 간격	1000ms	1000ms 고정	초 단위
교체 애니메이션	250ms	200~300ms	세로 슬라이드
숫자 폰트	tabular-nums	고정	자릿수 폭 일정
목표 시각	명시	필수	예: 12/31 23:59

GSAP

const target = 3 * 86400; // 목표까지 남은 초
for (let s = 0; s < 6; s++) {
  const remain = target - s;
  tl.call(() => setDigits(remain), null, s);
  tl.fromTo('.sec', {y:14, opacity:0}, {y:0, opacity:1, duration:0.25, ease:'power2.out'}, s);
}
// setDigits는 remain에서 일·시·분·초를 계산해 textContent에 쓴다

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 화면에 카운트다운 티커를 만들어줘. 남은 시간을 "DD일 HH:MM:SS"로 tabular-nums로 표시하고 1초마다 초 숫자가 y 14px에서 0.25초 power2.out으로 교체돼. 목표 시각은 화면 하단에 작게 명시하고 현재 시각 함수는 쓰지 말고 t의 함수로만 계산해.

Build a countdown ticker in <target>. Show remaining time as "DD days HH:MM:SS" in tabular-nums; each second the seconds digits swap from y 14px over 0.25s power2.out. State the target time small at the bottom and compute everything as a pure function of t, never from the current clock.

Codex

<파일>에 countdown ticker를 적용해. remain=start-floor(t)로 일·시·분·초를 계산해 숫자 span에 반영하고 초 요소는 매초 y 14에서 0, opacity 0에서 1을 0.25초. font-variant-numeric tabular-nums. 0초·1.1초·5.9초를 캡처해 숫자 감소와 자릿수 폭이 일정한지, 두 번 렌더 후 동일한지 확인해.

Apply countdown ticker in <file>. Compute remain=start-floor(t) into days, hours, minutes, seconds; the seconds element goes y 14 to 0 and opacity 0 to 1 over 0.25s each second; font-variant-numeric tabular-nums. Capture at 0s, 1.1s and 5.9s to verify decrement and constant digit width, and render twice for identical output.