# Giant Mark Backdrop
URL: https://remocn.dev/docs/logo-stings/giant-mark-backdrop

A small wordmark balloons into a giant backdrop while a prompt card pops in and types.

- Install: `npx shadcn@latest add @remocn/giant-mark-backdrop`
- Vibe: premium
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/giant-mark-backdrop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GiantMarkBackdrop } from "@/components/remocn/giant-mark-backdrop";

const GiantMarkBackdropScene = () => (
  <GiantMarkBackdrop
    prompt="Make a launch film for our v2 release"
    placeholder="Describe your launch film"
    theme="dark"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="GiantMarkBackdrop"
    component={GiantMarkBackdropScene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);
```

The wordmark appears small on a shader ground, then a flood of colour rises as the mark balloons into a giant backdrop. A prompt card pops in, types the prompt and lights its send button. Pass `prompt` and `placeholder` to match your product and `accent` for your colour; the wordmark is the baked-in Remocn logo. Ships light and dark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `accent` | `string` | — | Colour of the wordmark, caret and send button. |
| `prompt` | `string` | `"Make a launch film for our v2 release"` | Text typed into the card. |
| `placeholder` | `string` | `"Describe your launch film"` | Greyed hint shown in the card before typing starts. |
| `ground` | `GshPresetId` | — | Shader preset id for the gradients.sh background ground. |
| `groundParams` | `Partial<GradientParams>` | — | Custom shader parameters for the ground, used instead of the theme default. |

## Use when
- A prompt-to-video or AI-assistant beat where the typed request lands on a giant brand backdrop.
- A closing lockup that needs the logo huge behind a mock input card.
- A vertical or square cut of a launch film; the layout re-flows for tall frames.

## Don't use when
- You want a plain logo reveal with no UI card — use `introducing`.
- The prompt should resolve into the brand through a network of nodes — use `neural-pulse`.
- You only need a tagline under a quiet logo — use `first-light`.