Reaction

1/**
2 * reaction template — short full-bleed Pexels meme/reaction clip with a
3 * punchline. Differentiated from `media` so the reaction picker, the
4 * `searchReactionClip` tool, and the meme-flavored search query stay
5 * separate from cinematic stock footage.
6 */
7import type { VariableField } from "../video-config";
8import type { SceneTemplateProps } from "./types";
9import { resolveTokens } from "../theme";
10import { TemplateText } from "./template-text";
11import type { TextArchetype } from "../typography";
12import { SceneBackground } from "./scene-background";
13 
14export const REACTION_TAGS = [
15  "launch",
16  "productLaunch",
17  "goLive",
18  "shipIt",
19  "wow",
20  "excited",
21  "happy",
22  "success",
23  "done",
24  "panic",
25  "waiting",
26  "celebration",
27  "cheers",
28  "applause",
29  "highFive",
30  "teamwork",
31  "fail",
32  "confused",
33  "thinking",
34  "thanks",
35  "letsGo",
36  "manual",
37  "office",
38  "meeting",
39  "deadline",
40  "coding",
41  "debugging",
42  "computer",
43  "startup",
44  "presentation",
45  "sales",
46  "growth",
47  "money",
48] as const;
49 
50export type ReactionTag = typeof REACTION_TAGS[number];
51 
52export const reactionSchema: Record<string, VariableField> = {
53  texts: {
54    type: "string",
55    label: "Punchline",
56    default: "Still editing manually?",
57    required: true,
58    description: "Short meme-like punchline shown over the reaction clip. Keep it to 2-6 words.",
59  },
60  reactionTag: {
61    type: "enum",
62    label: "Reaction tag",
63    default: "manual",
64    required: true,
65    description: "Pexels meme search intent. Pick from the punchline/problem copy first, then the overall video topic.",
66    options: [...REACTION_TAGS],
67  },
68  mediaUrl: {
69    type: "media",
70    label: "Reaction clip",
71    description: "Resolved Pexels MP4 URL.",
72  },
73  mediaType: {
74    type: "string",
75    label: "Media type",
76    default: "video",
77    description: "Always 'video' for reaction clips.",
78  },
79  mediaPoster: {
80    type: "string",
81    label: "Reaction poster image",
82    default: "",
83    description: "Still image shown while the reaction clip decodes its first frame.",
84  },
85};
86 
87export const reactionDefaults: Record<string, unknown> = {
88  texts: "Still editing manually?",
89  reactionTag: "manual",
90  mediaUrl: "",
91  mediaType: "video",
92  mediaPoster: "",
93};
94 
95export const ReactionTemplate: React.FC<SceneTemplateProps> = ({
96  variables,
97  style,
98  progress,
99  beatIntensity,
100  width,
101  height,
102  textArchetype,
103  safeZone,
104  sceneDuration,
105  isPlaying = true,
106}) => {
107// … truncated