LearnNewsExamplesServices
Frontmatter
id8856
titleImplement Spatial Theme Transition (The Wave)
stateClosed
labels
enhancementdesignai
assigneestobiu
createdAtJan 21, 2026, 9:02 PM
updatedAtJan 21, 2026, 9:33 PM
githubUrlhttps://github.com/neomjs/neo/issues/8856
authortobiu
commentsCount0
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 21, 2026, 9:33 PM

Implement Spatial Theme Transition (The Wave)

Closed v11.23.0 enhancementdesignai
tobiu
tobiu commented on Jan 21, 2026, 9:02 PM
  • Goal: Implement a "Spatial Theme Switch" using the View Transitions API.
  • Concept: "The Wave". Instead of an instant flash or a generic fade, the new theme should ripple out from the user's interaction point (the Theme Switch button).
  • Tech Stack:
    • document.startViewTransition()
    • CSS clip-path animation on the ::view-transition-new(root) pseudo-element.
  • Why:
    • Reinforces the "Engine" feel.
    • Eliminates the "Flashbang" effect of instant switching.
    • Extremely performant (Compositor-only animation).
  • Fallback: Instant switch for browsers lacking support.

Implementation Steps

  1. Controller Update: Modify apps/portal/view/ViewportController.mjs.
    • Wrap the setTheme call in document.startViewTransition.
    • Capture click coordinates (clientX, clientY) from the button event.
    • Inject the animation logic into transition.ready.
  2. CSS: Add basic View Transition rules to resources/scss/src/apps/portal/Viewport.scss (disable default cross-fade to allow custom clip-path).
tobiu added the enhancement label on Jan 21, 2026, 9:02 PM
tobiu added the design label on Jan 21, 2026, 9:02 PM
tobiu added the ai label on Jan 21, 2026, 9:02 PM
tobiu referenced in commit f525d56 - "feat: Implement Spatial Theme Transition (The Wave) (#8856)" on Jan 21, 2026, 9:33 PM
tobiu closed this issue on Jan 21, 2026, 9:33 PM
tobiu assigned to @tobiu on Jan 21, 2026, 9:33 PM