feat(remotion): unlock remaining brand comps (iMessage, Instagram DMs, popup, lock screen)

MessageBubbles, MessagePopup, InstagramMessages, LockScreenMessage now
accept the universal Background/Text/Font/Accent controls; curated
iMessage/glass themes and authentic chrome preserved.

Author: sankalpaacharya

apps/remotion/src/compositions/InstagramMessages/InstagramMessages.tsx

@@ -7,6 +7,7 @@ import {
   staticFile,
   useVideoConfig,
 } from "remotion";
+import { type ClipStyle, resolveClipStyle } from "../../clip-style";
 import type { ChatMessage } from "../../editors/types";
 import { proxyExternalImg } from "../../proxy-image";
 import { useSafeArea } from "../../safe-area";
@@ -20,6 +21,8 @@ export type InstagramMessagesProps = {
   messages: ChatMessage[];
   theme: "light" | "dark";
   orientation?: "landscape" | "portrait";
+  /** Universal Style — background, received-bubble text, font, sent accent. */
+  clipStyle?: ClipStyle;
 };
 
 // 9:19.5 — modern iPhone screen aspect ratio.
@@ -35,6 +38,8 @@ const SENT_BG = "#A23CF8";
 
 type Palette = {
   bg: string;
+  /** Outgoing (sent) bubble background — the universal accent. */
+  sentBg: string;
   headerBg: string;
   headerBorder: string;
   headerText: string;
@@ -55,6 +60,7 @@ function getPalette(theme: "light" | "dark"): Palette {
   if (theme === "dark") {
     return {
       bg: "#000000",
+      sentBg: SENT_BG,
       headerBg: "#000000",
       headerBorder: "rgba(255,255,255,0.1)",
       headerText: "#ffffff",
@@ -73,6 +79,7 @@ function getPalette(theme: "light" | "dark"): Palette {
   }
   return {
     bg: "#ffffff",
+    sentBg: SENT_BG,
     headerBg: "#ffffff",
     headerBorder: "rgba(0,0,0,0.08)",
     headerText: "#0f1014",
@@ -96,10 +103,29 @@ export const InstagramMessages: React.FC<InstagramMessagesProps> = ({
   messages,
   theme,
   orientation = "landscape",
+  clipStyle,
 }) => {
   const frame = useDesignFrame();
   const { fps } = useVideoConfig();
-  const palette = getPalette(theme);
+  const basePalette = getPalette(theme);
+  const s = resolveClipStyle(clipStyle, {
+    background: basePalette.bg,
+    color: basePalette.bubbleReceivedText,
+    fontFamily:
+      "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    accent: basePalette.sentBg,
+  });
+  // Universal Style on top of the theme palette: chat-sheet background,
+  // received-bubble text, and the sent bubble accent. Header/composer chrome
+  // and the IG gradient + button keep their authentic per-theme look.
+  const palette: Palette = {
+    ...basePalette,
+    bg: s.background,
+    headerBg: s.background,
+    composerBg: s.background,
+    bubbleReceivedText: s.color,
+    sentBg: s.accent,
+  };
   const safe = useSafeArea();
   // Auto-portrait inside a device frame (see ChatFill for the same logic).
   const inDeviceFrame = safe.top > 0 || safe.bottom > 0;
@@ -113,8 +139,7 @@ export const InstagramMessages: React.FC<InstagramMessagesProps> = ({
         inset: 0,
         background: palette.bg,
         color: palette.bubbleReceivedText,
-        fontFamily:
-          "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+        fontFamily: s.fontFamily,
         overflow: "hidden",
         display: "flex",
         flexDirection: "column",
@@ -648,7 +673,7 @@ function TypingBubble({
   return (
     <div
       style={{
-        background: isRight ? SENT_BG : palette.receivedBg,
+        background: isRight ? palette.sentBg : palette.receivedBg,
         padding: "22px 28px",
         borderRadius: 36,
         display: "flex",
@@ -704,7 +729,7 @@ function MessageBubble({
   return (
     <div
       style={{
-        background: isRight ? SENT_BG : palette.receivedBg,
+        background: isRight ? palette.sentBg : palette.receivedBg,
         color: isRight ? palette.bubbleSentText : palette.bubbleReceivedText,
         padding: "18px 26px",
         borderRadius: 36,

apps/remotion/src/compositions/InstagramMessages/meta.ts

@@ -38,7 +38,6 @@ export const instagramMessagesInfo: CompositionInfo<InstagramMessagesProps> = {
   width: INSTAGRAM_MESSAGES_WIDTH,
   height: INSTAGRAM_MESSAGES_HEIGHT,
   defaultProps: instagramMessagesDefaultProps,
-  brandMode: "locked",
   phoneFitMode: "cover",
   fields: [
     { kind: "text", key: "contactName", label: "Contact name" },

apps/remotion/src/compositions/LockScreenMessage/LockScreenMessage.tsx

@@ -7,6 +7,7 @@ import {
   staticFile,
   useVideoConfig,
 } from "remotion";
+import { type ClipStyle, resolveClipStyle } from "../../clip-style";
 import { proxyExternalImg } from "../../proxy-image";
 import { snap } from "../../snap";
 import { useDesignFrame } from "../../use-design-frame";
@@ -55,6 +56,9 @@ export type LockScreenMessageProps = {
   n3Body?: string;
   n3Time?: string;
   n3Avatar?: string;
+
+  /** Universal Style — base background, clock text color, font. */
+  clipStyle?: ClipStyle;
 };
 
 type Notif = {
@@ -103,10 +107,18 @@ function collectNotifs(p: LockScreenMessageProps): Notif[] {
 }
 
 export const LockScreenMessage: React.FC<LockScreenMessageProps> = (props) => {
-  const { time, date, wallpaper } = props;
+  const { time, date, wallpaper, clipStyle } = props;
   const frame = useDesignFrame();
   const { fps } = useVideoConfig();
 
+  const s = resolveClipStyle(clipStyle, {
+    background: "#0c1018",
+    color: "#ffffff",
+    fontFamily:
+      "-apple-system, BlinkMacSystemFont, 'SF Pro Display', Inter, sans-serif",
+    accent: "#ffffff",
+  });
+
   const wallpaperSrc =
     resolveAsset(wallpaper) ?? staticFile(DEFAULT_WALLPAPER_SRC);
   const notifs = collectNotifs(props);
@@ -121,9 +133,8 @@ export const LockScreenMessage: React.FC<LockScreenMessageProps> = (props) => {
   return (
     <AbsoluteFill
       style={{
-        background: "#0c1018",
-        fontFamily:
-          "-apple-system, BlinkMacSystemFont, 'SF Pro Display', Inter, sans-serif",
+        background: s.background,
+        fontFamily: s.fontFamily,
         overflow: "hidden",
       }}
     >
@@ -161,7 +172,7 @@ export const LockScreenMessage: React.FC<LockScreenMessageProps> = (props) => {
           left: 0,
           right: 0,
           textAlign: "center",
-          color: "#fff",
+          color: s.color,
           opacity: clockIn,
           transform: `translate3d(0, ${snap(clockY)}px, 0)`,
         }}

apps/remotion/src/compositions/LockScreenMessage/meta.ts

@@ -42,7 +42,6 @@ export const lockScreenMessageInfo: CompositionInfo<LockScreenMessageProps> = {
   width: LOCK_SCREEN_MESSAGE_WIDTH,
   height: LOCK_SCREEN_MESSAGE_HEIGHT,
   defaultProps: lockScreenMessageDefaultProps,
-  brandMode: "locked",
   agentNotes:
     "Use for a 'phone buzzes' beat — messages landing on a locked iPhone over a wallpaper and clock. Great cold open or punchline. Keep each body short (one or two lines reads best). Leave n2/n3 empty for a single notification.",
   fields: [

apps/remotion/src/compositions/MessageBubbles/IMessageChat.tsx

@@ -101,8 +101,24 @@ export type IMessageChatProps = {
   designWidth?: number;
   /** Extra gallery photos for the attachment picker (besides the sent one). */
   galleryImages?: { name: string; url: string }[];
+  /**
+   * Universal Style overrides forwarded from the (now unlocked) MessageBubbles
+   * composition. Each maps to the one clean slot in the iMessage layout:
+   * `clipBackground` → chat sheet, `clipColor` → received-bubble text,
+   * `clipFontFamily` → root font, `clipAccent` → the sent (blue) bubble +
+   * tail. Unset (empty) means keep the authentic default.
+   */
+  clipBackground?: string;
+  clipColor?: string;
+  clipFontFamily?: string;
+  clipAccent?: string;
 };
 
+/** Use the override if set (non-empty), otherwise the authentic default. */
+function ov(value: string | undefined, fallback: string): string {
+  return value && value.trim() !== "" ? value : fallback;
+}
+
 export function IMessageChat({
   messages,
   title,
@@ -122,6 +138,10 @@ export function IMessageChat({
   keyboardOpen = 1,
   designWidth,
   galleryImages,
+  clipBackground,
+  clipColor,
+  clipFontFamily,
+  clipAccent,
 }: IMessageChatProps) {
   const grouped = groupThread(messages);
   // Caret blink for the idle (placeholder) composer — a ~1s cycle: on, quick
@@ -201,14 +221,20 @@ export function IMessageChat({
   const photoY = riseIn;
   const photoOpacity = fadeIn * (1 - sendT);
 
-  // The chat sheet (when there's no wallpaper) follows the appearance.
-  const sheetBg = dark ? "#000000" : "#ffffff";
+  // The chat sheet (when there's no wallpaper) follows the appearance — or the
+  // universal background override when one is set.
+  const sheetBg = ov(clipBackground, dark ? "#000000" : "#ffffff");
   // Chrome text/icons go light over a wallpaper OR in dark mode.
   const lightUI = hasBg || dark;
   const headerText = lightUI ? "#ffffff" : "#000000";
-  // Received bubbles use Apple's exact grays per appearance; sent stays blue.
-  const themText = dark ? "#ffffff" : "#000000";
+  // Received bubbles use Apple's exact grays per appearance; their text follows
+  // the universal text override. Sent bubbles use the universal accent (default
+  // iMessage blue) for both the fill and the tail.
+  const themText = ov(clipColor, dark ? "#ffffff" : "#000000");
   const themBubbleBg = dark ? IMESSAGE_THEM_BG_DARK : IMESSAGE_THEM_BG_LIGHT;
+  const sentBg = ov(clipAccent, IMESSAGE_GRADIENT);
+  const sentTail = ov(clipAccent, IMESSAGE_TAIL_ME_COLOR);
+  const fontStack = ov(clipFontFamily, SF_PRO_STACK);
   // The header/composer strips must NOT paint an opaque sheet color over the
   // WebGL glass canvas, or the glass chrome (buttons, name chip, composer pill)
   // is buried and only the bare icons show. Whenever glass is on we keep the
@@ -270,7 +296,7 @@ export function IMessageChat({
       bgImage={backgroundImage}
       bgColor={sheetBg}
       className={cn("h-full", className)}
-      style={{ fontFamily: SF_PRO_STACK }}
+      style={{ fontFamily: fontStack }}
     >
       <div className="relative flex h-full flex-col">
         {/* Subtle top darkness — a soft top-down gradient sitting ABOVE the
@@ -582,12 +608,8 @@ export function IMessageChat({
                             {m.typing ? (
                               <TypingBubble
                                 from={group.from}
-                                background={
-                                  isMe ? IMESSAGE_GRADIENT : themBubbleBg
-                                }
-                                tailColor={
-                                  isMe ? IMESSAGE_TAIL_ME_COLOR : themBubbleBg
-                                }
+                                background={isMe ? sentBg : themBubbleBg}
+                                tailColor={isMe ? sentTail : themBubbleBg}
                                 color={isMe ? "#fff" : themText}
                                 dotsColor={
                                   isMe ? "rgba(255,255,255,0.9)" : "#8e8e93"
@@ -605,10 +627,8 @@ export function IMessageChat({
                           <DotsToMessage
                             from={group.from}
                             tail={isLast}
-                            background={isMe ? IMESSAGE_GRADIENT : themBubbleBg}
-                            tailColor={
-                              isMe ? IMESSAGE_TAIL_ME_COLOR : themBubbleBg
-                            }
+                            background={isMe ? sentBg : themBubbleBg}
+                            tailColor={isMe ? sentTail : themBubbleBg}
                             color={isMe ? "#fff" : themText}
                             dotsColor={
                               isMe ? "rgba(255,255,255,0.9)" : "#8e8e93"

apps/remotion/src/compositions/MessageBubbles/MessageBubbles.tsx

@@ -8,10 +8,14 @@ import {
   staticFile,
   useVideoConfig,
 } from "remotion";
+import { type ClipStyle, resolveClipStyle } from "../../clip-style";
 import type { ChatMessage } from "../../editors/types";
 import { SmartAudio } from "../../smart-audio";
 import { DESIGN_FPS, useDesignFrame } from "../../use-design-frame";
-import type { ChatMessageItem } from "../_chat-demo/ChatDemo";
+import {
+  type ChatMessageItem,
+  IMESSAGE_GRADIENT,
+} from "../_chat-demo/ChatDemo";
 import { ChatFill } from "../_chat-demo/ChatFill";
 import { KEYBOARD_BG } from "../_chat-demo/Keyboard";
 import { useSFProDisplay } from "../_chat-demo/sf-pro";
@@ -117,6 +121,8 @@ export type MessageBubblesProps = {
    * gradient placeholders. Each is `{ name, url }` (static path or http URL).
    */
   galleryImages?: { name: string; url: string }[];
+  /** Universal Style — sheet background, received text, font, sent accent. */
+  clipStyle?: ClipStyle;
 };
 
 /** Pop balloon hold + rise timings (frames) for the keyboard key press. */
@@ -362,6 +368,7 @@ export const MessageBubbles: React.FC<MessageBubblesProps> = ({
   theme = "dark",
   showKeyboard = false,
   galleryImages,
+  clipStyle,
 }) => {
   // Load Apple's SF Pro Display so the chat renders in the real iMessage font
   // in headless exports too (blocks the render until decoded; never fails it).
@@ -484,7 +491,20 @@ export const MessageBubbles: React.FC<MessageBubblesProps> = ({
       })
     : 1;
 
-  const backdrop = backgroundImage || theme === "dark" ? "#000000" : "#ffffff";
+  // Universal Style. Authentic iMessage defaults per appearance: sheet bg
+  // (black/white), received-bubble text, SF Pro font, and the sent-bubble
+  // blue as the accent. Overrides forwarded into the iMessage renderer.
+  const s = resolveClipStyle(clipStyle, {
+    background: theme === "dark" ? "#000000" : "#ffffff",
+    color: theme === "dark" ? "#ffffff" : "#000000",
+    fontFamily:
+      "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif",
+    accent: IMESSAGE_GRADIENT,
+  });
+  // With a wallpaper the sheet stays the authentic black so the chrome reads;
+  // otherwise the screen fill follows the universal background (transparent
+  // when a Background Scene is chosen).
+  const backdrop = backgroundImage ? "#000000" : s.background;
 
   return (
     <>
@@ -553,6 +573,10 @@ export const MessageBubbles: React.FC<MessageBubblesProps> = ({
           keyboardOpen={keyboardOpen}
           designWidth={PHONE_DESIGN_WIDTH}
           galleryImages={galleryImages}
+          clipBackground={s.background}
+          clipColor={s.color}
+          clipFontFamily={s.fontFamily}
+          clipAccent={s.accent}
         />
       </ChatFill>
     </>

apps/remotion/src/compositions/MessageBubbles/meta.ts

@@ -139,10 +139,8 @@ export const messageBubblesInfo: CompositionInfo<MessageBubblesProps> = {
   width: MESSAGE_BUBBLES_WIDTH,
   height: MESSAGE_BUBBLES_HEIGHT,
   defaultProps: messageBubblesDefaultProps,
-  brandMode: "locked",
   phoneFitMode: "cover",
-  // Curated skins — first entry is the default look. Locked compositions
-  // still get the Theme picker (themes are hand-built, not free recoloring).
+  // Curated skins — first entry is the default look.
   themes: [{ id: "imessage", label: "iMessage" }],
   fields: [
     { kind: "text", key: "contactName", label: "Contact name" },