{"_id":"@elysian256/noise-wave-flow","_rev":"2-85fd8292ba0c7cd920980cdc1d57c915","name":"@elysian256/noise-wave-flow","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@elysian256/noise-wave-flow","version":"0.1.0","keywords":["canvas","animation","noise","flow-field","particle","react","interactive"],"author":{"url":"https://github.com/rohit-sagar256","name":"Rohit Sagar"},"license":"MIT","_id":"@elysian256/noise-wave-flow@0.1.0","maintainers":[{"name":"elysian256","email":"dev.rohit256@gmail.com"}],"contributors":[{"url":"https://multioriontech.com","name":"Multioriontech"}],"homepage":"https://github.com/rohit-sagar256/noise-wave-flow#readme","bugs":{"url":"https://github.com/rohit-sagar256/noise-wave-flow/issues"},"dist":{"shasum":"f387529e4eaa5795f265a9ddad96a9869a4c1c0f","tarball":"https://registry.npmjs.org/@elysian256/noise-wave-flow/-/noise-wave-flow-0.1.0.tgz","fileCount":19,"integrity":"sha512-0JlQh9bsePDjll4SIzRylgivuASnSfwRC+SzSuliaXoYme1p5l9nAZd8/iIM+7eOJH5uTcqNraVyQV5IG/DtWw==","signatures":[{"sig":"MEYCIQCJogV5VGcpJ8Ji0kPUlhFIoOsXC4xoRb8KwD+ekl1kpgIhAMbfYFa2Dz92LSTL84CJf52RTEJzrr2v39awfpLW5WUg","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@elysian256%2fnoise-wave-flow@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":77258},"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"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"}},"gitHead":"0c1810149ade00aedbd9c1fe8a4bd3b41b8d0227","scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"elysian256","email":"dev.rohit256@gmail.com"},"repository":{"url":"git+https://github.com/rohit-sagar256/noise-wave-flow.git","type":"git"},"_npmVersion":"10.8.2","description":"Organic noise-field canvas animation with wind-cursor effect. Framework-agnostic with a React hook included.","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.16"},"peerDependencies":{"react":">=17"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/noise-wave-flow_0.1.0_1781413760077_0.20237642667464284","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@elysian256/noise-wave-flow","version":"0.2.0","description":"Organic noise-field canvas animation with wind-cursor effect. Framework-agnostic with a React hook included.","keywords":["canvas","animation","noise","flow-field","particle","react","interactive"],"license":"MIT","author":{"name":"Rohit Sagar","url":"https://github.com/rohit-sagar256"},"contributors":[{"name":"Multioriontech","url":"https://multioriontech.com"}],"repository":{"type":"git","url":"git+https://github.com/rohit-sagar256/noise-wave-flow.git"},"homepage":"https://github.com/rohit-sagar256/noise-wave-flow#readme","bugs":{"url":"https://github.com/rohit-sagar256/noise-wave-flow/issues"},"type":"module","types":"./dist/index.d.ts","main":"./dist/index.cjs","module":"./dist/index.js","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"}},"scripts":{"build":"vite build","dev":"vite build --watch","demo":"vite demo"},"peerDependencies":{"react":">=17"},"peerDependenciesMeta":{"react":{"optional":true}},"devDependencies":{"vite":"^8.0.16"},"_id":"@elysian256/noise-wave-flow@0.2.0","gitHead":"22058d76e139d9a460946524581242b45cb7873a","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-K8Gur6w5+ibJkvVo+JBoWYjqjbBtilUZ6hj0Yslz6PQZ2qkU25qUjzuhKGHSzfQ9Kaw8/5XmrvT/e0ohlGYH1A==","shasum":"fde1556074284a403f95aa8d231fc1eb63cd75f4","tarball":"https://registry.npmjs.org/@elysian256/noise-wave-flow/-/noise-wave-flow-0.2.0.tgz","fileCount":19,"unpackedSize":85150,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@elysian256%2fnoise-wave-flow@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHzz1Sxw1VlhM4YIOYUofaYkjnEgAvouByfT2kBcav5FAiAQP0pQ5z7ag2nakz3Oh/AWTM52cGEUMqpyqyBZZJbPGw=="}]},"_npmUser":{"name":"elysian256","email":"dev.rohit256@gmail.com"},"directories":{},"maintainers":[{"name":"elysian256","email":"dev.rohit256@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/noise-wave-flow_0.2.0_1781416319250_0.5164205734847012"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-14T05:09:19.872Z","modified":"2026-06-14T05:51:59.649Z","0.1.0":"2026-06-14T05:09:20.199Z","0.2.0":"2026-06-14T05:51:59.391Z"},"bugs":{"url":"https://github.com/rohit-sagar256/noise-wave-flow/issues"},"author":{"name":"Rohit Sagar","url":"https://github.com/rohit-sagar256"},"license":"MIT","homepage":"https://github.com/rohit-sagar256/noise-wave-flow#readme","keywords":["canvas","animation","noise","flow-field","particle","react","interactive"],"repository":{"type":"git","url":"git+https://github.com/rohit-sagar256/noise-wave-flow.git"},"description":"Organic noise-field canvas animation with wind-cursor effect. Framework-agnostic with a React hook included.","contributors":[{"name":"Multioriontech","url":"https://multioriontech.com"}],"maintainers":[{"name":"elysian256","email":"dev.rohit256@gmail.com"}],"readme":"# noise-wave-flow\n\nOrganic noise-field canvas animation with a wind-cursor effect. Framework-agnostic with a React hook included.\n\n---\n\n## Install\n\n```bash\nnpm install @elysian256/noise-wave-flow\n```\n\n---\n\n## Usage\n\n### Vanilla JS\n\n```js\nimport { createNoiseFlow } from '@elysian256/noise-wave-flow';\n\nconst canvas    = document.getElementById('my-canvas');\nconst container = document.getElementById('my-section');\n\nconst flow = createNoiseFlow(canvas, container, {\n  color: '255,255,255',\n  alpha: 0.14,\n});\n\n// Later — live-update a config value without restarting\nflow.update({ alpha: 0.08 });\n\n// Cleanup\nflow.destroy();\n```\n\n**Auto-inject canvas** (no canvas element in HTML required):\n\n```js\nimport { mountNoiseFlow } from '@elysian256/noise-wave-flow';\n\nconst flow = mountNoiseFlow(document.getElementById('hero'), {\n  color: '255,255,255',\n});\n\nflow.destroy(); // also removes the injected canvas\n```\n\n---\n\n### React\n\n```jsx\nimport { useNoiseFlow } from '@elysian256/noise-wave-flow/react';\n\nfunction Hero() {\n  const { canvasRef, containerRef } = useNoiseFlow({\n    color: '255,255,255',\n    alpha: 0.14,\n  });\n\n  return (\n    <section\n      ref={containerRef}\n      style={{ position: 'relative', overflow: 'hidden' }}\n    >\n      <canvas\n        ref={canvasRef}\n        style={{\n          position: 'absolute',\n          inset: 0,\n          width: '100%',\n          height: '100%',\n          pointerEvents: 'none',\n        }}\n      />\n      <div style={{ position: 'relative', zIndex: 1 }}>\n        {/* your content */}\n      </div>\n    </section>\n  );\n}\n```\n\n**Live-updating config:**\n\n```jsx\nconst { canvasRef, containerRef, update } = useNoiseFlow({ alpha: 0.14 });\n\n// Toggle to a dimmer field on some event\nupdate({ alpha: 0.06 });\n```\n\n---\n\n### Spatial continuity (multiple canvases sharing one field)\n\nIf you have two canvases — e.g. a hero and a sidebar panel — you can make them\nrender the same continuous wave field by offsetting the noise coordinates:\n\n```js\n// Panel canvas evaluates the field at its real screen position\nconst panel = createNoiseFlow(panelCanvas, panelEl, {\n  worldOffset: 'screen',  // reads getBoundingClientRect() on resize\n  trackMouse: false,       // no wind in the panel, pure noise\n  steps: 3,\n  stepLen: 4,\n});\n```\n\nOr with a fixed offset:\n\n```js\nconst panel = createNoiseFlow(panelCanvas, panelEl, {\n  worldOffset: { x: 840, y: 72 },\n});\n```\n\nOr dynamically, for a scrolling container:\n\n```js\nconst panel = createNoiseFlow(panelCanvas, panelEl, {\n  worldOffset: () => {\n    const r = panelCanvas.getBoundingClientRect();\n    return { x: r.left, y: r.top };\n  },\n});\n```\n\n---\n\n## Config reference\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `spacing` | `number` | `28` | Grid-point distance in px |\n| `steps` | `number` | `5` | Streamline steps per seed point |\n| `stepLen` | `number` | `8` | Px per step at full mouse intensity |\n| `idleStep` | `number` | `2.5` | Px per step at idle — keeps dots visibly breathing |\n| `windRadius` | `number` | `200` | Px radius of wind influence around cursor |\n| `mouseLerp` | `number` | `0.07` | Mouse position lerp speed (0–1, lower = smoother) |\n| `windLerp` | `number` | `0.18` | Wind velocity lerp speed (0–1) |\n| `intensityLerp` | `number` | `0.055` | Mouse-hover fade-in / fade-out speed (0–1) |\n| `color` | `string` | `'255,255,255'` | RGB components for `rgba()`, e.g. `'37,99,235'` for blue |\n| `alpha` | `number` | `0.3` | Base opacity at idle |\n| `trackMouse` | `boolean` | `true` | Enable wind-cursor effect |\n| `trackScroll` | `boolean` | `true` | Enable scroll-drift on streamlines |\n| `worldOffset` | `{x,y}` \\| `() => {x,y}` \\| `'screen'` | `null` | Offset noise coordinates for spatial continuity across canvases |\n| `gradient` | `string[]` | `null` | Array of RGB strings for a linear gradient, e.g. `['99,102,241','236,72,153']`. Overrides `color` when set |\n| `gradientAngle` | `number` | `135` | Gradient direction in degrees (0 = left→right, 90 = top→bottom) |\n\n---\n\n## How it works\n\nEach frame, a grid of seed points is stepped through a vector field defined by\n4-octave sine-based noise. At idle the steps are very short (dots breathe\nsoftly). When the mouse enters, two things happen:\n\n1. **Wind** — `mouseIntensity` lerps to 1, growing the step length into full\n   streamlines. The mouse velocity is derived from the position lerp delta and\n   used to bend lines within `windRadius` in the direction of cursor movement.\n\n2. **Brightness** — lines near the cursor are batched into a separate draw call\n   at slightly higher opacity.\n\nTouch is also tracked so the wind effect works on mobile.\n\n---\n\n## Credits\n\nBuilt by [Rohit Sagar](https://github.com/rohit-sagar256) at [Multioriontech](https://multioriontech.com).  \nOriginally created for the [Multioriontech website](https://multioriontech.com).\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}