component
Multi-page editorial portfolio transition with tilted scaling exit and diagonal clip-path entrance, powered by View Transition API, GSAP SplitText, and Lenis.
Loading code…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>
);
}| Prop | Type | Default |
|---|---|---|
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 | - |
| Prop | Type | Default |
|---|---|---|
id? | "home" | "projects" | "info" | - |
label? | string | - |
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";A standalone, ready-to-use Next.js starter template with this tilt-slide page transition pre-configured is available for cloning:
git clone https://github.com/SoraLabsOSS/tilt-slide-template.git
cd tilt-slide-template
bun install
bun devInspired by Codegrid & Paul Kalkbrenner. Reimplemented for Next.js, View Transition API, GSAP, and Lenis.
Built by Axyl. A motion-first component registry for React.