/* * 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 = 5 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 `rotateX(0deg)` case 1: return `rotateX(0deg)` case 2: return "rotateX(90deg)" case 3: return "rotateX(90deg) translateZ(0.5lh)" case 4: return "rotateX(90deg) translateZ(0.5lh)" default: return "rotateX(0deg)" } } const getFirstFaceTransform = () => { switch (step) { case 0: return "translateZ(0lh)" case 1: return "translateZ(0.5lh)" case 2: return "translateZ(0.5lh)" case 3: return "translateZ(0.5lh)" case 4: return "translateZ(0.5lh)" default: return "translateZ(0lh)" } } 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.5lh)" default: return "translateZ(0)" } } const getDisplayTransform = () => { switch (step) { case 0: return [" ", " "] case 1: return ["1st face:", "translateZ(0.5lh)"] case 2: return ["2nd face:", "rotateX(90deg)"] case 3: return ["2nd face:", "rotateX(90deg) translateZ(0.5lh)"] case 4: return ["container:", "translateZ(-0.5lh)"] default: return [" ", " "] } } return (

{/* Axes helper */}

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

{getDisplayTransform()[0]}

{getDisplayTransform()[1]}

) }

Letter 3d Swap Explanation Top Demo

Instalação

Dependências