Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
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:
| 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: