Add interface motion and native page transitions

[woahitsraj]

Summary

• add shared motion easing and transition helpers with reduced-motion handling
• animate edge menus, takeovers, the source picker, update prompt, and Saves grid
• add command press feedback and smooth invalid carry-destination dimming
• skip entrance and exit motion when one menu or takeover replaces another
• add directional native page transitions with browser-history and reduced-motion handling

Verification

• pnpm lint
• pnpm typecheck
• pnpm test:unit -- --run (452 tests)
• pnpm test:engine-smoke (144 tests)
• pnpm test:e2e (126 of 127 passed; isolated retry passed)

Acceptance criteria

• Edge menus enter and exit from the correct viewport edge without changing their layout bounds.
• Replacing one menu with another does not replay an exit and entrance sequence.
• Takeovers and the source picker fade and settle without replaying motion for internal view changes.
• Saves cards use a short capped entrance stagger.
• Motion preserves focus, navigation, responsive geometry, and reduced-motion behavior.
• Destination changes and browser history use directional native page transitions, while reduced-motion navigation stays instant.

Evidence

App: PKSX on localhost:5179 and localhost:5180, Chromium at 390 by 844

Main menu edge transition

How verified: Opened and dismissed Main Menu from Saves at the portrait viewport floor. The sheet uses the bottom edge and the page bounds stay fixed.

main-menu-portrait.mp4

Nested menu replacement

How verified: Opened ARON's Slot actions, replaced it with Clear ARON?, canceled back to Slot actions, then closed the menu. The replacement changes in place without a second sheet entrance.

nested-menu-flow-final.mp4

Source picker transition

How verified: Opened Box Menu, opened the collection picker, closed it, and returned to the workspace. The picker fades and settles above the existing workspace.

source-picker-flow.mp4

Takeover transition and internal replacement

How verified: Opened ARON's editor, switched to its Legality Check, returned to the editor, and closed it. The takeover enters once and internal views replace each other without restarting the outer transition.

takeover-editor-flow.mp4

Saves grid entrance

How verified: Reloaded Saves with an imported Emerald save. Save cards and the import card enter in order with a capped stagger.

saves-grid-entrance.mp4

Native destination page transitions

How verified: Navigated Saves to Boxes to Saves through Main Menu, then used browser Back and Forward. The named View Transition animations ran in forward, backward, backward, forward order, destination focus was restored, and reduced-motion navigation bypassed the API.

page-transitions-evidence.mp4

Automated coverage

How verified: motion.browser.spec.ts checks easing endpoints and shared replacement decisions. main-menu.e2e.ts checks native transition direction for destination and history navigation plus the reduced-motion bypass. The responsive and interaction suites cover portrait, landscape, focus restoration, controller input, takeover geometry, nested menus, and Carry.

• pnpm lint
• pnpm typecheck
• pnpm test:unit -- --run, 452 passed
• pnpm test:engine-smoke, 144 passed
• pnpm test:e2e, 126 of 127 passed; the existing backdrop-dismissal case failed once under parallel load and passed on immediate isolated retry

[github-actions]

Cloudflare preview

Environment	Link
This pull request	Open preview
Staging	staging.pksx.app

Updated for commit dfdbb6e. View workflow run.