A countdown on flip-clock cards that ticks down by itself once a second. Every digit rolls down from the old number to the new one, and it fires a finished trigger at zero. Switch between hours, minutes and seconds or days, hours and minutes, set the time left from data, or flip the direction to count up.
Format
Direction
Time left
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1One number drives itSet secondsLeft and a short script counts it down (or up) once a second, then splits it into the three groups.
- 2Every digit rollsThe script writes the new digit and the one it replaced; a trigger converter starts the roll on that card only, downward when counting down and upward when counting up.
- 3It tells you when it endsAt zero the script fires the finished trigger, so your app can react, and the clock gives a small pop.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function Countdown() {
const { rive, RiveComponent } = useRive({
src: '/countdown.riv',
artboard: 'Countdown',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('digits').value = 0xFFFAFAF7;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: format, direction, secondsLeft, running, digits, card, label, accent. All on the Countdown view model.