Typing Animation

A smooth, dynamic character-by-character typing animation component supporting multiple words, custom cursors, speed configurations, and viewport-based trigger delays.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add typing-animation

Variations

Looping Multiple Words

Set the words attribute to an array of strings to cycle typing loops.

Dynamic Loop

We build |

Custom Cursor & Overrides

Configure custom speeds and cursor shapes like block (▌) or underscore (_).

▌

Component Concept

Vibe UI's TypingAnimation component translates string props dynamically using Framer Motion's React runtime environment hooks (useInView). It parses character arrays (including complex multi-byte graphemes) and animates character indexes sequentially using customizable delay intervals.

Key Attributes & Options

children: string — Default text line to animate if words is not specified.
words: string[] — An array of words to animate and loop sequentially.
duration: number (default 100) — Delay in ms between typing each character.
loop: boolean (default false) — When true, repeats animations infinitely.
cursorStyle: 'line' | 'block' | 'underscore' (default 'line') — Specifies the visual typing cursor.
startOnView: boolean (default true) — Restricts typing sequence from running until the element appears on screen.

Usage

import { TypingAnimation } from "@/components/ui/typing-animation"

<TypingAnimation>Typing Animation</TypingAnimation>

Props

Prop	Type	Default	Description
`children`	`string`	`""`	Text content string to animate
`words`	`string[]`	`[]`	Array of text strings to type and loop through
`duration`	`number`	`100`	Typing speed duration per character in milliseconds
`delay`	`number`	`0`	Delay before starting typing in milliseconds
`loop`	`boolean`	`false`	Whether to loop through the text array continuously
`cursorStyle`	`"line" \| "block" \| "underscore"`	`"line"`	Visual style of the typing blinking cursor
`className`	`string?`	`""`	Additional classes for the container

This TypingAnimation component simulates a realistic typewriter effect, typing out text character-by-character.

Contributors

Jenish Sabhadiya