SSGOI is a robust, router-agnostic library designed to provide fluid and native-like page transitions for modern web applications. Developed to support a wide range of frontend frameworks including React, Svelte, Vue, Solid, and Angular, it bridges the gap in transition capabilities across different web routers. Unlike implementations constrained by browser-specific View Transitions, SSGOI leverages the Web Animations API to ensure compatibility across all modern browsers, including Safari, Firefox, Chrome, and Edge. By prioritizing physics-based animations, it delivers a smooth experience that maintains state during navigation events, addressing the limitations often found in declarative CSS-only approaches. The library is built with a focus on ease of use and developer experience, providing specialized documentation in plain-text formats designed for AI agents to assist with configuration and implementation.

The core functionality of SSGOI centers on a cloning mechanism that enables seamless UI transitions during route changes. When a user navigates between pages, the library captures the state of the outgoing component and temporarily re-mounts it using absolute positioning. This process allows the exiting page to animate gracefully while the incoming page mounts in its designated location. By orchestrating these simultaneous animations, SSGOI achieves complex visual effects—such as hero element transitions, drill-down navigation, and bottom sheets—that feel integrated and responsive rather than abrupt.

Some of the key features are:

• Router-Agnostic: Works seamlessly with popular routers such as Next.js, React Router, TanStack Router, SvelteKit, and Nuxt.
• Web Animations API: Uses standard web technologies to provide interrupt-safe, physics-based motion.
• Spring Physics: Provides natural, interactive motion curves for better aesthetic outcomes.
• Multi-Element Choreography: Supports sophisticated transition patterns like shared hero element animations and complex card zooms.
• State Preservation: Ensures consistent application state during navigation and transition sequences.
• Broad Browser Support: Functions effectively across all modern browsers including Safari 13.1+, Chrome 84+, and Firefox 75+.
• AI-First Documentation: Provides self-contained .txt files that are optimized for AI agents to help developers set up and debug transitions quickly.

Operationally, the library is integrated by wrapping the main application component in an SSGOI configuration provider. The container requires specific CSS classes—relative, z-0, and overflow-x-clip—to ensure that the absolute-positioned cloned elements render correctly within the DOM stacking context without causing layout shifts or overflow issues. Developers select a desired transition pattern, and the library manages the lifecycle of the transition, cleaning up the cloned elements automatically once the animation concludes.

Some common use cases include:

• Mobile-Style Navigation: Implementing iOS-style hierarchical drill navigation where sub-pages slide in from the right.
• Hero element transitions: Expanding product thumbnails smoothly into full-page detail views using shared element animation keys.
• Bottom Sheets: Transitioning modal content into view with a sliding motion from the bottom of the screen.
• Cross-fade transitions: Using a safe, professional fade effect for general navigation between dashboard tabs.
• 3D Effects: Applying advanced transformations such as axis flips or window-blind wipes for unique UI interactions.