Repository navigation
feat(theme): polish P3R motion and transitions - #13
Merged
Merged
Conversation
Route changes now wait until the fluid wipe fully covers the page, so loading boundaries no longer flash beside the expanding edge. The menu floods from its opener and drains back, page stages enter in layers, scenes follow fine pointers in depth, and dialogs open with a mail-style split slab.
Capture the baseline problems, reference timings, implementation contract and verification results so later rounds keep the cover-then-navigate behavior.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideThis PR polishes P3R motion by introducing a shared seeded fluid transition system, postponing route handoffs until coverage, rebuilding the menu around reversible opener-originated fluid clips, synchronizing layered entrances, adding modal mail-slab transitions and guarded scene parallax, and documenting the implementation and validation results. Sequence diagram for the P3R covered route transitionsequenceDiagram
participant User
participant P3RLink
participant P3REffects
participant Router
participant Page
User->>P3RLink: click pathname-changing link
P3RLink->>Router: prefetch(destination)
P3RLink->>P3REffects: requestP3RWipe(x, y, navigate, fallback)
P3REffects->>P3REffects: fluid cover 220ms
P3REffects->>P3REffects: setPhase(covered)
P3REffects->>P3RLink: navigate callback
P3RLink->>Router: push(destination)
Router-->>Page: route content streams
P3REffects->>P3REffects: wait HOLD_MS / LOADING_GRACE_MS
P3REffects->>P3REffects: setPhase(revealing)
P3REffects->>Page: reveal fluid opening 340ms
Sequence diagram for reversible P3R menu motionsequenceDiagram
participant User
participant Menu
participant Dialog
participant P3RScene
User->>Menu: open menu
Menu->>Menu: menuOrigin(opener)
Menu->>Dialog: showModal()
Menu->>Menu: floodMenu(opening, 420ms)
Menu->>P3RScene: display menu scene
alt close button, Esc, or same-page link
User->>Menu: dismiss()
Menu->>Dialog: set inert
Menu->>Menu: floodMenu(closing, reach)
Menu->>Dialog: close()
Menu->>Menu: restore opener focus
else cross-page link
User->>Menu: select destination
Menu->>Menu: requestP3RWipe()
P3RScene->>Menu: isP3RWipeCovering()
Menu->>Dialog: close under full wipe cover
end
State diagram for the P3R page wipe lifecyclestateDiagram-v2
[*] --> idle
idle --> expanding: requestP3RWipe
expanding --> covered: COVER_MS elapsed
covered --> covered: wait for route and content
covered --> revealing: HOLD_MS and content ready
revealing --> idle: REVEAL_MS complete
expanding --> idle: Escape or reduced motion
covered --> idle: Escape or page hidden
revealing --> expanding: new pathname click
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
发布介绍
这次更新对 P3R 主题的动效做了完整打磨：跨页转场会先由点击位置扩散出边缘起伏的钴蓝流体，完全覆盖后再交接路由；全屏菜单从导航按钮流体展开，并沿原轮廓收回。页面入场、场景视差和弹窗进入也统一为无回弹、分层且更接近参考画面的节奏。
主要改动
onNavigate延后到全屏覆盖完成，避免加载骨架在扩张边缘旁闪现验证
verify-polish.cjs: 16/16verify:blog: 19/19git diff --check通过next build --webpack通过验证边界
Summary by Sourcery
Polish P3R navigation, menu, scene, and panel motion with coordinated fluid transitions, reliable route handoff, and accessible motion fallbacks.
New Features:
Bug Fixes:
Enhancements:
Documentation:
Tests:
Chores: