Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
slit-open-hero-scroll-demo
Lime, stone and slow light, shaped into lasting homes
Rooms carved from soft plaster, made for long summers and longer evenings
We build quiet houses for the edge of the sea
Every arch, niche and threshold is plastered by hand, then left to settle with the seasons
import { SlitOpenHeroScroll } from "@/registry/tween/slit-open-hero-scroll"
export function SlitOpenHeroScrollDemo() {
return <SlitOpenHeroScroll />
}
Installation
Usage
import { SlitOpenHeroScroll } from "@/components/ui/slit-open-hero-scroll"<SlitOpenHeroScroll
backgroundImage="https://images.unsplash.com/photo-1711967151478-65f508092c8a?q=80&w=1920&h=1080&fit=crop&crop=center&auto=format&exp=-8"
images={[
"https://images.unsplash.com/photo-1680526860217-016595158c55?q=80&w=1920&h=1080&fit=crop&crop=center&auto=format",
"https://images.unsplash.com/photo-1687579520868-b22b33ca8fa5?q=80&w=1920&h=1080&fit=crop&crop=center&auto=format",
]}
title="Lime, stone and slow light"
outroTitle="Rooms carved from soft plaster"
accent="#a14d2c"
/>How it works
The hero pins for pinDistanceFactor viewport heights without pin spacing, so the next section (pushed down by five viewport heights) slides up underneath it. One scrubbed GSAP timeline runs on a 0 to 1 scale:
0 → 0.5: the background scales from1.5to1.0 → 0.2: a 1% wide accent slit grows from the centre point to full height.0.2 → 0.5: the slit widens to cover the whole hero.0.4 →: each image scales up from0while its clip-path opens from the centre, staggered by0.04.- After the last image, the outro panel scales in. It is rendered twice, each copy clipped to one half.
0.7: the hero layers are hidden and the two halves slide apart (xPercent-150and50), uncovering the section below.
The timeline is built inside a gsap.context and rebuilt when the scroller resizes. With prefers-reduced-motion: reduce the outro panel is shown statically and the next section follows directly.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
backgroundImage | string | remote image | Image behind the opening headline. |
images | string[] | 3 remote images | Images that cascade open, in order. |
title | ReactNode | default copy | Opening headline. |
outroTitle | ReactNode | default copy | Headline on the outro panel that splits apart. |
aboutTitle | ReactNode | default copy | Title of the section revealed below. |
aboutBody | ReactNode | default copy | Body text of the section revealed below. |
pinDistanceFactor | number | 7 | How many viewport heights the hero pins for. |
light | string | "#f3ede2" | Hero text color and next section background. |
accent | string | "#a14d2c" | Slit and outro panel color. |
dark | string | "#1d1510" | Text color of the next section. |
fontFamily | string | DM Sans stack | Font for all text. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller. |