Triple Stats

1/**
2 * infographic-stat-row — 3 big stats side by side (portrait: stacked).
3 *
4 * Each stat has a large number, a short label below, and an optional
5 * prefix/unit. Numbers count up from 0. Stats stagger in with bouncy
6 * spring. TextOverlay title on top.
7 */
8 
9import React from "react";
10import type { VariableField } from "../video-config";
11import type { SceneTemplateProps } from "./types";
12import { resolveTokens } from "../theme";
13import { TemplateText } from "./template-text";
14import { StatBadgeRow } from "../primitives/typography/StatBadgeRow";
15import { SceneBackground, mediaBackgroundDefaults, mediaBackgroundSchemaFields } from "./scene-background";
16 
17export const infographicStatRowSchema: Record<string, VariableField> = {
18  texts: {
19    type: "string",
20    label: "Text",
21    default: "By the numbers.",
22    required: true,
23    description: "Title text",
24  },
25  stat1Value: {
26    type: "string",
27    label: "Stat 1 value",
28    default: "10K",
29    required: true,
30    description: "First stat number (e.g. 10K, 99.9%, $2M)",
31  },
32  stat1Label: {
33    type: "string",
34    label: "Stat 1 label",
35    default: "Users",
36    required: true,
37    description: "Short label below the first number",
38  },
39  stat2Value: {
40    type: "string",
41    label: "Stat 2 value",
42    default: "99.9%",
43    required: true,
44    description: "Second stat number",
45  },
46  stat2Label: {
47    type: "string",
48    label: "Stat 2 label",
49    default: "Uptime",
50    required: true,
51    description: "Short label below the second number",
52  },
53  stat3Value: {
54    type: "string",
55    label: "Stat 3 value",
56    default: "<50ms",
57    required: true,
58    description: "Third stat number",
59  },
60  stat3Label: {
61    type: "string",
62    label: "Stat 3 label",
63    default: "Latency",
64    required: true,
65    description: "Short label below the third number",
66  },
67  ...mediaBackgroundSchemaFields,
68  textColor: {
69    type: "color",
70    label: "Text color",
71    default: "",
72    description: "Override text color (leave empty for auto)",
73  },
74};
75 
76export const infographicStatRowDefaults: Record<string, unknown> = {
77  texts: "By the numbers.",
78  stat1Value: "10K",
79  stat1Label: "Users",
80  stat2Value: "99.9%",
81  stat2Label: "Uptime",
82  stat3Value: "<50ms",
83  stat3Label: "Latency",
84  ...mediaBackgroundDefaults,
85  textColor: "",
86};
87 
88export const InfographicStatRowTemplate: React.FC<SceneTemplateProps> = ({
89  variables,
90  style,
91  progress,
92  beatIntensity,
93  width,
94  height,
95  safeZone,
96  sceneDuration,
97// … truncated