diff --git a/product/site/whatsapp-template-demo-video.mp4 b/product/site/whatsapp-template-demo-video.mp4 new file mode 100644 index 0000000..df31b47 Binary files /dev/null and b/product/site/whatsapp-template-demo-video.mp4 differ diff --git a/videos/remotion-demo/src/Root.tsx b/videos/remotion-demo/src/Root.tsx index 06ffe28..b73f9fc 100644 --- a/videos/remotion-demo/src/Root.tsx +++ b/videos/remotion-demo/src/Root.tsx @@ -12,6 +12,7 @@ import { SquareMCPTikTokProof, } from "./SquareMCPTikTok"; import { SquareMCPWhatsApp } from "./SquareMCPWhatsApp"; +import { SquareMCPWhatsAppTemplate } from "./SquareMCPWhatsAppTemplate"; export const RemotionRoot = () => { return ( @@ -96,6 +97,14 @@ export const RemotionRoot = () => { width={1920} height={1080} /> + ); }; diff --git a/videos/remotion-demo/src/SquareMCPWhatsAppTemplate.tsx b/videos/remotion-demo/src/SquareMCPWhatsAppTemplate.tsx new file mode 100644 index 0000000..0b0b429 --- /dev/null +++ b/videos/remotion-demo/src/SquareMCPWhatsAppTemplate.tsx @@ -0,0 +1,44 @@ +import { AbsoluteFill, Sequence, useVideoConfig } from "remotion"; +import { WhatsAppBackground } from "./scenes/whatsapp/WhatsAppBackground"; +import { WhatsAppTemplateScreen } from "./scenes/whatsapp/WhatsAppTemplateScreen"; +import { FONT, SPRING_CFG } from "./styles"; +import { spring, useCurrentFrame } from "remotion"; + +const WA_GREEN = "#25D366"; + +const Intro = () => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); + const logoIn = spring({ fps, frame, config: SPRING_CFG }); + const textIn = spring({ fps, frame: Math.max(0, frame - 18), config: SPRING_CFG }); + const subIn = spring({ fps, frame: Math.max(0, frame - 36), config: SPRING_CFG }); + + return ( + +
📋
+
+ WhatsApp Template Management +
+
+ Creating message templates via the Business API +
+ + ); +}; + +// Total: 3s intro + 13s template screen = 16s @ 30fps = 480 frames +export const SquareMCPWhatsAppTemplate = () => { + const { fps } = useVideoConfig(); + + return ( + + + + + + + + + + ); +}; diff --git a/videos/remotion-demo/src/scenes/whatsapp/WhatsAppTemplateScreen.tsx b/videos/remotion-demo/src/scenes/whatsapp/WhatsAppTemplateScreen.tsx new file mode 100644 index 0000000..c14d85f --- /dev/null +++ b/videos/remotion-demo/src/scenes/whatsapp/WhatsAppTemplateScreen.tsx @@ -0,0 +1,348 @@ +import { + AbsoluteFill, + interpolate, + spring, + useCurrentFrame, + useVideoConfig, +} from "remotion"; +import { FONT, SPRING_CFG, SPRING_SOFT } from "../../styles"; + +const WA_GREEN = "#25D366"; +const WA_DARK = "#111b21"; +const WA_HEADER = "#202c33"; + +const TEMPLATE_REQUEST_LINES = [ + "curl -X POST \\", + " https://graph.facebook.com/v18.0/ \\", + " {BUSINESS_ACCOUNT_ID}/message_templates \\", + " -H 'Authorization: Bearer {TOKEN}' \\", + " -H 'Content-Type: application/json' \\", + " -d '{", + ' "name": "pilot_request_alert",', + ' "language": "en_US",', + ' "category": "MARKETING",', + ' "components": [', + ' { "type": "HEADER", "format": "TEXT",', + ' "text": "New Pilot Request 🚀" },', + ' { "type": "BODY",', + ' "text": "{{1}} from {{2}} wants to connect.\\nUse case: {{3}}" },', + ' { "type": "FOOTER",', + ' "text": "Sent via SquareMCP" }', + " ]", + " }'", +]; + +const RESPONSE_LINES = [ + "{", + ' "id": "1234567890123456",', + ' "status": "PENDING",', + ' "category": "MARKETING"', + "}", +]; + +// ── Left: API call panel ────────────────────────────────────────────────────── + +const LeftPanel = ({ frame, fps }: { frame: number; fps: number }) => { + const panelIn = spring({ fps, frame, config: SPRING_SOFT }); + const chatIn = spring({ fps, frame: Math.max(0, frame - 10), config: SPRING_CFG }); + const termIn = spring({ fps, frame: Math.max(0, frame - 30), config: SPRING_CFG }); + + const reqProgress = interpolate(frame, [40, 170], [0, TEMPLATE_REQUEST_LINES.length], { extrapolateRight: "clamp" }); + const resProgress = interpolate(frame, [185, 230], [0, RESPONSE_LINES.length], { extrapolateRight: "clamp" }); + + return ( +
+
+ SquareMCP — Creating message template +
+ + {/* Chat prompt */} +
+
Chat
+
+ Create a WhatsApp message template
+ for new pilot request alerts. +
+
+ + {/* Terminal */} +
+
+ {["#ff5f57", "#febc2e", "#28c840"].map((c) => ( +
+ ))} +
+ terminal — curl +
+
+ +
$
+ + {TEMPLATE_REQUEST_LINES.slice(0, Math.ceil(reqProgress)).map((line, i) => ( +
+ {line} +
+ ))} + + {resProgress > 0 && ( +
+
+ # Response (200 OK) — template submitted for review +
+ {RESPONSE_LINES.slice(0, Math.ceil(resProgress)).map((line, i) => ( +
+ {line} +
+ ))} +
+ )} +
+
+ ); +}; + +// ── Right: template preview panel ──────────────────────────────────────────── + +const RightPanel = ({ frame, fps }: { frame: number; fps: number }) => { + const panelIn = spring({ fps, frame, config: SPRING_SOFT }); + const labelIn = spring({ fps, frame: Math.max(0, frame - 15), config: SPRING_CFG }); + const headerIn = spring({ fps, frame: Math.max(0, frame - 220), config: SPRING_CFG }); + const bodyIn = spring({ fps, frame: Math.max(0, frame - 245), config: SPRING_CFG }); + const footerIn = spring({ fps, frame: Math.max(0, frame - 265), config: SPRING_CFG }); + const badgeIn = spring({ fps, frame: Math.max(0, frame - 290), config: SPRING_CFG }); + + return ( +
+
+ Template Preview +
+ + {/* Phone showing template */} +
+ {/* Header bar */} +
+
+
S
+
+
+
SquareMCP
+
Business Account
+
+
+ + {/* Chat body */} +
+ + {/* Template message bubble */} +
+ {/* Header component */} +
+
+ Header +
+
+ New Pilot Request 🚀 +
+
+ + {/* Body component */} +
+
+ Body +
+
+ {"{{1}}"} + {" from "} + {"{{2}}"} + {" wants to connect.\nUse case: "} + {"{{3}}"} +
+
+ + {/* Footer component */} +
+
+ Footer +
+
+ Sent via SquareMCP +
+
+ 9:41 AM +
+
+
+
+ + {/* Input bar */} +
+
+ Message +
+
+ +
+
+
+ + {/* Status badge */} +
+
+
+ Status: PENDING — submitted to Meta for review +
+
+
+ ); +}; + +const Divider = () => ( +
+); + +export const WhatsAppTemplateScreen = () => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); + + return ( + + + + + + ); +};