feat(film): pillar title card

marketing/product-film/src/components/PillarTitle.tsx

@@ -0,0 +1,44 @@
+import { useCurrentFrame, interpolate, spring, useVideoConfig, AbsoluteFill } from "remotion";
+import { theme } from "../theme";
+
+export const PillarTitle: React.FC<{
+  index: string; // "①" etc, or "01"
+  title: string;
+  subtitle: string;
+  startFrame: number;
+  durationInFrames: number;
+}> = ({ index, title, subtitle, startFrame, durationInFrames }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = frame - startFrame;
+  if (local < 0 || local > durationInFrames) return null;
+
+  const enter = spring({ frame: local, fps, config: { damping: 200 }, durationInFrames: 20 });
+  const opacity = interpolate(local, [0, 10, durationInFrames - 12, durationInFrames], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const y = interpolate(enter, [0, 1], [40, 0]);
+
+  return (
+    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", opacity }}>
+      <div style={{ transform: `translateY(${y}px)`, textAlign: "center", fontFamily: theme.font }}>
+        <div style={{ fontSize: 34, fontWeight: 800, color: theme.blue, marginBottom: 16, fontFamily: theme.mono }}>{index}</div>
+        <div
+          style={{
+            fontSize: 96,
+            fontWeight: 900,
+            letterSpacing: "-0.02em",
+            color: theme.text,
+            background: theme.brandGradient,
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+          }}
+        >
+          {title}
+        </div>
+        <div style={{ fontSize: 36, color: theme.textDim, marginTop: 18, fontWeight: 600 }}>{subtitle}</div>
+      </div>
+    </AbsoluteFill>
+  );
+};