# Send Fountain
URL: https://remocn.dev/docs/product-scenes/send-fountain

A launch board dashboard fills with a video, signup bars, a metric and asset tiles

- Install: `npx shadcn@latest add @remocn/send-fountain`
- Vibe: tech
- Natural length: 144f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/send-fountain
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SendFountain } from "@/components/remocn/send-fountain";

const SendFountainScene = () => (
  <SendFountain prompt="Build a launch dashboard for the v2 release" stat={47200} statDelta="+18%" />
);

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

A prompt bar types a request and presses send, the answer ejects as six cards that fly up and snap into a launch-board window, then a metric ticks up and signup avatars and a live badge arrive. Pass `prompt`, `appTitle`, `heroTitle`, `stat` with `statLabel` and `statDelta` to make it yours, and `images` with your own pictures for the hero and cover cards (the default image files only exist 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"` | Visual theme; ships dark and light. |
| `accent` | `string` | `"#ff5a1f"` | Accent color for the send button and highlights. |
| `prompt` | `string` | `"Build a launch dashboard for the v2 release"` | Request typed into the prompt bar. |
| `appTitle` | `string` | `"Launch board"` | Title shown in the app window chrome. |
| `heroTitle` | `string` | `"Launch film"` | Title of the large video card. |
| `stat` | `number` | `47200` | Final value of the headline metric. |
| `statLabel` | `string` | `"Weekly active"` | Label under the headline metric. |
| `statDelta` | `string` | `"+18%"` | Change badge shown next to the metric. |
| `images` | `string[]` | — | Image URLs for the hero and cover cards; defaults ship with Remocn only. |
| `ground` | `GshPresetId` | — | Preset id for the gradients.sh background shader. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader parameters of the chosen ground. |

## Use when
- A launch beat where one prompt turns into a finished dashboard filled with a video, a metric and asset tiles.
- An AI builder or no-code product demo that needs to show a single request producing a whole workspace.
- A vertical or landscape hero shot of a product generating its own launch board.

## Don't use when
- You want a prompt to become a full app screen, not a dashboard of tiles — use `prompt-to-app`.
- The beat is only about a live stats panel with a chart and activity feed — use `live-dashboard`.
- You just need a cursor click to expand a card — use `button-to-card`.