Page transitions
that flow.
The pluggable page transition library for React & Next.js. Hardware-accelerated CSS effects that drop straight into your codebase. No lock-in. No bloat.
Engineered for
pure fluidity
Every transition is hand-crafted to avoid layout thrashing. We freeze your router, orchestrate the exit, and inject the entry animation with sub-millisecond precision.
Zero Layout Shift.
Hardware accelerated transforms guarantee flawless 60fps execution. No DOM recalculation. No layout thrashing. Just pure mathematical motion.
70+ Premium Transitions.
We built a comprehensive library of spatial 3D effects, fluid portals, and retro simulations. Powered entirely by CSS and Framer Motion.
Copy. Paste. Ship.
Zero bloated npm dependencies. Audit the code, own the logic, and drop exactly what you need straight into your component folders.
Universal Router Support.
Engineered specifically for the modern web. Seamless integration across Next.js App Router, Pages Router, and standard React SPAs.
Frozen Context Magic.
We instantly freeze your exiting route context in time, orchestrating beautiful exit animations before Next.js unmounts your page.
70+ production transitions.
Infinite possibilities.
Explore 7 distinct families: Flow, Portal, Paper, Mask, Spatial, Dynamic, and Experimental. Every transition is fully customizable. Test any transition live inside the interactive 2-page playground.
Spatial
Spatial 3D isometric axis rotation at 60 FPS.
Portal
Expanding radial iris reveal with fluid momentum.
Paper
Multi-facet 3D accordion fold unfolding outwards.
Mask
Organic diffusion wash bleeding across viewport.
Experimental
Vintage electron-beam screen collapse.
Flow
Classic directional movement between pages.
import { GlideCNProvider, GlideCN, Page } from '@/components/glidecn';export default function RootLayout({ children }) { return ( <GlideCNProvider defaultTransition="cube"> <GlideCN> {children} </GlideCN> </GlideCNProvider> );}// In your page route:export function ContactPage() { return ( <Page transition="circular-portal"> <h1>Contact Us</h1> </Page> );}Minimal boilerplate.
Maximum flexibility.
Wrap your app in <GlideCNProvider>, specify a transition on <Page>, and let the engine coordinate frame exits and entries. No complex state management required.
Render both states.
Animate instantly.
GlideCN utilizes a dual-frame rendering architecture. Instead of immediately unmounting the current page, it takes a snapshot and freezes it, allowing the incoming page to render underneath.
State Freezing
The outgoing frame (Frame A) is locked in position, preventing layout shifts during unmount.
GPU Compositing
The incoming frame (Frame B) is composited via hardware-accelerated transforms, ensuring a butter-smooth 60fps handoff.
Never drop a frame.
Ever again.
By offloading transitions to the browser's compositor thread, GlideCN guarantees butter-smooth animations even when React is heavily blocking the main thread.
Standard React
Main Thread BlockedGlideCN
Compositor ThreadEngineered for Performance
GlideCN doesn't just look good. It's built on an architecture that guarantees silky smooth transitions on any device.
Compositor Speed
Locked frame rates with Zero Layout Shift out of the box.
Built-in Transitions
A massive curated library of spatial, portal, and organic effects.
Runtime Bloat
Copy-paste code ownership. You own the framer-motion variants.
Open by design.
GlideCN is freely available under the MIT license. Explore the source code, review the architecture, and contribute to the ecosystem.