Letter Swap Demo

1import LetterSwapForward from "@/components/fancy/text/letter-swap-forward-anim"
2import LetterSwapPingPong from "@/components/fancy/text/letter-swap-pingpong-anim"
3 
4export default function Preview() {
5  return (
6    <div className="w-dvw h-dvh rounded-lg bg-white text-xl md:text-3xl  flex flex-col items-center justify-center font-calendas">
7      <div className=" p-12 text-[#0015ff] rounded-xl align-text-top  gap-y-1 md:gap-y-2 flex flex-col">
8        <LetterSwapForward
9          label="Hover me chief!"
10          reverse={true}
11          className="italic"
12        />
13        <LetterSwapForward
14          label="{awesome}"
15          reverse={false}
16          className="font-bold"
17        />
18        <LetterSwapForward
19          label="Good day!"
20          staggerFrom={"center"}
21          className="mono"
22        />
23        <LetterSwapPingPong
24          label="More text?"
25          staggerFrom={"center"}
26          reverse={false}
27          className="font-overused-grotesk font-bold"
28        />
29        <LetterSwapPingPong label="oh, seriously?!" staggerFrom={"last"} />
30      </div>
31    </div>
32  )
33}