Getting Started
Templates
Components
A cinematic scroll-driven gallery where each full-screen slide reveals a video through a fixed center portal. As you scroll between slides, the portal clips to show different videos, creating a seamless split-screen transition effect.
Key Features:
import { ScrollSplitVideoGallery } from "@/components/ui/scroll-split-video-gallery"
const items = [
{
id: "reel-1",
title: "Spring Collection",
description: "Discover the latest trends for the season.",
thumbnailSrc: "/thumbnail-1.jpg",
videoSrc: "/video-1.mp4",
},
{
id: "reel-2",
title: "Summer Vibes",
description: "Beach-ready styles for your next adventure.",
thumbnailSrc: "/thumbnail-2.jpg",
videoSrc: "/video-2.mp4",
videoPosterSrc: "/poster-2.jpg",
},
]
export default function Example() {
return (
<ScrollSplitVideoGallery
items={items}
portalWidth={400}
portalHeight={400}
portalRadius={24}
scanlines={true}
onSlideChange={(index, item) => console.log("Active:", item.title)}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
items | ScrollSplitItem[] | required | Array of gallery items |
portalWidth | number | 360 | Fixed portal width in pixels |
portalHeight | number | 360 | Fixed portal height in pixels |
portalRadius | number | 0 | Border radius for the portal |
backgroundBlurPx | number | 0 | Blur amount for background images |
scanlines | boolean | true | Show scanline overlay effect |
smartPlayback | boolean | true | Pause off-screen videos for performance |
onSlideChange | (index: number, item: ScrollSplitItem) => void | undefined | Callback when active slide changes |
emptyMessage | string | "No items to display" | Message when no items provided |
className | string | undefined | Additional CSS classes |
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier |
title | string | Slide title (displayed left) |
description | string | Optional description (displayed right) |
thumbnailSrc | string | Background image URL |
videoSrc | string | Video URL for the center portal |
videoPosterSrc | string | Optional video poster (defaults to thumbnail) |
Each slide renders its own video layer positioned at the fixed portal location. As you scroll:
clip-path is applied to reveal only the visible portionThis creates the illusion of a single portal showing different content as you scroll.
The smartPlayback feature uses IntersectionObserver to: