Morph Slider

WebGL slider that melts between images with a displacement transition.

Default

Drag the image, use the arrows or press the arrow keys to morph to the next slide. Every prop is wired to the controls underneath.

One

Transition

Overlay

Ease

Duration1.1s

Intensity0.55

Noise Scale2.4

Aberration0.35

Drift0.4

Autoplay Delay4s

Radius16px

AutoplayLoopCaptionsControlsIndicators

Prop	Type	Default	Description
`items`	`Array<{ image: string; caption?: string }>`	`[...]`	Slides to morph between. Each item is an image URL with an optional caption.
`startIndex`	`number`	`0`	Index of the slide shown on mount.
`transition`	`"melt" \| "ripple" \| "shear" \| "swirl"`	`"melt"`	Character of the GPU displacement morph between slides.
`duration`	`number`	`1.1`	Length of a full transition in seconds.
`ease`	`string`	`"power2.inOut"`	GSAP easing curve used to drive the transition progress.
`intensity`	`number`	`0.55`	Strength of the displacement, how far the images warp during the morph.
`scale`	`number`	`2.4`	Frequency of the procedural noise field (affects the Melt transition most).
`aberration`	`number`	`0.35`	Amount of RGB split that peaks mid-transition and resolves to zero.
`drift`	`number`	`0.4`	Idle drift and breathing applied to the current image so it is never fully static.
`autoplay`	`boolean`	`false`	Advance slides automatically; pauses on hover.
`autoplayDelay`	`number`	`4`	Seconds each slide holds before autoplay advances.
`loop`	`boolean`	`true`	Wrap around from the last slide back to the first.
`radius`	`number`	`16`	Corner radius of the slider in pixels.
`overlayColor`	`string`	`"#000000"`	Tint used for the subtle edge vignette over the images.
`showCaptions`	`boolean`	`true`	Show slide captions that animate in with each transition.
`showControls`	`boolean`	`true`	Show the previous and next arrow buttons.
`showIndicators`	`boolean`	`true`	Show the slide indicator dots.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`ArrowRight`	Morphs to the next slide.
`ArrowLeft`	Morphs to the previous slide.

The stage is a focusable carousel group, captions are announced politely and the indicators are tabs with labels.
Respects prefers-reduced-motion: the displacement is turned off and transitions become short cross-fades.