From 88a29a336fa5323732ffcc0b4273b5520beb9613 Mon Sep 17 00:00:00 2001
From: Satyam Rastogi <satyamrastogi302@gmail.com>
Date: Sat, 30 May 2026 02:58:47 +0530
Subject: [PATCH] feat(film): cold open + promise sequences

---
 .../product-film/src/sequences/ColdOpen.tsx   | 31 ++++++++++++++++---
 .../product-film/src/sequences/Promise.tsx    | 29 ++++++++++++++---
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/marketing/product-film/src/sequences/ColdOpen.tsx b/marketing/product-film/src/sequences/ColdOpen.tsx
index b7d7c84..4bbba7f 100644
--- a/marketing/product-film/src/sequences/ColdOpen.tsx
+++ b/marketing/product-film/src/sequences/ColdOpen.tsx
@@ -1,5 +1,28 @@
-import { PillarTitle } from "../components/PillarTitle";
+import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
+import { BlueprintBg } from "../components/BlueprintBg";
+import { Caption } from "../components/Caption";
+import { theme } from "../theme";
 import { DURATIONS } from "../timing";
-export const ColdOpen: React.FC = () => (
-  <PillarTitle index="" title="Cold Open" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.coldOpen} />
-);
+
+export const ColdOpen: React.FC = () => {
+  const frame = useCurrentFrame();
+  const hud = interpolate(frame, [10, 30], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return (
+    <AbsoluteFill>
+      <BlueprintBg opacity={0.5} />
+      <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
+        <div style={{ fontFamily: theme.font, fontWeight: 900, fontSize: 130, color: theme.text, letterSpacing: "-0.03em", lineHeight: 0.95, textAlign: "center" }}>
+          ROOFING<br />
+          <span style={{ background: theme.brandGradient, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>REVOLUTIONIZED</span>
+        </div>
+      </AbsoluteFill>
+      <div style={{ position: "absolute", bottom: 80, left: 80, opacity: hud, borderLeft: `1px solid ${theme.cyan}`, paddingLeft: 14, fontFamily: theme.mono, color: theme.cyan, fontSize: 22 }}>
+        ▸ 5,847 PROPERTIES TRACKED
+      </div>
+      <div style={{ position: "absolute", bottom: 80, right: 80, opacity: hud, borderRight: `1px solid ${theme.amber}`, paddingRight: 14, textAlign: "right", fontFamily: theme.mono, color: theme.amber, fontSize: 22 }}>
+        ▸ HAIL WATCH ACTIVE · ETA 35 MIN
+      </div>
+      <Caption text="A storm hits. The leads flood in. Then what?" startFrame={Math.round(DURATIONS.coldOpen * 0.45)} durationInFrames={Math.round(DURATIONS.coldOpen * 0.5)} />
+    </AbsoluteFill>
+  );
+};
diff --git a/marketing/product-film/src/sequences/Promise.tsx b/marketing/product-film/src/sequences/Promise.tsx
index b5e3111..948907c 100644
--- a/marketing/product-film/src/sequences/Promise.tsx
+++ b/marketing/product-film/src/sequences/Promise.tsx
@@ -1,5 +1,26 @@
-import { PillarTitle } from "../components/PillarTitle";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { BlueprintBg } from "../components/BlueprintBg";
+import { theme } from "../theme";
 import { DURATIONS } from "../timing";
-export const Promise: React.FC = () => (
-  <PillarTitle index="" title="Promise" subtitle="(stub)" startFrame={0} durationInFrames={DURATIONS.promise} />
-);
+
+export const Promise: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const rise = spring({ frame, fps, durationInFrames: 24, config: { damping: 200 } });
+  const y = interpolate(rise, [0, 1], [30, 0]);
+  const opacity = interpolate(frame, [0, 14, DURATIONS.promise - 12, DURATIONS.promise], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return (
+    <AbsoluteFill>
+      <BlueprintBg opacity={0.4} />
+      <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", opacity }}>
+        <div style={{ transform: `translateY(${y}px)`, textAlign: "center", fontFamily: theme.font }}>
+          <div style={{ fontSize: 76, fontWeight: 900, color: theme.text, letterSpacing: "-0.02em" }}>
+            LynkedUp <span style={{ background: theme.brandGradient, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>Pro</span>
+          </div>
+          <div style={{ fontSize: 40, color: theme.textDim, marginTop: 18, fontWeight: 600 }}>From the storm to the bank — in one system.</div>
+          <div style={{ fontSize: 28, color: theme.blue, marginTop: 10, fontWeight: 700 }}>Your team runs it. You control all of it.</div>
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};