Components
Loading preview...
A text component that randomly swaps the letters vertically on hover. There are two types of animations available for this component: 1. Forward animation — plays the animation timeline once forward. 2. Ping Pong animation — plays the animation timeline in a ping pong fashion.
@danielpetho
npx shadcn@latest add https://21st.dev/r/danielpetho/random-letter-swap'use client'
import { RandomLetterSwapForward, RandomLetterSwapPingPong } from "@/components/ui/random-letter-swap"
function BasicExample() {
return (
<div className="w-full h-full rounded-lg bg-white text-3xl md:text-5xl flex flex-col items-center justify-center font-overusedGrotesk">
<div className="h-full text-red-500 rounded-xl py-12 align-text-center gap-y-1 md:gap-y-2 flex flex-col justify-center items-center">
<RandomLetterSwapForward
label="Right here!"
reverse={true}
/>
<RandomLetterSwapForward
label="Right now!"
reverse={false}
className="font-bold italic px-4"
/>
<RandomLetterSwapPingPong
label="Right here!"
/>
<RandomLetterSwapPingPong
label="Right now!"
reverse={false}
className="font-bold"
/>
</div>
</div>
)
}
function CustomStylesExample() {
return (
<div className="w-full h-full rounded-lg bg-slate-900 text-2xl md:text-4xl flex flex-col items-center justify-center">
<div className="space-y-4 text-white">
<RandomLetterSwapForward
label="Hover me!"
className="font-mono"
/>
<RandomLetterSwapPingPong
label="Or me!"
className="font-serif italic"
/>
</div>
</div>
)
}
function TimingExample() {
return (
<div className="w-full h-full rounded-lg bg-white text-2xl md:text-4xl flex flex-col items-center justify-center gap-6">
<RandomLetterSwapForward
label="Fast Animation"
transition={{ type: "spring", duration: 0.3 }}
staggerDuration={0.01}
/>
<RandomLetterSwapPingPong
label="Slow Animation"
transition={{ type: "spring", duration: 1.2 }}
staggerDuration={0.05}
/>
</div>
)
}
function DirectionExample() {
return (
<div className="w-full h-full rounded-lg bg-black text-2xl md:text-4xl flex flex-col items-center justify-center gap-6 text-white">
<RandomLetterSwapForward
label="Up to Down"
reverse={true}
/>
<RandomLetterSwapForward
label="Down to Up"
reverse={false}
/>
</div>
)
}
export {
BasicExample,
CustomStylesExample,
TimingExample,
DirectionExample
}