Liquid Swap

Swap images transition with a stunning liquid glass ball effect

liquid-swap-tw

Customize

Transition Duration

2.5s

Start at CursorAuto Cycle

Auto Cycle Delay

3000ms

Refraction Strength

1.0

Bubble Clarity

1.0

Edge Glow

1.0

Liquid Flow

1.0

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[]

transitionDurationnumber

Duration of the transition animation in seconds.

Default2.5

glassRefractionStrengthnumber

Intensity of the glass refraction effect.

Default1.0

glassChromaticAberrationnumber

Intensity of the chromatic aberration (color split) effect.

Default0

glassBubbleClaritynumber

Clarity of the center of the glass bubble.

Default1.0

glassEdgeGlownumber

Intensity of the glow at the edges of the glass bubble.

Default1.0

glassLiquidFlownumber

Speed and intensity of the liquid flow effect.

Default1.0

startAtCursorboolean

When true, the glass ball transition starts at the click position instead of the center.

Defaultfalse

autoCycleboolean

Automatically cycle through images.

Defaultfalse

autoCycleDelaynumber

Delay between auto-cycling images in milliseconds.

Default3000

classNamestring

Additional CSS classes to apply to the container.

Default""