Letter 3D Swap Rotate Top Explainer
Letter 3D Swap Rotate Top Explainer é um componente de texto para React e Tailwind CSS, da biblioteca Fancy Components, com licença MIT. Copia e cola no teu projeto.
Fancy Components
MIT
text
O que é
Letter 3D Swap Rotate Top Explainer é um componente de texto para React e Tailwind CSS, da biblioteca Fancy Components, com licença MIT. Copia e cola no teu projeto.
Como usar
Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.
Cinco cópias grátis por mês. Sem cartão.
Não precisa de pacotes além do que o projeto já tem
Licença
Este componente vem de Fancy Components e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.
Letter 3D Swap Rotate Top Explainer
"use client"
import { useState } from "react"
import Letter3DSwap from "@/components/fancy/text/letter-3d-swap"
export default function Preview() {
const [debug, setDebug] = useState(false)
return (
<div className="relative w-dvw h-dvh flex flex-col items-center justify-center p-8 bg-white ">
<button
className="absolute top-4 left-4 px-2 py-1 bg-white text-black rounded-md border text-[8px] cursor-pointer hover:bg-muted"
onClick={() => setDebug(!debug)}
>
Debug: {debug ? "On" : "Off"}
</button>
<div className="flex flex-col items-center max-w-2xl font-cotham">
<Letter3DSwap
mainClassName="text-7xl bg-white lowercase"
frontFaceClassName={`bg-white ${debug ? 'border' : ''} text-black`}
secondFaceClassName={`bg-white ${debug ? 'border' : ''} text-black`}
rotateDirection="left"
staggerDuration={0.03}
staggerFrom="first"
transition={{ type: "spring", damping: 25, stiffness: debug ? 50 : 160 }}
>
SET YOUR MIND TO IT
</Letter3DSwap>
</div>
</div>
)
}