Typed Text
Types new text in, one character at a time, when it changes. Use it for short text an agent rewrites while someone watches, such as a chat title. The first render shows the text at once.
Chat title
An agent names the chat. Its first title appears at once; later agent renames type in. A title someone typed by hand never animates.
New chat
Animated changes
Each change types the new sentence in, 25ms a character and never longer than 800ms.
Let’s make a garden plan.
Emoji and accents
Typing steps by what a reader sees as one character, so emoji families and accented letters never split.
🌱 Seed order sent to Jürgen
Without animation
animate={false} shows every change at once.
This sentence appears immediately.
Usage
import { TypedText } from "@tulipfarm/sprout/typed-text";
<h1 tabIndex={-1} title={chat.title} className="min-w-0 flex-1 truncate text-sm font-medium">
<TypedText text={chat.title} animate={!chat.titleManual && chat.titleRevision > 1} />
</h1>text is the full text. When it changes, the new text types in at 25ms a character, and never takes longer than 800ms (typedTextCharacterDuration andtypedTextMaxDuration). It steps by graphemes, so emoji and accented letters never split.
animate defaults to true. Passfalse to show changes at once, such as a title someone typed by hand. The text is inline, so a truncating parent still adds an ellipsis. className, data-*, and other span attributes pass through.
Without animation
<TypedText text="This sentence appears immediately." animate={false} />Accessibility
Screen readers get the full text at once from a visually hidden copy; the typing letters are hidden from them, so nothing is read in pieces. With reduced motion the text changes at once, and turning reduced motion on mid-change finishes it right away. While typing, the root hasdata-state="typing"; otherwise "idle".
Theme tokens
Typed Text has no color or font of its own. It inherits from the heading or paragraph it sits in, in light, dark, and brand themes.