1. Blocks
Loading preview...
  1. Blocks
  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 November 14, 2026
Made by Axyl

Installation

npx shadcn@latest add @soralabs/tilt-slide-transition

File Structure

tilt-slide-transition.tsx

Usage

import { TiltSlideTransition } from "@/components/sora-ui/blocks/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/blocks/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...