How to implement realistic page curl effect (bending) instead of rotateY flip?

[Vivekbhatt02]

Hi,

I'm building an ebook reader using Readium and implementing custom page transitions on top of the rendered content.

Current approach

• Capture current page view
• Render it into a transition layer (snapshot)
• Animate using CSS 3D transforms
• Use rotateY with front/back faces

Problem

This results in a rigid "card flip" effect. The page looks flat and does not bend like real paper.

Goal

I’m trying to achieve a more realistic page turn with:

• visible bending/curvature
• dynamic shadows near the fold
• natural-looking back face
• support for two-page spreads

Question

Is this kind of page curl effect achievable within Readium's rendering pipeline?

Or is the recommended approach to:

• implement a custom animation layer (canvas/WebGL)?
• deform a bitmap snapshot of the page?
• or split the page into multiple segments for transformation?

Any guidance, examples, or references would be very helpful.

Thanks!

[JayPanoz]

Converted this to a discussion as it isn’t really actionable for maintainers. It is more of a general discussion about achieving this effect than implementing it directly into TS-Toolkit – which is unlikely –, or requesting fixes and features to implement it more easily.