1. Catalog
Loading preview...
  1. Catalog
  3. Tilt Slide Transition

component

Tilt Slide Transition

Multi-page editorial portfolio transition with tilted scaling exit and diagonal clip-path entrance, powered by View Transition API, GSAP SplitText, and Lenis.

Released September 16, 2026
Made by Axyl

Installation

npx shadcn@latest add @soralabs/tilt-slide-transition
pnpm dlx shadcn@latest add @soralabs/tilt-slide-transition
yarn dlx shadcn@latest add @soralabs/tilt-slide-transition
bun x --bun shadcn@latest add @soralabs/tilt-slide-transition
npx @soralabs/cli@latest add tilt-slide-transition
pnpm dlx @soralabs/cli@latest add tilt-slide-transition
yarn dlx @soralabs/cli@latest add tilt-slide-transition
bun x --bun @soralabs/cli@latest add tilt-slide-transition

Install the following dependencies:

npm install gsap @gsap/react lenis
pnpm add gsap @gsap/react lenis
yarn add gsap @gsap/react lenis
bun add gsap @gsap/react lenis

Copy and paste the following code into your project:

components/sora-ui/catalog/tilt-slide-transition.tsx
Loading...

Update the import paths to match your project setup.

File Structure

tilt-slide-transition.tsx

Usage

import { TiltSlideTransition } from "@/components/sora-ui/catalog/tilt-slide-transition";

export default function PortfolioSection() {
  return (
    <div className="h-screen w-full">
      <TiltSlideTransition
        brandName="Sora"
        heroTitle="Sora"
      />
    </div>
  );
}

Props

PropTypeDefault
brandName?
string
"Sora"
defaultPage?
"home" | "projects" | "info"
"home"
page?
"home" | "projects" | "info"
-
onPageChange?
(page: ViewPage) => void
-
heroTitle?
string
"Sora"
projectImages?
string[]
-
portraitImage?
string
-
infoParagraph?
string
-
navItems?
TiltSlideTransitionNavItem[]
-
className?
string
-

TiltSlideTransitionNavItem

PropTypeDefault
id?
"home" | "projects" | "info"
-
label?
string
-

Subcomponents

For granular multi-page or custom layout implementations, individual page views and the navbar can be imported separately:

import {
  TiltSlideTransitionHome,
  TiltSlideTransitionProjects,
  TiltSlideTransitionInfo,
  TiltSlideTransitionNavbar,
} from "@/components/sora-ui/catalog/tilt-slide-transition";

Starter Template

A standalone, ready-to-use Next.js starter template with this tilt-slide page transition pre-configured is available for cloning:

  • Demo: https://tilt-slide-template.soralabs.studio
  • Repository: https://github.com/SoraLabsOSS/tilt-slide-template
git clone https://github.com/SoraLabsOSS/tilt-slide-template.git
cd tilt-slide-template
bun install
bun dev

Credits

Inspired by Codegrid & Paul Kalkbrenner. Reimplemented for Next.js, View Transition API, GSAP, and Lenis.

Scroll Chapters

A draggable, chaptered progress-bar nav — two-way cursor/scroll sync, ghost-cursor hover preview, snap-to-step seeking, and a per-chapter panel that can opt in or out of showing.

Built by Axyl. A motion-first component registry for React.

Loading preview...