Backdrop · remocn

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:

import { Backdrop } from "@/components/remocn/backdrop";

<Backdrop fill={{ type: "color", value: "#0f0f0f" }}>
  <YourScene />
</Backdrop>

Gradient fill:

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):

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:

import { Backdrop } from "@/components/remocn/backdrop";
import { MeshGradientBg } from "@/components/remocn/mesh-gradient-bg";

<Backdrop fill={<MeshGradientBg />}>
  <YourScene />
</Backdrop>

Custom padding, radius, and shadow:

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:

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

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

Gradient

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

Image

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

Live background

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

import { Backdrop } from "@/components/remocn/backdrop";import { MeshGradientBg } from "@/components/remocn/mesh-gradient-bg";<Backdrop fill={<MeshGradientBg />} shadow="0" padding={0}>  <YourScene /></Backdrop>

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.

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={<MeshGradientBg />} />

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

import { Backdrop } from "@/components/remocn/backdrop";

<Backdrop
  fill={{ type: "image", src: "/bg.jpg" }}
  padding={0}
  radius={0}
  shadow=""
>
  <YourScene />
</Backdrop>

Props

Prop	Type	Default	Description
`fill`	`BackdropFill \| ReactNode`	`undefined`	The background layer. Pass a BackdropFill object ({ type: "color" \| "gradient" \| "image", ... }) for static fills, or any React element (e.g. <MeshGradientBg />) to render a live animated background.
`padding`	`number`	`4`	Inset of the content frame as a percentage of the composition width. Scales automatically across 720p, 1080p, and 4K.
`radius`	`number`	`1`	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`	`ReactNode`	`undefined`	Content rendered inside the rounded, shadowed frame. When omitted, only the fill is shown full-bleed.
`className`	`string`	`undefined`	Additional class names applied to the outer full-frame container.

BackdropFill shape

Prop	Type	Default	Description
`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".