Premium & Brand

Typing Text

A typewriter that types one or more phrases with a blinking caret.

Import

tsx

import { TypingText } from "@cronus-ui/ui";

bash

npx cronus-ui add typing-text

Examples

Typewriter

Types, pauses, deletes, and moves to the next phrase. Reduced-motion visitors see the first phrase in full.

tsx

<TypingText
  className="font-display text-3xl text-fg"
  text={["Design systems.", "Product surfaces.", "Copy you can upgrade."]}
/>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component TypingTextDefault layout:inline style:typing-text {
  label "Shipping"
}

page "/audit/typing-text/default" type:custom {
  use TypingTextDefault
}

API Reference

Generated from the component's exported types.

TypingTextProps

Extends Omit<HTMLAttributes<HTMLSpanElement>, "children">

Prop	Type	Default	Description
`ref`	`Ref<HTMLSpanElement>`	—	Ref forwarded to the underlying DOM node.
`text`*	`string \| string[]`	—	Phrases to type. A single string is treated as one phrase. When more than one is provided the component types, pauses, deletes, and moves on.
`typingSpeed`	`number`	`50`	Milliseconds per typed character.
`deletingSpeed`	`number`	`30`	Milliseconds per deleted character.
`pause`	`number`	`1400`	Milliseconds to rest on a finished phrase before deleting.
`loop`	`boolean`	—	Loop back to the first phrase after the last. Defaults to `true` when more than one phrase is provided.
`reducedMotion`	`TypingTextMotionPreference`	`"respect"`	How `prefers-reduced-motion` is honoured. Defaults to `"respect"` (show the current phrase in full). `"always"` forces the typewriter; `"never"` always shows the first phrase statically.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.