Backdrop

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties, ReactNode } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9export type BackdropFill =
10  | { type: "color"; value: string }
11  | { type: "gradient"; value: string }
12  | { type: "image"; src: string; fit?: "cover" | "contain" };
13 
14const getFillStyle = (fill: BackdropFill): CSSProperties => {
15  if (fill.type === "color") {
16    return { background: fill.value };
17  }
18  if (fill.type === "gradient") {
19    return { background: fill.value };
20  }
21  return {
22    backgroundImage: `url(${fill.src})`,
23    backgroundPosition: "center",
24    backgroundSize: fill.fit ?? "cover",
25  };
26};
27 
28const DefaultContent = () => (
29  <span
30    style={{
31      color: "white",
32      fontFamily: FONT_FAMILY,
33      fontSize: 72,
34      fontWeight: 700,
35      letterSpacing: "-0.03em",
36    }}
37  >
38    Backdrop
39  </span>
40);
41 
42export interface BackdropProps {
43  fill?: BackdropFill;
44  padding?: number;
45  radius?: number;
46  shadow?: string;
47  background?: string;
48  width?: number;
49  height?: number;
50  children?: ReactNode;
51  className?: string;
52  fps?: number;
53  durationInFrames?: number;
54  speed?: number;
55}
56 
57export const Backdrop = ({
58  fill,
59  padding = 10,
60  radius = 4,
61  shadow,
62  background = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
63  children,
64  className,
65  fps = 30,
66  durationInFrames = 90,
67}: BackdropProps) => {
68  const durationMs = (durationInFrames / fps) * 1000;
69 
70  const fillStyle = fill ? getFillStyle(fill) : { background };
71  const backdropStyle = {
72    ...fillStyle,
73    ...(shadow ? { boxShadow: shadow } : {}),
74    alignItems: "center",
75    borderRadius: radius ? `${radius}%` : 0,
76    display: "flex",
77    inset: padding ? `${padding}%` : 0,
78    justifyContent: "center",
79    overflow: "hidden",
80    position: "absolute",
81  } as CSSProperties;
82 
83  return (
84    <Timegroup
85      className={className}
86      duration={`${durationMs}ms`}
87      mode="fixed"
88      style={
89        {
90          background: "#f5f5f5",
91          inset: 0,
92          position: "absolute",
93        } as CSSProperties
94      }
95    >
96      <div style={backdropStyle}>{children ?? <DefaultContent />}</div>
97    </Timegroup>
98  );
99};