Milestone

1/**
2 * social-milestone — follower/subscriber count rolling up to a milestone with celebration.
3 *
4 * Converted from Remotion FollowerMilestone. Counter rolls up to target number,
5 * glow intensifies, then confetti burst + celebration badge pop on hit.
6 *
7 * Block structure (docs/blocks.md):
8 *   background — SceneBackground (brand gradient / Pexels media + scrims)
9 *   hero       — MilestoneBadge primitive (rolling number + glow + confetti
10 *                + celebration pill)
11 *   caption    — the uppercase label inside MilestoneBadge (no TemplateText)
12 */
13 
14import type { VariableField } from "../video-config";
15import type { SceneTemplateProps } from "./types";
16import { resolveTokens } from "../theme";
17import { SceneBackground, mediaBackgroundSchemaFields, mediaBackgroundDefaults } from "./scene-background";
18import { stripPipe } from "../typography";
19import { MilestoneBadge } from "../primitives/social/MilestoneBadge";
20 
21export const socialMilestoneSchema: Record<string, VariableField> = {
22  label: {
23    type: "string",
24    label: "Label",
25    default: "Followers",
26    required: true,
27    description: "Label above the number (e.g. Followers, Subscribers, Downloads)",
28  },
29  targetNumber: {
30    type: "number",
31    label: "Target number",
32    default: 10000,
33    required: true,
34    description: "The milestone number to reach",
35  },
36  startNumber: {
37    type: "number",
38    label: "Start number",
39    default: "",
40    description: "Number the counter starts rolling from. Leave empty to auto-calculate (~98% of target).",
41  },
42  badgeText: {
43    type: "string",
44    label: "Badge text",
45    default: "10K Followers!",
46    description: "Celebration badge text that pops in at milestone",
47  },
48  badgeEmoji: {
49    type: "string",
50    label: "Badge emoji",
51    default: "🎉",
52    description: "Emoji shown in the celebration badge",
53  },
54  badgeColor: {
55    type: "color",
56    label: "Badge color",
57    default: "#facc15",
58    description: "Background color of the celebration badge",
59  },
60  ...mediaBackgroundSchemaFields,
61};
62 
63export const socialMilestoneDefaults: Record<string, unknown> = {
64  label: "Followers",
65  targetNumber: 10000,
66  startNumber: "",
67  badgeText: "10K Followers!",
68  badgeEmoji: "🎉",
69  badgeColor: "#facc15",
70  ...mediaBackgroundDefaults,
71};
72 
73export const SocialMilestoneTemplate: React.FC<SceneTemplateProps> = ({
74  variables,
75  style,
76  progress,
77  beatIntensity,
78  width,
79  height,
80  sceneDuration,
81  isPlaying = true,
82  backgroundEffect,
83// … truncated