Book card interaction smooth

components/PublicGrid.tsx

@@ -473,14 +473,14 @@ function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void })
     if (flipping !== null || spread >= totalSpreads - 1) return;
     playFlipSound(getCtx());
     setFlipping('forward');
-    window.setTimeout(() => { setSpread(s => s + 1); setFlipping(null); }, 650);
+    window.setTimeout(() => { setSpread(s => s + 1); setFlipping(null); }, 750);
   }, [flipping, spread, totalSpreads]);
 
   const goPrev = useCallback(() => {
     if (flipping !== null || spread <= 0) return;
     playFlipSound(getCtx());
     setFlipping('backward');
-    window.setTimeout(() => { setSpread(s => s - 1); setFlipping(null); }, 650);
+    window.setTimeout(() => { setSpread(s => s - 1); setFlipping(null); }, 750);
   }, [flipping, spread]);
 
   useEffect(() => {
@@ -526,6 +526,8 @@ function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void })
       <style dangerouslySetInnerHTML={{ __html: `
         @keyframes flipBookForward { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
         @keyframes flipBookBackward { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
+        @keyframes flipBookShadowIn  { 0% { opacity: 0; } 100% { opacity: 1; } }
+        @keyframes flipBookShadowOut { 0% { opacity: 1; } 100% { opacity: 0; } }
       `}} />
 
       <button
@@ -583,15 +585,24 @@ function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void })
             style={{
               transformOrigin: 'left center',
               transformStyle: 'preserve-3d',
-              animation: 'flipBookForward 650ms ease-in-out forwards',
+              animation: 'flipBookForward 750ms cubic-bezier(0.4, 0.0, 0.35, 1) forwards',
+              filter: 'drop-shadow(0 10px 18px rgba(0,0,0,0.55))',
               zIndex: 20,
             }}
           >
             <div className={pageBoxClass} style={{ backfaceVisibility: 'hidden' }}>
               {getPage(rightIdx) && <img src={getPage(rightIdx)} className={pageImgClass} alt="" draggable={false} />}
+              <div className="absolute inset-0 pointer-events-none" style={{
+                background: 'linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 65%)',
+                animation: 'flipBookShadowIn 750ms ease-out forwards',
+              }} />
             </div>
             <div className={pageBoxClass} style={{ backfaceVisibility: 'hidden', transform: 'rotateY(180deg)' }}>
               {getPage(nextLeftIdx) && <img src={getPage(nextLeftIdx)} className={pageImgClass} alt="" draggable={false} />}
+              <div className="absolute inset-0 pointer-events-none" style={{
+                background: 'linear-gradient(270deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 65%)',
+                animation: 'flipBookShadowOut 750ms ease-in forwards',
+              }} />
             </div>
           </div>
         )}
@@ -603,15 +614,24 @@ function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void })
             style={{
               transformOrigin: 'right center',
               transformStyle: 'preserve-3d',
-              animation: 'flipBookBackward 650ms ease-in-out forwards',
+              animation: 'flipBookBackward 750ms cubic-bezier(0.4, 0.0, 0.35, 1) forwards',
+              filter: 'drop-shadow(0 10px 18px rgba(0,0,0,0.55))',
               zIndex: 20,
             }}
           >
             <div className={pageBoxClass} style={{ backfaceVisibility: 'hidden' }}>
               {getPage(leftIdx) && <img src={getPage(leftIdx)} className={pageImgClass} alt="" draggable={false} />}
+              <div className="absolute inset-0 pointer-events-none" style={{
+                background: 'linear-gradient(270deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 65%)',
+                animation: 'flipBookShadowIn 750ms ease-out forwards',
+              }} />
             </div>
             <div className={pageBoxClass} style={{ backfaceVisibility: 'hidden', transform: 'rotateY(180deg)' }}>
               {getPage(prevRightIdx) && <img src={getPage(prevRightIdx)} className={pageImgClass} alt="" draggable={false} />}
+              <div className="absolute inset-0 pointer-events-none" style={{
+                background: 'linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 65%)',
+                animation: 'flipBookShadowOut 750ms ease-in forwards',
+              }} />
             </div>
           </div>
         )}