Letter 3d Swap Rotate Top Explainer

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 
9  return (
10    <div className="relative w-dvw h-dvh flex flex-col items-center justify-center p-8 bg-white ">
11      <button
12        className="absolute top-4 left-4 px-2 py-1 bg-white text-black rounded-md border text-[8px] cursor-pointer hover:bg-muted"
13        onClick={() => setDebug(!debug)}
14      >
15        Debug: {debug ? "On" : "Off"}
16      </button>
17      <div className="flex flex-col items-center max-w-2xl font-cotham">
18        <Letter3DSwap 
19          mainClassName="text-7xl bg-white lowercase"
20          frontFaceClassName={`bg-white ${debug ? 'border' : ''} text-black`}
21          secondFaceClassName={`bg-white ${debug ? 'border' : ''} text-black`}
22          rotateDirection="left"
23          staggerDuration={0.03}
24          staggerFrom="first"
25          transition={{ type: "spring", damping: 25, stiffness: debug ? 50 : 160 }}
26        >
27          SET YOUR MIND TO IT
28        </Letter3DSwap>
29      </div>
30    </div>
31  )
32}