Liquid Swap
Swap images transition with a stunning liquid glass ball effect
liquid-swap-tw
Loading...
Customize
3000ms
2.5s
1
1
1
1
Props
| Name | Type | Default | Description |
|---|---|---|---|
| images | string[] | [] | Array of image URLs to display. Minimum 2 images required. |
| transitionDuration | number | 2.5 | Duration of the transition animation in seconds. |
| glassRefractionStrength | number | 1.0 | Intensity of the glass refraction effect. |
| glassChromaticAberration | number | 0 | Intensity of the chromatic aberration (color split) effect. |
| glassBubbleClarity | number | 1.0 | Clarity of the center of the glass bubble. |
| glassEdgeGlow | number | 1.0 | Intensity of the glow at the edges of the glass bubble. |
| glassLiquidFlow | number | 1.0 | Speed and intensity of the liquid flow effect. |
| startAtCursor | boolean | false | When true, the glass ball transition starts at the click position instead of the center. |
| autoCycle | boolean | false | Automatically cycle through images. |
| autoCycleDelay | number | 3000 | Delay between auto-cycling images in milliseconds. |
| className | string | "" | Additional CSS classes to apply to the container. |