Animated Number

1import { interpolate, useCurrentFrame } from "remotion";
2
3interface Props {
4  from: number;
5  to: number;
6  durationInFrames: number;
7}
8
9/**
10 * Counts from `from` to `to` over `durationInFrames` with easeOut.
11 * Driven entirely by useCurrentFrame — deterministic.
12 */
13export const AnimatedNumber: React.FC<Props> = ({ from, to, durationInFrames }) => {
14  const frame = useCurrentFrame();
15  const t = interpolate(frame, [0, durationInFrames], [0, 1], {
16    extrapolateLeft: "clamp",
17    extrapolateRight: "clamp",
18  });
19  // Ease-out cubic — fast start, slow finish, matches the ramp on data dashboards.
20  const eased = 1 - (1 - t) ** 3;
21  const value = Math.round(from + (to - from) * eased);
22  return <>{value.toLocaleString()}</>;
23};