Letter Swap

A text animation that swaps the letters vertically on hover.

ReactHTML

Installation

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

Usage

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>
<p class="letter-swap" data-text="Hello World">Hello World</p>
 
<span class="letter-swap" data-text="Atlas UI">Atlas UI</span>

Data Attributes

Data AttributeTypeDefaultRequiredDescription
data-textstring-trueThe text content to animate
data-reversebooleanfalsefalseControls the direction of the animation. (false: bottom to top, true: top to bottom)
data-stagger-durationnumber0.02falseDelay between each letter animation
data-stagger-fromfirst | last | centerfirstfalseDirection from where the animation starts
Cascade TextReveal Effect