.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Keystroke Text

textPro

Types a rotating list of phrases with a coloured prefix, a blinking custom caret, human-like timing and its own delete speed. It reserves the longest phrase's width and gives screen readers one stable label.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

keystroke-text.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type KeystrokeTextProps = {  phrases: string[]  prefix?: string  typeSpeed?: number  deleteSpeed?: number  holdDelay?: number  gapDelay?: number  startDelay?: number  jitter?: number  loop?: boolean  caret?: boolean  caretChar?: string  caretBlink?: number  hideCaretWhileTyping?: boolean  label?: string  onPhraseChange?: (index: number, phrase: string) => void  as?: ElementType  prefixClassName?: string  textClassName?: string  caretClassName?: string  className?: string}export function KeystrokeText({  phrases,  prefix,  typeSpeed = 78,  deleteSpeed = 34,  holdDelay = 1700,  gapDelay = 380,  startDelay = 400,  jitter = 0.5,  loop = true,  caret = true,  caretChar = '|',  caretBlink = 1050,  hideCaretWhileTyping = false,  label,  onPhraseChange,  as = 'span',  prefixClassName,  textClassName,  caretClassName,  className,}: KeystrokeTextProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

The code is locked

Keystroke Text is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

CLInpx shadcn@latest add @manniche-pro/keystroke-text

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

KeystrokeTextProps

Prop	Type	Default	What it does
`phrases` required	`string[]`	–	The phrases to type, one after the other.
`prefix`	`string`	–	Static text before the typed part, for example `Built for` . A space is added if you leave it out.
`typeSpeed`	`number`	`78`	Time per typed character in milliseconds.
`deleteSpeed`	`number`	`34`	Time per deleted character in milliseconds. Deleting is usually quicker than typing.
`holdDelay`	`number`	`1700`	How long a finished phrase stays before it is deleted, in milliseconds.
`gapDelay`	`number`	`380`	Pause between a deleted phrase and the next one starting, in milliseconds.
`startDelay`	`number`	`400`	Wait before the very first keystroke, in milliseconds.
`jitter`	`number`	`0.5`	Human-like timing, from `0` (a metronome) to `1` (very uneven). Pauses grow after spaces and punctuation and now and then there is a small hesitation.
`loop`	`boolean`	`true`	Start over after the last phrase. When `false` the last phrase stays typed.
`caret`	`boolean`	`true`	Shows the caret.
`caretChar`	`string`	`'\|'`	Character used for the caret, for example `_`, `█` or `\|`.
`caretBlink`	`number`	`1050`	Blink period of the caret in milliseconds while nothing is being typed.
`hideCaretWhileTyping`	`boolean`	`false`	Hides the caret while keys are being typed or deleted, and shows it again during pauses.
`label`	`string`	–	Text announced to screen readers instead of the default, which is the prefix followed by all phrases. The keystrokes themselves are never announced.
`onPhraseChange`	`(index: number, phrase: string) => void`	–	Called when a phrase starts being typed.
`as`	`ElementType`	`'span'`	Element to render.
`className`	`string`	–	Classes for the root: font, size, weight, tracking and the base colour.
`prefixClassName`	`string`	–	Classes for the prefix, for example a muted colour.
`textClassName`	`string`	–	Classes for the typed text, for example an accent colour.
`caretClassName`	`string`	–	Classes for the caret, for example its own colour.

Preview

Code

The code is locked

Props

A11y