split-flap으로 접히는 플립 카운트다운 시계

제작 과정

한 줄 요약

카드 윗/아래 절반을 나눠, 값이 바뀐 자릿수만 윗패널이 접히고(0-90) 아랫패널이 펴지며(900) 새 숫자를 덮는 2단 플립입니다.

이럴 때 필요해요

이벤트 오픈세일 종료세션 만료처럼 "남은 시간"을 강조해야 할 때. 단순 숫자보다 시선을 끌고 시간이 줄어드는 긴장감을 줍니다.

어떻게 동작하나

시간을 HH:MM:SS 자릿수 문자열로 쪼개 각 칸을 FlipDigit으로 렌더.
자릿수가 바뀌면(이전값은 렌더 중 setState 패턴으로 추적) 그 칸만 플립 애니메이션 발화.
윗 고정면=새 값, 아랫 고정면=옛 값 접히는 패널이 끝나면 새 값이 자연스럽게 자리잡음.

놓치기 쉬운 것

transform-origin(윗=bottom, 아랫=top)과 0.28s 지연 타이밍이 어긋나면 종이 접힘이 부자연스러움.
숫자를 카드 전체 높이로 그린 뒤 절반만 클립해야 분할선이 글자 가운데에 옵니다.
prefers-reduced-motion이면 플립을 끄고 즉시 스냅.

이런 곳에 써요

런칭/세일 카운트다운 히어로
경매예약 마감 타이머

import type { Metadata } from "next"; import { FlipCountdownDemo } from "./-components/FlipCountdownDemo"; export const metadata: Metadata = { title: "플립 카운트다운 시계 (데모)", description: "자릿수가 split-flap(분할 플랩)처럼 위에서 아래로 접히며 줄어드는 플립 카운트다운. 자릿수별 독립 플립 + prefers-reduced-motion 스냅, 시작/일시정지/리셋·프리셋 제공.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"> <FlipCountdownDemo /> </main> ); }