QuickstartUnder 2 minutes

Install via CLI.

GlideCN does not distribute as an NPM runtime dependency. Instead, we generate the exact source code directly into your repository so you own the animation logic completely.

pnpm dlx glidecn-cli@latest init

Zero Black-Box Dependencies

When you initialize, GlideCN adds exactly the code you need directly into your project's component directory. You own it, you can modify it, and it won't break on upstream updates.

your-project/

app/

components/

glidecn/

index.ts

provider.tsx

page.tsx

Framework Integration

Setup requires just two components: a provider and a page wrapper.

Wrap Your Root Layout

Add <GlideCNProvider> to coordinate route changes and manage the dual-frame crossfade.

// 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/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>  );}

Wrap Your Pages

Wrap each route segment in <Page> and optionally override the default transition animation per-route.

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

export default function Dashboard() {
  return (
    <Page transition="circular-portal" duration={0.7}>
      <h1>Dashboard</h1>
    </Page>
  );
}

import { Page } from '@/components/glidecn';export default function Dashboard() {  return (    <Page transition="circular-portal" duration={0.7}>      <h1>Dashboard</h1>    </Page>  );}

Curated Transition Registry

Pull down specific transitions to your project using the CLI without blowing up your bundle size.

3D Cubenpx glidecn-cli add cube

Iris Portalnpx glidecn-cli add circular-portal

Origami Foldnpx glidecn-cli add origami-unfold

Ink Diffusionnpx glidecn-cli add ink-spread

Dynamic Hooks

Build user preferences, presentation modals, or context-aware animations by updating the transition programmatically at runtime using the useGlide() hook.

const { setTransition } = useGlide();

return (
  <button 
    onClick={() => setTransition('cube')}
  >
    Switch to Cube
  </button>
);

const { setTransition } = useGlide();return (  <button     onClick={() => setTransition('cube')}  >    Switch to Cube  </button>);