Back to Motion Prompt examples
Landing page & web effects, part 2 · #20
Countdown timer
Counts down the time left to a deadline. The hours, minutes and seconds under "キャンペーン終了まで" (until the campaign ends) count down every second; only the digits that change slide up and out as new ones come in from below.
Showcase effectscountdowntimerdeadlinecampaignflipurgency
Full motion specification
How the movement works
Use it before a limited-time offer or an application deadline, to make the time left plain to see.
- 01A 511 × 168 viewport: an orange gradient band with "キャンペーン終了まで" (until the campaign ends) and six digit tiles for hours, minutes and seconds (34 × 50 each, radius 6, 32 px digits). This card alone runs once per 9.4 s (the pack cycle).
- 02It starts at 02:15:04 and counts down one second at a time, nine times, every 1 s from 0.4 s, ending at 02:14:55. At 4.4 s, 02:15:00 → 02:14:59 rolls the minutes over.
- 03Only the tiles whose digit changes animate: over 0.32 s (cubic ease-in-out) the old digit slides up and out and the new one slides in from below, clipped to the tile.
- 04At 9.4 s it goes back to 02:15:04 with a plain cut.
Prompt
Add a countdown timer for the campaign deadline: hours, minutes and seconds, with each changing digit rolling in from below over 0.3 s.