Motion & texture

Typewriter Effect

Q: How do people describe a Typewriter Effect in plain words?

AI answers that spit out one character at a time a slogan that types itself with a blinking cursor when the cursor keeps blinking after the line finishes

Q: How do I implement a Typewriter Effect?

For the hero tagline, decorative typewriter at ~50ms per character (code-point aware), blinking caret, click-to-skip shows the full string. For chat streaming, render tokens as they arrive—do not re-buffer into a slower fake typewriter. Prefer one aria-live update of the complete message over per-character chatter.

Text appears character by character with a caret—marketing flourish and LLM streaming share the look.

Also known as character reveal · streaming text · typing animation

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Typewriter Effect".

For the hero tagline, decorative typewriter at ~50ms per character (code-point aware), blinking caret, click-to-skip shows the full string. For chat streaming, render tokens as they arrive—do not re-buffer into a slower fake typewriter. Prefer one aria-live update of the complete message over per-character chatter.

Anatomy:
- caret: Blinking bar or block; often stays briefly after the line ends.
- cadence: Decorative: ~30–80ms per glyph. Streaming: follow the data, don’t fake a pace.
- skip: Click to show the full line—users’ time beats your animation.

Preferred API / pattern: `custom hook / streaming markdown renderers`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Buffering real stream tokens into even fake typing
○Avoid: No skip control on a long decorative line
○Avoid: Per-character aria-live
○Avoid: Byte-sliced CJK/emoji

In plain wordsHow people search for it

“AI answers that spit out one character at a time”“a slogan that types itself with a blinking cursor”“when the cursor keeps blinking after the line finishes”

AnatomyOpen for part names

caret: Blinking bar or block; often stays briefly after the line ends.
cadence: Decorative: ~30–80ms per glyph. Streaming: follow the data, don’t fake a pace.
skip: Click to show the full line—users’ time beats your animation.

How to write itOpen for stack patterns

Web (HTML/CSS)JS per-character reveal / CSS steps() + width

React + Tailwind + shadcn/uicustom hook / streaming markdown renderers

SwiftUITimelineView / AttributedString progressive reveal

Ant Designcustom; often paired with chat UIs

Notes

Two jobs that look alike: decorative typewriter (fixed marketing copy you stage) vs true streaming (tokens arrive from the network). Buffering a real stream into a fake even pace is just slowing people down. Iterate by code point, not byte. For a11y, expose the full string to AT (one live region update), not every keystroke.

Common mistakesHumans and models trip here

Buffering real stream tokens into even fake typing: you are taxxing the user on purpose.
No skip control on a long decorative line: forced three-second wait.
Per-character aria-live: screen readers monologue the alphabet.
Byte-sliced CJK/emoji: broken glyphs mid-character.

More failure symptoms on AI broke it.

Related patterns

MarqueeContent scrolls endlessly in one direction in a seamless loop.Skeleton ScreenPlaceholder shapes that mirror upcoming content so loading feels structured, not empty.Count Up / Number TickerAnimate a number from a start value to its target so stats land with a little ceremony.Easing / Timing FunctionHow speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.

Spotted a wrong name or missing pattern?

Message on X