Ghost Type

A headline that writes itself with AI-style ghost completions

ghost-type-tw

Customize

Text

Completions

Text Colour

Accent

Hint Label

Font Size

58px

Font Weight

600

Line Height

1.08

Letter Spacing

-0.030em

Ghost Opacity

0.38

Type Speed

45ms

Stream Speed

70ms

Think Delay

600ms

Accept Delay

1200ms

Hold Delay

1800ms

HintSweepCaret BlinkLoopPause On HoverClick To AcceptPaused

Props

Name	Type	Default	Description
`text`	string	`"Build anything"`	The part of the headline that types itself first and stays.
`completions`	string[]	`[" with a single prompt.", ...]`	Endings suggested one after another as ghost text. Start each with a space if it should follow a word.
`as`	"h1" \| "h2" \| "h3" \| "h4" \| "p" \| "div" \| "span"	`"h2"`	The element rendered. Screen readers get the first full sentence.
`textColor`	string	`—`	Colour of the text. Leave unset to use the surrounding text colour.
`accentColor`	string	`"#8B5CF6"`	Colour of the caret, the accept sweep and the selection.
`ghostOpacity`	number	`0.38`	Opacity of ghost text, relative to the text colour.
`fontFamily`	string	`—`	Font of the headline. Leave unset to use your CSS or className.
`fontSize`	number	`—`	Font size in pixels. Leave unset to size with CSS (it falls back to 56px).
`fontWeight`	number	`—`	Font weight (it falls back to 600).
`lineHeight`	number	`—`	Line height relative to the font size (it falls back to 1.08).
`letterSpacing`	number	`—`	Letter spacing in em (it falls back to -0.03).
`align`	"left" \| "center" \| "right"	`"center"`	Where the headline sits. Text inside stays left-aligned like an editor, so nothing shifts while it types.
`typeSpeed`	number	`45`	Milliseconds per typed character, with a natural variation.
`streamSpeed`	number	`70`	Milliseconds between streamed ghost words (characters stream three times faster).
`streamBy`	"word" \| "char"	`"word"`	Whether ghost text streams in word by word or character by character.
`thinkDelay`	number	`600`	Milliseconds before a suggestion appears.
`acceptDelay`	number	`1200`	Milliseconds a suggestion waits before it is accepted.
`holdDelay`	number	`1800`	Milliseconds the accepted sentence stays before the next suggestion.
`clearStyle`	"select" \| "backspace"	`"select"`	How an accepted ending is removed: selected and deleted, or backspaced.
`caret`	"bar" \| "block" \| "underscore"	`"bar"`	Shape of the caret.
`caretBlink`	boolean	`true`	Blink the caret while idle.
`hint`	boolean	`true`	Show a key hint after the suggestion, pressed when it is accepted.
`hintLabel`	string	`"Tab"`	Label of the key hint.
`sweep`	boolean	`true`	Sweep the accent colour through an accepted ending.
`loop`	boolean	`true`	Cycle through the completions forever. Off stops on the last accepted one.
`startOnView`	boolean	`true`	Start typing when the headline scrolls into view.
`pauseOnHover`	boolean	`true`	Pause the timing while the mouse is over the headline, so it can be read.
`clickToAccept`	boolean	`true`	Click to accept a suggestion right away, or to skip to the next one.
`paused`	boolean	`false`	Pause the sequence.
`onAccept`	(completion, index) => void	`—`	Called whenever a completion is accepted, for example to sync other content.
`ref`	{ accept, next, restart }	`—`	accept() takes the current suggestion, next() skips ahead, restart() types it all again.
`className`	string	`—`	Classes for the heading, including typography such as text-7xl or font-bold.
`style`	CSSProperties	`—`	Inline styles for the heading.

textstring

The part of the headline that types itself first and stays.

Default"Build anything"

completionsstring[]

Endings suggested one after another as ghost text. Start each with a space if it should follow a word.

Default[" with a single prompt.", ...]

as"h1" | "h2" | "h3" | "h4" | "p" | "div" | "span"

The element rendered. Screen readers get the first full sentence.

Default"h2"

textColorstring

Colour of the text. Leave unset to use the surrounding text colour.

Default—

accentColorstring

Colour of the caret, the accept sweep and the selection.

Default"#8B5CF6"

ghostOpacitynumber

Opacity of ghost text, relative to the text colour.

Default0.38

fontFamilystring

Font of the headline. Leave unset to use your CSS or className.

Default—

fontSizenumber

Font size in pixels. Leave unset to size with CSS (it falls back to 56px).

Default—

fontWeightnumber

Font weight (it falls back to 600).

Default—

lineHeightnumber

Line height relative to the font size (it falls back to 1.08).

Default—

letterSpacingnumber

Letter spacing in em (it falls back to -0.03).

Default—

align"left" | "center" | "right"

