Letter Swap

A text animation that swaps the letters vertically on hover.

Installation

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

import { LetterSwap } from "@/components/letter-swap";

<LetterSwap text="Hello World" />
 
<LetterSwap text="Atlas UI" />

Prop	Type	Default	Required	Description
`text`	`string`	-	true	The text content to animate
`reverse`	`boolean`	`false`	false	Controls the direction of the animation. (`false`: bottom to top, `true`: top to bottom)
`staggerDuration`	`number`	`0.02`	false	Delay between each letter animation
`staggerFrom`	`first \| last \| center`	`first`	false	Direction from where the animation starts
`className`	`string`	`0`	false	Optional classnames for according to match your setup

On This Page

Contribute