Link to the plugin page: TODO Link Here
Introduction
The Liquid Glass Effects plugin allows you to add beautiful liquid glass and blur effects to your Framer objects. This plugin creates stunning visual effects using advanced CSS filters, backdrop blur, and distortion filters to simulate a realistic liquid glass appearance on any Frame or component in your Framer project.
The plugin works by injecting custom code overrides into your Framer project, giving you access to the
withLiquidGlass higher-order component that can be applied to any Frame or element.How to setup
To start using the Liquid Glass Effects plugin:
- Install the plugin from the Framer plugin library
- To start using the plugin, you need to create or log in to your Zeroqode account. Select Sign In or Sign Up.
- Enter your account details.
- A subscription to all our plugins is required. Once subscribed, you will gain access to all our plugins.
- Add Code Override: In the plugin interface, click the “Add Liquid Glass Code Override” button to inject the necessary code into your project
- Select a Frame: In your Framer canvas, select the Frame or component you want to apply the liquid glass effect to
- Open Code Overrides Panel: In the right column of the Framer interface, find and click on the "Code Overrides" section
- Choose the Code File: From the dropdown menu, select
LiquidGlassOverrides(the file that was just created)
- Select the Effect: Choose
withLiquidGlassfrom the available functions list. Run preview, the liquid glass effect will be instantly applied to your selected Frame
Make sure the opacity of the frame or component's style fill (background) is less than 100%
The plugin will automatically create a new code file called “LiquidGlassOverrides” in your Framer project with all the necessary functions and styling.