Router Adapterv1.0.0 • Strict TypeScript

<GlideCN>

The framework-specific router adapter that listens to navigation events, freezes exiting DOM contexts using FrozenRouter to eliminate white flashes, and manages scroll restoration.

TypeScript Types CLI Commands 69+ Transitions Interactive Studio

ES Module Import

import { GlideCN } from '@/components/glidecn';

Adapter & Architecture

<GlideCN> coordinates the transition lifecycle between leaving and entering pages.

When a route change occurs, it locks the exiting view using the FrozenRouter pattern, executes exit variants, remembers scroll position in sessionStorage, and smoothly mounts the incoming view without layout jumps.

app/layout.tsx

import { GlideCNProvider, GlideCN } from '@/components/glidecn';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <GlideCNProvider defaultTransition="slide">
          {/* Next.js App Router Adapter */}
          <GlideCN mode="wait" restoreScroll={true}>
            {children}
          </GlideCN>
        </GlideCNProvider>
      </body>
    </html>
  );
}

import { GlideCNProvider, GlideCN } from '@/components/glidecn';export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <GlideCNProvider defaultTransition="slide">          {/* Next.js App Router Adapter */}          <GlideCN mode="wait" restoreScroll={true}>            {children}          </GlideCN>        </GlideCNProvider>      </body>    </html>  );}

GlideCN Properties

childrenRequired

React.ReactNode

The active router or view elements. Must be wrapped inside GlideCN to orchestrate Framer Motion AnimatePresence.

mode

"wait" | "sync" | "popLayout"

AnimatePresence sequencing mode. "wait" ensures the exiting view finishes its exit animation before the new view mounts; "sync" animates both simultaneously; "popLayout" pops exiting nodes from document flow.

Default:"wait"

restoreScroll

boolean

Automatically caches window scroll coordinates in sessionStorage per route and restores them on navigation and back/forward history.

Default:true

routeKey

string

Explicit key representing current route. Auto-detected from pathname or router.asPath if omitted. Useful for tab sub-routes.

Default:auto-detected (pathname)

className

string

CSS classes applied to the intermediate motion container rendered inside AnimatePresence.

Default:"w-full flex-1 flex flex-col"

Property Guides

Fine-tune transition modes, configure custom route keys for subroutes, and manage scroll restoration behavior.

← <GlideCNProvider><Page> Segment →