# Prompt Swell
URL: https://remocn.dev/docs/product-scenes/prompt-swell

A prompt card swells into a builder window that generates a pricing page and ships it

- Install: `npx shadcn@latest add @remocn/prompt-swell`
- Vibe: tech
- Natural length: 135f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/prompt-swell
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PromptSwell } from "@/components/remocn/prompt-swell";

const PromptSwellScene = () => (
  <PromptSwell
    prompt="Build a pricing page for our scheduling app"
    src="/shots/app-hero.png"
    tiers={[
      { name: "Solo", price: "$9" },
      { name: "Team", price: "$29" },
    ]}
  />
);

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

A prompt card types your request and is sent, then it swells into a builder window with a checklist of steps on one side and a page preview on the other. The preview builds a hero, scrolls to pricing tiers and a waitlist, publishes, and a live toast appears. Pass `prompt`, `steps`, `tiers`, `url`, and `src` (your own hero image, since the default file only exists in the Remocn repo). 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 |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark interface. |
| `accent` | `string` | `"#ff7a3d"` | Accent color for the send button and highlights. |
| `prompt` | `string` | `"Build a launch page for our video kit with a hero, pricing and a waitlist"` | The request typed into the prompt card. |
| `src` | `string` | `staticFile("studio.png")` | Hero image shown in the generated page. |
| `url` | `string` | `"preview.remocn.dev"` | Address shown in the preview browser bar. |
| `steps` | `string[]` | — | Up to three checklist steps shown while building. |
| `tiers` | `PromptSwellTier[]` | — | Pricing tiers: name, price and optional features. |
| `ground` | `GshPresetId` | — | Gradient shader preset for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- A launch video for an AI site or page builder: prompt in, finished landing page out.
- A beat where a single input expands into the full product window with a live preview.
- A demo that ends with a deployed-and-live toast after the page builds and scrolls.

## Don't use when
- You want a chat-driven build with files being written and a deploy step — use `prompt-to-app`.
- The prompt should just collapse or push into the next scene — use `caret-collapse`.
- You want a pipeline diagram rather than a window preview — use `node-trail`.