By rssfeeds-admin 
It extends beyond standard CSS backdrop-filter capabilities by introducing real-time turbulence and refraction through SVG filter technology. It works as a Web Component with zero framework dependencies.
The library currently provides distinct rendering modes. The default mode creates crisp frosted glass similar to Apple’s Liquid Glass design language. The super mode generates animated liquid surfaces with customizable turbulence parameters. Both modes maintain full DOM compatibility and respond naturally to touch and mouse interactions.
See It In Action:
More Features:
- High Performance: Filter calculations leverage hardware-accelerated SVG rendering.
- Fully Customizable: You can configure blur radius, displacement scale, turbulence frequency, noise octaves, and brightness through HTML attributes.
- Framework Agnostic: Works directly with React, Vue, Angular, or vanilla JavaScript.
Use Cases:
- Modern Dashboard Interfaces: Create floating card layouts with depth and hierarchy. The glass effect provides visual separation without solid backgrounds that block underlying content.
- Landing Page Hero Sections: Apply dynamic liquid glass overlays to video backgrounds or image galleries.
- Modal Dialogs and Overlays: Implement elegant modal windows that blur and displace background content.
- Navigation Menus and Sidebars: Build translucent navigation panels that reveal background content through distortion.
How To Use It:
1. Load the GlassiFy library via a CDN or host it locally.
<!-- Load the latest version --> <script src="https://glassify.saviru.me/cdn/glassify.js"></script> <!-- OR Download the release and reference it in your project. --> <script src="./assets/js/glassify.js"></script>
2. GlassiFy uses a custom element <glassi-fy> as a global controller. Place this tag anywhere inside your <body>and it then generates the necessary SVG filters and styles.
<!-- Initialize the glass engine --> <glassi-fy></glassi-fy> <!-- Apply glass effect to any element --> <div class="glassify glass-element"> <h2>Glass Element</h2> <p>Any Content Here.</p> </div>
3. GlassiFy handles the physics of the refraction. You must handle the layout and dimensions.
You must use a background color with a low alpha value (transparency). If the background is opaque, the glass effect will not be visible.
.glass-element {
width: 300px;
height: 30px;
border-radius: 24px;
/* Essential: Low alpha allows refraction to shine through */
background-color: rgba(255, 255, 255, 0.1);
/* Optional: Add a border to define edges */
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
}
4. Enable the super mode to activate animated displacement with noise-based turbulence:
<glassi-fy mode="super"></glassi-fy>
5. Configure the Liquid Glass effect by adding the following attributes to the <glassi-fy> tag:
- frequency: Controls the turbulence frequency.
- Default: 0.01
- Range: 0 – 1
- Mode: Super Only
- octaves: Level of detail in the noise.
- Default: 3
- Range: 2 – 8
- Mode: Super Only
- scale: Displacement scale magnitude.
- Default: 45
- Range: 25 – 75
- Mode: Any
- blur: Blur radius for background elements.
- Default: 3
- Range: 2 – 10
- Mode: Any
- brightness: Backdrop brightness intensity.
- Default: 1.4
- Range: 1 – 2
- Mode: Any
<glassi-fy scale="45" blur="3" brightness="1.4" frequency="0.01" octaves="3"> </glassi-fy>
FAQs
Q: Why does the glass effect not appear on my elements?
A: The most common cause involves missing background transparency. Your .glassify elements must use rgba() or hsla() color values with alpha below 0.5. Solid backgrounds block the backdrop sampling that creates the glass effect.
Q: How does GlassiFy perform on mobile devices?
A: The library leverages hardware-accelerated CSS properties that mobile browsers optimize well. The super mode with high octave values may impact frame rates on older mobile hardware
Q: Does the effect work on images or video backgrounds?
A: Yes. The effect works by processing the visible content behind the element in the browser’s viewport. It works perfectly over images, videos, and gradients.
Q: Can I control the effect dynamically with JavaScript?
A: Yes. You can select the <glassi-fy> element and use setAttribute to update scale, blur, or other parameters.
The post Create Liquid Glass Effects with Dynamic Displacement – GlassiFy appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.