A countdown drawn in a 5x7 LED pixel font that ticks down by itself once a second. When a digit changes, only the squares that need to turn on or off flip, with a small bounce: they drop in from the top while counting down and rise in from the bottom while counting up. Switch the format, set the time left from data, and react to the finished trigger at zero.
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 once a second, then writes each of the six digits.
- 2Every square knows its digitA formula converter works out from the digit whether a square is lit, and an interpolator eases its height there from the top or the bottom edge, so only the squares that change flip.
- 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 PixelCountdown() {
const { rive, RiveComponent } = useRive({
src: '/pixel-countdown.riv',
artboard: 'Pixel 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('color').value = 0xFF7CF29A;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: format, direction, secondsLeft, running, color, offColor, label. All on the PixelCountdown view model.