b-roll-stack

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { Video } from "@remotion/media";
3import { Img, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
4import { CODE_THEMES } from "@/remotion/lib/code-syntax";
5import { getSafeAreaPadding } from "@/remotion/lib/layout";
6import { EASING } from "@/remotion/lib/motion-tokens";
7import {
8  getMediaObjectFitStyle,
9  isVideoSource,
10  type MediaFit,
11} from "@/remotion/lib/media-utils";
12 
13const { fontFamily } = loadFont("normal", {
14  weights: ["400", "500", "600", "700"],
15  subsets: ["latin"],
16});
17 
18export type BRollItem = {
19  src: string;
20  /** Label on the card while it is at the front. */
21  title?: string;
22  /** Second line under the label. */
23  caption?: string;
24  fit?: MediaFit;
25  backgroundColor?: string;
26};
27 
28export type BRollStackProps = {
29  items?: BRollItem[];
30  /** Headline beside the deck. */
31  title?: string;
32  /** Small label above the headline. */
33  kicker?: string;
34  /** Supporting line under the headline. */
35  caption?: string;
36  /** Seconds each shot holds at the front before the deck advances. */
37  holdSeconds?: number;
38  /** Aspect the cards are cut to. */
39  aspect?: number;
40  backgroundColor?: string;
41  accentColor?: string;
42  theme?: "dark" | "light";
43  /** Animation speed multiplier. */
44  speed?: number;
45};
46 
47/** Beat plan in seconds. */
48const T = {
49  header: 0,
50  /** Deck lands after the headline. */
51  deck: 0.28,
52  /** First advance, measured from the deck landing. */
53  firstHold: 1.35,
54  /** Time one card takes to ride to the front. */
55  advance: 0.55,
56} as const;
57 
58const clamp = {
59  extrapolateLeft: "clamp",
60  extrapolateRight: "clamp",
61} as const;
62 
63/** How a card sits at a given depth in the deck — 0 is the front. */
64const placement = (depth: number, u: number) => ({
65  x: depth * 34 * u,
66  y: depth * -22 * u,
67  scale: 1 - depth * 0.07,
68  rotate: depth * 1.6,
69});
70 
71/**
72 * A deck of supporting shots being dealt rather than three cards fanned out and
73 * held: each shot rides to the front in turn with its own label, the one it
74 * replaces slides back into the stack, and the deck keeps cycling for as long
75 * as the scene runs.
76 */
77export const BRollStack: React.FC<BRollStackProps> = ({
78  items = [],
79  title,
80  kicker,
81  caption,
82  holdSeconds = 1.35,
83  aspect = 16 / 9,
84  backgroundColor,
85  accentColor = "#E8B86D",
86  theme = "dark",
87  speed = 1,
88}) => {
89  const frame = useCurrentFrame();
90  const { fps, width, height } = useVideoConfig();
91// … truncated