Letter 3d Swap 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 
9  return (
10    <div className="relative w-dvw h-dvh flex flex-col items-center justify-center p-8 bg-background">
11      {/* <button
12        className="absolute top-4 left-4 px-2 py-1 bg-background text-foreground 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-2xl sm:text-5xl md:text-7xl bg-background lowercase"
20          frontFaceClassName={`bg-background ${debug ? 'border' : ''} text-foreground`}
21          secondFaceClassName={`bg-background ${debug ? 'border' : ''} text-foreground`}
22          rotateDirection="top"
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}