feat: implement view transition functionality

[jairusjoer]

Description

This pull request implements View Transitions API support for smoother page navigation in Quartz's SPA functionality.

Changes

• Added startViewTransition utility function in quartz/components/scripts/util.ts that wraps code execution with the View Transitions API when available
• Updated SPA navigation in quartz/components/scripts/spa.inline.ts to use view transitions during page morphing
• Added view transition styles in quartz/styles/base.scss to disable pointer events during transitions

Details

The implementation wraps the existing micromorph document body update and related DOM operations within a startViewTransition call. This creates smooth, animated transitions between pages when the View Transitions API is supported.

For browsers without View Transitions API support, the code gracefully falls back to the original behavior, ensuring backward compatibility.

Rationale

• Uses browser-native features, no additional dependencies
• Provides progressive enhancement for baseline browsers
• Maintains previous behavior with older browsers
• Preserves the original functionality completely

System

• Quartz: v4.5.2
• Node: v22.18.0
• npm: v10.9.3
• OS: macOS
• Browser: Dia (Chromium)

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
quartz	✅ Ready (View Log)	Visit Preview	a295d46

[aarnphm]

I'm fine with this, maybe cc @jackyzha0 and @saberzero1 on this as well. not really a big fan of animation, but this will break the progress bar logic?

[jairusjoer]

@aarnphm I didn't encounter any issues with the progress bar when I tested it using network throttling. If there's something I've missed, please let me know 💪

[saberzero1]

I'm fine with this, maybe cc @jackyzha0 and @saberzero1 on this as well. not really a big fan of animation, but this will break the progress bar logic?

I'm not a fan of the graph flashing white on page transition.

Perhaps the transition should be configurable? Both whether it is enabled/disabled and the exact transition.

[jairusjoer]

I've addressed the mentioned issues and concerns:

• White flashing of graph has been eliminated
• View transitions are now configurable via the enableViewTransitions key
• Tagged key components with view transition names to allow customization
• Added Information and further resources on customization of transitions

Let me know what you think! ✌️

[jackyzha0]

we should think about backwards compat, startViewTransition unfortunately only stabilized in firefox on ⁨2025-10-14⁩

small weird style thing (looks like a stacking order problem?)

generally feels fine but i would default it to off before merging

[jairusjoer]

@jackyzha0 The provided implementation is backwards-compatible and has been set up according to an MDN example. I tested the implementation on Firefox 130.0 (released on 3 September 2024) with both view transitions enabled and disabled, and found no issues with fallback behavior.

The stack ordering issue has been resolved and the feature is now disabled by default. As the issue occurred even with the feature disabled, this should not affect the review.

Additionally, I encountered a pre-existing issue while inspecting the global graph view, whereby the graph overflowed on smaller viewports. I have also addressed this: