diff --git a/product/site/squaremcp-logo-transparent.png b/product/site/squaremcp-logo-transparent.png new file mode 100644 index 0000000..842755f Binary files /dev/null and b/product/site/squaremcp-logo-transparent.png differ diff --git a/product/site/whatsapp-demo-video.mp4 b/product/site/whatsapp-demo-video.mp4 new file mode 100644 index 0000000..0c809e4 Binary files /dev/null and b/product/site/whatsapp-demo-video.mp4 differ diff --git a/videos/remotion-demo/src/Root.tsx b/videos/remotion-demo/src/Root.tsx index 635c144..06ffe28 100644 --- a/videos/remotion-demo/src/Root.tsx +++ b/videos/remotion-demo/src/Root.tsx @@ -11,6 +11,7 @@ import { SquareMCPTikTokProblem, SquareMCPTikTokProof, } from "./SquareMCPTikTok"; +import { SquareMCPWhatsApp } from "./SquareMCPWhatsApp"; export const RemotionRoot = () => { return ( @@ -87,6 +88,14 @@ export const RemotionRoot = () => { width={1920} height={1080} /> + ); }; diff --git a/videos/remotion-demo/src/SquareMCPWhatsApp.tsx b/videos/remotion-demo/src/SquareMCPWhatsApp.tsx new file mode 100644 index 0000000..d9d85e6 --- /dev/null +++ b/videos/remotion-demo/src/SquareMCPWhatsApp.tsx @@ -0,0 +1,27 @@ +import { AbsoluteFill, Sequence, useVideoConfig } from "remotion"; +import { WhatsAppBackground } from "./scenes/whatsapp/WhatsAppBackground"; +import { WhatsAppIntro } from "./scenes/whatsapp/WhatsAppIntro"; +import { WhatsAppSplitScreen } from "./scenes/whatsapp/WhatsAppSplitScreen"; + +const Shell = ({ children }: { children: React.ReactNode }) => ( + + + {children} + +); + +// Total: 3s intro + 12s split-screen = 15s @ 30fps = 450 frames +export const SquareMCPWhatsApp = () => { + const { fps } = useVideoConfig(); + + return ( + + + + + + + + + ); +}; diff --git a/videos/remotion-demo/src/scenes/whatsapp/WhatsAppBackground.tsx b/videos/remotion-demo/src/scenes/whatsapp/WhatsAppBackground.tsx new file mode 100644 index 0000000..97f2402 --- /dev/null +++ b/videos/remotion-demo/src/scenes/whatsapp/WhatsAppBackground.tsx @@ -0,0 +1,25 @@ +import { AbsoluteFill } from "remotion"; + +export const WhatsAppBackground = () => ( + + {/* Subtle grid */} + + {/* Glow */} + + +); diff --git a/videos/remotion-demo/src/scenes/whatsapp/WhatsAppIntro.tsx b/videos/remotion-demo/src/scenes/whatsapp/WhatsAppIntro.tsx new file mode 100644 index 0000000..0119fc2 --- /dev/null +++ b/videos/remotion-demo/src/scenes/whatsapp/WhatsAppIntro.tsx @@ -0,0 +1,88 @@ +import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "remotion"; +import { FONT, SPRING_CFG } from "../../styles"; + +const WA_GREEN = "#25D366"; + +const WhatsAppIcon = ({ size }: { size: number }) => ( + + + + +); + +const SquareMCPIcon = ({ size }: { size: number }) => ( + + + + + + + + + + +); + +export const WhatsAppIntro = () => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); + + const logoIn = spring({ fps, frame, config: SPRING_CFG }); + const textIn = spring({ fps, frame: Math.max(0, frame - 20), config: SPRING_CFG }); + const subIn = spring({ fps, frame: Math.max(0, frame - 40), config: SPRING_CFG }); + + return ( + + {/* Logo pair */} +
+ +
×
+ +
+ + {/* Title */} +
+ SquareMCP × WhatsApp Business +
+ + {/* Subtitle */} +
+ Sending messages via the Cloud API +
+ + ); +}; diff --git a/videos/remotion-demo/src/scenes/whatsapp/WhatsAppSplitScreen.tsx b/videos/remotion-demo/src/scenes/whatsapp/WhatsAppSplitScreen.tsx new file mode 100644 index 0000000..d2e430c --- /dev/null +++ b/videos/remotion-demo/src/scenes/whatsapp/WhatsAppSplitScreen.tsx @@ -0,0 +1,369 @@ +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_BUBBLE = "#005c4b"; +const WA_HEADER = "#202c33"; + +// ── Left panel: SquareMCP chat + API call ───────────────────────────────────── + +const CURL_LINES = [ + "curl -X POST \\", + " https://graph.facebook.com/v18.0/ \\", + " {PHONE_NUMBER_ID}/messages \\", + " -H 'Authorization: Bearer {TOKEN}' \\", + " -H 'Content-Type: application/json' \\", + " -d '{", + ' "messaging_product": "whatsapp",', + ' "to": "+19548716341",', + ' "type": "text",', + ' "text": { "body": "Hello from SquareMCP!" }', + " }'", +]; + +const RESPONSE_LINES = [ + "{", + ' "messaging_product": "whatsapp",', + ' "messages": [{', + ' "id": "wamid.HBgLMTk1NDg3MTYzNDEV..."', + " }]", + "}", +]; + +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 }); + + // Animate curl lines appearing one by one + const curlProgress = interpolate(frame, [40, 140], [0, CURL_LINES.length], { extrapolateRight: "clamp" }); + // Response appears after curl finishes + const responseProgress = interpolate(frame, [155, 210], [0, RESPONSE_LINES.length], { extrapolateRight: "clamp" }); + + return ( +
+ {/* Section label */} +
+ SquareMCP — Sending message +
+ + {/* Chat prompt bubble */} +
+
Chat
+
+ Send a WhatsApp message to +1 954 871 6341:
+ "Hello from SquareMCP!" +
+
+ + {/* Terminal */} +
+ {/* Terminal header */} +
+ {["#ff5f57", "#febc2e", "#28c840"].map((c) => ( +
+ ))} +
+ terminal — curl +
+
+ + {/* Prompt */} +
+ $ {/* cursor blink when not yet started */} +
+ + {/* Curl lines */} + {CURL_LINES.slice(0, Math.ceil(curlProgress)).map((line, i) => ( +
+ {line} +
+ ))} + + {/* Response */} + {responseProgress > 0 && ( +
+
+ # Response (200 OK) +
+ {RESPONSE_LINES.slice(0, Math.ceil(responseProgress)).map((line, i) => ( +
+ {line} +
+ ))} +
+ )} +
+
+ ); +}; + +// ── Right panel: WhatsApp phone UI ──────────────────────────────────────────── + +const RightPanel = ({ frame, fps }: { frame: number; fps: number }) => { + const panelIn = spring({ fps, frame, config: SPRING_SOFT }); + // Message bubble appears at frame 220 (after API response shown) + const msgIn = spring({ fps, frame: Math.max(0, frame - 220), config: SPRING_CFG }); + const checkIn = spring({ fps, frame: Math.max(0, frame - 260), config: SPRING_CFG }); + + const showMsg = frame >= 220; + + return ( +
+ {/* Phone shell */} +
+ {/* Status bar */} +
+
9:41
+
+ {/* Signal bars */} +
+ {[8, 12, 16, 20].map((h, i) => ( +
+ ))} +
+ {/* Battery */} +
+
+
+
+
+ + {/* Chat header */} +
+
+
S
+
+
+
SquareMCP
+
Business Account
+
+
+ + {/* Chat body */} +
+ {/* Incoming message bubble */} + {showMsg && ( +
+
+
+ Hello from SquareMCP! +
+ {/* Timestamp + checks */} +
+
9:41 AM
+ {/* Double check marks */} +
+ + + + +
+
+
+
+ )} +
+ + {/* Input bar */} +
+
+ Message +
+
+ + + +
+
+
+
+ ); +}; + +// ── Divider ─────────────────────────────────────────────────────────────────── + +const Divider = () => ( +
+); + +// ── Split screen scene ──────────────────────────────────────────────────────── + +export const WhatsAppSplitScreen = () => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); + + return ( + + + + + + ); +};