Section 1
Scrollable content block 1 on the pane. Keep scrolling to see the left side remain pinned.
Section 2
Scrollable content block 2 on the pane. Keep scrolling to see the left side remain pinned.
Section 3
Scrollable content block 3 on the pane. Keep scrolling to see the left side remain pinned.
Section 4
Scrollable content block 4 on the pane. Keep scrolling to see the left side remain pinned.
Section 5
Scrollable content block 5 on the pane. Keep scrolling to see the left side remain pinned.
Section 6
Scrollable content block 6 on the pane. Keep scrolling to see the left side remain pinned.
Section 7
Scrollable content block 7 on the pane. Keep scrolling to see the left side remain pinned.
Section 8
Scrollable content block 8 on the pane. Keep scrolling to see the left side remain pinned.
Overview
A foundational layout component commonly used on Awwwards sites for product features, dual narratives, or sticky text paired with scrolling images.
Usage
import { SplitScreenLayout } from "@/components/creative/split-screen-layout"
<SplitScreenLayout
splitRatio="40/60"
stickySide="left"
leftContent={
<div className="p-12 flex flex-col justify-center h-full">
<h2>Sticky Heading</h2>
<p>This side stays pinned to the screen.</p>
</div>
}
rightContent={
<div className="p-12 space-y-24">
<img src="/img1.jpg" alt="Image 1" />
<img src="/img2.jpg" alt="Image 2" />
<img src="/img3.jpg" alt="Image 3" />
</div>
}
/>
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { SplitScreenLayout } from "@/components/creative/split-screen-layout";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { SplitScreenLayout } from "@/components/creative/split-screen-layout";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<SplitScreenLayout
leftContent{/* value */}
rightContent{/* value */}
stickySide{/* value */}
/>
</div>
);
}