Letter Swap Demo

1import { LetterSwap } from "@/registry/react/atlasui/letter-swap";
2 
3export const LetterSwapDemo = () => {
4  return (
5    <div className="flex flex-col gap-6 p-10">
6      <LetterSwap text="Hover me!" className="text-3xl font-medium" />
7 
8      <LetterSwap
9        text="Feature, not a bug"
10        className="text-3xl font-medium"
11        reverse
12      />
13 
14      <LetterSwap
15        text="Elegant chaos in production"
16        className="text-3xl font-medium italic"
17        reverse
18        staggerFrom="last"
19      />
20 
21      <LetterSwap
22        text="Fast, fragile, fantastic"
23        className="text-3xl font-medium"
24        staggerFrom="center"
25      />
26 
27      <LetterSwap
28        text="Deploy now, panic later"
29        className="font-mono text-3xl font-medium"
30        staggerDuration={0}
31      />
32    </div>
33  );
34};