Liquid Glass Refract

Glass that bends what's behind it

Customizations available in Framer Content & color Colors — up to five gradient stops, each with its own colour and position. This is the surface the glass refracts. Angle — direction the colour ramp travels across the frame, 0–360°. Image — optional. When set, the glass refracts this image instead of the gradient, which makes it CMS-friendly for hero art. Liquid motion Distortion — how hard the glass bends what sits behind it. Scale — size of the flowing cells; low is broad and calm, high is fine and busy. Speed — ambient flow speed. Set to 0 for a frozen pane. Glass character Dispersion — prismatic red/blue split at the edges of the bend. Sheen — specular light catching the folds. Edge Refraction — extra bending near the frame edges, mimicking a thicker glass rim. Grain — fine film grain, which also helps against gradient banding. Interaction Trigger — Ambient only, Cursor only, or both. Cursor Size — radius of the lens under the pointer, relative to the frame. Cursor Strength — how strongly the pointer pulls and lights the glass. Click Ripples — sends a ring of light outward on click or tap. Layout Radius — corner rounding; 0 for a full-bleed section background. Performance & accessibility Quality — internal render resolution (High / Balanced / Low). Layout size is unaffected. Pause Offscreen — stops rendering while scrolled out of view. Reduced Motion — shows a still frame to visitors with reduced motion enabled in their OS.

Glass that bends what's behind it