# Card Push Line
URL: https://remocn.dev/docs/ui-blocks/card-push-line

A headline lands, then the camera pushes in on a prompt card that types a slash command and prompt.

- Install: `npx shadcn@latest add @remocn/card-push-line`
- Vibe: tech
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/card-push-line
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CardPushLine } from "@/components/remocn/card-push-line";

const CardPushLineScene = () => (
  <CardPushLine
    line="You can just write it"
    command="/launch-video"
    prompt="a teaser for the 2.0 release"
    attachName="release-notes-2.0.md"
  />
);

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

The `line` headline lands word by word, then a prompt card pushes in. It types the `command` as a chip, attaches a file tile and types the `prompt` until the send button arms. Pass your own `line`, `command`, `prompt` and `attachName`; it ships light and dark through `theme`.

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 |
|---|---|---|---|
| `line` | `string` | `"You can just write it"` | Headline shown above the card. |
| `command` | `string` | `"/launch-video"` | Slash command typed as a chip. |
| `prompt` | `string` | `"a teaser for the 2.0 release"` | Request typed after the command. |
| `placeholder` | `string` | `"Describe your launch…"` | Placeholder text shown before typing starts. |
| `modelLabel` | `string` | `"Remocn 1"` | Label of the model selector in the card toolbar. |
| `chipLabel` | `string` | `"Brand kit"` | Label of the chip in the card toolbar. |
| `attachName` | `string` | `"release-notes-2.0.md"` | File name shown on the attachment tile. |
| `attachMeta` | `string` | `"Markdown · 18 KB"` | Meta text under the attachment name. |
| `accent` | `string` | — | Accent color. Defaults depend on theme. |
| `ink` | `string` | — | Text color override. |
| `background` | `string` | — | Background color override for the stage. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- An AI product beat that pairs a short headline with the prompt box it describes, such as a promise followed by proof.
- A prompt card needs a slash command chip, an attached file tile and a typed request with a send button that arms.
- You want a calm camera push rather than a dramatic zoom on the text.

## Don't use when
- You want the camera to ride the caret and punch in on a phrase — use `caret-dolly`, the dolly twin of this scene.
- The prompt should continue into a full chat conversation — use `ai-prompt-flow`.
- Several files drop into the box — use `multi-file-drop`.