Skip to content

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

Closed

Description

@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!

Activity

  1. locked and limited conversation to collaborators on May 6, 2026
  2. converted this issue into a discussion #212 on May 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions