Page Transition Orchestrator
When to use: Adding cinematic page transitions to Next.js or React apps — fade/slide route changes, shared element morphs, and a top loading bar during navigation.
npx skills add page-transition-orchestratorgit clone https://github.com/skillhub-community/page-transition-orchestrator.gitDescription
A page-transition framework for App Router projects. Core pieces: (1) RouteTransitionProvider that wraps the app and coordinates enter/exit sequences on navigation — fade+slide for normal routes, shared-element morphs for routes that both render a common element (e.g., a product card growing into a detail hero); (2) a top progress bar driven by navigation start/complete events (works with Next.js useRouter events or a custom router listener); (3) viewport-batch reveals so repeated elements fade in staggeredly after each route change.
Includes careful handling of the App Router streaming model: transitions wait for the new page's data to resolve (via Suspense boundaries) before animating in, avoiding flash-of-new-content. Ships with a config API (duration, easing, direction per-route via route metadata) and a demo template showing list→detail morph, nested layouts, and a 404 page with a fun transition. Respects prefers-reduced-motion by disabling all route transitions.
AI Hub
Need a model endpoint?
AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.
Open AI Hub