Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(film): cold open + promise sequences

Browse Source
This commit is contained in:
Satyam Rastogi
2026-05-30 02:58:47 +05:30
parent 1891b515cb
commit 88a29a336f
2 changed files with 52 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
marketing/product-film/src/sequences/ColdOpen.tsx
+26 -3
View File
@@ -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>
);
};
marketing/product-film/src/sequences/Promise.tsx
+24 -3
View File
@@ -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>
);
};