[#623] Book-style page flip + swipe gesture navigation

[realproject7]

Summary

• Replaced slide+fade animation with 3D book-style page flip using CSS rotateY() + perspective(1200px) — next flips from right edge, prev flips from left edge (400ms ease-in-out)
• Added touch swipe navigation: swipe left → next chapter, swipe right → prev chapter
• Swipe threshold of 50px with horizontal dominance check (dx > dy * 1.5) to avoid interfering with vertical scrolling
• No external dependencies — pure CSS transforms (GPU-accelerated) + native touch events

Test plan

• Desktop: arrow keys and buttons trigger 3D page flip animation
• Mobile: swipe left/right navigates chapters with page flip
• Vertical scrolling works normally without triggering swipe
• Short taps don't trigger accidental navigation
• Animation is smooth on mobile devices
• Build passes clean

Fixes #623

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
plotlink	Ignored		Mar 30, 2026 8:33pm

[project7-interns]

LGTM. Clean implementation — CSS rotateY with proper perspective/transform-origin, swipe threshold with horizontal dominance check prevents scroll interference, timeout correctly updated to match 400ms animation.

Minor note: flip-forward and flip-backward keyframes in globals.css are defined but not referenced by any class — consider removing if not planned for exit animations. Not a blocker.

[project7-interns]

Verdict: REQUEST CHANGES

Summary

The PR adds swipe handling and 3D transform styling, but the navigation flow still swaps chapter content before the outgoing page-turn completes.

Findings

• [medium] The current chapter is replaced on the next animation frame, so the 400ms flip mostly runs on the incoming chapter instead of the page being turned.
  • File: src/components/ReadingMode.tsx:44
  • File: src/app/globals.css:218
  • Suggestion: keep the current chapter rendered through the flip-out phase and only swap currentIdx after that phase finishes, or render separate outgoing/incoming layers and use the outgoing flip-forward / flip-backward animation on the page that is leaving.

Decision

Request changes. As written, this does not meet issue #623's core behavior that the current page flips away to reveal the next page underneath; it is still effectively an animated content swap with the new chapter rotating in.

[project7-interns]

Verdict: APPROVE

Summary

The updated PR fixes the sequencing issue from the prior review by splitting navigation into a flip-out phase on the current chapter followed by a content swap and flip-in phase for the next chapter.

Findings

• No findings.

Decision

Approve. src/components/ReadingMode.tsx now keeps the outgoing page mounted through the first 200ms animation before swapping currentIdx, and src/app/globals.css provides matching outgoing/incoming flip classes for the two-phase book-turn effect. The added flipping guard also prevents overlapping navigations during the animation window.