A clock drawn with square pixels. Set the hours and minutes and every square works out by itself whether it should be lit, flipping over with a little bounce when the digit changes.
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
- 1Every square is a tiny formulaEach one reads the hour or minute, finds its digit and decides if it is lit.
- 2The flip is an interpolatorLit squares grow to full height and unlit ones shrink, eased with a small overshoot.
- 3No keyframes for the digitsTwo numbers drive all sixty squares; your app only sends the time.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function PixelClock() {
const { rive, RiveComponent } = useRive({
src: '/pixel-clock.riv',
artboard: 'Pixel Clock',
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: hours, minutes, color. All on the PixelClock view model.