metric-ticker

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import { LineChartDraw } from "@/remotion/primitives/line-chart-draw";
4import { formatCompactNumber, readDelta } from "@/remotion/lib/chart-utils";
5import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
6import { DURATION, EASING, STAGGER } from "@/remotion/lib/motion-tokens";
7 
8const { fontFamily } = loadFont("normal", {
9  weights: ["400", "500", "600", "700"],
10  subsets: ["latin"],
11});
12 
13export type MetricTickerItem = {
14  label: string;
15  value: number;
16  /** Unit appended to the counted value, e.g. `"min"`. */
17  suffix?: string;
18  /** Symbol placed before the value, e.g. `"$"`. */
19  prefix?: string;
20  /** Signed change, e.g. `"+18%"` — the sign picks the colour and arrow. */
21  delta?: string;
22  /** Recent history, drawn as a sparkline under the value. */
23  trend?: number[];
24  /** Overrides `accentColor` for this card. */
25  color?: string;
26};
27 
28export type MetricTickerProps = {
29  metrics: MetricTickerItem[];
30  title?: string;
31  /** Short label above the title. */
32  eyebrow?: string;
33  /** Formats the counted value. */
34  valueFormatter?: (value: number) => string;
35  /** Cards beyond this count are dropped rather than squeezed. */
36  maxCards?: number;
37  backgroundColor?: string;
38  accentColor?: string;
39};
40 
41const COLORS = {
42  bg: "#080810",
43  ink: "#fafafa",
44  label: "rgba(250,250,250,0.58)",
45  eyebrow: "rgba(250,250,250,0.44)",
46  card: "rgba(250,250,250,0.035)",
47  border: "rgba(250,250,250,0.10)",
48  accent: "#e8b86d",
49  up: "#2dd4bf",
50  down: "#f87171",
51} as const;
52 
53const DELTA_GLYPH = { up: "↑", down: "↓", flat: "" } as const;
54 
55/**
56 * KPI cards that count themselves in.
57 *
58 * Cards divide the full content width instead of hugging the left edge, so the
59 * row reads as one instrument panel. The counter, the delta chip and the
60 * sparkline are all driven off the card's own spring, staggered just enough
61 * that the eye lands on each card in reading order.
62 */
63export const MetricTicker: React.FC<MetricTickerProps> = ({
64  metrics,
65  title,
66  eyebrow,
67  valueFormatter = formatCompactNumber,
68  maxCards = 4,
69  backgroundColor = COLORS.bg,
70  accentColor = COLORS.accent,
71}) => {
72  const frame = useCurrentFrame();
73  const { fps, width, height } = useVideoConfig();
74  const safe = getSafeAreaPadding({ width, height });
75  const isPortrait = height > width;
76 
77  const cards = metrics.slice(0, maxCards);
78// … truncated