Tweet

1/**
2 * social-tweet — X-style post card on a media background.
3 *
4 * Card visuals + motion live in the TweetCard primitive
5 * (src/lib/primitives/social/TweetCard.tsx). This template wires the
6 * scene background + variable schema + primitive together.
7 */
8 
9import * as React from "react";
10import type { VariableField } from "../video-config";
11import type { SceneTemplateProps } from "./types";
12import { resolveTokens } from "../theme";
13import { SceneBackground, mediaBackgroundSchemaFields, mediaBackgroundDefaults } from "./scene-background";
14import { TweetCard, hashHue } from "../primitives/social/TweetCard";
15 
16export const socialTweetSchema: Record<string, VariableField> = {
17  authorName: {
18    type: "string",
19    label: "Author name",
20    default: "Your brand",
21    required: true,
22    description: "Display name shown bold next to the verified checkmark.",
23  },
24  authorHandle: {
25    type: "string",
26    label: "Handle",
27    default: "",
28    description: "Username in @format. Leave empty to auto-derive from author name (e.g. 'Linear' → '@linear').",
29  },
30  authorVerified: {
31    type: "boolean",
32    label: "Verified checkmark",
33    default: true,
34    description: "Show the blue verified checkmark next to the author name.",
35  },
36  message: {
37    type: "string",
38    label: "Tweet text",
39    default: "Just shipped the new feature 🚀",
40    required: true,
41    description: "The tweet/post content. Reads best at 1-3 lines (~80-180 chars). Emoji land naturally at the end of a phrase.",
42  },
43  likes: {
44    type: "number",
45    label: "Likes",
46    default: 602,
47    description: "Target like count (rolls up from 0).",
48  },
49  replies: {
50    type: "number",
51    label: "Replies",
52    default: 19,
53    description: "Target reply count (rolls up from 0).",
54  },
55  ...mediaBackgroundSchemaFields,
56};
57 
58export const socialTweetDefaults: Record<string, unknown> = {
59  authorName: "Your brand",
60  authorHandle: "",
61  authorVerified: true,
62  message: "Just shipped the new feature 🚀",
63  likes: 602,
64  replies: 19,
65  ...mediaBackgroundDefaults,
66};
67 
68export const SocialTweetTemplate: React.FC<SceneTemplateProps> = ({
69  variables,
70  style,
71  progress,
72  beatIntensity,
73  width,
74  height,
75  sceneDuration,
76  isPlaying = true,
77  backgroundEffect,
78}) => {
79  const authorName = String(variables.authorName || "Your brand");
80  const message = String(variables.message || "");
81  // Per-author hashed hue is an intentional divergence from the canonical
82// … truncated