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.