Brand Message

1/**
2 * brand-message — single iMessage-style sent bubble over media.
3 *
4 * One outgoing chat message, right-aligned. Mirrors the chatMessenger
5 * animation exactly: typing dots pop in (right side, iMessage blue),
6 * bounce, fade out, then the message bubble pops in. No avatar, no
7 * sender header, no tail — the same minimal iMessage rendering as
8 * chatMessenger. The differentiator from chatMessenger is that this
9 * runs ONE message over a media background, not a multi-message
10 * conversation.
11 *
12 * Use cases: "We built this for you", "Thanks for being here",
13 * "Try it free this week" — brand voice messages where you want a
14 * direct, personal frame, like a single iMessage from the brand
15 * dropping into the viewer's frame.
16 */
17 
18import * as React from "react";
19import type { VariableField } from "../video-config";
20import type { SceneTemplateProps } from "./types";
21import {
22  SceneBackground,
23  mediaBackgroundSchemaFields,
24  mediaBackgroundDefaults,
25} from "./scene-background";
26import { stripPipe } from "../typography";
27import { BrandMessageBubble } from "../primitives/typography/BrandMessageBubble";
28 
29export const brandMessageSchema: Record<string, VariableField> = {
30  brandName: {
31    type: "string",
32    label: "Brand name",
33    default: "Your brand",
34    required: true,
35    description:
36      "Small italic label at the top-left of the bubble identifying who the message is from (like 'you' in iMessage screenshots). 1-3 words reads best.",
37  },
38  message: {
39    type: "string",
40    label: "Message",
41    default: "We built this for you.",
42    required: true,
43    description:
44      "The brand-voiced message rendered as a single iMessage-style outgoing bubble (right side, cream) over the media background. 4-12 words reads best — short messages produce a tight bubble; longer ones wrap inside the 75% width cap. Examples: 'We built this for you.', 'Thanks for being here.', 'See what's new this week.'",
45  },
46  ...mediaBackgroundSchemaFields,
47};
48 
49export const brandMessageDefaults: Record<string, unknown> = {
50  brandName: "Your brand",
51  message: "We built this for you.",
52  ...mediaBackgroundDefaults,
53};
54 
55export const BrandMessageTemplate: React.FC<SceneTemplateProps> = ({
56  variables,
57  style,
58  progress,
59  beatIntensity,
60  width,
61  height,
62  sceneDuration,
63  isPlaying = true,
64  safeZone,
65  backgroundEffect,
66}) => {
67  /* Match chatMessenger's scaling so the bubble feels identical: the
68   * 534-wide reference normalizes typography. Use the SHORT edge so
69// … truncated