v1.0.0Core Architecture

Cinematic page transitions for Next.js & React.

GlideCN is a synchronized dual-frame transition engine. Zero layout shifts, 60fps GPU compositor acceleration, and copy-paste components.

npx glidecn-cli init

Browse 70+ Transitions

Engine Benchmarks

Designed for zero-friction integration and maximum compositor performance.

60 FPS

GPU Compositor Lock

Transitions animate strictly on GPU compositor layers (transform, opacity, clip-path) to ensure a 16.6ms frame budget.

0 CLS

Frozen Router Context

Outgoing page context is frozen at navigation time. No premature re-renders or unmounting flashes.

70+

Production Transitions

From 3D cubes and origami folds to electron-beam CRT collapses and fluid ink diffusion.

<2.1kB

Core Engine Weight

Zero bloated runtime. Direct code ownership into your project directory via CLI.

Dual-Frame Pipeline

Watch how GlideCN orchestrates outgoing freeze snapshots and incoming mounts simultaneously.

Triggered

Frozen

Transition Active

Unmounted

Route: /feed

Active Route

READY

Route: /profile

Awaiting Navigation

Zero-Config Quickstart

Pick your stack. Add the provider. Wrap your pages.

// app/layout.tsx
import { GlideCNProvider, GlideCN } from '@/components/glidecn';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <GlideCNProvider defaultTransition="cube">
          <GlideCN>
            {children}
          </GlideCN>
        </GlideCNProvider>
      </body>
    </html>
  );
}

// app/page.tsx
import { Page } from '@/components/glidecn';

export default function Home() {
  return (
    <Page transition="circular-portal" duration={0.6}>
      <main>...</main>
    </Page>
  );
}

// app/layout.tsximport { GlideCNProvider, GlideCN } from '@/components/glidecn';export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <GlideCNProvider defaultTransition="cube">          <GlideCN>            {children}          </GlideCN>        </GlideCNProvider>      </body>    </html>  );}// app/page.tsximport { Page } from '@/components/glidecn';export default function Home() {  return (    <Page transition="circular-portal" duration={0.6}>      <main>...</main>    </Page>  );}

Transition Families

Curated transition archetypes crafted for different aesthetic atmospheres.

Explore 70+ Transitions

GPU Transform6 Transitions

Spatial & 3D

Hardware 3D isometric cubes, page curls, 3D flips, and origami mesh folds.

Clip Path4 Transitions

Portals & Iris

Dynamic clip-path radial portals, iris shutters, and liquid morphing masks.

Filter & SVG5 Transitions

Retro & Analog

CRT electron-beam collapses, RGB channel glitch split, and neon glow dissolves.

Framer Physics8 Transitions

Kinetic & Dynamic

Diagonal blade slashes, ripple springs, bounce overshoots, and fluid ink flows.