Ghost Complete

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

Installation

$ pnpm dlx 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.

Props10

Prop	Type	Default
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	booleantrue Keep the last accepted suggestion in the fill color.
showLogo	booleantrue 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	number1 Playback speed multiplier for the whole timeline.
accent	string— Declared but not used by the current source.

titlestring
Title in the editor card header.
Default"Launch notes"
typedstring
Text typed before the first suggestion.
Default"Ship the"
suggestionsstring[]
Ghost suggestions accepted in order. A leading newline starts a new line.
Default["launch video", "\nbefore lunch."]
keepLastFillboolean
Keep the last accepted suggestion in the fill color.
Defaulttrue
showLogoboolean
Show the built-in wordmark.
Defaulttrue
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.
speednumber
Playback speed multiplier for the whole timeline.
Default1
accentstring
Declared but not used by the current source.