liquid-web

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

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

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

My other works

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