Interaction
Use the arrow buttons, Left/Right keys, Home/End or horizontal swipes. Selection stays on this page.
States
A 202px card, 0.756 image aspect, 14.2px corners and 4.5px white border. Default image 1 of 6.
Timing
Each transition lasts 800 ms. An organic radial reveal grows from the clicked button; coherent ripples follow the edge, with refraction confined to the moving front. Distortion 0.2, edge variation 0.1.
Enter and exit
Next reveals from the right button; previous reveals from the left. Both images refract locally near the moving boundary. The rounded white frame and navigation controls stay fixed. Painting stops after full coverage.
Repeated input and interruption
Rapid navigation snapshots the current mixed frame and retargets the latest image without a queue. Hover, focus and mobile Preview share gallery demos. Leaving finishes the current transition and sleeps; background and offscreen states stop immediately.
Effect notes
Images, titles, order, defaults, size and liquid settings are saved. Live selection and observation speed stay transient. Motion, runnable prompt projects and offline HTML share the same renderer and embedded images.
Reduced motion
Disable automatic demos and liquid motion; retain instant selection, buttons, touch and keyboard. Without WebGL, use an organic radial canvas mask.
Default configuration
These values come from the maintained default configuration. Editor drafts and exported changes can differ.
{
"schemaVersion": 2,
"recipeId": "liquid-carousel",
"durationMs": 800,
"delayMs": 0,
"easing": [
0.22,
1,
0.36,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": false,
"interruption": "retarget",
"tracks": [],
"liquidCarousel": {
"items": [
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%22176%22%20fill%3D%22%23929292%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Orchid orbit"
},
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23f7f7f7%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%22158%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%2264%22%2F%3E%3Crect%20x%3D%22434%22%20y%3D%22116%22%20width%3D%2258%22%20height%3D%2258%22%20fill%3D%22%23dedede%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Fuchsia wave"
},
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M144%20308a176%20176%200%200%201%20352%200Z%22%20fill%3D%22%23929292%22%2F%3E%3Cpath%20d%3D%22M144%20332a176%20176%200%200%200%20352%200Z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Coral fold"
},
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20x%3D%22144%22%20y%3D%22144%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23dedede%22%2F%3E%3Crect%20x%3D%22264%22%20y%3D%22264%22%20width%3D%22232%22%20height%3D%22232%22%20fill%3D%22%23929292%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Rose balance"
},
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23f7f7f7%22%2F%3E%3Cpath%20d%3D%22m320%20128%20200%20352H120Z%22%20fill%3D%22%23a0a0a0%22%2F%3E%3Cpath%20d%3D%22m320%20252%2092%20162H228Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Violet steps"
},
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M144%20184h352M144%20368h352%22%20stroke%3D%22%23929292%22%20stroke-width%3D%2240%22%2F%3E%3Cpath%20d%3D%22M144%20276h352M144%20460h352%22%20stroke%3D%22%23cccccc%22%20stroke-width%3D%2240%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Amber loop"
}
],
"selectedIndex": 0,
"height": 202,
"aspect": 0.755939524838013,
"radius": 14.2,
"border": 4.5,
"buttonSize": 19.2,
"distortion": 0.2,
"edge": 0.1,
"autoplay": false,
"interval": 1800,
"disabled": false
}
}Source code and reuse
The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.
Using it in your own project
Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.
Catalog provenance label: Independent implementation based on a user recording. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.