ComponentsMedia

Typing demo

Plays a scripted typing sequence — type, pause, delete, rewrite — for product demos and heroes. Screen readers and the server get the final text only, the height is reserved so nothing jumps, a button plays, pauses and replays, and reduced motion shows the final text.

components/typing-demo.tsxtheme · material · accent · density · font

Rewrite

Can we move the review to Thursday at 10:00? I'll send the notes by Wednesday.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { TypingDemo } from "@vamos-ui/react";

<TypingDemo
  steps={[
    "Hi all, I was wondering if maybe we could",
    { type: "pause", duration: 800 },
    { type: "replace", text: "Can we move the review to Thursday?" },
  ]}
/>

The text is static demo copy, not a live stream; for real model output render the text as it arrives.

Fresh mounts above the fold start blank and type in; with autoPlay={false} the final text is there from the first paint.

npm install @vamos-ui/reactnpm install @vamos-ui/react
+ added 1 packagenpm install @vamos-ui/react
+ added 1 packagenpm install @vamos-ui/react
+ added 1 package

API

TypingDemo

Prop	Type	Default
`steps` Strings (typed), or { type: "type" \| "delete" \| "replace" \| "pause" \| "set", … }. replace erases everything, then types.	`TypingStep[]`	`—`
`speed` Milliseconds per character (a beat longer after punctuation, quicker over spaces).	`number`	`35`
`autoPlay` Start when a third is visible, on mount, or only on Play (showing the final text until then).	`boolean \| "in-view"`	`"in-view"`
`startDelay` Delay before an automatic start.	`number`	`400`
`loop / loopDelay` Start over after a hold on the final text.	`boolean / number`	`false / 2400`
`controls` Play / pause / replay button.	`boolean`	`true`
`cursor` Caret while typing.	`boolean`	`true`
`as` Element for the text.	`"p" \| "div" \| "span" \| "pre"`	`"p"`
`textClassName` Classes for the text element (size, font, colour).	`string`	`—`
`onComplete` Each time the script reaches its end.	`() => void`	`—`
`labels` Dictionary namespace "typingDemo": play, pause, replay.	`Partial<TypingDemoLabels>`	`—`

typingFrames(steps, speed?) / typingFinalText(steps)

Prop	Type	Default
`returns` The keystroke frames, or the text the script ends on — for custom players and tests.	`{ text, delay }[] / string`	`—`

Tree view

Typography

Typing demo

Installation

Usage

Examples

Looping hero phrase

Play on demand

API

TypingDemo

typingFrames(steps, speed?) / typingFinalText(steps)