Where the headline sits. Text inside stays left-aligned like an editor, so nothing shifts while it types.

Default"center"

typeSpeednumber

Milliseconds per typed character, with a natural variation.

Default45

streamSpeednumber

Milliseconds between streamed ghost words (characters stream three times faster).

Default70

streamBy"word" | "char"

Whether ghost text streams in word by word or character by character.

Default"word"

thinkDelaynumber

Milliseconds before a suggestion appears.

Default600

acceptDelaynumber

Milliseconds a suggestion waits before it is accepted.

Default1200

holdDelaynumber

Milliseconds the accepted sentence stays before the next suggestion.

Default1800

clearStyle"select" | "backspace"

How an accepted ending is removed: selected and deleted, or backspaced.

Default"select"

caret"bar" | "block" | "underscore"

Shape of the caret.

Default"bar"

caretBlinkboolean

Blink the caret while idle.

Defaulttrue

hintboolean

Show a key hint after the suggestion, pressed when it is accepted.

Defaulttrue

hintLabelstring

Label of the key hint.

Default"Tab"

sweepboolean

Sweep the accent colour through an accepted ending.

Defaulttrue

loopboolean

Cycle through the completions forever. Off stops on the last accepted one.

Defaulttrue

startOnViewboolean

Start typing when the headline scrolls into view.

Defaulttrue

pauseOnHoverboolean

Pause the timing while the mouse is over the headline, so it can be read.

Defaulttrue

clickToAcceptboolean

Click to accept a suggestion right away, or to skip to the next one.

Defaulttrue

pausedboolean

Pause the sequence.

Defaultfalse

onAccept(completion, index) => void

Called whenever a completion is accepted, for example to sync other content.

Default—

ref{ accept, next, restart }

accept() takes the current suggestion, next() skips ahead, restart() types it all again.

Default—

classNamestring

Classes for the heading, including typography such as text-7xl or font-bold.

Default—

styleCSSProperties

Inline styles for the heading.

Default—

Name

Type

Default

Description

text

string

"Build anything"

The part of the headline that types itself first and stays.

completions

string[]

[" with a single prompt.", ...]

Endings suggested one after another as ghost text. Start each with a space if it should follow a word.

as

"h1" | "h2" | "h3" | "h4" | "p" | "div" | "span"

"h2"

The element rendered. Screen readers get the first full sentence.

textColor

string

—

Colour of the text. Leave unset to use the surrounding text colour.

accentColor

string

"#8B5CF6"

Colour of the caret, the accept sweep and the selection.

ghostOpacity

number

0.38

Opacity of ghost text, relative to the text colour.

fontFamily

string

—

Font of the headline. Leave unset to use your CSS or className.

fontSize

number

—

Font size in pixels. Leave unset to size with CSS (it falls back to 56px).

fontWeight

number

—

Font weight (it falls back to 600).

lineHeight

number

—

Line height relative to the font size (it falls back to 1.08).

letterSpacing

number

—

Letter spacing in em (it falls back to -0.03).

align

"left" | "center" | "right"

"center"

Where the headline sits. Text inside stays left-aligned like an editor, so nothing shifts while it types.

typeSpeed

number

45

Milliseconds per typed character, with a natural variation.

streamSpeed

number

70

Milliseconds between streamed ghost words (characters stream three times faster).

streamBy

"word" | "char"

"word"

Whether ghost text streams in word by word or character by character.

thinkDelay

number

600

Milliseconds before a suggestion appears.

acceptDelay

number

1200

Milliseconds a suggestion waits before it is accepted.

holdDelay

number

1800

Milliseconds the accepted sentence stays before the next suggestion.

clearStyle

"select" | "backspace"

"select"

How an accepted ending is removed: selected and deleted, or backspaced.

caret

"bar" | "block" | "underscore"

"bar"

Shape of the caret.

caretBlink

boolean

true

Blink the caret while idle.

hint

boolean

true

Show a key hint after the suggestion, pressed when it is accepted.

hintLabel

string

"Tab"

Label of the key hint.

sweep

boolean

true

Sweep the accent colour through an accepted ending.

loop

boolean

true

Cycle through the completions forever. Off stops on the last accepted one.

startOnView

boolean

true

Start typing when the headline scrolls into view.

pauseOnHover

boolean

true

Pause the timing while the mouse is over the headline, so it can be read.

clickToAccept

boolean

true

Click to accept a suggestion right away, or to skip to the next one.

paused

boolean

false

Pause the sequence.

onAccept

(completion, index) => void

—

Called whenever a completion is accepted, for example to sync other content.

ref

{ accept, next, restart }

—

accept() takes the current suggestion, next() skips ahead, restart() types it all again.

className

string

—

Classes for the heading, including typography such as text-7xl or font-bold.

style

CSSProperties

—

Inline styles for the heading.