Images that swap through a liquid glass ball
| 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.
[]transitionDurationnumberDuration of the transition animation in seconds.
2.5glassRefractionStrengthnumberIntensity of the glass refraction effect.
1.0glassChromaticAberrationnumberIntensity of the chromatic aberration (color split) effect.
0glassBubbleClaritynumberClarity of the center of the glass bubble.
1.0glassEdgeGlownumberIntensity of the glow at the edges of the glass bubble.
1.0glassLiquidFlownumberSpeed and intensity of the liquid flow effect.
1.0startAtCursorbooleanWhen true, the glass ball transition starts at the click position instead of the center.
falseautoCyclebooleanAutomatically cycle through images.
falseautoCycleDelaynumberDelay between auto-cycling images in milliseconds.
3000classNamestringAdditional CSS classes to apply to the container.
""