[V0_FILE]typescriptreact:file="book-loading-animation.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" export default function BookLoadingAnimation() { const [currentLetterIndex, setCurrentLetterIndex] = useState(0) const letters = ["L", "O", "A", "D", "I", "N", "G"] // Auto-increment the letter index useEffect(() => { const interval = setInterval(() => { setCurrentLetterIndex((prev) => (prev + 1) % letters.length) }, 600) return () => clearInterval(interval) }, [letters.length]) return (

{/* Book spine */}

{/* Book cover */}

{/* Pages */}

{letters[currentLetterIndex]}

{/* Page edge gradient */}

{/* Book shadow */}

{/* Loading text below */}

{letters.map((letter, index) => ( ))}

) } [V0_FILE]typescriptreact:file="enhanced-book-loading.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" export default function EnhancedBookLoading() { const [currentLetterIndex, setCurrentLetterIndex] = useState(0) const [isLoading, setIsLoading] = useState(true) const letters = ["L", "O", "A", "D", "I", "N", "G"] // Auto-increment the letter index useEffect(() => { if (!isLoading) return const interval = setInterval(() => { setCurrentLetterIndex((prev) => { const next = (prev + 1) % letters.length // Complete a full cycle before stopping if (next === 0) { // Simulate loading completion after one full cycle setTimeout(() => setIsLoading(false), 600) } return next }) }, 600) return () => clearInterval(interval) }, [letters.length, isLoading]) return (

{/* Book spine */} {/* Book cover */} {/* Pages */} {isLoading ? (

{letters[currentLetterIndex]}

{/* Page edge gradient */}

) : ( LOADED )} {/* Book shadow */}

{/* Loading indicators */} {isLoading && (

{letters.map((letter, index) => ( ))}

)} {/* Completed state message */} {!isLoading && ( setIsLoading(true)} > Reload )}

) } [V0_FILE]typescriptreact:file="3d-book-loading.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" export default function ThreeDBookLoading() { const [currentLetterIndex, setCurrentLetterIndex] = useState(0) const letters = ["L", "O", "A", "D", "I", "N", "G"] // Auto-increment the letter index useEffect(() => { const interval = setInterval(() => { setCurrentLetterIndex((prev) => (prev + 1) % letters.length) }, 600) return () => clearInterval(interval) }, [letters.length]) return (

{/* Book container with 3D rotation */} {/* Book spine */}

{/* Book cover - back */}

{/* Book cover - front edge */}

{/* Book top edge */}

{/* Book bottom edge */}

{/* Pages */}

{letters[currentLetterIndex]}

{/* Page edge gradient */}

{/* Book shadow */}

{/* Loading text below */}

{letters.map((letter, index) => ( ))}

) } [V0_FILE]typescriptreact:file="high-end-book-loading.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { motion, AnimatePresence, useAnimation, useMotionValue, transform } from "framer-motion" export default function HighEndBookLoading() { const letters = ["L", "O", "A", "D", "I", "N", "G"] const [currentPage, setCurrentPage] = useState(0) const [isFlipping, setIsFlipping] = useState(false) const bookControls = useAnimation() const pageRotation = useMotionValue(0) const pageZIndex = useMotionValue(0) const flipTimeoutRef = useRef(null) // Transform page rotation to z-index for proper stacking const pageZ = transform(pageRotation, [-90, 0], [-1, 0]) // Subtle book animation useEffect(() => { bookControls.start({ y: [0, -3, 0], rotateY: [0, 1, 0, -1, 0], transition: { y: { duration: 3, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut", }, rotateY: { duration: 5, repeat: Number.POSITIVE_INFINITY, repeatType: "mirror", ease: "easeInOut", }, }, }) }, [bookControls]) // Page flipping sequence useEffect(() => { const flipPage = () => { setIsFlipping(true) // Animate page flip pageRotation.set(0) const flipAnimation = [ [0, -90, -170, -179], // Rotation values [0, -0.5, -0.2, 0], // Z-index values (for proper stacking) ] // Animate through the keyframes let step = 0 const totalSteps = flipAnimation[0].length const stepDuration = 350 / totalSteps // 350ms for slightly slower flips const animateStep = () => { if (step < totalSteps) { pageRotation.set(flipAnimation[0][step]) pageZIndex.set(flipAnimation[1][step]) step++ flipTimeoutRef.current = setTimeout(animateStep, stepDuration) } else { // Flip complete, move to next letter setIsFlipping(false) setCurrentPage((prev) => (prev + 1) % letters.length) } } animateStep() } // Start flipping pages at regular intervals const interval = setInterval(flipPage, 500) // Slower interval for a more measured pace return () => { clearInterval(interval) if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } } }, [letters.length, pageRotation, pageZIndex]) return (

{/* Book container with subtle animation */} {/* Minimalistic book */}

{/* Book cover */}

{/* Subtle embossed detail */}

{/* Book spine */}

{/* Book pages - static background pages */}

