/* * If you're reading this file, you're probably looking for the explanation demo. * Keep in my mind this demo contains some extra transforms that are only needed * for making the animation prettier, and not necessary for the actual functionality. * There is a lot of messy code here, so I advise you not to try learn from it. * Please refer to the actual documentation for more details. */ "use client" import { useEffect, useState } from "react" import { AnimatePresence, motion } from "motion/react" interface AxisHelperProps { axisLength: number } export const AxisHelper = ({ axisLength }: AxisHelperProps) => { // Arrowhead size const arrowSize = 12 return (

{/* X axis (red, right) */} {/* Y axis (green, up) */}

) } export default function Preview() { const [step, setStep] = useState(0) const totalSteps = 8 useEffect(() => { const interval = setInterval( () => { setStep((prev) => { if (prev === totalSteps - 1) { // Wait longer on the last step return 0 } return prev + 1 }) }, step === totalSteps - 1 ? 5000 : 3000 ) // 4 seconds for last step, 2 seconds for others return () => clearInterval(interval) }, [step]) const getSecondFaceTransform = () => { switch (step) { case 0: return `rotateY(0deg)` case 1: return `rotateY(90deg)` case 2: return `rotateY(90deg) translateX(-50%)` case 3: return "rotateY(90deg) translateX(-50%) rotateY(-90deg)" case 4: return "rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%)" case 5: return "rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg)" case 6: return "rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) translateX(-50%)" case 7: return "rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) translateX(-50%)" default: return "rotateX(0deg)" } } const getFirstFaceTransform = () => { switch (step) { case 0: return `rotateY(0deg) translateZ(0.001lh)` case 1: return `rotateY(90deg) translateZ(0.001lh)` case 2: return `rotateY(90deg) translateX(-50%) translateZ(0.01lh)` case 3: return "rotateY(90deg) translateX(-50%) rotateY(-90deg) translateZ(0.001lh)" case 4: return "rotateY(90deg) translateX(-50%) rotateY(-90deg) translateZ(0.001lh)" case 5: return "rotateY(90deg) translateX(-50%) rotateY(-90deg) translateZ(0.001lh)" case 6: return "rotateY(90deg) translateX(-50%) rotateY(-90deg) translateZ(0.001lh)" case 7: return "rotateY(90deg) translateX(-50%) rotateY(-90deg) translateZ(0.001lh)" default: return "rotateY(0deg) translateZ(0.001lh)" } } const getContainerTransform = () => { switch (step) { case 0: return "translateZ(0)" case 1: return "translateZ(0)" case 2: return "translateZ(0)" case 3: return "translateZ(0)" case 4: return "translateZ(0)" case 5: return "translateZ(0)" case 6: return "translateZ(0lh)" case 7: return "rotateY(90deg) translateX(50%) rotateY(-90deg)" default: return "translateZ(0)" } } const getDisplayTransform = () => { switch (step) { case 0: return [" ", " "] case 1: return ["both faces:", "rotateY(90deg)"] case 2: return ["both faces:", "rotateY(90deg) translateX(50%)"] case 3: return ["both faces:", "rotateY(90deg) translateX(50%) rotateY(-90deg)"] case 4: return [ "2nd face:", "rotateY(90deg) translateX(50%) rotateY(-90deg) translateX(-50%)", ] case 5: return [ "2nd face:", "rotateY(90deg) translateX(50%) rotateY(-90deg) translateX(-50%) rotateY(-90deg)", ] case 6: return [ "2nd face:", "rotateY(90deg) translateX(50%) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%)", ] case 7: return ["container:", "rotateY(90deg) translateX(50%) rotateY(-90deg)"] default: return [" ", " "] } } return (

{/* Axes helper */}

{/* Front face */} A {/* Second face */} A {/* Transform display */}

{getDisplayTransform()[0]}

{getDisplayTransform()[1]}

) }

Letter 3d Swap Explanation Left Demo

Instalação

Dependências