Backdrop

1"use client";
2 
3import { isValidElement, type ReactNode } from "react";
4import { AbsoluteFill, Img, useVideoConfig } from "remotion";
5 
6export type BackdropFill =
7  | { type: "color"; value: string }
8  | { type: "gradient"; value: string }
9  | { type: "image"; src: string; fit?: "cover" | "contain" };
10 
11export interface BackdropProps {
12  fill?: BackdropFill | ReactNode;
13  padding?: number;
14  radius?: number;
15  shadow?: string;
16  children?: ReactNode;
17  className?: string;
18}
19 
20const DEFAULT_FILL: BackdropFill = { type: "color", value: "#0a0a0a" };
21 
22function FillLayer({ fill }: { fill: BackdropFill }) {
23  if (fill.type === "image") {
24    return (
25      <AbsoluteFill>
26        <Img
27          src={fill.src}
28          style={{
29            width: "100%",
30            height: "100%",
31            objectFit: fill.fit ?? "cover",
32          }}
33        />
34      </AbsoluteFill>
35    );
36  }
37 
38  return <AbsoluteFill style={{ background: fill.value }} />;
39}
40 
41export function Backdrop({
42  fill,
43  padding = 4,
44  radius = 1,
45  shadow = "0 20px 60px rgba(0,0,0,0.4)",
46  children,
47  className,
48}: BackdropProps) {
49  const { width } = useVideoConfig();
50 
51  const paddingPx = (padding / 100) * width;
52  const radiusPx = (radius / 100) * width;
53 
54  const fillLayer = isValidElement(fill) ? (
55    <AbsoluteFill>{fill}</AbsoluteFill>
56  ) : (
57    <FillLayer fill={(fill as BackdropFill | undefined) ?? DEFAULT_FILL} />
58  );
59 
60  return (
61    <AbsoluteFill className={className}>
62      {fillLayer}
63      {children != null && (
64        <div
65          style={{
66            position: "absolute",
67            inset: paddingPx,
68            overflow: "hidden",
69            borderRadius: radiusPx,
70            display: "flex",
71            ...(shadow === "" ? {} : { boxShadow: shadow }),
72          }}
73        >
74          <div style={{ width: "100%", height: "100%" }}>{children}</div>
75        </div>
76      )}
77    </AbsoluteFill>
78  );
79}