{"_id":"@danixts/liquid-gooey","_rev":"4-71b524967c992b6b3016f2c8783e674f","name":"@danixts/liquid-gooey","dist-tags":{"latest":"0.5.0"},"versions":{"0.1.0":{"name":"@danixts/liquid-gooey","version":"0.1.0","keywords":["astro","vue","gooey","liquid","svg-filter","framework-agnostic"],"author":{"url":"original","name":"Jakub Antalik"},"license":"MIT","_id":"@danixts/liquid-gooey@0.1.0","maintainers":[{"name":"danyjs","email":"codedany789@gmail.com"}],"homepage":"https://danixts.github.io/jakub-antalik/gooey/","bugs":{"url":"https://github.com/danixts/jakub-antalik/issues"},"dist":{"shasum":"727cfdb9307faba9e4290e17a96b60ceaba46138","tarball":"https://registry.npmjs.org/@danixts/liquid-gooey/-/liquid-gooey-0.1.0.tgz","fileCount":9,"integrity":"sha512-58rygeiVKMNs94Orrr/S8z4WDtx3d+4mtpaHk2HxwvczfuLrz2HBAalaCKwmrijwbq2v5LxvvAVC7Kl4Mu5OLQ==","signatures":[{"sig":"MEUCIQCUjR/AtA+oK6OT1cM6JV0KHOTT1DEB1eSnzl/14mgxBwIgDZ4Dqs7f3gMFFxHqPRmjwSu5jO9a2mKMp8Tk10m5EkU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":453829},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"bf3faae06d22a3d1dbb14890b47f88cb2756b3d7","scripts":{"build":"tsup src/index.ts --format esm,cjs --dts --sourcemap --clean","typecheck":"tsc --noEmit"},"_npmUser":{"name":"danyjs","email":"codedany789@gmail.com"},"repository":{"url":"git+https://github.com/danixts/jakub-antalik.git","type":"git","directory":"packages/liquid-gooey"},"_npmVersion":"11.16.0","description":"Framework-free liquid UI effects for Astro and Vue","directories":{},"sideEffects":false,"_nodeVersion":"24.18.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","typescript":"^6.0.3"},"_npmOperationalInternal":{"tmp":"tmp/liquid-gooey_0.1.0_1786687479906_0.5359192323011879","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@danixts/liquid-gooey","version":"0.2.0","keywords":["astro","vue","gooey","liquid","svg-filter","framework-agnostic"],"author":{"url":"original","name":"Jakub Antalik"},"license":"MIT","_id":"@danixts/liquid-gooey@0.2.0","maintainers":[{"name":"danyjs","email":"codedany789@gmail.com"}],"homepage":"https://danixts.github.io/jakub-antalik/gooey/","bugs":{"url":"https://github.com/danixts/jakub-antalik/issues"},"dist":{"shasum":"3fbc3623e6a8bcda6cfe0a10f9d0e0808b789ac6","tarball":"https://registry.npmjs.org/@danixts/liquid-gooey/-/liquid-gooey-0.2.0.tgz","fileCount":19,"integrity":"sha512-BRpv2hYmpPWy/0PnOmu+5CQS7UGcJius5TT2y+t0ogiLUTJVMIYBujzdiBEyZ5khaCA0ys5+3uTBo3eZF6RmMw==","signatures":[{"sig":"MEUCIQCKx1hQUlFN/MiaOak1quWiIQEBPglkyU7YMT0UvzMXkQIgTyFsSlqdGeO4BHJL/yp1evgYfBOFNSkCA3ZedgCm7DI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danixts%2fliquid-gooey@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":699557},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./vue":{"types":"./dist/vue/index.d.ts","import":"./dist/vue/index.js","require":"./dist/vue/index.cjs"}},"gitHead":"2aab59bdc513f6c94e6a8debe4b0152aa7a88b4a","scripts":{"build":"tsup src/index.ts src/vue/index.ts --format esm,cjs --dts --sourcemap --clean --external vue","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:852001b8-faa8-47ac-a55f-702ddb63b08e"}},"repository":{"url":"git+https://github.com/danixts/jakub-antalik.git","type":"git","directory":"packages/liquid-gooey"},"_npmVersion":"11.19.0","description":"Framework-free liquid UI effects for Astro and Vue","directories":{},"sideEffects":false,"_nodeVersion":"22.23.2","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.41","tsup":"^8.5.0","typescript":"^6.0.3"},"peerDependencies":{"vue":">=3.5.0 <4"},"peerDependenciesMeta":{"vue":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/liquid-gooey_0.2.0_1786689404998_0.5123731357986785","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@danixts/liquid-gooey","version":"0.3.0","keywords":["astro","vue","gooey","liquid","svg-filter","framework-agnostic"],"author":{"url":"original","name":"Jakub Antalik"},"license":"MIT","_id":"@danixts/liquid-gooey@0.3.0","maintainers":[{"name":"danyjs","email":"codedany789@gmail.com"}],"homepage":"https://danixts.github.io/jakub-antalik/gooey/","bugs":{"url":"https://github.com/danixts/jakub-antalik/issues"},"dist":{"shasum":"9fd3d5378bbb9669ddbb57e46cfa4e36d70c223c","tarball":"https://registry.npmjs.org/@danixts/liquid-gooey/-/liquid-gooey-0.3.0.tgz","fileCount":24,"integrity":"sha512-0vqeSIeR9Y6L3Oq3hxN4wnV7D2ccGR0hRzBOsq0CqhCC+uQIcbjEDBy+l3X1Wigol4Kw6XirHDTbtNY075cR+A==","signatures":[{"sig":"MEQCID1kS2BNdygbZFR1ZybLWYpuhSnh4bSc2F2X2R3f5QdaAiAcxJc+E+G07Q7CeY1GGoOf6ygtaPtAgPcGYKR3r4mROw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danixts%2fliquid-gooey@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":703861},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./vue":{"types":"./dist/vue/index.d.ts","import":"./dist/vue/index.js","require":"./dist/vue/index.cjs"},"./astro":{"types":"./src/astro/index.ts","default":"./src/astro/index.ts"}},"gitHead":"a8a16184e84bd112d7282b9a47ad7022a51fe45d","scripts":{"build":"tsup src/index.ts src/vue/index.ts --format esm,cjs --dts --sourcemap --clean --external vue","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:852001b8-faa8-47ac-a55f-702ddb63b08e"}},"repository":{"url":"git+https://github.com/danixts/jakub-antalik.git","type":"git","directory":"packages/liquid-gooey"},"_npmVersion":"11.19.0","description":"Framework-free liquid UI effects for Astro and Vue","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.41","tsup":"^8.5.0","astro":"^7.2.2","typescript":"^6.0.3"},"peerDependencies":{"vue":">=3.5.0 <4","astro":">=5.0.0 <8"},"peerDependenciesMeta":{"vue":{"optional":true},"astro":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/liquid-gooey_0.3.0_1786692411989_0.5737899022170319","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@danixts/liquid-gooey","version":"0.5.0","description":"Framework-free liquid UI effects for Astro and Vue","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./vue":{"types":"./dist/vue/index.d.ts","import":"./dist/vue/index.js","require":"./dist/vue/index.cjs"},"./astro":{"types":"./src/astro/index.ts","default":"./src/astro/index.ts"},"./astro/client":{"types":"./src/astro/client.ts","default":"./src/astro/client.ts"}},"sideEffects":false,"scripts":{"build":"tsup src/index.ts src/vue/index.ts --format esm,cjs --dts --sourcemap --clean --external vue","typecheck":"tsc --noEmit"},"devDependencies":{"astro":"^7.2.2","tsup":"^8.5.0","typescript":"^6.0.3","vue":"^3.5.41"},"peerDependencies":{"astro":">=5.0.0 <8","vue":">=3.5.0 <4"},"peerDependenciesMeta":{"astro":{"optional":true},"vue":{"optional":true}},"keywords":["astro","vue","gooey","liquid","svg-filter","framework-agnostic"],"author":{"name":"Jakub Antalik","url":"original"},"license":"MIT","homepage":"https://danixts.github.io/astro-vue-migrations/gooey/","bugs":{"url":"https://github.com/danixts/astro-vue-migrations/issues"},"publishConfig":{"access":"public","provenance":true,"registry":"https://registry.npmjs.org/"},"repository":{"type":"git","url":"git+https://github.com/danixts/astro-vue-migrations.git","directory":"packages/liquid-gooey"},"gitHead":"ea1845d99d44483fcd30769a5d61330bf8c8df02","_id":"@danixts/liquid-gooey@0.5.0","_nodeVersion":"22.23.2","_npmVersion":"11.19.0","dist":{"integrity":"sha512-7X8ofaoF4ntXA3JnNJS0CC64PuqizWFVC3qrL2TOStjCyQCGpIBPF5HnwLhJGqjLXx1JhzR/anAOxuKSj/+Axw==","shasum":"c13d0ec5a1ab66b335f3a5343949a64b632a66ff","tarball":"https://registry.npmjs.org/@danixts/liquid-gooey/-/liquid-gooey-0.5.0.tgz","fileCount":26,"unpackedSize":709662,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@danixts%2fliquid-gooey@0.5.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDAeTrN7/RyeLg0OP1eUU2kCwF+IK4orvmGBgF7pe1viQIhAOpVcTDDmz5Wzj1VTUW3TzyMDfAVbuYMvm8OZLvHKC2/"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:47532d6b-6a85-48d9-9f15-65a755f02537"}},"directories":{},"maintainers":[{"name":"danyjs","email":"codedany789@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/liquid-gooey_0.5.0_1787563066090_0.43275986598174443"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-14T06:04:39.727Z","modified":"2026-08-24T09:17:46.552Z","0.1.0":"2026-08-14T06:04:40.043Z","0.2.0":"2026-08-14T06:36:45.203Z","0.3.0":"2026-08-14T07:26:52.165Z","0.5.0":"2026-08-24T09:17:46.232Z"},"bugs":{"url":"https://github.com/danixts/astro-vue-migrations/issues"},"author":{"name":"Jakub Antalik","url":"original"},"license":"MIT","homepage":"https://danixts.github.io/astro-vue-migrations/gooey/","keywords":["astro","vue","gooey","liquid","svg-filter","framework-agnostic"],"repository":{"type":"git","url":"git+https://github.com/danixts/astro-vue-migrations.git","directory":"packages/liquid-gooey"},"description":"Framework-free liquid UI effects for Astro and Vue","maintainers":[{"name":"danyjs","email":"codedany789@gmail.com"}],"readme":"# @danixts/liquid-gooey\n\nZero-dependency liquid UI effects for native browser APIs, Astro, and Vue.\n\n[Playground](https://danixts.github.io/astro-vue-migrations/gooey/) · [npm](https://www.npmjs.com/package/@danixts/liquid-gooey) · [Source](https://github.com/danixts/astro-vue-migrations)\n\n```bash\nnpm install @danixts/liquid-gooey\n```\n\n## Native API\n\n```ts\nimport { createLiquidGroup } from '@danixts/liquid-gooey'\n\nconst group = createLiquidGroup(document.querySelector('[data-liquid]'), {\n  blur: 8,\n  contrast: 18,\n  fill: '#8b5cf6',\n})\n\nconst item = group.add(document.querySelector('[data-liquid-item]'), {\n  effect: 'move',\n  move: { springiness: 0.7, wobble: 0.65, stretch: 0.6 },\n})\n\nitem.update({ x: 120, transition: 'bouncy' })\ngroup.destroy()\n```\n\nEach group owns an isolated SVG surface, observer engine, and item registry. Multiple accounts, widgets, or groups can run on the same page without shared state.\n\n## Effects\n\n- Morph: merge nearby items and tune speed, bounce, content blur, and bridge growth\n- Shape: evolve bounds and corner radii through a spring\n- Move: springiness, wobble, stretch, trail, and advanced motion values\n- Dissolve: noise style, warp, pull, gravity, flow, detail, strength, fade, and release\n- Group surface: blur, contrast, fill, shadow, and filter padding\n\n## Vue 3\n\n```vue\n<script setup lang=\"ts\">\nimport { LiquidGroup, LiquidItem } from '@danixts/liquid-gooey/vue'\n</script>\n\n<template>\n  <LiquidGroup :blur=\"8\" :contrast=\"18\" fill=\"#8b5cf6\">\n    <LiquidItem as=\"button\" :x=\"-52\" transition=\"bouncy\">One</LiquidItem>\n    <LiquidItem as=\"button\" :x=\"52\" transition=\"bouncy\">Two</LiquidItem>\n  </LiquidGroup>\n</template>\n```\n\n`LiquidGroup` and `LiquidItem` map reactive props to isolated native controllers and clean them up automatically. Vue remains an optional peer dependency.\n\n## Astro\n\n```astro\n---\nimport { LiquidGroup, LiquidItem } from '@danixts/liquid-gooey/astro'\n---\n\n<LiquidGroup class=\"group\" blur={8} contrast={18} fill=\"#8b5cf6\">\n  <LiquidItem as=\"button\" x={-52} transition=\"bouncy\" type=\"button\">\n    One\n  </LiquidItem>\n  <LiquidItem as=\"button\" x={52} transition=\"bouncy\" type=\"button\">\n    Two\n  </LiquidItem>\n</LiquidGroup>\n```\n\nThe Astro group discovers its declarative items, creates one isolated native controller, and cleans up automatically during view transitions.\n\n### Interactive Astro UI\n\nAstro components stay declarative while typed client helpers update their native controllers. No framework island is required.\n\n```astro\n---\nimport { LiquidGroup, LiquidItem } from '@danixts/liquid-gooey/astro'\n---\n\n<LiquidGroup class=\"menu\" blur={7} contrast={19} fill=\"#fff\">\n  <LiquidItem as=\"button\" id=\"action\" transition=\"bouncy\">Add</LiquidItem>\n  <LiquidItem as=\"button\" id=\"trigger\">Toggle</LiquidItem>\n</LiquidGroup>\n\n<script>\n  import { updateLiquidItem } from '@danixts/liquid-gooey/astro/client'\n\n  const action = document.querySelector<HTMLElement>('#action')\n  const trigger = document.querySelector<HTMLButtonElement>('#trigger')\n  let open = false\n\n  trigger?.addEventListener('click', () => {\n    open = !open\n    if (action)\n      updateLiquidItem(action, {\n        x: open ? 72 : 0,\n        y: open ? -48 : 0,\n        transition: 'bouncy',\n      })\n  })\n</script>\n```\n\nThe `@danixts/liquid-gooey/astro/client` subpath exports:\n\n- `updateLiquidItem(element, options)`\n- `updateLiquidGroup(element, options)`\n- `wakeLiquidGroup(element)`\n\nThese helpers use bubbling typed events, so multiple groups can coexist without shared state or controller lookups in application code.\n\n## UI recipes\n\nThe playground includes production-shaped Astro and Vue examples for an action menu, email composer, notification switch, styled slider, and quantity stepper. Each example uses real buttons, inputs, labels, outputs, keyboard focus, and native form validation rather than decorative-only elements.\n\n## Credits\n\nIndependent native port of [Liquid Gooey by Jakub Antalik](https://github.com/Jakubantalik/Libraries/tree/main/packages/liquid-gooey). It is not an official fork or endorsed by the original author. The original MIT copyright and license are preserved in this package.\n","readmeFilename":"README.md"}