Liquid Web

Liquid Web is a modern JavaScript library for easy creation of Apple liquid glass effect for Vue, React, Vanilla JS

Simply plug it into your project and get a modern liquid glass effect.

Go to the website see it in action and customize your Liquid Glass effect!

Table of Contents

• Installation
• Usage
  • VanillaJS example
  • Vue example
  • React example
• Options
• Events
• Static Methods
• My other works

Installation

npm install liquid-web

or connect via CDN:

<script src="https://cdn.jsdelivr.net/npm/liquid-web/liquid-core.min.js"></script>

Usage

VanillaJS example

import { LiquidWeb } from 'liquid-web';

new LiquidWeb('[data-liquid]', {
  /* ...options */
});

<div data-liquid>
  <button>I am liquid button!</button>
</div>

Vue example

<script setup lang="ts">
  import { LiquidWeb } from 'liquid-web/vue';
</script>

<template>
  <LiquidWeb
    :options="{ /* ...options */ }"
    :selector="div"
    @click="(instance) => console.log('Clicked!', instance)"
    @mouseEnter="(instance) => console.log('Mouse entered!', instance)"
    @mouseLeave="(instance) => console.log('Mouse left!', instance)"
  >
    <button>I am liquid button!</button>
  </LiquidWeb>
</template>

React example

import { LiquidWeb } from './dist/react/index.mjs';

export default () => {
  return (
    <div>
      <LiquidWeb
        options={{ ...options }}
        selector="div"
        onClick={(instance) => console.log('Clicked!', instance)}
        onMouseEnter={(instance) => console.log('Mouse entered!', instance)}
        onMouseLeave={(instance) => console.log('Mouse left!', instance)}
      >
        <button>I am liquid button!</button>
      </LiquidWeb>
    </div>
  );
};

Options

| Option | Type | Default | Description | | ------------- | ------------------------------------------------ | ---------- | ------------------------------------------------- | | el? | string \| HTMLElement | - | Element selector to apply liquid effect. | | init? | boolean | true | Whether to initialize the effect on load. | | scale? | number | 22 | Changes the intensity of the displacement effect. | | blur? | number \| string | 2 | Changes the intensity of the blur effect. | | saturation? | number \| string | 170 | Changes the intensity of the saturation effect. | | aberration? | number | 50 | Changes the intensity of the aberration effect. | | mode? | 'standard' | 'polar' | 'prominent' | 'shader' | standard | Toggles the glass effect. | | on? | LiquidWebEventListeners | - | Event listeners for the liquid effect. | | events? | LiquidWebEventListeners | - | Event listeners for the liquid effect. | | onAny? | LiquidWebEventCallback | - | Callback for any event. |

Events

LiquidWeb has a lot of useful events that you can listen to. Events can be assigned in two ways:

1. Using on parameter on initialization:

const liquidweb = new LiquidWeb('[data-liquid]', {
  on: {
    init: (liquidweb) => {
      console.log('LiquidWeb initialized', liquidweb);
    },
    mouseEnter: (liquidweb) => {
      console.log('Mouse entered', liquidweb);
    },
  },
});

2. Using the on method after initialization:

const liquidweb = new LiquidWeb('[data-liquid]', {
  init: false, // Disable auto-init
});

liquidweb.on('init', (liquidweb) => {
  console.log('LiquidWeb initialized', liquidweb);
});

liquidweb.on('mouseEnter', (liquidweb) => {
  console.log('Mouse entered', liquidweb);
});

liquidweb.init(); // Manually initialize the effect

| Event | Arguments | Description | | --------------------- | ------------ | ------------------------------------------------------------------------- | | beforeInit | (liquidweb ) | Event will be fired before the effect is initialized. | | init | (liquidweb ) | Event will be fired when the effect is initialized. READ MORE BELOW!!! | | afterInit | (liquidweb ) | Event will be fired after the effect is initialized. | | beforeDestroy | (liquidweb ) | Event will be fired before the effect is destroyed. | | destroy | (liquidweb ) | Event will be fired when the effect is destroyed. | | afterDestroy | (liquidweb ) | Event will be fired after the effect is destroyed. | | beforeUpdate | (liquidweb ) | Event will be fired before the effect is updated. | | update | (liquidweb ) | Event will be fired when the effect is updated. | | afterUpdate | (liquidweb ) | Event will be fired after the effect is updated. | | beforeUpdateEffects | (liquidweb ) | Event will be fired before the effects are updated. | | updateEffects | (liquidweb ) | Event will be fired when the effects are updated. | | afterUpdateEffects | (liquidweb ) | Event will be fired after the effects are updated. | | mouseEnter | (liquidweb ) | Event will be fired when the mouse enters the element. | | mouseLeave | (liquidweb ) | Event will be fired when the mouse leaves the element. | | mouseMove | (liquidweb ) | Event will be fired when the mouse moves over the element. | | mouseDown | (liquidweb ) | Event will be fired when the mouse button is pressed down on the element. | | mouseUp | (liquidweb ) | Event will be fired when the mouse button is released over the element. | | click | (liquidweb ) | Event will be fired when the element is clicked. |

Note that with liquidweb.on('init') syntax it will work only in case you set init: false parameter.

const liquidweb = new LiquidWeb('[data-liquid]', {
  init: false,
});

liquidweb.on('init', (liquidweb) => {
  console.log('LiquidWeb initialized', liquidweb);
});

liquidweb.init();

or

const liquidweb = new LiquidWeb('[data-liquid]', {
  on: {
    init: (liquidweb) => {
      console.log('LiquidWeb initialized', liquidweb);
    },
  },
});

Static Methods

| Static Method | Arguments | Description | | --------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | __instances__ | - | Returns an array of all LiquidWeb instances. | | init | el: HTMLElement | Initializes the LiquidWeb effect on a given element. | | getInstance | el: HTMLElement | string | Retrieves the LiquidWeb instance for a given element or selector. You can also get a copy as follows: document.querySelector('[data-liquid]')?.liquidWeb; |

My other works

Prismium - A modern JavaScript accordion library with smooth animations. Easily integrates with React, Vue, and vanilla JavaScript.