Set a new value and the number counts there from the old one, easing in and landing with a small pop. Prefix and suffix are their own inputs, for prices, percentages and scores.
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
- 1It eases the data, not a timelineAn interpolator converter tweens every new value over one second.
- 2Whole numbers on screenA to-string converter rounds the tweening value, with tabular figures so the width holds.
- 3The pop knows whenA trigger converter fires when the value changes, and the state machine lands the pop as the count finishes.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function Counter() {
const { rive, RiveComponent } = useRive({
src: '/counter.riv',
artboard: 'Counter',
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 = 0xFFFAFAF7;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: value, prefix, suffix, color, accent. All on the Counter view model.