Testimonial

1/**
2 * social-testimonial — animated quote card with word-by-word text reveal.
3 *
4 * Converted from Remotion TestimonialCard pattern. Dark card with large
5 * quotation mark, word-by-word quote reveal, horizontal divider, and
6 * author avatar + name section. No TextOverlay — text is integral to the visual.
7 *
8 * Block structure (docs/blocks.md):
9 *   background — SceneBackground + accent radial glow behind the card
10 *   hero       — TestimonialCard primitive (quote mark, word-by-word quote,
11 *                divider, author row; text integral — no caption slot)
12 */
13 
14import type { VariableField } from "../video-config";
15import type { SceneTemplateProps } from "./types";
16import { resolveTokens } from "../theme";
17import { withOpacity } from "../theme";
18import { SceneBackground, mediaBackgroundSchemaFields, mediaBackgroundDefaults } from "./scene-background";
19import { stripPipe } from "../typography";
20import { TestimonialCard } from "../primitives/social/TestimonialCard";
21 
22export const socialTestimonialSchema: Record<string, VariableField> = {
23  quote: {
24    type: "string",
25    label: "Quote",
26    default:
27      "Best decision I made this year. Our conversion rate doubled in the first week.",
28    required: true,
29    description: "Quote text",
30  },
31  authorName: {
32    type: "string",
33    label: "Author name",
34    default: "Jessica Torres",
35    required: true,
36    description: "Name of the person being quoted",
37  },
38  authorRole: {
39    type: "string",
40    label: "Role / title",
41    default: "VP of Marketing, Acme Inc",
42    description: "Job title or description below the name",
43  },
44  avatarColor: {
45    type: "color",
46    label: "Avatar color",
47    default: "#ec4899",
48    description: "Avatar circle color. Defaults to pink.",
49  },
50  ...mediaBackgroundSchemaFields,
51};
52 
53export const socialTestimonialDefaults: Record<string, unknown> = {
54  quote:
55    "Best decision I made this year. Our conversion rate doubled in the first week.",
56  authorName: "Jessica Torres",
57  authorRole: "VP of Marketing, Acme Inc",
58  avatarColor: "#ec4899",
59  ...mediaBackgroundDefaults,
60};
61 
62export const SocialTestimonialTemplate: React.FC<SceneTemplateProps> = ({
63  variables,
64  style,
65  progress,
66  beatIntensity,
67  width,
68  height,
69  sceneDuration,
70  isPlaying = true,
71}) => {
72  const dim = Math.min(width, height);
73  const { accent, font, explicit } = resolveTokens(style);
74 
75  const quote = stripPipe(String(variables.quote || ""));
76// … truncated