Letter 3d Swap Stagger Demo

1"use client"
2 
3import { useState } from "react"
4import Letter3DSwap from "@/components/fancy/text/letter-3d-swap"
5 
6export default function Preview() {
7  const [debug, setDebug] = useState(false)
8  const sharedProps = {
9    mainClassName: "text-lg sm:text-3xl md:text-4xl bg-background lowercase text-foreground",
10    frontFaceClassName: `bg-background ${debug ? 'border' : ''}`,
11    secondFaceClassName: `bg-background ${debug ? 'border' : ''}`,
12    staggerDuration: 0.02,
13    transition: { type: "spring" as const, damping: 25, stiffness: debug ? 50 : 160 }
14  }
15 
16  return (
17    <div className="relative w-dvw h-dvh flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 bg-background gap-4 sm:gap-6 md:gap-8">
18      <button
19        className="absolute top-4 left-4 px-2 py-1 bg-background text-foreground rounded-md border text-[8px] cursor-pointer hover:bg-muted"
20        onClick={() => setDebug(!debug)}
21      >
22        Debug: {debug ? "On" : "Off"}
23      </button>
24 
25      <div className="flex flex-col items-center gap-4 sm:gap-6 md:gap-8 max-w-xs sm:max-w-xl md:max-w-2xl font-cotham">
26        <Letter3DSwap 
27          rotateDirection="left"
28          staggerFrom="first"
29          {...sharedProps}
30        >
31          Rotate Left, Stagger First
32        </Letter3DSwap>
33 
34        <Letter3DSwap 
35          rotateDirection="right"
36          staggerFrom="last"
37          {...sharedProps}
38        >
39          Rotate Right, Stagger Last
40        </Letter3DSwap>
41 
42        <Letter3DSwap 
43          rotateDirection="top"
44          staggerFrom="center"
45          {...sharedProps}
46        >
47          Rotate Top, Stagger Center
48        </Letter3DSwap>
49 
50        <Letter3DSwap 
51          rotateDirection="bottom"
52          staggerFrom="random"
53          {...sharedProps}
54        >
55          Rotate Bottom, Stagger Random
56        </Letter3DSwap>
57      </div>
58    </div>
59  )
60}