https://github.com/koirodev/liquid-web
https://github.com/koirodev/liquid-web
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/koirodev/liquid-web
- Owner: koirodev
- License: mit
- Created: 2025-06-12T14:07:50.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-13T00:34:05.000Z (12 months ago)
- Last Synced: 2025-06-13T01:19:02.749Z (12 months ago)
- Language: JavaScript
- Size: 1.49 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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**](https://koirodev.github.io/liquid-web/) see it in action and customize your Liquid Glass effect!
[](https://liquid.prismify.in)
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [VanillaJS example](#vanillajs-example)
- [Vue example](#vue-example)
- [React example](#react-example)
- [Options](#options)
- [Events](#events)
- [Static Methods](#static-methods)
- [My other works](#my-other-works)
## Installation
```bash
npm install liquid-web
```
or connect via CDN:
```html
```
## Usage
### VanillaJS example
```javascript
import { LiquidWeb } from 'liquid-web';
new LiquidWeb('[data-liquid]', {
/* ...options */
});
```
```html
I am liquid button!
```
### Vue example
```html
import { LiquidWeb } from 'liquid-web/vue';
console.log('Clicked!', instance)"
@mouseEnter="(instance) => console.log('Mouse entered!', instance)"
@mouseLeave="(instance) => console.log('Mouse left!', instance)"
>
I am liquid button!
```
### React example
```jsx
import { LiquidWeb } from './dist/react/index.mjs';
export default () => {
return (
console.log('Clicked!', instance)}
onMouseEnter={(instance) => console.log('Mouse entered!', instance)}
onMouseLeave={(instance) => console.log('Mouse left!', instance)}
>
I am liquid button!
);
};
```
## 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:
```javascript
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:
```javascript
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.
```javascript
const liquidweb = new LiquidWeb('[data-liquid]', {
init: false,
});
liquidweb.on('init', (liquidweb) => {
console.log('LiquidWeb initialized', liquidweb);
});
liquidweb.init();
```
or
```javascript
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](https://prismify.in) - A modern JavaScript accordion library with smooth animations. Easily integrates with React, Vue, and vanilla JavaScript.