3D Book

1"use client";
2 
3import { useRef, useState } from "react";
4 
5export default function InteractiveBook() {
6  const bookRef = useRef<HTMLDivElement>(null);
7  const [progress, setProgress] = useState(0);
8  const [isDragging, setIsDragging] = useState(false);
9 
10  // Linear interpolation function
11  const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
12 
13  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
14    if (!bookRef.current) return;
15 
16    const rect = bookRef.current.getBoundingClientRect();
17    const cursorX = e.clientX;
18    const bookCenterX = rect.left + rect.width / 2;
19 
20    // Calculate how far cursor is from center (-1 to 1)
21    const distanceFromCenter = (cursorX - bookCenterX) / (rect.width / 2);
22 
23    // Map cursor position to progress
24    // Left side (negative) = open (1), Right side (positive) = closed (0)
25    const targetProgress = lerp(1, 0, (distanceFromCenter + 1) / 2);
26 
27    // Clamp between 0 and 1
28    setProgress(Math.max(0, Math.min(1, targetProgress)));
29  };
30 
31  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
32    setIsDragging(true);
33    handlePointerMove(e);
34  };
35 
36  const handlePointerUp = () => {
37    setIsDragging(false);
38    setProgress(0);
39  };
40 
41  const handlePointerLeave = () => {
42    // Close book when cursor leaves (only if not dragging on mobile)
43    if (!isDragging) {
44      setProgress(0);
45    }
46  };
47 
48  // Generate pages - all at same size and position
49  const totalPages = 15;
50  const pages = [];
51 
52  // All pages same size, different rotation angles
53  for (let i = 1; i <= totalPages; i++) {
54    const rotationAngle = (i + 1) * 10; // -20, -30, -40... -160
55 
56    pages.push(
57      <div
58        key={i}
59        className="absolute h-48 md:h-72 w-32 md:w-52 rounded-lg md:rounded-2xl border border-border bg-background light"
60        style={
61          {
62            transformStyle: "preserve-3d",
63            transformOrigin: "left",
64            transform: `rotateY(calc(var(--book-progress) * ${-rotationAngle}deg))`,
65            zIndex: 50 + i,
66            backfaceVisibility: "visible",
67            "--book-progress": progress,
68          } as React.CSSProperties
69        }
70      />
71    );
72  }
73 
74  return (
75    <div className="flex w-full h-full items-center justify-center  ">
76      <div
77        ref={bookRef}
78        className="w-32 md:w-52 h-48 md:h-72 will-change-transform translate-x-16 md:translate-x-24 touch-none"
79        onPointerMove={handlePointerMove}
80// … truncated