Backdrop

Full-frame fill with an optional rounded, shadowed content frame — accepts a color, gradient, image, or any React element as a live animated background

Installation

$ pnpm dlx shadcn@latest add @remocn/backdrop

Usage

Solid color fill with a content frame:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
 
<Backdrop fill={{ type: "color", value: "#0f0f0f" }}>
  <YourScene />
</Backdrop>

Gradient fill:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
 
<Backdrop fill={{ type: "gradient", value: "linear-gradient(135deg, #6366f1, #a855f7)" }}>
  <YourScene />
</Backdrop>

Image fill using Remotion's <Img> (CORS-safe for MP4 export):

tsx

import { Backdrop } from "@/components/remocn/backdrop";
 
<Backdrop fill={{ type: "image", src: "https://example.com/bg.jpg", fit: "cover" }}>
  <YourScene />
</Backdrop>

Live animated React element as the fill:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { ShaderGrainGradient } from "@/components/remocn/shader-grain-gradient";
 
<Backdrop fill={<ShaderGrainGradient />}>
  <YourScene />
</Backdrop>

Custom padding, radius, and shadow:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
 
<Backdrop
  fill={{ type: "color", value: "#18181b" }}
  padding={6}
  radius={2}
  shadow="0 32px 80px rgba(0,0,0,0.6)"
>
  <YourScene />
</Backdrop>

Disable shadow:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
 
<Backdrop fill={{ type: "color", value: "#fff" }} shadow="">
  <YourScene />
</Backdrop>

Fill variants

Each fill type renders differently — pick the one that fits your scene.

Color

0:00 / 0:03

0s1s2s3s

0:00 / 0:03

Gradient

0:00 / 0:03

0s1s2s3s

0:00 / 0:03

Image

0:00 / 0:03

0s1s2s3s

0:00 / 0:03

Live background

Any React element as fill, e.g. <ShaderGrainGradient />.

0:00 / 0:05

0s1s2s3s4s5s

0:00 / 0:05

Background only

When no children are passed, the content frame is not rendered — the fill covers the full composition bleed with no inset, rounding, or shadow.

tsx

import { Backdrop } from "@/components/remocn/backdrop";
 
// full-bleed fill, no frame
<Backdrop fill={{ type: "gradient", value: "linear-gradient(135deg, #6366f1, #a855f7)" }} />
 
// or a live animated background as the fill
<Backdrop fill={<ShaderGrainGradient />} />

To render content edge-to-edge without any decorative frame, pass children but zero out padding, radius, and shadow:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
 
<Backdrop
  fill={{ type: "image", src: "/bg.jpg" }}
  padding={0}
  radius={0}
  shadow=""
>
  <YourScene />
</Backdrop>

Props6

Prop	Type	Default
fill	BackdropFill \| ReactNodeundefined The background layer. Pass a BackdropFill object ({ type: "color" \| "gradient" \| "image", ... }) for static fills, or any React element (e.g. <ShaderGrainGradient />) to render a live animated background.
padding	number4 Inset of the content frame as a percentage of the composition width. Scales automatically across 720p, 1080p, and 4K.
radius	number1 Corner radius of the content frame as a percentage of the composition width. Scales automatically across resolutions.
shadow	string"0 20px 60px rgba(0,0,0,0.4)" CSS box-shadow applied to the content frame. Pass an empty string to disable the shadow.
children	ReactNodeundefined Content rendered inside the rounded, shadowed frame. When omitted, only the fill is shown full-bleed.
className	stringundefined Additional class names applied to the outer full-frame container.

fillBackdropFill | ReactNode
The background layer. Pass a BackdropFill object ({ type: "color" | "gradient" | "image", ... }) for static fills, or any React element (e.g. <ShaderGrainGradient />) to render a live animated background.
Defaultundefined
paddingnumber
Inset of the content frame as a percentage of the composition width. Scales automatically across 720p, 1080p, and 4K.
Default4
radiusnumber
Corner radius of the content frame as a percentage of the composition width. Scales automatically across resolutions.
Default1
shadowstring
CSS box-shadow applied to the content frame. Pass an empty string to disable the shadow.
Default"0 20px 60px rgba(0,0,0,0.4)"
childrenReactNode
Content rendered inside the rounded, shadowed frame. When omitted, only the fill is shown full-bleed.
Defaultundefined
classNamestring
Additional class names applied to the outer full-frame container.
Defaultundefined

BackdropFill shape

Prop	Type	Default
type: "color"	{ type: "color"; value: string }— Solid CSS color value (hex, hsl, oklch, etc.) applied as the background.
type: "gradient"	{ type: "gradient"; value: string }— Any CSS gradient string (linear-gradient, radial-gradient, conic-gradient) applied as the background.
type: "image"	{ type: "image"; src: string; fit?: "cover" \| "contain" }— Image rendered via Remotion's <Img> (CORS-safe for MP4 export). fit defaults to "cover".

type: "color"{ type: "color"; value: string }
Solid CSS color value (hex, hsl, oklch, etc.) applied as the background.
type: "gradient"{ type: "gradient"; value: string }
Any CSS gradient string (linear-gradient, radial-gradient, conic-gradient) applied as the background.
type: "image"{ type: "image"; src: string; fit?: "cover" | "contain" }
Image rendered via Remotion's <Img> (CORS-safe for MP4 export). fit defaults to "cover".