"use client"; import { useRef, useState } from "react"; export default function Component3dBook() { const bookRef = useRef(null); const [progress, setProgress] = useState(0); const [isDragging, setIsDragging] = useState(false); // Linear interpolation function const lerp = (a: number, b: number, t: number) => a + (b - a) * t; const handlePointerMove = (e: React.PointerEvent) => { if (!bookRef.current) return; const rect = bookRef.current.getBoundingClientRect(); const cursorX = e.clientX; const bookCenterX = rect.left + rect.width / 2; // Calculate how far cursor is from center (-1 to 1) const distanceFromCenter = (cursorX - bookCenterX) / (rect.width / 2); // RTL book: right side = open (1), left side = closed (0) const targetProgress = lerp(0, 1, (distanceFromCenter + 1) / 2); // Clamp between 0 and 1 setProgress(Math.max(0, Math.min(1, targetProgress))); }; const handlePointerDown = (e: React.PointerEvent) => { setIsDragging(true); handlePointerMove(e); }; const handlePointerUp = () => { setIsDragging(false); setProgress(0); }; const handlePointerLeave = () => { // Close book when cursor leaves (only if not dragging on mobile) if (!isDragging) { setProgress(0); } }; // Generate pages - all at same size and position const totalPages = 15; const pages = []; // All pages same size, different rotation angles (hinge on the right) for (let i = 1; i <= totalPages; i++) { const rotationAngle = (i + 1) * 10; // 20, 30, 40... 160 pages.push(

); } return (

{/* Back Cover (underneath all pages) */}

{/* Pages - all same size, different rotations */} {pages} {/* Front Cover — spine on the right, opens RTL */}

{/* Cover shadow overlay */}

{/* Red top section */}

{/* Spine edge (physical right) */}

{/* Title */}

دفترچه

{/* Back label */}

صفحهٔ پشت

); }