Cinematic Reveal
Scroll Down
Scroll to see the layout split apart.
REVEALED
This content was hidden underneath the split panels. The panels move apart precisely linked to your scroll position.
LEFT
Or Top
RIGHT
Or Bottom
End of scroll demo
Overview
A dramatic page transition component. As the user scrolls, the layout splits horizontally or vertically to reveal content underneath. This effect is heavily used on high-end storytelling sites to introduce new narrative sections.
Usage
import { ScrollLinkedSplit } from "@/components/creative/scroll-linked-split"
<ScrollLinkedSplit
direction="horizontal"
leftContent={<div className="bg-black text-white h-full grid place-items-center">Left Door</div>}
rightContent={<div className="bg-black text-white h-full grid place-items-center">Right Door</div>}
revealContent={
<div className="text-4xl font-bold">
The Secret Content
</div>
}
/>
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ScrollLinkedSplit } from "@/components/creative/scroll-linked-split";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ScrollLinkedSplit } from "@/components/creative/scroll-linked-split";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ScrollLinkedSplit
leftContent{/* value */}
rightContent{/* value */}
revealContent{/* value */}
/>
</div>
);
}