Apple Liquid Glass Effect Component for Vue 3 Apps

Install & Download:

# NPM
$ npm install @wxperia/liquid-glass-vue

Description:

Liquid Glass Vue is a component library that replicates Apple’s liquid glass effect in your Vue applications.

The Liquid Glass effect reacts to user input, such as mouse movement, with fluid animations. Suitable for creating elements like buttons, cards, and modals that require a modern, sophisticated look.

Features

✨ Realistic Refraction: Implements edgy bending and light refraction for an authentic glass appearance.
🎨 Multiple Visual Modes: Offers several refraction modes, including standard, polar, and prominent, for varied visual styles.
🧊 Configurable Frostiness: You can adjust the blur level to create anything from clear glass to a heavily frosted look.
⚙️ Customizable Physics: Features configurable elasticity to control the “liquid” feel of the component’s response to interaction.
🌈 Chromatic Aberration: Includes settings to adjust chromatic aberration, adding to the realism of the lens effect.
🖱️ Advanced Interaction: Supports correct hover and click effects, and can track mouse movement across a specified container, not just the component itself.

Use Cases

Interactive Buttons: Create call-to-action buttons that ripple and refract when a user hovers over them, drawing attention to key actions.
Dynamic Information Cards: Design cards for dashboards or profiles that subtly distort their background and react to the user’s cursor.
Frosted Modals and Pop-ups: Implement modals with a frosted glass background that blurs the underlying content, keeping the focus on the modal’s information.

How to Use It

1. Install the package into your Vue 3 project. You can use npm or any other package manager.

npm install @wxperia/liquid-glass-vue

2. Register the component globally in your application’s entry file, typically main.ts or main.js. This makes the LiquidGlass component available throughout your entire application.

import { createApp } from 'vue'
import App from './App.vue'
import LiquidGlass from '@wxperia/liquid-glass-vue'
const app = createApp(App)
app.use(LiquidGlass)
app.mount('#app')

3. Alternatively, you can import the component directly into any Vue file where you need it. This method is useful for projects where you only need the effect in a few places.

<script setup lang="ts">
  import { LiquidGlass } from '@wxperia/liquid-glass-vue'
</script>
<template>
  <LiquidGlass>
    <div>Your content goes here</div>
  </LiquidGlass>
</template>

5. You can customize the glass effect through various props. For example, to create a button with high elasticity and noticeable chromatic aberration, you would adjust the elasticity and aberrationIntensity props.

<script setup lang="ts">
  import { LiquidGlass } from '@wxperia/liquid-glass-vue'
  function onButtonClick() {
    alert('Button was clicked!')
  }
</script>
<template>
  <LiquidGlass
    :elasticity="0.4"
    :aberration-intensity="3.0"
    :blur-amount="0.1"
    :corner-radius="100"
    padding="12px 24px"
    @click="onButtonClick"
  >
    <span>Clickable Glass Button</span>
  </LiquidGlass>
</template>

6. All available component props.

displacementScale (number, default: 70): Controls the intensity of the edge distortion and refraction effect.
blurAmount (number, default: 0.0625): Sets the blur level of the background, creating a frosted glass appearance.
saturation (number, default: 140): Adjusts the color saturation of the content seen through the glass.
aberrationIntensity (number, default: 2): Controls the intensity of the chromatic aberration, which splits light into different colors at the edges.
elasticity (number, default: 0.15): Determines the “liquid” feel of the component’s reaction to mouse movement. A value of 0 is rigid.
cornerRadius (number, default: 999): Sets the border radius of the glass element in pixels.
class (string, default: ""): Allows you to add additional CSS classes to the component for custom styling.
padding (string, default: "24px 32px"): Defines the CSS padding for the content inside the glass element.
style (CSSProperties, default: -): Lets you apply additional inline CSS styles to the component.
overLight (boolean, default: false): Should be set to true when the glass element is placed over a light-colored background to adjust the effect accordingly.
mouseContainer (Ref, default: null): Specifies a container element whose boundaries are used for tracking mouse movement.
mode (“standard” | “polar” | “prominent” | “shader”, default: "standard"): Sets the refraction mode for different visual effects. The shader mode is the most accurate but may be less stable.
globalMousePos ({ x: number; y: number }, default: -): Allows you to manually control the effect’s position with global mouse coordinates.
mouseOffset ({ x: number; y: number }, default: -): Provides a way to fine-tune the effect’s position with a mouse offset.
effect (“flowingLiquid” | “liquidGlass” | “transparentIce” | “unevenGlass” | “mosaicGlass”, default: "liquidGlass"): Selects a specific shader effect, which is only active when the mode is set to "shader".

Related Resources

liquid-glass-react: The original React library that Liquid Glass Vue is based on. It is a useful reference for understanding the core concepts of the effect.
VueGL: A component library for rendering 3D graphics using three.js within Vue. It is suitable for developers looking to integrate more complex WebGL scenes and models into their applications.

FAQs

Q: Why doesn’t the displacement effect work in Safari and Firefox?
A: Safari and Firefox have partial support for the underlying technologies used to create the displacement effect. The blur and other visual styles will work, but the refraction that distorts the background will not be visible in these browsers.

Q: How do I control the area that the glass effect responds to?
A: You can use the mouseContainer prop. By passing a template reference of a parent element to this prop, the glass component will track mouse movements within that entire element’s bounds.

Q: Can this library be used with server-side rendering (SSR)?
A: The library is designed primarily for client-side execution, as it relies on browser APIs for rendering and interaction.

Vue Script