rolling-number

import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";

export type RollingNumberProps = {
  from?: number;
  to: number;
  label?: string;
  prefix?: string;
  suffix?: string;
  decimals?: number;
};

/**
 * A number that counts without the width jitter proportional digits cause.
 * Tabular figures hold every glyph in the same advance, so the label under it
 * never shifts while the value climbs.
 */
export const RollingNumber = ({from = 0, to, label, prefix = "", suffix = "", decimals = 0}: RollingNumberProps) => {
  const frame = useFrame();
  const brand = useBrand();
  const scale = useDesignScale();
  const progress = interpolate(frame, [8, 62], [0, 1], {easing: Easing.standard});
  const value = (from + (to - from) * progress).toFixed(decimals);

  return (
    <Fill
      style={{
        alignItems: "flex-start",
        gap: 16 * scale,
        justifyContent: "center",
        padding: `${120 * scale}px ${150 * scale}px`,
      }}
    >
      <div
        style={{
          fontSize: 208 * scale,
          fontVariantNumeric: "tabular-nums",
          fontWeight: 600,
          letterSpacing: "-0.06em",
          lineHeight: 1,
          opacity: interpolate(frame, [0, 14], [0, 1], {easing: Easing.standard}),
        }}
      >
        {prefix}
        {value}
        {suffix}
      </div>
      {label ? (
        <div
          style={{
            color: brand.colors.muted,
            fontSize: 40 * scale,
            letterSpacing: "-0.015em",
            opacity: interpolate(frame, [10, 30], [0, 1], {easing: Easing.standard}),
          }}
        >
          {label}
        </div>
      ) : null}
    </Fill>
  );
};

import {defineComponentPreview} from "odori/preview";
import {RollingNumber} from "./rolling-number";

export default defineComponentPreview({
  title: "Rolling number",
  category: "Typography",
  description: "Metrics roll without width changes or digit jitter.",
  component: RollingNumber,
  canvas: {width: 1920, height: 1080, duration: "3s"},
  controls: {
    from: {type: "number", defaultValue: 0, min: 0, max: 10000},
    to: {type: "number", defaultValue: 98.7, min: 0, max: 10000},
    decimals: {type: "number", defaultValue: 1, min: 0, max: 3},
    label: {type: "text", defaultValue: "frames delivered on time"},
    suffix: {type: "text", defaultValue: "%"},
  },
  examples: [
    {name: "Percentage", props: {to: 98.7, decimals: 1, suffix: "%", label: "frames delivered on time"}},
    {name: "Count", props: {to: 12480, decimals: 0, suffix: "", label: "frames rendered"}},
  ],
});

import {Scene, Video} from "odori";
import {RollingNumber} from "../components/rolling-number/rolling-number";

<Video>
  <Scene id="rolling-number" duration="3s">
    <RollingNumber
      from={0}
      to={98.7}
      label="frames delivered on time"
      suffix="%"
      decimals={1}
    />
  </Scene>
</Video>