Liquid Slides
A WebGL photo slideshow that swaps images through a noise-displaced liquid wipe with a wet rim and a slight color split, under a thin timeline that reads like stories: shown slides stay full, the current one fills with time and the next start empty. It advances on a timer, a click, the arrows or the keyboard, pauses its timer on hover and ripples the photo under the cursor. Timing, distortion, edge detail, color split, push-in and every control are props. All photos preload first, it falls back to crossfading images without WebGL and switches instantly for reduced motion.
The import and the props worth knowing about, in one place.
import { LiquidSlides } from "@/components/beste/component/liquid-slides";
<LiquidSlides
className="aspect-[4/5] md:aspect-[16/10]"
slides={[
{ src: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=1400&q=80", alt: "A model leaning on a teal wall" },
{ src: "https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=1400&q=80", alt: "A woman walking down a city street" },
]}
labels={{ carousel: "Lookbook", previous: "Previous look", next: "Next look" }}
interval={5} // seconds per slide
transition={1.2} // seconds per wipe
distortion={0.7} // how far the wet edge drags, 0 to 1
pauseOnHover
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
slides* | LiquidSlide[] | — | Photos in order. Loaded with CORS so WebGL can read them. |
interval | number | — | Seconds each slide stays before the next wipe. |
transition | number | — | Seconds the liquid wipe takes. |
distortion | number | — | How far the wet edge drags the photos, 0 to 1. |
noiseScale | number | — | Size of the ripples in the wipe's edge, 0 (broad) to 1 (fine). |
colorSplit | number | — | Color split along the wet edge, 0 to 1. |
zoom | number | — | Slow push-in on the resting photo, 0 to 1. |
autoplay | boolean | — | Advance on a timer. |
pauseOnHover | boolean | — | Hold the timer while the pointer is over the slides. |
progress | boolean | — | Timeline of thin bars along the bottom. |
arrows | boolean | — | Previous and next arrows beside the timeline. |
labels | { carousel: string; previous: string; next: string } | — | Accessible names for the carousel and its arrows. |
interactive | boolean | — | The photo ripples softly under the cursor. |
paused | boolean | — | Freeze on the current slide. |
className | string | — | |
children | ReactNode | — |