{"id":29139446,"url":"https://github.com/koirodev/liquid-web","last_synced_at":"2025-06-30T15:05:57.599Z","repository":{"id":298715421,"uuid":"1000912126","full_name":"koirodev/liquid-web","owner":"koirodev","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-13T00:34:05.000Z","size":1559,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-13T01:19:02.749Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/koirodev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-12T14:07:50.000Z","updated_at":"2025-06-13T00:33:44.000Z","dependencies_parsed_at":"2025-06-13T01:29:15.603Z","dependency_job_id":null,"html_url":"https://github.com/koirodev/liquid-web","commit_stats":null,"previous_names":["koirodev/liquid-glass","koirodev/liquid-web"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/koirodev/liquid-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koirodev%2Fliquid-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koirodev%2Fliquid-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koirodev%2Fliquid-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koirodev%2Fliquid-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koirodev","download_url":"https://codeload.github.com/koirodev/liquid-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koirodev%2Fliquid-web/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262797620,"owners_count":23365889,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-30T15:05:54.962Z","updated_at":"2025-06-30T15:05:57.582Z","avatar_url":"https://github.com/koirodev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv style=\"width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;\"\u003e\n  \u003ca href=\"https://github.com/koirodev/liquid-web/actions/workflows/build.yml\"\u003e\n    \u003cimg src=\"https://github.com/koirodev/liquid-web/workflows/Build/badge.svg\" alt=\"Build\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/liquid-web\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/liquid-web?style=flat-square\u0026color=red\" alt=\"npm downloads\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/liquid-web\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dw/liquid-web?style=flat-square\u0026color=blue\" alt=\"npm downloads\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n# Liquid Web\n\nLiquid Web is a modern JavaScript library for easy creation of Apple liquid glass effect for Vue, React, Vanilla JS\n\nSimply plug it into your project and get a modern liquid glass effect.\n\n[**Go to the website**](https://koirodev.github.io/liquid-web/) see it in action and customize your Liquid Glass effect!\n\n[![Liquid Glass Gif](https://raw.githubusercontent.com/koirodev/liquid-web/refs/heads/main/images/preview.gif)](https://liquid.prismify.in)\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [VanillaJS example](#vanillajs-example)\n  - [Vue example](#vue-example)\n  - [React example](#react-example)\n- [Options](#options)\n- [Events](#events)\n- [Static Methods](#static-methods)\n- [My other works](#my-other-works)\n\n## Installation\n\n```bash\nnpm install liquid-web\n```\n\nor connect via CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/liquid-web/liquid-core.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### VanillaJS example\n\n```javascript\nimport { LiquidWeb } from 'liquid-web';\n\nnew LiquidWeb('[data-liquid]', {\n  /* ...options */\n});\n```\n\n```html\n\u003cdiv data-liquid\u003e\n  \u003cbutton\u003eI am liquid button!\u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Vue example\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n  import { LiquidWeb } from 'liquid-web/vue';\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cLiquidWeb\n    :options=\"{ /* ...options */ }\"\n    :selector=\"div\"\n    @click=\"(instance) =\u003e console.log('Clicked!', instance)\"\n    @mouseEnter=\"(instance) =\u003e console.log('Mouse entered!', instance)\"\n    @mouseLeave=\"(instance) =\u003e console.log('Mouse left!', instance)\"\n  \u003e\n    \u003cbutton\u003eI am liquid button!\u003c/button\u003e\n  \u003c/LiquidWeb\u003e\n\u003c/template\u003e\n```\n\n### React example\n\n```jsx\nimport { LiquidWeb } from './dist/react/index.mjs';\n\nexport default () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cLiquidWeb\n        options={{ ...options }}\n        selector=\"div\"\n        onClick={(instance) =\u003e console.log('Clicked!', instance)}\n        onMouseEnter={(instance) =\u003e console.log('Mouse entered!', instance)}\n        onMouseLeave={(instance) =\u003e console.log('Mouse left!', instance)}\n      \u003e\n        \u003cbutton\u003eI am liquid button!\u003c/button\u003e\n      \u003c/LiquidWeb\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Options\n\n| Option        | Type                                             | Default    | Description                                       |\n| ------------- | ------------------------------------------------ | ---------- | ------------------------------------------------- |\n| `el?`         | `string \\| HTMLElement`                          | -          | Element selector to apply liquid effect.          |\n| `init?`       | `boolean`                                        | `true`     | Whether to initialize the effect on load.         |\n| `scale?`      | `number`                                         | `22`       | Changes the intensity of the displacement effect. |\n| `blur?`       | `number \\| string`                               | `2`        | Changes the intensity of the blur effect.         |\n| `saturation?` | `number \\| string`                               | `170`      | Changes the intensity of the saturation effect.   |\n| `aberration?` | `number`                                         | `50`       | Changes the intensity of the aberration effect.   |\n| `mode?`       | 'standard' \\| 'polar' \\| 'prominent' \\| 'shader' | `standard` | Toggles the glass effect.                         |\n| `on?`         | `LiquidWebEventListeners`                        | -          | Event listeners for the liquid effect.            |\n| `events?`     | `LiquidWebEventListeners`                        | -          | Event listeners for the liquid effect.            |\n| `onAny?`      | `LiquidWebEventCallback`                         | -          | Callback for any event.                           |\n\n## Events\n\nLiquidWeb has a lot of useful events that you can listen to. Events can be assigned in two ways:\n\n1. Using on parameter on initialization:\n\n```javascript\nconst liquidweb = new LiquidWeb('[data-liquid]', {\n  on: {\n    init: (liquidweb) =\u003e {\n      console.log('LiquidWeb initialized', liquidweb);\n    },\n    mouseEnter: (liquidweb) =\u003e {\n      console.log('Mouse entered', liquidweb);\n    },\n  },\n});\n```\n\n2. Using the `on` method after initialization:\n\n```javascript\nconst liquidweb = new LiquidWeb('[data-liquid]', {\n  init: false, // Disable auto-init\n});\n\nliquidweb.on('init', (liquidweb) =\u003e {\n  console.log('LiquidWeb initialized', liquidweb);\n});\n\nliquidweb.on('mouseEnter', (liquidweb) =\u003e {\n  console.log('Mouse entered', liquidweb);\n});\n\nliquidweb.init(); // Manually initialize the effect\n```\n\n| Event                 | Arguments    | Description                                                               |\n| --------------------- | ------------ | ------------------------------------------------------------------------- |\n| `beforeInit`          | (liquidweb ) | Event will be fired before the effect is initialized.                     |\n| `init`                | (liquidweb ) | Event will be fired when the effect is initialized. READ MORE BELOW!!!    |\n| `afterInit`           | (liquidweb ) | Event will be fired after the effect is initialized.                      |\n| `beforeDestroy`       | (liquidweb ) | Event will be fired before the effect is destroyed.                       |\n| `destroy`             | (liquidweb ) | Event will be fired when the effect is destroyed.                         |\n| `afterDestroy`        | (liquidweb ) | Event will be fired after the effect is destroyed.                        |\n| `beforeUpdate`        | (liquidweb ) | Event will be fired before the effect is updated.                         |\n| `update`              | (liquidweb ) | Event will be fired when the effect is updated.                           |\n| `afterUpdate`         | (liquidweb ) | Event will be fired after the effect is updated.                          |\n| `beforeUpdateEffects` | (liquidweb ) | Event will be fired before the effects are updated.                       |\n| `updateEffects`       | (liquidweb ) | Event will be fired when the effects are updated.                         |\n| `afterUpdateEffects`  | (liquidweb ) | Event will be fired after the effects are updated.                        |\n| `mouseEnter`          | (liquidweb ) | Event will be fired when the mouse enters the element.                    |\n| `mouseLeave`          | (liquidweb ) | Event will be fired when the mouse leaves the element.                    |\n| `mouseMove`           | (liquidweb ) | Event will be fired when the mouse moves over the element.                |\n| `mouseDown`           | (liquidweb ) | Event will be fired when the mouse button is pressed down on the element. |\n| `mouseUp`             | (liquidweb ) | Event will be fired when the mouse button is released over the element.   |\n| `click`               | (liquidweb ) | Event will be fired when the element is clicked.                          |\n\n\u003e Note that with `liquidweb.on('init')` syntax it will work only in case you set `init: false` parameter.\n\n```javascript\nconst liquidweb = new LiquidWeb('[data-liquid]', {\n  init: false,\n});\n\nliquidweb.on('init', (liquidweb) =\u003e {\n  console.log('LiquidWeb initialized', liquidweb);\n});\n\nliquidweb.init();\n```\n\nor\n\n```javascript\nconst liquidweb = new LiquidWeb('[data-liquid]', {\n  on: {\n    init: (liquidweb) =\u003e {\n      console.log('LiquidWeb initialized', liquidweb);\n    },\n  },\n});\n```\n\n## Static Methods\n\n| Static Method   | Arguments                 | Description                                                                                                                                                     |\n| --------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `__instances__` | -                         | Returns an array of all LiquidWeb instances.                                                                                                                    |\n| `init`          | el: HTMLElement           | Initializes the LiquidWeb effect on a given element.                                                                                                            |\n| `getInstance`   | el: HTMLElement \\| string | Retrieves the LiquidWeb instance for a given element or selector.\u003cbr\u003e You can also get a copy as follows: `document.querySelector('[data-liquid]')?.liquidWeb;` |\n\n## My other works\n\n[Prismium](https://prismify.in) - A modern JavaScript accordion library with smooth animations. Easily integrates with React, Vue, and vanilla JavaScript.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoirodev%2Fliquid-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoirodev%2Fliquid-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoirodev%2Fliquid-web/lists"}