Elastic Typewriter

A highly kinetic typewriter effect. A cursor glides across the text, while individual characters stretch, squeeze, skew, and elastic-snap into place to simulate mechanical physical tension.

Last Modified:Aug 17, 2026

Install

CLI

elastic-typewriter

$pnpm dlx shadcn@latest add https://ui.satisium.com/r/elastic-typewriter.json

Or install a specific demo variant:

elastic-typewriter-headline-demo

$pnpm dlx shadcn@latest add https://ui.satisium.com/r/elastic-typewriter-headline-demo.json

Or install a specific demo variant:

elastic-typewriter-paragraph-demo

$pnpm dlx shadcn@latest add https://ui.satisium.com/r/elastic-typewriter-paragraph-demo.json

Manual

1. Install Dependencies

Dependencies

$pnpm add gsap @gsap/react clsx tailwind-merge

2. Add Source Code

Props

Prop	Type	Default	Description
`text`	`string`	Required	The full string of text to type out. Supports wrapping.
`as`	`React.ElementType`	`"h1"`	The HTML tag to render as.
`cursorClassName`	`string`	`"bg-primary"`	Tailwind class for the blinking cursor.
`baseSpeed`	`number`	`0.04`	Speed of the cursor glide per character in seconds.
`variance`	`number`	`0.02`	Human variance applied to the typing speed for realism.
`delay`	`number`	`0`	Delay before the typewriter begins (in seconds).
`viewportOnce`	`boolean`	`true`	Recommended to keep true to avoid reverse deletion loops.
`triggerStart`	`string`	`"top 90%"`	Viewport threshold for when the animation should start.

Desktop optimized

Install

CLI

Manual

Props