{"_id":"@cyprien_jaquier/webgl-fluid","name":"@cyprien_jaquier/webgl-fluid","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cyprien_jaquier/webgl-fluid","PascalCasedName":"WebGLFluid","type":"commonjs","version":"1.0.0","private":false,"description":"ESM support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation.","author":{"name":"Cyprien Jaquier","url":"https://github.com/Cyprien-png"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Cyprien-png/webgl-fluid.git"},"keywords":["background","fluid","gpu","navier-stokes","simulation","webgl"],"exports":{".":{"import":{"default":"./dist/webgl-fluid.mjs"},"require":{"default":"./dist/webgl-fluid.umd.js"}},"./*":"./*"},"main":"./dist/webgl-fluid.umd.js","module":"./dist/webgl-fluid.mjs","unpkg":"./dist/webgl-fluid.umd.js","jsdelivr":"./dist/webgl-fluid.umd.js","devDependencies":{"@antfu/eslint-config":"^3.7.3","@commitlint/cli":"^19.5.0","@commitlint/config-conventional":"^19.5.0","case-police":"^0.7.0","cnpm":"^9.4.0","cross-spawn":"^7.0.3","del":"^8.0.0","eslint-plugin-format":"^0.1.2","esno":"^4.8.0","kolorist":"^1.8.0","license-checker":"^25.0.1","lint-staged":"^15.2.10","only-allow":"^1.2.1","open":"^10.1.0","prompts":"^2.4.2","publint":"^0.2.11","rollup-plugin-visualizer":"^5.12.0","semver":"^7.6.3","simple-git-hooks":"^2.11.1","vite":"^4","vitepress":"^1.4.0"},"simple-git-hooks":{"pre-commit":"pnpm lint-staged","commit-msg":"npx --no -- commitlint --edit ${1}"},"lint-staged":{"*.md":"case-police --fix","*.{js,mjs,cjs,jsx,ts,mts,cts,tsx,vue,json,md,html,css,scss,sass}":"eslint --ignore-pattern stats.html --cache --fix"},"scripts":{"build":"vite build","license-scan":"license-checker --summary --out ./depencency-licenses.txt","serve":"vite preview","doc":"vitepress dev --open /README","release":"esno ./scripts/release.mts","sync-to-cnpm":"npx cnpm sync && curl -L https://npmmirror.com/sync/webgl-fluid","lint":"eslint \"**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx,vue,json,md,html,css,scss,sass}\" --ignore-pattern stats.html","lint:fix":"eslint \"**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx,vue,json,md,html,css,scss,sass}\" --ignore-pattern stats.html --fix","preinstall":"node -e \"if (process.env.INIT_CWD === process.cwd()) { process.exit(1) }\" || npx only-allow pnpm","postinstall":"node -e \"if (process.env.INIT_CWD === process.cwd()) { process.exit(1) }\" || (npx simple-git-hooks && pnpm license-scan)"},"_id":"@cyprien_jaquier/webgl-fluid@1.0.0","bugs":{"url":"https://github.com/Cyprien-png/webgl-fluid/issues"},"homepage":"https://github.com/Cyprien-png/webgl-fluid#readme","_integrity":"sha512-M5gfitNIgVEP+Dn2wEKSAZnqfNv1pQpFNuJ+QywPC4h+JVfBgr+PyGF3MAG58Lwo9hjpr3dMJRBfpBHYJ+Nw2Q==","_resolved":"/tmp/232bf75f709f319f2a9baeae3925dd2d/cyprien_jaquier-webgl-fluid-1.0.0.tgz","_from":"file:cyprien_jaquier-webgl-fluid-1.0.0.tgz","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-M5gfitNIgVEP+Dn2wEKSAZnqfNv1pQpFNuJ+QywPC4h+JVfBgr+PyGF3MAG58Lwo9hjpr3dMJRBfpBHYJ+Nw2Q==","shasum":"f9d1a086514e8143b9f212a898213508e4736430","tarball":"https://registry.npmjs.org/@cyprien_jaquier/webgl-fluid/-/webgl-fluid-1.0.0.tgz","fileCount":7,"unpackedSize":549692,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDFesc5ffAs2mv40AX26LcjsJzr0S06DHMDe2R0tcw44QIhAMF7bAn4ZrFLuAzPtc1+fNcEQHIN+BctJxN344jP4Hyc"}]},"_npmUser":{"name":"cyprien_jaquier","email":"cyprien@jaquier.dev"},"directories":{},"maintainers":[{"name":"cyprien_jaquier","email":"cyprien@jaquier.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/webgl-fluid_1.0.0_1777831625953_0.9966945653619361"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-03T18:07:05.840Z","1.0.0":"2026-05-03T18:07:06.185Z","modified":"2026-05-03T18:07:06.409Z"},"maintainers":[{"name":"cyprien_jaquier","email":"cyprien@jaquier.dev"}],"description":"ESM support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation.","homepage":"https://github.com/Cyprien-png/webgl-fluid#readme","keywords":["background","fluid","gpu","navier-stokes","simulation","webgl"],"repository":{"type":"git","url":"git+https://github.com/Cyprien-png/webgl-fluid.git"},"author":{"name":"Cyprien Jaquier","url":"https://github.com/Cyprien-png"},"bugs":{"url":"https://github.com/Cyprien-png/webgl-fluid/issues"},"license":"MIT","readme":"

\n \n WebGL Fluid \"version\"\n \n

\n\n

\n ESM support for WebGL-Fluid-Simulation.\n

\n\n

\n \"playground\"\n
\n \n \"minzipped\n \"jsDelivr\n \"npm\n
\n \"created\n \"code\n \"conventional\n \"semantic\n \"Start\n

\n\n
\n\n## Features\n\n- Hover to activate by default, can also be click\n- Control whether to generate **configurable number** of random splats at **initialization** and at **intervals**\n- Background image\n\n
\n\n## Install\n\n### NPM\n\n```shell\nnpm i webgl-fluid\n```\n\n### CDN + ESM\n\n```html\n\n\n \n \n \n\n \n \n \n \n \n\n```\n\n### CDN + IIFE\n\n```html\n\n\n \n \n \n\n \n \n \n \n \n\n```\n\n
\n\n## Options\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n TRIGGER: 'hover',\n IMMEDIATE: true,\n AUTO: false,\n INTERVAL: 3000,\n SIM_RESOLUTION: 128,\n DYE_RESOLUTION: 1024,\n CAPTURE_RESOLUTION: 512,\n DENSITY_DISSIPATION: 1,\n VELOCITY_DISSIPATION: 0.3,\n PRESSURE: 0.8,\n PRESSURE_ITERATIONS: 20,\n CURL: 30,\n SPLAT_RADIUS: 0.35,\n SPLAT_FORCE: 6000,\n SPLAT_COUNT: Number.parseInt(Math.random() * 20) + 5,\n SHADING: true,\n COLORFUL: true,\n COLOR_UPDATE_SPEED: 10,\n PAUSED: false,\n BACK_COLOR: { r: 0, g: 0, b: 0 },\n DEFAULT_COLOR: { r: 0.01, g: 0.01, b: 0.01 },\n TRANSPARENT: false,\n BLOOM: true,\n BLOOM_ITERATIONS: 8,\n BLOOM_RESOLUTION: 256,\n BLOOM_INTENSITY: 0.8,\n BLOOM_THRESHOLD: 0.6,\n BLOOM_SOFT_KNEE: 0.7,\n SUNRAYS: true,\n SUNRAYS_RESOLUTION: 196,\n SUNRAYS_WEIGHT: 1.0,\n})\n```\n\n
\n\n## Trigger Mode\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n TRIGGER: 'hover', // Can be change to 'click'\n})\n```\n\n
\n\n## Auto Splating at Initialization\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n IMMEDIATE: true,\n})\n```\n\n
\n\n## Auto Splating at Intervals\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n AUTO: true, // Whether to enable auto-splating\n INTERVAL: 3000, // The time (in milliseconds) the timer should delay in between auto-splating\n})\n```\n\n
\n\n## Set the Splats' Count\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n SPLAT_COUNT: Number.parseInt(Math.random() * 20) + 5,\n})\n```\n\n
\n\n## Default dye color (DEFAULT_COLOR)\n\nDEFAULT_COLOR is the RGB used for **pointer** splats (hover). The library’s own default is `{ r: 0.09, g: 0.12, b: 0.15 }`. It is only applied when you do **not** pass DEFAULT_COLOR in your options.\n\n**Omit `DEFAULT_COLOR`** pointer splats use the built-in default above, and **each mouse/touch down** picks a **new random** dye color (`generateColor()`).\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n DEFAULT_COLOR: { r: 0.09, g: 0, b: 0 },\n})\n```\n\nStable single color for hover and click (pair with `COLORFUL: false` if you do not want the palette to drift over time):\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n COLORFUL: false,\n DEFAULT_COLOR: { r: 0.1, g: 0.05, b: 0.2 },\n})\n```\n\n
\n\n## Background Image\n\nCSS\n\n```css\ncanvas {\n width: 100vw;\n height: 100vh;\n background-image: url('xxx.png');\n background-size: 100% 100%;\n}\n```\n\nJS\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n TRANSPARENT: true\n})\n```\n\n
\n\n## Background Color\n\nBackground color will be whitened by `13` on each RGB color values when `options.BLOOM` is `true`.\nSet it to `false` to get pure color.\n\n
\n\n## Example\n\n### Vue 3\n\n```vue\n\n\n\n\n\n```\n\n### Vue 2\n\n```vue\n\n\n\n\n\n```\n\n### Vanilla JS or Any Other Framework\n\n```html\n\n\n\n\n \n \n \n\n \n \n \n \n\n```\n\n```ts\n// src/index.js\n\nimport WebGLFluid from 'webgl-fluid'\n\nWebGLFluid(document.querySelector('canvas'), {\n // options\n})\n```\n\n
\n\n## Changelog\n\nDetailed changes for each release are documented in the [release notes](https://github.com/cloydlau/webgl-fluid/releases)\n\n
\n","readmeFilename":"README.md","_rev":"1-a2a8cf81713a3be281f6425c041243de"}