.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

Skriver en roterende liste af vendinger med et farvet præfiks, en blinkende tekstmarkør, der kan tilpasses, menneskelig timing og egen sletningsfart. Den holder plads til den længste vending og giver skærmlæsere én stabil etiket.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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)} />}

Koden er låst

Keystroke Text er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

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	Standard	Hvad den gør
`phrases` påkrævet	`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

Kode

Koden er låst

Props

A11y