Liquid Swap
Swap images transition with a stunning liquid glass ball effect
liquid-swap-tw
Loading...
Customize
Tweak the props liveTransition
2.5s
3000ms
Glass Effect
1
1
Glow & Flow
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. |
imagesstring[]Array of image URLs to display. Minimum 2 images required.
Default:
[]transitionDurationnumberDuration of the transition animation in seconds.
Default:
2.5glassRefractionStrengthnumberIntensity of the glass refraction effect.
Default:
1.0glassChromaticAberrationnumberIntensity of the chromatic aberration (color split) effect.
Default:
0glassBubbleClaritynumberClarity of the center of the glass bubble.
Default:
1.0glassEdgeGlownumberIntensity of the glow at the edges of the glass bubble.
Default:
1.0glassLiquidFlownumberSpeed and intensity of the liquid flow effect.
Default:
1.0startAtCursorbooleanWhen true, the glass ball transition starts at the click position instead of the center.
Default:
falseautoCyclebooleanAutomatically cycle through images.
Default:
falseautoCycleDelaynumberDelay between auto-cycling images in milliseconds.
Default:
3000classNamestringAdditional CSS classes to apply to the container.
Default:
""