# Ghost Complete
URL: https://remocn.dev/docs/ui-blocks/ghost-complete

A sentence types in an editor card, grey ghost text suggests the rest, and each suggestion fills in as accepted.

- Install: `npx shadcn@latest add @remocn/ghost-complete`
- Vibe: tech
- Natural length: 89f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ghost-complete
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GhostComplete } from "@/components/remocn/ghost-complete";

const GhostCompleteScene = () => (
  <GhostComplete
    title="Launch notes"
    typed="Ship the"
    suggestions={["launch video", "\nbefore lunch."]}
  />
);

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

A card titled `title` types the `typed` text, then each entry in `suggestions` appears as grey ghost text and fills in with a Tab press. A suggestion starting with a newline continues on a second line. Pass your own `typed` text and `suggestions`; 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 |
|---|---|---|---|
| `title` | `string` | `"Launch notes"` | Title in the editor card header. |
| `typed` | `string` | `"Ship the"` | Text typed before the first suggestion. |
| `suggestions` | `string[]` | `["launch video", "\nbefore lunch."]` | Ghost suggestions accepted in order. A leading newline starts a new line. |
| `keepLastFill` | `boolean` | `true` | Keep the last accepted suggestion in the fill color. |
| `showLogo` | `boolean` | `true` | Show the built-in wordmark. |
| `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. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `accent` | `string` | — | Declared but not used by the current source. |

## Use when
- An AI autocomplete or writing-assistant feature where the suggestion appears as ghost text before being accepted.
- A product beat that shows a short phrase finishing itself, then continuing onto a new line.
- A developer or writer tool that needs a clear Tab-to-accept moment.

## Don't use when
- The prompt goes to a chat, not an inline editor — use `ai-prompt-flow`.
- Plain typing with no suggestions is enough — use `typewriter`.
- You want a caret that swaps one phrase for another — use `caret-swap`.