Liquid Transition

About Liquid Transition

One sheet of glass, and the page has changed. A band of liquid glass crosses the section, bending and pushing the view that is leaving while the next one waits underneath, then carries on out of frame. Five directions, four easings, real turbulence rather than a blur, and honest fallbacks for reduced motion and for browsers that cannot blur a backdrop.

Features

• A sheet of liquid glass that crosses the section and changes the view.

• The outgoing view is refracted by a real turbulence filter, not just blurred.

• Five directions, including a disc growing from the centre.

• Distortion, Refraction, Blur, Intensity and Noise all on sliders.

• Views with eyebrow, title, text, image and accent colour.

• Dots, an Active control, or autoplay that pauses off screen.

• Crossfade fallback where the browser cannot blur a backdrop.

• Reduced motion changes the view with no motion at all.

• One rAF loop that exists only during the sweep.

• One standalone React + TypeScript file.

• 20 controls in the Framer properties panel

• Respects prefers-reduced-motion

• Renders correctly on the Framer canvas and in export

Created by LUNAUT Studio.