{[...Array(3)].map((_, i) => (

))} {/* Current animated page */} {/* Front of page */} {!isFlipping && ( {letters[currentPage]} )} {/* Page edge */}

{/* Book shadow */}

{/* Minimal progress indicator */}

{letters.map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="minimal-book-loading.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { motion } from "framer-motion" export default function MinimalBookLoading() { const letters = ["L", "O", "A", "D", "I", "N", "G"] const [activeIndex, setActiveIndex] = useState(0) const [isAnimating, setIsAnimating] = useState(false) useEffect(() => { const interval = setInterval(() => { setIsAnimating(true) setTimeout(() => { setActiveIndex((prev) => (prev + 1) % letters.length) setIsAnimating(false) }, 350) // Time to complete flip }, 500) // Total time per letter return () => clearInterval(interval) }, [letters.length]) return (

{/* Book */}

{/* Book cover */}

{/* Subtle embossed detail */}

{/* Book spine */}

{/* Page */} {letters[activeIndex]} {/* Page edge */}

{/* Book shadow */}

{/* Progress indicator */}

{letters.map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="premium-book-loading.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { motion, AnimatePresence, useAnimation } from "framer-motion" export default function PremiumBookLoading() { const [isVisible, setIsVisible] = useState(true) const bookControls = useAnimation() const pageRefs = useRef([]) const letters = ["L", "O", "A", "D", "I", "N", "G"] const [currentIndex, setCurrentIndex] = useState(0) const [completedCycles, setCompletedCycles] = useState(0) const cycleTimeoutRef = useRef(null) // Reset animation refs useEffect(() => { pageRefs.current = pageRefs.current.slice(0, letters.length) // Subtle floating animation for the book bookControls.start({ y: [0, -4, 0], transition: { duration: 3, ease: "easeInOut", repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", }, }) return () => { if (cycleTimeoutRef.current) { clearTimeout(cycleTimeoutRef.current) } } }, [bookControls]) // Handle page turning sequence useEffect(() => { const flipPage = (index: number) => { if (index >= letters.length) { // Complete one cycle setCompletedCycles((prev) => prev + 1) setCurrentIndex(0) return } setCurrentIndex(index) // Schedule next page flip cycleTimeoutRef.current = setTimeout(() => { flipPage(index + 1) }, 500) // Slower page flips (500ms) } // Start the animation sequence flipPage(0) return () => { if (cycleTimeoutRef.current) { clearTimeout(cycleTimeoutRef.current) } } }, [letters.length, completedCycles]) return (

{/* Book container */} {/* Book - minimalistic design */}

{/* Book cover */}

{/* Subtle embossed detail on cover */}

{/* Book spine */}

{/* Pages container */}

{/* Static pages in background */} {[...Array(3)].map((_, i) => (

))} {/* Animated pages */} {letters.map((letter, index) => ( { if (el) pageRefs.current[index] = el }} key={`page-${index}-${completedCycles}`} className="absolute inset-0 origin-left flex items-center justify-center" initial={{ rotateY: index === 0 ? 0 : -179 }} animate={{ rotateY: currentIndex > index ? -180 : currentIndex === index ? [-5, -90, -170, -179] : 0, zIndex: letters.length - index, }} transition={{ duration: currentIndex === index ? 0.45 : 0, ease: "easeInOut", times: currentIndex === index ? [0, 0.4, 0.8, 1] : [0], }} style={{ backgroundColor: "#F5F5EB", boxShadow: "0 0 10px rgba(0,0,0,0.05)", pointerEvents: "none", backfaceVisibility: "hidden", }} > {/* Front of page (visible before flip) */}

{letter}

{/* Back of page (visible after flip) */}

{/* Page edge detail */}

))}

{/* Book shadow */}

{/* Progress indicator */}

