Letter Swap

A text animation that swaps the letters vertically on hover.

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/letter-swap-html.json

Pass class="letter-swap" and data-text="Your Text" to your text element.

<p class="letter-swap" data-text="Hello World">Hello World</p>
 
<span class="letter-swap" data-text="Atlas UI">Atlas UI</span>

Data Attribute	Type	Default	Required	Description
`data-text`	`string`	-	true	The text content to animate
`data-reverse`	`boolean`	`false`	false	Controls the direction of the animation. (`false`: bottom to top, `true`: top to bottom)
`data-stagger-duration`	`number`	`0.02`	false	Delay between each letter animation
`data-stagger-from`	`first \| last \| center`	`first`	false	Direction from where the animation starts

On This Page

Contribute