Big Number

1/**
2 * chart-counter — animated counting number with label + text overlay.
3 *
4 * Big number counts up from 0 to target value driven by scene progress.
5 * Optional prefix/suffix, label below, accent underline, beat-reactive pulse.
6 * TextOverlay in the top 30% carries a message above the counter.
7 */
8 
9import type { VariableField } from "../video-config";
10import type { SceneTemplateProps } from "./types";
11import { resolveTokens } from "../theme";
12import { TemplateText } from "./template-text";
13import { withOpacity } from "../theme";
14import { TOP_TEXT_AREA_RATIO } from "../backgrounds";
15import { SceneBackground, mediaBackgroundSchemaFields, mediaBackgroundDefaults } from "./scene-background";
16import { ConfettiLayer } from "./confetti-layer";
17import { getResponsiveFontSize } from "../typography";
18import { CountUpNumber } from "../primitives/typography/CountUpNumber";
19 
20export const chartCounterSchema: Record<string, VariableField> = {
21  texts: {
22    type: "string",
23    label: "Text",
24    default: "Our biggest milestone yet.",
25    required: true,
26    description: "Title text shown above the chart",
27  },
28  value: {
29    type: "number",
30    label: "Target number",
31    default: 1000,
32    required: true,
33    description: "The number to count up to",
34  },
35  label: {
36    type: "string",
37    label: "Label",
38    default: "Total users",
39    required: true,
40    description: "Text displayed below the number",
41  },
42  prefix: {
43    type: "string",
44    label: "Prefix",
45    default: "",
46    description: "Prefix before the number (e.g. $, \u20ac)",
47  },
48  unit: {
49    type: "string",
50    label: "Unit suffix",
51    default: "",
52    description: "Suffix after the number (e.g. %, +, k, M)",
53  },
54  chartColor: {
55    type: "color",
56    label: "Chart color",
57    default: "#00e5a0",
58    description: "Color for the chart elements (bars, line, ring). Green = growth, blue = trust, orange = energy.",
59  },
60  textColor: {
61    type: "color",
62    label: "Text color",
63    default: "",
64    description: "Override text color (leave empty for auto)",
65  },
66  ...mediaBackgroundSchemaFields,
67};
68 
69export const chartCounterDefaults: Record<string, unknown> = {
70  texts: "Our biggest milestone yet.",
71  value: 1000,
72  label: "Total users",
73  prefix: "",
74  unit: "",
75  chartColor: "#00e5a0",
76  textColor: "",
77  ...mediaBackgroundDefaults,
78};
79 
80export const ChartCounterTemplate: React.FC<SceneTemplateProps> = ({
81  variables,
82  style,
83  progress,
84  beatIntensity,
85  width,
86  height,
87  textArchetype,
88  safeZone,
89// … truncated