{letters.map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="realistic-book-loading.tsx" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { motion, useAnimation, useMotionValue, animate } from "framer-motion" export default function RealisticBookLoading() { const letters = ["L", "O", "A", "D", "I", "N", "G"] const [currentPage, setCurrentPage] = useState(0) const [isFlipping, setIsFlipping] = useState(false) const bookControls = useAnimation() const pageControls = useAnimation() const flipTimeoutRef = useRef(null) const pageRotation = useMotionValue(0) const pageCurl = useMotionValue(0) const pageElevation = useMotionValue(0) // Subtle book animation useEffect(() => { bookControls.start({ y: [0, -3, 0], rotateY: [0, 0.5, 0, -0.5, 0], transition: { y: { duration: 3, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut", }, rotateY: { duration: 5, repeat: Number.POSITIVE_INFINITY, repeatType: "mirror", ease: "easeInOut", }, }, }) }, [bookControls]) // Page flipping sequence with realistic physics useEffect(() => { const flipPage = async () => { if (isFlipping) return setIsFlipping(true) // Reset page state pageRotation.set(0) pageCurl.set(0) pageElevation.set(0) // Animate page curl first (page starts to lift) await animate(pageCurl, [0, 0.8, 1], { duration: 0.2, ease: [0.32, 0.72, 0, 1], }) // Animate page elevation (page rises slightly) await animate(pageElevation, [0, 0.5, 0.2], { duration: 0.15, ease: "easeOut", }) // Animate page rotation (page turns) await animate(pageRotation, [0, -90, -170, -180], { duration: 0.5, times: [0, 0.5, 0.8, 1], ease: [0.32, 0.72, 0, 1], }) // Reset curl and elevation await Promise.all([animate(pageCurl, 0, { duration: 0.1 }), animate(pageElevation, 0, { duration: 0.1 })]) // Move to next letter setCurrentPage((prev) => (prev + 1) % letters.length) setIsFlipping(false) } // Start flipping pages at regular intervals const interval = setInterval(() => { flipPage() }, 1200) // Slower interval for a more deliberate pace return () => { clearInterval(interval) if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } } }, [isFlipping, letters.length, pageCurl, pageElevation, pageRotation]) return (

{/* Book container with subtle animation */} {/* Minimalistic book */}

{/* Book cover */}

{/* Subtle embossed detail */}

{/* Book spine */}

{/* Book pages - static background pages */}

{/* Book page edges (showing thickness) */}

{/* Static pages in background */} {[...Array(3)].map((_, i) => (

))} {/* Current animated page */} {/* Front of page with realistic curl */} {/* Letter on page */}

{letters[currentPage]}

{/* Page edge shadow */}

{/* Page curl shadow (appears during turn) */} {/* Back of page */} {/* Back page edge shadow */}

{/* Next page (showing the next letter) */}

{letters[(currentPage + 1) % letters.length]}

{/* Book shadow */}

{/* Minimal progress indicator */}

{letters.map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="enhanced-realistic-book-loading.tsx" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { motion, useAnimation, useMotionValue, animate, useTransform } from "framer-motion" export default function EnhancedRealisticBookLoading() { const letters = ["L", "O", "A", "D", "I", "N", "G"] const [currentPage, setCurrentPage] = useState(0) const [isFlipping, setIsFlipping] = useState(false) const bookControls = useAnimation() const flipTimeoutRef = useRef(null) // Motion values for realistic page physics const pageRotation = useMotionValue(0) const pageCurl = useMotionValue(0) const pageElevation = useMotionValue(0) const pageShadow = useTransform(pageRotation, [-180, -90, 0], ["rgba(0,0,0,0)", "rgba(0,0,0,0.15)", "rgba(0,0,0,0)"]) // Subtle book animation useEffect(() => { bookControls.start({ y: [0, -3, 0], rotateY: [0, 0.5, 0, -0.5, 0], transition: { y: { duration: 3, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut", }, rotateY: { duration: 5, repeat: Number.POSITIVE_INFINITY, repeatType: "mirror", ease: "easeInOut", }, }, }) }, [bookControls]) // Page flipping sequence with realistic physics useEffect(() => { const flipPage = async () => { if (isFlipping) return setIsFlipping(true) // Reset page state pageRotation.set(0) pageCurl.set(0) pageElevation.set(0) // Phase 1: Initial curl (page starts to lift) await animate(pageCurl, [0, 0.6, 0.8], { duration: 0.25, ease: [0.32, 0.72, 0, 1], }) // Phase 2: Page elevation (page rises slightly) await animate(pageElevation, [0, 0.5, 0.3], { duration: 0.2, ease: "easeOut", }) // Phase 3: Page rotation (page turns) await animate(pageRotation, [0, -60, -150, -180], { duration: 0.6, times: [0, 0.4, 0.8, 1], ease: [0.32, 0.72, 0, 1], }) // Phase 4: Reset curl and elevation await Promise.all([animate(pageCurl, 0, { duration: 0.15 }), animate(pageElevation, 0, { duration: 0.15 })]) // Move to next letter setCurrentPage((prev) => (prev + 1) % letters.length) setIsFlipping(false) } // Start flipping pages at regular intervals const interval = setInterval(() => { flipPage() }, 1200) // Slower interval for a more deliberate pace return () => { clearInterval(interval) if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } } }, [isFlipping, letters.length, pageCurl, pageElevation, pageRotation]) return (

{/* Book container with subtle animation */} {/* Minimalistic book */}

{/* Book cover */}

{/* Subtle embossed detail */}

{/* Book spine */}

{/* Book pages - static background pages */}

{/* Book page edges (showing thickness) */}

{/* Static pages in background */} {[...Array(5)].map((_, i) => (

))} {/* Current animated page */} {/* Front of page with realistic curl */} {/* Letter on page */}

{letters[currentPage]}

{/* Page edge shadow */}

{/* Page curl shadow (appears during turn) */} {/* Back of page */} {/* Back page edge shadow */}

{/* Dynamic page shadow during flip */} {/* Next page (showing the next letter) */}

{letters[(currentPage + 1) % letters.length]}

{/* Book shadow */}

{/* Minimal progress indicator */}

{letters.map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="realistic-book-cover-loading.tsx" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { motion, useAnimation, useMotionValue, animate } from "framer-motion" export default function RealisticBookCoverLoading() { const letters = ["L", "O", "A", "D", "I", "N", "G"] const [currentPage, setCurrentPage] = useState(-1) // Start at -1 for cover const [isFlipping, setIsFlipping] = useState(false) const bookControls = useAnimation() const flipTimeoutRef = useRef(null) // Motion values for realistic page physics const pageRotation = useMotionValue(0) const pageCurl = useMotionValue(0) const pageElevation = useMotionValue(0) // Subtle book animation useEffect(() => { bookControls.start({ y: [0, -2, 0], rotateY: [0, 0.3, 0, -0.3, 0], transition: { y: { duration: 3, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut", }, rotateY: { duration: 5, repeat: Number.POSITIVE_INFINITY, repeatType: "mirror", ease: "easeInOut", }, }, }) }, [bookControls]) // Page flipping sequence with realistic physics useEffect(() => { const flipPage = async () => { if (isFlipping) return setIsFlipping(true) // Reset page state pageRotation.set(0) pageCurl.set(0) pageElevation.set(0) // Different animation timing for cover vs regular pages const isCover = currentPage === -1 // Phase 1: Initial curl (page starts to lift) await animate(pageCurl, [0, isCover ? 0.4 : 0.6, isCover ? 0.6 : 0.8], { duration: isCover ? 0.3 : 0.25, ease: [0.32, 0.72, 0, 1], }) // Phase 2: Page elevation (page rises slightly) await animate(pageElevation, [0, isCover ? 0.3 : 0.5, isCover ? 0.2 : 0.3], { duration: isCover ? 0.25 : 0.2, ease: "easeOut", }) // Phase 3: Page rotation (page turns) await animate(pageRotation, [0, -60, -150, -180], { duration: isCover ? 0.7 : 0.6, times: [0, 0.4, 0.8, 1], ease: [0.32, 0.72, 0, 1], }) // Phase 4: Reset curl and elevation await Promise.all([animate(pageCurl, 0, { duration: 0.15 }), animate(pageElevation, 0, { duration: 0.15 })]) // Move to next letter setCurrentPage((prev) => (prev + 1 >= letters.length ? -1 : prev + 1)) setIsFlipping(false) } // Start flipping pages at regular intervals const interval = setInterval(() => { flipPage() }, 1200) // Slower interval for a more deliberate pace return () => { clearInterval(interval) if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } } }, [isFlipping, letters.length, pageCurl, pageElevation, pageRotation, currentPage]) // Determine if we're showing the cover or a letter page const isCover = currentPage === -1 const currentLetter = isCover ? "" : letters[currentPage] const nextLetter = isCover ? "L" : currentPage + 1 >= letters.length ? "" : letters[currentPage + 1] return (

{/* Book container with subtle animation */} {/* Minimalistic book */}

{/* Book base (always visible) */}

{/* Subtle embossed detail */}

{/* Book spine */}

{/* Book pages container */}

{/* Book page edges (showing thickness) */}

{/* Static pages in background */} {[...Array(5)].map((_, i) => (

))} {/* Current animated page/cover */} {/* Front of page/cover with realistic curl */} {/* Content on page/cover */}

{!isCover && ( {currentLetter} )} {isCover && (

)}

{/* Page/cover edge shadow */}

{/* Page/cover curl shadow (appears during turn) */} {/* Back of page/cover */} {/* Back page/cover edge shadow */}

{/* Next page (showing the next letter or cover) */}

= letters.length ? "#4A5D45" : "#F5F5EB", zIndex: -1, boxShadow: "0 0 5px rgba(0,0,0,0.03)", }} > {nextLetter && ( {nextLetter} )} {currentPage + 1 >= letters.length && (

)}

{/* Book shadow */}

{/* Minimal progress indicator */}

{letters.map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="premium-book-cover-loading.tsx" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { motion, useAnimation, useMotionValue, animate } from "framer-motion" export default function PremiumBookCoverLoading() { const letters = ["L", "O", "A", "D", "I", "N", "G"] const [currentPage, setCurrentPage] = useState(-1) // Start at -1 for cover const [isFlipping, setIsFlipping] = useState(false) const bookControls = useAnimation() const flipTimeoutRef = useRef(null) // Motion values for realistic page physics const pageRotation = useMotionValue(0) const pageCurl = useMotionValue(0) const pageElevation = useMotionValue(0) const pageBend = useMotionValue(0) // Subtle book animation useEffect(() => { bookControls.start({ y: [0, -2, 0], rotateY: [0, 0.3, 0, -0.3, 0], transition: { y: { duration: 3, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut", }, rotateY: { duration: 5, repeat: Number.POSITIVE_INFINITY, repeatType: "mirror", ease: "easeInOut", }, }, }) }, [bookControls]) // Page flipping sequence with realistic physics useEffect(() => { const flipPage = async () => { if (isFlipping) return setIsFlipping(true) // Reset page state pageRotation.set(0) pageCurl.set(0) pageElevation.set(0) pageBend.set(0) // Different animation timing for cover vs regular pages const isCover = currentPage === -1 // Phase 1: Initial curl and bend (page starts to lift) await Promise.all([ animate(pageCurl, [0, isCover ? 0.4 : 0.6, isCover ? 0.6 : 0.8], { duration: isCover ? 0.3 : 0.25, ease: [0.32, 0.72, 0, 1], }), animate(pageBend, [0, isCover ? 0.2 : 0.3], { duration: isCover ? 0.3 : 0.25, ease: "easeOut", }), ]) // Phase 2: Page elevation (page rises slightly) await animate(pageElevation, [0, isCover ? 0.3 : 0.5, isCover ? 0.2 : 0.3], { duration: isCover ? 0.25 : 0.2, ease: "easeOut", }) // Phase 3: Page rotation with bend (page turns) await Promise.all([ animate(pageRotation, [0, -60, -150, -180], { duration: isCover ? 0.7 : 0.6, times: [0, 0.4, 0.8, 1], ease: [0.32, 0.72, 0, 1], }), animate(pageBend, [pageBend.get(), 0.4, 0.1, 0], { duration: isCover ? 0.7 : 0.6, times: [0, 0.4, 0.8, 1], ease: "easeInOut", }), ]) // Phase 4: Reset curl and elevation await Promise.all([animate(pageCurl, 0, { duration: 0.15 }), animate(pageElevation, 0, { duration: 0.15 })]) // Move to next letter setCurrentPage((prev) => (prev + 1 >= letters.length ? -1 : prev + 1)) setIsFlipping(false) } // Start flipping pages at regular intervals const interval = setInterval(() => { flipPage() }, 1200) // Slower interval for a more deliberate pace return () => { clearInterval(interval) if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } } }, [isFlipping, letters.length, pageCurl, pageElevation, pageRotation, pageBend, currentPage]) // Determine if we're showing the cover or a letter page const isCover = currentPage === -1 const currentLetter = isCover ? "" : letters[currentPage] const nextLetter = isCover ? "L" : currentPage + 1 >= letters.length ? "" : letters[currentPage + 1] return (

{/* Book container with subtle animation */} {/* Minimalistic book */}

{/* Book base (always visible) */}

{/* Subtle embossed detail */}

{/* Book spine */}

{/* Book pages container */}

{/* Book page edges (showing thickness) */}

{/* Static pages in background */} {[...Array(5)].map((_, i) => (

))} {/* Current animated page/cover */} {/* Front of page/cover with realistic curl and bend */} {/* Content on page/cover */}

{!isCover && ( {currentLetter} )} {isCover && (

)}

{/* Page/cover edge shadow */}

{/* Page/cover curl shadow (appears during turn) */} {/* Page/cover bend shadow (appears during turn) */} {/* Back of page/cover */} {/* Back page/cover edge shadow */}

{/* Next page (showing the next letter or cover) */}

= letters.length ? "#4A5D45" : "#F5F5EB", zIndex: -1, boxShadow: "0 0 5px rgba(0,0,0,0.03)", }} > {nextLetter && ( {nextLetter} )} {currentPage + 1 >= letters.length && (

)}

{/* Book shadow */}

{/* Minimal progress indicator */}

{letters.map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="sequential-book-loading.tsx" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { motion, useAnimation, useMotionValue, animate } from "framer-motion" export default function SequentialBookLoading() { const letters = ["L", "O", "A", "D", "I", "N", "G"] const [activePageIndex, setActivePageIndex] = useState(0) // 0 = cover, 1-7 = letters const [isFlipping, setIsFlipping] = useState(false) const [hasStarted, setHasStarted] = useState(false) const bookControls = useAnimation() const flipTimeoutRef = useRef(null) // Motion values for realistic page physics const pageRotation = useMotionValue(0) const pageCurl = useMotionValue(0) const pageElevation = useMotionValue(0) const pageBend = useMotionValue(0) // Subtle book animation useEffect(() => { bookControls.start({ y: [0, -2, 0], rotateY: [0, 0.3, 0, -0.3, 0], transition: { y: { duration: 3, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut", }, rotateY: { duration: 5, repeat: Number.POSITIVE_INFINITY, repeatType: "mirror", ease: "easeInOut", }, }, }) }, [bookControls]) // Page flipping sequence with realistic physics useEffect(() => { const flipPage = async () => { if (isFlipping) return setIsFlipping(true) setHasStarted(true) // Reset page state pageRotation.set(0) pageCurl.set(0) pageElevation.set(0) pageBend.set(0) // Different animation timing for cover vs regular pages const isCover = activePageIndex === 0 // Phase 1: Initial curl and bend (page starts to lift) await Promise.all([ animate(pageCurl, [0, isCover ? 0.4 : 0.6, isCover ? 0.6 : 0.8], { duration: isCover ? 0.3 : 0.25, ease: [0.32, 0.72, 0, 1], }), animate(pageBend, [0, isCover ? 0.2 : 0.3], { duration: isCover ? 0.3 : 0.25, ease: "easeOut", }), ]) // Phase 2: Page elevation (page rises slightly) await animate(pageElevation, [0, isCover ? 0.3 : 0.5, isCover ? 0.2 : 0.3], { duration: isCover ? 0.25 : 0.2, ease: "easeOut", }) // Phase 3: Page rotation with bend (page turns) await Promise.all([ animate(pageRotation, [0, -60, -150, -180], { duration: isCover ? 0.7 : 0.6, times: [0, 0.4, 0.8, 1], ease: [0.32, 0.72, 0, 1], }), animate(pageBend, [pageBend.get(), 0.4, 0.1, 0], { duration: isCover ? 0.7 : 0.6, times: [0, 0.4, 0.8, 1], ease: "easeInOut", }), ]) // Phase 4: Reset curl and elevation await Promise.all([animate(pageCurl, 0, { duration: 0.15 }), animate(pageElevation, 0, { duration: 0.15 })]) // Move to next page setActivePageIndex((prev) => (prev + 1) % (letters.length + 1)) setIsFlipping(false) } // Start flipping pages at regular intervals const interval = setInterval(() => { flipPage() }, 1200) // Slower interval for a more deliberate pace return () => { clearInterval(interval) if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } } }, [isFlipping, letters.length, pageCurl, pageElevation, pageRotation, pageBend, activePageIndex]) // Determine if we're showing the cover or a letter page const isCover = activePageIndex === 0 const currentLetter = isCover ? "" : letters[activePageIndex - 1] return (

{/* Book container with subtle animation */} {/* Minimalistic book */}

{/* Book base (always visible) */}

{/* Subtle embossed detail */}

{/* Book spine */}

{/* Book pages container */}

{/* Book page edges (showing thickness) */}

{/* Static pages in background - only visible before animation starts */} {!hasStarted && [...Array(5)].map((_, i) => (

))} {/* Cover - only visible at the beginning or when actively flipping */} {(activePageIndex === 0 || (isFlipping && activePageIndex === 1)) && ( {/* Front of cover with realistic curl and bend */} {/* Cover design */}

{/* Cover edge shadow */}

{/* Cover curl shadow (appears during turn) */} {activePageIndex === 0 && isFlipping && ( )} {/* Cover bend shadow (appears during turn) */} {activePageIndex === 0 && isFlipping && ( )} {/* Back of cover */} {/* Back cover edge shadow */}

)} {/* Letter pages - each one stays in place after flipping */} {letters.map((letter, index) => { const pageIndex = index + 1 // Page index (1-7 for letters) const isActive = pageIndex === activePageIndex const hasFlipped = pageIndex < activePageIndex const isNext = pageIndex === activePageIndex + 1 return ( {/* Front of page with realistic curl and bend */} {/* Letter on page */} {letter} {/* Page edge shadow */}

{/* Page curl shadow (appears during turn) */} {isActive && isFlipping && ( )} {/* Page bend shadow (appears during turn) */} {isActive && isFlipping && ( )} {/* Back of page */} {/* Back page edge shadow */}

) })}

{/* Book shadow */}

{/* Minimal progress indicator */}

{letters.map((_, index) => ( ))}

) } [V0_FILE]typescriptreact:file="perfected-book-loading.tsx" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { motion, useAnimation, useMotionValue, animate } from "framer-motion" export default function PerfectedBookLoading() { const letters = ["L", "O", "A", "D", "I", "N", "G"] const [activePageIndex, setActivePageIndex] = useState(-1) // -1 = initial state, 0 = cover, 1-7 = letters const [isFlipping, setIsFlipping] = useState(false) const [initialFlipsComplete, setInitialFlipsComplete] = useState(false) const [initialFlipCount, setInitialFlipCount] = useState(0) const bookControls = useAnimation() const flipTimeoutRef = useRef(null) // Motion values for realistic page physics const pageRotation = useMotionValue(0) const pageCurl = useMotionValue(0) // Subtle book animation useEffect(() => { bookControls.start({ y: [0, -1.5, 0], transition: { y: { duration: 3, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut", }, }, }) }, [bookControls]) // Initial rapid page flipping effect useEffect(() => { if (activePageIndex === -1) { const rapidFlip = async () => { setIsFlipping(true) // Fast flip animation await animate(pageRotation, [0, -180], { duration: 0.15, ease: "easeIn", }) pageRotation.set(0) setInitialFlipCount((prev) => prev + 1) // After 3 flips, move to the main sequence if (initialFlipCount >= 2) { setInitialFlipsComplete(true) setActivePageIndex(0) setIsFlipping(false) } else { setIsFlipping(false) } } if (!isFlipping && !initialFlipsComplete) { rapidFlip() } } }, [activePageIndex, initialFlipCount, initialFlipsComplete, isFlipping, pageRotation]) // Main page flipping sequence useEffect(() => { if (!initialFlipsComplete) return const flipPage = async () => { if (isFlipping) return setIsFlipping(true) // Reset page state pageRotation.set(0) pageCurl.set(0) // Different animation timing for cover vs regular pages const isCover = activePageIndex === 0 // Phase 1: Initial curl (page starts to lift) await animate(pageCurl, [0, 0.6], { duration: 0.12, ease: "easeOut", }) // Phase 2: Page rotation with curl await Promise.all([ animate(pageRotation, [0, -180], { duration: 0.25, ease: [0.3, 0.8, 0.1, 1], }), animate(pageCurl, [0.6, 0], { duration: 0.25, ease: [0.3, 0.8, 0.1, 1], }), ]) // Move to next page setActivePageIndex((prev) => { // If we've reached the end, reset to cover if (prev + 1 > letters.length) { return 0 } return prev + 1 }) setIsFlipping(false) } // Start flipping pages at regular intervals const interval = setInterval(() => { flipPage() }, 800) // Faster interval return () => { clearInterval(interval) if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } } }, [isFlipping, letters.length, pageCurl, pageRotation, activePageIndex, initialFlipsComplete]) // Determine if we're showing the cover or a letter page const isCover = activePageIndex === 0 const isInitialFlipping = activePageIndex === -1 return (

{/* Book container with subtle animation */} {/* Minimalistic book */}

{/* Book base (always visible) */}

{/* Subtle embossed detail */}

{/* Book spine with realistic binding */}

{/* Book edge details */}

{/* Book pages container */}

{/* Book page edges (showing thickness) */}

{/* Initial rapid flipping pages */} {isInitialFlipping && ( {/* Front of page */}

{letters[initialFlipCount % letters.length]}

{/* Back of page */}

{letters[(initialFlipCount + 1) % letters.length]}

)} {/* Cover - only visible at the beginning or when actively flipping */} {initialFlipsComplete && (activePageIndex === 0 || (isFlipping && activePageIndex === 1)) && ( {/* Front of cover with realistic curl */} {/* Cover design */}

{/* Cover edge shadow */}

{/* Cover curl shadow (appears during turn) */} {activePageIndex === 0 && isFlipping && ( )} {/* Back of cover */} {/* Back cover edge shadow */}

)} {/* Letter pages - each one stays in place after flipping */} {initialFlipsComplete && letters.map((letter, index) => { const pageIndex = index + 1 // Page index (1-7 for letters) const isActive = pageIndex === activePageIndex const hasFlipped = pageIndex < activePageIndex const isNext = pageIndex === activePageIndex + 1 return ( {/* Front of page with realistic curl */} {/* Letter on page */} {letter} {/* Page edge shadow */}

{/* Page curl shadow (appears during turn) */} {isActive && isFlipping && ( )} {/* Back of page */} {/* Back page edge shadow */}

) })}

{/* Book shadow */}

) } [V0_FILE]typescriptreact:file="enhanced-3d-book-loading.tsx" "use client" import { useEffect, useState, useRef } from "react" import { motion, useAnimation, useMotionValue, animate, useTransform } from "framer-motion" export default function Enhanced3DBookLoading() { const letters = ["L", "O", "A", "D", "I", "N", "G"] const [activePageIndex, setActivePageIndex] = useState(-1) // -1 = initial state, 0 = cover, 1-7 = letters const [isFlipping, setIsFlipping] = useState(false) const [initialFlipsComplete, setInitialFlipsComplete] = useState(false) const [initialFlipCount, setInitialFlipCount] = useState(0) const bookControls = useAnimation() const flipTimeoutRef = useRef(null) // Motion values for realistic 3D page physics const pageRotation = useMotionValue(0) const pageCurl = useMotionValue(0) const pageBend = useMotionValue(0) const pageZ = useMotionValue(0) const pageX = useMotionValue(0) // Derived values for 3D effects const shadowOpacity = useTransform(pageRotation, [-180, -90, 0], [0, 0.2, 0]) const pageScale = useTransform(pageRotation, [-180, -90, 0], [1, 0.97, 1]) const pageDepth = useTransform(pageRotation, [-180, -90, 0], [0, 8, 0]) // Subtle book animation useEffect(() => { bookControls.start({ rotateY: [0, 1, 0, -1, 0], rotateX: [0, 0.5, 0, -0.5, 0], y: [0, -1, 0], transition: { rotateY: { duration: 6, repeat: Number.POSITIVE_INFINITY, repeatType: "mirror", ease: "easeInOut", }, rotateX: { duration: 5, repeat: Number.POSITIVE_INFINITY, repeatType: "mirror", ease: "easeInOut", }, y: { duration: 3, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse", ease: "easeInOut", }, }, }) }, [bookControls]) // Initial rapid page flipping effect useEffect(() => { if (activePageIndex === -1) { const rapidFlip = async () => { setIsFlipping(true) // Fast flip animation with 3D effects await Promise.all([ animate(pageRotation, [0, -180], { duration: 0.15, ease: "easeIn", }), animate(pageZ, [0, 5, 0], { duration: 0.15, times: [0, 0.5, 1], ease: "easeInOut", }), animate(pageBend, [0, 0.3, 0], { duration: 0.15, times: [0, 0.5, 1], ease: "easeInOut", }), ]) pageRotation.set(0) pageZ.set(0) pageBend.set(0) setInitialFlipCount((prev) => prev + 1) // After 3 flips, move to the main sequence if (initialFlipCount >= 2) { setInitialFlipsComplete(true) setActivePageIndex(0) setIsFlipping(false) } else { setIsFlipping(false) } } if (!isFlipping && !initialFlipsComplete) { rapidFlip() } } }, [activePageIndex, initialFlipCount, initialFlipsComplete, isFlipping, pageRotation, pageZ, pageBend]) // Main page flipping sequence with enhanced 3D effects useEffect(() => { if (!initialFlipsComplete) return const flipPage = async () => { if (isFlipping) return setIsFlipping(true) // Reset page state pageRotation.set(0) pageCurl.set(0) pageBend.set(0) pageZ.set(0) pageX.set(0) // Different animation timing for cover vs regular pages const isCover = activePageIndex === 0 // Phase 1: Initial curl and lift (page starts to lift in 3D space) await Promise.all([ animate(pageCurl, [0, 0.7], { duration: 0.12, ease: "easeOut", }), animate(pageZ, [0, isCover ? 3 : 5], { duration: 0.12, ease: "easeOut", }), animate(pageX, [0, -2], { duration: 0.12, ease: "easeOut", }), ]) // Phase 2: Page rotation with 3D effects await Promise.all([ animate(pageRotation, [0, -180], { duration: 0.25, ease: [0.3, 0.8, 0.1, 1], }), animate(pageCurl, [0.7, 0], { duration: 0.25, ease: [0.3, 0.8, 0.1, 1], }), animate(pageBend, [0, 0.4, 0.1, 0], { duration: 0.25, times: [0, 0.4, 0.8, 1], ease: "easeInOut", }), animate(pageZ, [pageZ.get(), 8, 3, 0], { duration: 0.25, times: [0, 0.4, 0.8, 1], ease: "easeInOut", }), animate(pageX, [-2, 0], { duration: 0.25, ease: "easeInOut", }), ]) // Move to next page setActivePageIndex((prev) => { // If we've reached the end, reset to cover if (prev + 1 > letters.length) { return 0 } return prev + 1 }) setIsFlipping(false) } // Start flipping pages at regular intervals const interval = setInterval(() => { flipPage() }, 800) // Faster interval return () => { clearInterval(interval) if (flipTimeoutRef.current) { clearTimeout(flipTimeoutRef.current) } } }, [ isFlipping, letters.length, pageCurl, pageRotation, pageBend, pageZ, pageX, activePageIndex, initialFlipsComplete, ]) // Determine if we're showing the cover or a letter page const isCover = activePageIndex === 0 const isInitialFlipping = activePageIndex === -1 return (

{/* Book container with subtle 3D animation */} {/* 3D Book */}

{/* Book base with 3D effects */}

{/* Subtle embossed detail */}

{/* Book spine with 3D binding */}

{/* Book edge details with 3D positioning */}

{/* Book pages container with 3D space */}

{/* Book page edges (showing 3D thickness) */}

{/* Initial rapid flipping pages with 3D effects */} {isInitialFlipping && ( {/* Front of page with 3D effects */}

{letters[initialFlipCount % letters.length]}

{/* Back of page with 3D effects */}

{letters[(initialFlipCount + 1) % letters.length]}

)} {/* Cover with enhanced 3D effects */} {initialFlipsComplete && (activePageIndex === 0 || (isFlipping && activePageIndex === 1)) && ( {/* Front of cover with 3D curl and lighting effects */} {/* Cover design with 3D depth */}

{/* Cover edge shadow with 3D positioning */}

{/* 3D lighting effect during page turn */} {activePageIndex === 0 && isFlipping && ( )} {/* Back of cover with 3D effects */} {/* Back cover edge shadow with 3D positioning */}

)} {/* Letter pages with enhanced 3D effects */} {initialFlipsComplete && letters.map((letter, index) => { const pageIndex = index + 1 // Page index (1-7 for letters) const isActive = pageIndex === activePageIndex const hasFlipped = pageIndex < activePageIndex const isNext = pageIndex === activePageIndex + 1 return ( {/* Front of page with enhanced 3D effects */} {/* Letter on page with 3D positioning */} {letter} {/* Page edge shadow with 3D positioning */}

{/* 3D lighting effect during page turn */} {isActive && isFlipping && ( )} {/* 3D page deformation effect */} {isActive && isFlipping && ( )} {/* Back of page with 3D effects */} {/* Back page edge shadow with 3D positioning */}

) })}

{/* 3D Book shadow that responds to book movement */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import Enhanced3DBookLoading from "@/enhanced-3d-book-loading" export default function Home() { return }