Before After

1/**
2 * infographic-before-after — emoji-driven before/after contrast.
3 *
4 * Layout: a centered "BEFORE" / "AFTER" pill label sits above the
5 * centered headline text; emojis distribute across the FULL frame
6 * around the central text zone (top band, sides, bottom band). Pill
7 * styling matches problemSolution — same shape, scale-pop entry, just
8 * BEFORE/AFTER wording with a red→green color shift.
9 *
10 * Two phases on a brand-color gradient:
11 *  1. Before phase: red BEFORE pill + problem headline + scattered
12 *     problem emojis with chaos jitter.
13 *  2. Transition: problem emojis fall off-screen with gravity (confetti-
14 *     style drop) while the pill + headline crossfade.
15 *  3. After phase: green AFTER pill + solution headline + solution
16 *     emojis pop in with a happy bounce in the same slots.
17 *
18 * Pick this for symbolic before/after content where the emojis tell the
19 * story; `problemSolution` for full-statement text contrast.
20 *
21 * Block structure (docs/blocks.md):
22 *   background — brand gradient (gradientBackground)
23 *   hero       — BeforeAfterSplit primitive (both phases: pills, headlines,
24 *                emoji scatter/fall/pop — text integral, no caption slot)
25 */
26 
27import React from "react";
28import type { VariableField } from "../video-config";
29import { parseList } from "../parse-list";
30import type { SceneTemplateProps } from "./types";
31import { resolveTokens } from "../theme";
32import { gradientBackground } from "../backgrounds";
33import { BeforeAfterSplit } from "../primitives/infographic/BeforeAfterSplit";
34 
35export const infographicBeforeAfterSchema: Record<string, VariableField> = {
36  problemLabel: {
37    type: "string",
38    label: "Before label",
39    default: "BEFORE",
40    description: "Uppercase pill label shown above the before headline.",
41  },
42  problemHeadline: {
43    type: "string",
44    label: "Before headline",
45    default: "Your calendar today.",
46    required: true,
47    description: "Headline shown during the before phase. 2-5 words. Sits centered, beneath the BEFORE pill.",
48  },
49  solutionLabel: {
50    type: "string",
51    label: "After label",
52    default: "AFTER",
53    description: "Uppercase pill label shown above the after headline.",
54  },
55  solutionHeadline: {
56    type: "string",
57    label: "After headline",
58    default: "Calmly organized.",
59    required: true,
60    description: "Headline shown during the after phase. 2-5 words. Sits centered, beneath the AFTER pill.",
61  },
62  problemEmojis: {
63    type: "string",
64// … truncated