Skip to content

Mythic Masters: tome page turn bends like a cylinder and casts a shadow; the newest ink is wet (#3671 gap 3, what is left) #3717

Closed

Description

@QuinnsCode

What is left of gap 3 of the tome UI climb (#3671): "the ink soak and the page turn don't read as real ink and paper." PR #3691 took gap 3 from 3 to 4 on the ink and from 3 to 4 on the turn, by a fresh judge each time. The climb was at 7/10 after it (halved scale). These are the judges' Next lines, so the next climb round can take them as one round each.

Run each one as a climb round: shoot before, change one thing, shoot now, have a fresh judge compare the two, and post a Score: comment on the open climb issue (#3671, or the "rounds N+" issue that replaces it). The shot recipe is in apps/mythic-masters/docs/shots-2026-11-04-tome/. To freeze a turn mid-swing, pause document.getAnimations() and set currentTime. Then click .r-<tab> to turn a leaf; journey.tab() doesn't turn one.

1. The turn: the free edge bends like part of a cylinder, and its shadow falls on the page

  • Today each hinge shears the free part of the leaf up a little (CURL in turnLeaf, src/page.ts). The head and foot bow, but the free edge stays straight and only the head lifts.
  • Bend the outer strips (the ones nearest the free edge) like part of a cylinder, so the free edge itself arcs and the foot lifts too.
  • Give the page under the leaf a soft shadow that follows the free edge and darkens as the leaf lands. castShadow in src/page.ts is the place. The judge saw no shadow at all in the frozen frames.

2. The ink: the newest letters are wet

  • Today the pen is one even sweep per block (write and penMask in src/page.ts, @keyframes pen and wet in src/tome.css).
  • Make the letters just behind the pen's front darker and glossier, then let them dry over about 400 ms.
  • Add a small nib blot at the front of the pen.
  • Make the pace uneven word by word, not one linear wipe.

Line-up rows (they hold a button) are a separate follow-up: #3692.

Part of #3671.

Activity

  1. QuinnsCode commented on Nov 5, 2026

    @QuinnsCode
    OwnerAuthor

    also make sure the page doesn't "bleed through" it can like paaaartly do so like 15% or less opacity type slight marker bleedtrough BUT usually not for sake of readability over effect haha
    but when I close the tome I see reverse of the last page!

    also not enough of the left page side is used!
    use more of the UI UX space but do so clean and clearly!

  2. self-assigned this
    on Nov 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions