{"_id":"@antoineview/grainient","name":"@antoineview/grainient","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@antoineview/grainient","version":"0.1.0","publishConfig":{"access":"public"},"description":"Grainy animated flowing-blob gradients for the web, powered by WebGL.","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"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"sideEffects":false,"scripts":{"dev":"vite","build":"vite build && tsc -p tsconfig.build.json --emitDeclarationOnly","build:demo":"vite build --config vite.demo.config.ts","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest"},"keywords":["gradient","grain","noise","webgl","shader","animation","react"],"author":{"name":"Antoine"},"license":"MIT","peerDependencies":{"react":">=17","react-dom":">=17"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"devDependencies":{"@types/react":"^18.3.0","@types/react-dom":"^18.3.0","happy-dom":"^14.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.5.0","vite":"^5.4.0","vitest":"^2.0.0"},"gitHead":"36af111b5182f7fc385e61507acec820d0e28e7d","_id":"@antoineview/grainient@0.1.0","_nodeVersion":"25.8.2","_npmVersion":"11.11.1","dist":{"integrity":"sha512-dRbJchuKxMZvQzQKfhi8cTu0l9K0ysY9OE+FxxwsBCmkCWtHRdSufNyAkR8DayI0iJCimJ+6+YvlP9a0Hc+ddg==","shasum":"5e2414834af5790e9fc02325f9fd2c57ef1a4bb4","tarball":"https://registry.npmjs.org/@antoineview/grainient/-/grainient-0.1.0.tgz","fileCount":16,"unpackedSize":81850,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDYDknjoWOtC7azmHF0vRjbnoZd9/ZcEv9K+sFRCsGsygIgIlanCWUOwPJdhZ/GQmO6laiv9pzM/spIiUaDjaB1/60="}]},"_npmUser":{"name":"antoineview","email":"florals_thistle_3n@icloud.com"},"directories":{},"maintainers":[{"name":"antoineview","email":"florals_thistle_3n@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/grainient_0.1.0_1777141214688_0.4443767037664659"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-25T18:20:14.613Z","0.1.0":"2026-04-25T18:20:14.823Z","modified":"2026-04-25T18:20:14.990Z"},"maintainers":[{"name":"antoineview","email":"florals_thistle_3n@icloud.com"}],"description":"Grainy animated flowing-blob gradients for the web, powered by WebGL.","keywords":["gradient","grain","noise","webgl","shader","animation","react"],"author":{"name":"Antoine"},"license":"MIT","readme":"# grainient\n\nGrainy animated flowing-blob gradients for the web, powered by a WebGL2 fragment shader.\n\nFramework-agnostic core + a thin React wrapper.\n\n## Install\n\n```sh\nnpm install @antoineview/grainient\n```\n\n## Vanilla usage\n\n```ts\nimport { Grainient } from '@antoineview/grainient';\n\nconst canvas = document.querySelector('canvas')!;\nconst g = new Grainient(canvas, {\n  colors: ['#ff008a', '#7928ca', '#2af598', '#009efd'],\n  speed: 1,\n  grain: 0.15,\n  scale: 1,\n  seed: 0,\n});\n\ng.update({ colors: ['#000', '#fff'] });\ng.pause();\ng.start();\ng.destroy();\n```\n\n## React usage\n\n```tsx\nimport { Grainient } from '@antoineview/grainient/react';\n\nexport function Hero() {\n  return (\n    <Grainient\n      colors={['#ff008a', '#7928ca', '#2af598']}\n      speed={1}\n      grain={0.2}\n      style={{ width: '100%', height: 480 }}\n    />\n  );\n}\n```\n\n`react` and `react-dom` are peer dependencies.\n\n## Options\n\n| Option    | Type       | Default                                                   | Description                              |\n| --------- | ---------- | --------------------------------------------------------- | ---------------------------------------- |\n| `colors`  | `string[]` | `['#ff008a', '#7928ca', '#2af598', '#009efd']`            | 2–8 hex colors (`#rgb` or `#rrggbb`)     |\n| `speed`   | `number`   | `1`                                                       | Animation speed multiplier               |\n| `grain`   | `number`   | `0.15`                                                    | Grain intensity, `0`–`1`                 |\n| `scale`   | `number`   | `1`                                                       | Blob size — larger = softer, broader regions; smaller = tighter color pockets |\n| `mesh`    | `number`   | `1`                                                       | Meshyness — `0` rigid grid, `1` organic mesh, `2+` wild swirls |\n| `smoothness` | `number` | `1`                                                       | Shape smoothness — higher = broader, glassier regions; lower = tighter, finer detail |\n| `seed`    | `number`   | `0`                                                       | Offset for deterministic drift           |\n| `autoStart` (vanilla) / `paused` (React) | `boolean` | `true` / `false` | Whether to animate on mount            |\n\n## How it works\n\nA single fullscreen triangle is drawn via `gl_VertexID` (no vertex buffers). The fragment shader computes weighted soft radial falloffs from up to 8 blob centers — each drifting with 2-octave value noise — mixes the colors accordingly, and overlays procedural grain as a per-pixel luma jitter.\n\nThe render loop auto-pauses when the tab is hidden or the canvas scrolls offscreen.\n\n## Browser support\n\nRequires WebGL2 (Chrome 56+, Firefox 51+, Safari 15+, Edge 79+).\n\n## Licence\n\nMIT.\n","readmeFilename":"README.md","_rev":"1-63685c8c3e623a804f199de19a8d41c4"}