Route Segmentv1.0.0 • Strict TypeScript

<Page>

The route-level component that connects pages to the animation engine, applies Framer Motion variants, and injects GPU-accelerated will-change hints.

TypeScript Types CLI Commands 69+ Transitions Interactive Studio

ES Module Import

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

Usage & Properties

Wrap the root content of every route with <Page>. It enables per-route transition overrides, directional axes, custom easing curves, and timing controls.

app/about/page.tsx

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

export default function AboutPage() {
  return (
    <Page transition="liquid-morph" duration={0.8} direction="left">
      <main className="p-8">
        <h1 className="text-4xl font-bold">About Us</h1>
        <p>This route uses the liquid-morph transition with custom duration.</p>
      </main>
    </Page>
  );
}

import { Page } from '@/components/glidecn';export default function AboutPage() {  return (    <Page transition="liquid-morph" duration={0.8} direction="left">      <main className="p-8">        <h1 className="text-4xl font-bold">About Us</h1>        <p>This route uses the liquid-morph transition with custom duration.</p>      </main>    </Page>  );}

<Page> Properties

childrenRequired

React.ReactNode

The content of your page wrapped inside the motion container.

transition

string

Overrides the global transition for this specific route. Must match a registered transition.

Default:Inherited

duration

number

Animation duration in seconds for this route entry/exit.

Default:Inherited (0.4s)

delay

number

Delay in seconds before the enter animation begins.

Default:0

ease

EasingPreset | [number, number, number, number]

Easing preset name ("easeInOut", "spring", etc.) or custom cubic-bezier tuple.

Default:Inherited

direction

"left" | "right" | "up" | "down"

Flow axis for directional transitions (e.g. slide, flip, cube).

Default:"left"

custom

Record<string, unknown>

Custom parameters passed into transition variants (e.g. sliceCount, blurRadius).

Default:{}

className

string

CSS classes applied directly to the internal motion.div container.

Default:undefined

style

CSSProperties

Inline styles applied directly to the internal motion.div container.

Default:undefined

Property Guides

Detailed code examples demonstrating each property of <Page>.

Compositor Optimization

GlideCN automatically computes optimal CSS will-change hints for every transition, promoting the page container to a dedicated GPU compositor layer to prevent layout shifts.

Zero Layout Shifts • 60 FPS Compositing

By automatically analyzing the active transition definition, <Page> assigns will-change: transform, opacity or will-change: clip-path, opacity before animations fire. This ensures smooth hardware acceleration across all desktop and mobile browsers.

← <GlideCN> Adapter useGlide() Hook →