Elapsed time on flip-clock cards: it counts up by itself once a second and every digit rolls up to the next one. Start it from zero or from any time, pause it with running, and switch between hours, minutes and seconds or days, hours and minutes. It is the Countdown file with its direction set to up.
Format
Direction
Start from
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
- 1Same file as the CountdownSet direction to up and the script adds a second each tick instead of taking one away. It never finishes on its own.
- 2Start anywheresecondsLeft is the time on the clock. Set it to 0 for a stopwatch, or to the time already elapsed to resume.
- 3Digits roll upEach card rolls upward to its next digit; only the cards whose digit changed move.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function Countdown() {
const { rive, RiveComponent } = useRive({
src: '/count-up-timer.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.