Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
scroll-wave-gallery-demo
Tideline
Slack Water
import { ScrollWaveGallery } from "@/registry/tween/scroll-wave-gallery"
export function ScrollWaveGalleryDemo() {
return <ScrollWaveGallery />
}
Installation
Usage
import { ScrollWaveGallery } from "@/components/ui/scroll-wave-gallery"<ScrollWaveGallery
intro="Tideline"
outro="Slack Water"
images={[
{
src: "https://images.unsplash.com/photo-1789169164965-6bab155e7861?q=80&w=1200&h=900&fit=crop&crop=center&auto=format",
alt: "Fog settling over a wide beach below a grassy dune",
},
{
src: "https://images.unsplash.com/photo-1649331713080-eeb544bd901c?q=80&w=1200&h=900&fit=crop&crop=center&auto=format",
alt: "Black and white dune line under an empty sky",
},
]}
/>The images stack in a single column between an intro and outro heading. Each image gets its own ScrollTrigger (start: "top bottom", end: "bottom top"); on update its progress feeds three independent sine waves (base, flow, detail) that sum into a horizontal offset, while a clip-path inset opens from both edges toward the center of its travel and the last quarter of images shrink. The trigger resolves its scroller via usePreviewScroller, so it works in the docs preview and on a real page; a ResizeObserver recomputes image sizes and refreshes the triggers on layout change. When prefers-reduced-motion: reduce is set the images render centered and unclipped without scroll motion.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | ScrollWaveImage[] | 10 defaults | Each image is { src, alt? }. |
intro | React.ReactNode | "Tideline" | Heading shown before the gallery. |
outro | React.ReactNode | "Slack Water" | Heading shown after the gallery. |
background | string | "#e4e2d9" | Section background color. |
foreground | string | "#1b1d1a" | Heading text color. |
baseHeight | number | 375 | Base image height in px before responsive and shrink scaling. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the preview scroller. |
className | string | — | Extra classes on the outer container. |