Steps

1/**
2 * infographic-steps — vertical step-by-step process visualization.
3 *
4 * Steps stacked top to bottom with large circles (emojis or numbers) and
5 * titles below. Animation: circle pops from 0 with bouncy spring,
6 * content inside fades in slightly after, title slides from right
7 * (portrait) or up (landscape). No connector lines — numbered circles +
8 * vertical alignment + the cascade entrance carry the "in order" signal.
9 * Exit cascade slides each step left + fades in reading order.
10 *
11 * Block structure (docs/blocks.md):
12 *   background — brand gradient (gradientBackground)
13 *   caption    — TemplateText headline in the top text area (subtle archetype)
14 *   hero       — StepsList primitive (circles + titles + cascade exit)
15 */
16 
17import React from "react";
18import type { VariableField } from "../video-config";
19import { parseList } from "../parse-list";
20import type { SceneTemplateProps } from "./types";
21import { resolveTokens } from "../theme";
22import { TemplateText } from "./template-text";
23import { gradientBackground } from "../backgrounds";
24import { StepsList } from "../primitives/infographic/StepsList";
25 
26export const infographicStepsSchema: Record<string, VariableField> = {
27  texts: {
28    type: "string",
29    label: "Text",
30    default: "How it works.",
31    required: true,
32    description: "Title text",
33  },
34  steps: {
35    type: "string",
36    label: "Steps",
37    default: "Describe,Preview,Export",
38    required: true,
39    description: "JSON array of step labels (max 3 steps). Keep each label to 1-3 words. Send as an array so labels with internal punctuation render correctly. Example: [\"Describe\", \"Preview\", \"Export\"]",
40  },
41  stepEmojis: {
42    type: "string",
43    label: "Step emojis",
44    default: "✍️,👀,🚀",
45    description: "JSON array of emojis, one per step (optional). Leave empty for numbered circles. Example: [\"✍️\", \"👀\", \"🚀\"]",
46  },
47  textColor: {
48    type: "color",
49    label: "Text color",
50    default: "",
51    description: "Override text color (leave empty for auto)",
52  },
53};
54 
55export const infographicStepsDefaults: Record<string, unknown> = {
56  texts: "How it works.",
57  steps: "Describe,Preview,Export",
58  stepEmojis: "✍️,👀,🚀",
59  textColor: "",
60};
61 
62export const InfographicStepsTemplate: React.FC<SceneTemplateProps> = ({
63  variables,
64  style,
65  progress,
66  beatIntensity,
67  width,
68  height,
69  textArchetype,
70  safeZone,
71  sceneDuration,
72}) => {
73// … truncated