# Backdrop
URL: https://remocn.dev/docs/layout/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

- Install: `npx shadcn@latest add @remocn/backdrop`
- Vibe: clean
- Natural length: 150f @ 30fps

## Installation

```bash
npx 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

### Gradient

### Image

### Live background

Any React element as fill, e.g. ``.

## 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>
```

## 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. <ShaderGrainGradient />) 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". |

## Use when
- You need a scene background — wrap every composition in `Backdrop` rather than hardcoding background colors on individual components.
- You want the Screen Studio floating-card look: colored surround with a padded, rounded, shadowed inner frame.
- The background itself should animate (pass a shader backdrop like `ShaderMeshGradient` as the `fill`).

## Don't use when
- You need an infinitely looping ambient background as a standalone track — use a shader backdrop directly and let the composition handle framing.
- You want a raw full-bleed color with no frame treatment — set `padding={0}` and `radius={0}`, or just set `backgroundColor` in the Remotion composition root.
- You're inside a transition presentation — transitions like `whip-pan` manage their own full-frame layout; nesting Backdrop inside them creates double-framing.