Typing Animation

A minimal typing animation with smart backspacing, an optional cursor, and adjustable speed.

Add to your project

1Connect the Uniquel MCP

Connect Uniquel to your coding agent before using the component ID.

Connect MCP

2Copy the component ID

MCP ID
component:animation/typing-animation

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSS

Props

PropTypeDescription
childrenstringText to type. Changing it backspaces only the differing suffix.
speednumberMilliseconds per typed character. Default: 65.
deleteSpeednumberMilliseconds per deleted character. Default: 30.
cursorbooleanShow the cursor. Default: true.
classNamestringCustomize typography, color, and layout.

More Animation Components

Lightweight SVG blob that smoothly morphs between organic shapes with customizable colors and speed.

A button-triggered canvas confetti burst with a center launch and three quick side volleys.