Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
slit-rotate-hero-scroll-demo
Bodies drawn in cobalt and dark
Weight
Three dancers thrown through a single wash of blue. Every fall caught in the half second before the floor gives back the light it borrowed.
Breath
A stage held still by one cold beam and a room of held breath. The body slows until only its outline remains, burning through the haze.
Stay until the last beam fades and the room is still moving.
A dance company made for the stage, the haze, and the blue that stays behind.
import { SlitRotateHeroScroll } from "@/registry/tween/slit-rotate-hero-scroll"
export function SlitRotateHeroScrollDemo() {
return <SlitRotateHeroScroll />
}
Installation
Usage
import { SlitRotateHeroScroll } from "@/components/ui/slit-rotate-hero-scroll"<SlitRotateHeroScroll
heroImg="https://images.unsplash.com/photo-1697637270631-c2a0d6b0dd7a?q=80&w=1920&h=1080&fit=crop&crop=center&auto=format"
title="Bodies drawn in cobalt"
outroImages={[
"https://images.unsplash.com/photo-1607431887725-379d8ea70f77?q=80&w=1080&h=1350&fit=crop&crop=center&auto=format",
"https://images.unsplash.com/photo-1574132329122-7c72a511c576?q=80&w=1080&h=1350&fit=crop&crop=center&auto=format",
]}
outroTitle="Stay until the last beam fades."
/>How it works
The hero pins for pinDistanceFactor viewport heights and one scrubbed ScrollTrigger drives a four-phase timeline:
- 0 – 25%: the foreground
clip-pathnarrows from full width to a 4% vertical slit while a dark overlay fades in. - 25 – 45%: the slit rotates to 65°.
- 45 – 65%: it scales down to zero, flashing to the accent color, while the two copy blocks behind it slide towards the center.
- 65 – 85%: two outro images clip in, one from the top and one from the bottom.
Past 90% the outro headline, split into masked lines with SplitText, slides up line by line; scrolling back hides it again. The trigger uses usePreviewScroller. With prefers-reduced-motion: reduce the final state is shown.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
heroImg | string | remote image | Foreground hero image. |
title | ReactNode | default copy | Hero headline. |
copy | [{ title, body }, { title, body }] | 2 blocks | Copy blocks revealed behind the hero. |
outroImages | [string, string] | 2 images | Images that clip in from the top and the bottom. |
outroTitle | string | default copy | Headline revealed line by line at the end. |
about | ReactNode | default copy | Text of the section after the pin. |
pinDistanceFactor | number | 5 | Pin length in viewport heights. |
light | string | "#dcdde5" | Light background and text color. |
accent | string | "#3a4bff" | Accent heading and flash color. |
dark | string | "#05071c" | Dark background and body text color. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the preview one. |
className | string | — | Extra classes on the outer container. |