Card List

1/**
2 * cardList — headline plus reusable feature-card hero.
3 *
4 * FeatureList owns orientation, card layout, emoji rendering, stagger, and
5 * exit behavior. This template supplies only the background and caption.
6 */
7 
8import React from "react";
9import type { VariableField } from "../video-config";
10import { parseList } from "../parse-list";
11import type { SceneTemplateProps } from "./types";
12import { resolveTokens } from "../theme";
13import { TemplateText } from "./template-text";
14import { FeatureList } from "../primitives/infographic/FeatureList";
15import {
16  SceneBackground,
17  mediaBackgroundDefaults,
18  mediaBackgroundSchemaFields,
19} from "./scene-background";
20 
21export const infographicFeatureListSchema: Record<string, VariableField> = {
22  texts: {
23    type: "string",
24    label: "Text",
25    default: "What you get.",
26    required: true,
27    description: "Title text",
28  },
29  items: {
30    type: "string",
31    label: "Features",
32    default: "Automate your savings on energy bills,Cleaner energy without raising your bill,Same account and service guaranteed",
33    required: true,
34    description: "JSON array of feature descriptions (max 3 — pick the strongest). Items often contain commas, so send an array rather than comma-joined text.",
35  },
36  itemEmojis: {
37    type: "string",
38    label: "Feature emojis",
39    default: "💰,⚡,🔒",
40    required: true,
41    description: "JSON array of emojis, one per feature row.",
42  },
43  ...mediaBackgroundSchemaFields,
44  textColor: {
45    type: "color",
46    label: "Text color",
47    default: "",
48    description: "Override text color (leave empty for auto)",
49  },
50};
51 
52export const infographicFeatureListDefaults: Record<string, unknown> = {
53  texts: "What you get.",
54  items: "Automate your savings on energy bills,Cleaner energy without raising your bill,Same account and service guaranteed",
55  itemEmojis: "💰,⚡,🔒",
56  ...mediaBackgroundDefaults,
57  textColor: "",
58};
59 
60export const InfographicFeatureListTemplate: React.FC<SceneTemplateProps> = ({
61  variables,
62  style,
63  progress,
64  beatIntensity,
65  width,
66  height,
67  safeZone,
68  sceneDuration,
69  backgroundEffect,
70  isPlaying = true,
71}) => {
72  const { content, font } = resolveTokens(style);
73  const textColor = String(variables.textColor || "") || content;
74  const text = String(variables.texts || "");
75  const labels = parseList(variables.items, 3);
76  const emojis = parseList(variables.itemEmojis);
77// … truncated