Typing Animation

A customizable typing animation component with support for multiple words, cursor styles, and animation controls.

motion-svruned

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/typing-animation.json

With blinking cursor (default) - watch during pause

Without blinking cursor - static during pause

Line cursor (default)

Block cursor (VSCode style)

▌

Underscore cursor

A versatile typing animation component with support for single text, multiple words, cursor customization, and animation controls.

Name	Type	Default	Description
`content`	`string`	`undefined`	`Single text string to type (use this OR words)`
`words`	`string[]`	`undefined`	`Array of words to cycle through (use this OR content)`
`class`	`string`	`""`	`Additional CSS classes to apply`
`duration`	`number`	`100`	`Default duration for typing speed (ms per character)`
`typeSpeed`	`number`	`duration`	`Speed for typing characters (ms per character)`
`deleteSpeed`	`number`	`typeSpeed / 2`	`Speed for deleting characters (ms per character)`
`delay`	`number`	`0`	`Initial delay before animation starts (ms)`
`pauseDelay`	`number`	`1000`	`Delay between typing and deleting (ms)`
`loop`	`boolean`	`false`	`Whether to loop the animation continuously`
`startOnView`	`boolean`	`true`	`Start animation when element enters viewport`
`showCursor`	`boolean`	`true`	`Show the typing cursor`
`blinkCursor`	`boolean`	`true`	`Make the cursor blink during pause`
`cursorStyle`	`'line' \| 'block' \| 'underscore'`	`'line'`	`Style of the cursor ('line': \|, 'block': ▌, 'underscore': _)`