{"_id":"@basnijholt/particular-drift","_rev":"2-1330a0a211623abd569c6cb6261ab272","name":"@basnijholt/particular-drift","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@basnijholt/particular-drift","version":"0.1.0","author":{"name":"Colliding Scopes, Bas Nijholt"},"license":"MIT","_id":"@basnijholt/particular-drift@0.1.0","maintainers":[{"name":"basnijholt","email":"basnijholt@gmail.com"}],"homepage":"https://github.com/basnijholt/particular-drift#readme","bugs":{"url":"https://github.com/basnijholt/particular-drift/issues"},"dist":{"shasum":"df9fec3892364a734d4809893bea2e104b88800a","tarball":"https://registry.npmjs.org/@basnijholt/particular-drift/-/particular-drift-0.1.0.tgz","fileCount":13,"integrity":"sha512-3Q9cVkDsXJvJzGfF5VjESFiO++kxzxX+L0ekUMw1CQwx91/XyDhOL2uxfKvJ6r+UlaL2xPsqYHGhGy2KX8sOmg==","signatures":[{"sig":"MEYCIQDH2L8TrmQjxCnGpdz7Ofa9BTfSAWyhWbrY89VZIZRCsgIhANmFoVKo8R58XYKoS56OuI55i75iiquWuUk1TZdBLW3K","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44763},"main":"./dist/particular-drift.js","type":"module","types":"./dist/index.d.ts","module":"./dist/particular-drift.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/particular-drift.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js"}},"gitHead":"aa3535aa96f3ce8ad6c4ce118a387fd4441d7ab4","scripts":{"dev":"vite --host 0.0.0.0 --open","test":"vitest run","build":"vite build","prepack":"bun run build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"basnijholt","email":"basnijholt@gmail.com"},"repository":{"url":"git+https://github.com/basnijholt/particular-drift.git","type":"git"},"_npmVersion":"11.12.1","description":"Reusable WebGL particle drift renderer for image-based animations.","directories":{},"sideEffects":false,"_nodeVersion":"25.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.13","devDependencies":{"vite":"^5.4.19","vitest":"^2.1.8","typescript":"^5.4.5","@types/react":"^18.2.79","vite-plugin-dts":"^3.9.1","@vitejs/plugin-react":"^4.2.1"},"peerDependencies":{"react":">=18"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/particular-drift_0.1.0_1778617999304_0.5605794394458217","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@basnijholt/particular-drift","version":"0.1.1","description":"Reusable WebGL particle drift renderer for image-based animations.","type":"module","license":"MIT","author":{"name":"Colliding Scopes, Bas Nijholt"},"homepage":"https://github.com/basnijholt/particular-drift#readme","repository":{"type":"git","url":"git+https://github.com/basnijholt/particular-drift.git"},"bugs":{"url":"https://github.com/basnijholt/particular-drift/issues"},"publishConfig":{"access":"public"},"packageManager":"bun@1.3.13","main":"./dist/particular-drift.js","module":"./dist/particular-drift.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/particular-drift.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js"}},"sideEffects":false,"scripts":{"dev":"vite --host 0.0.0.0 --open","build":"vite build","test":"vitest run","typecheck":"tsc --noEmit","prepack":"bun run build"},"peerDependencies":{"react":">=18"},"peerDependenciesMeta":{"react":{"optional":true}},"devDependencies":{"@types/react":"^18.2.79","@vitejs/plugin-react":"^4.2.1","typescript":"^5.4.5","vite":"^5.4.19","vite-plugin-dts":"^3.9.1","vitest":"^2.1.8"},"gitHead":"2af33c6cf32ee974e38eae53341cc27e54cdf68b","_id":"@basnijholt/particular-drift@0.1.1","_nodeVersion":"24.14.1","_npmVersion":"11.14.1","dist":{"integrity":"sha512-OwM28EDHXrupab7DgjDddJco+DwWjL7mBrbtjcq8bPnfVbkcphaEvucc5tq2KrGAj5jZeKfOKYNlIVF9i+DhMw==","shasum":"29af331732895d4c8ba2bb6b5ac616c51ba5ef28","tarball":"https://registry.npmjs.org/@basnijholt/particular-drift/-/particular-drift-0.1.1.tgz","fileCount":13,"unpackedSize":46146,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@basnijholt%2fparticular-drift@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGavppVCkWdqh6yiCdLyCpiqqY/SsUtis+S1fTMvHcBaAiEA4Yyg5FhsFzegGmhaIl6qAWv4r2SrZcFy4PrlXxmFvHw="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:1d2df75f-273a-4734-9abf-9d23b543b957"}},"directories":{},"maintainers":[{"name":"basnijholt","email":"basnijholt@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/particular-drift_0.1.1_1778621477016_0.4506458932684785"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-12T20:33:19.193Z","modified":"2026-05-12T21:31:17.477Z","0.1.0":"2026-05-12T20:33:19.502Z","0.1.1":"2026-05-12T21:31:17.154Z"},"bugs":{"url":"https://github.com/basnijholt/particular-drift/issues"},"author":{"name":"Colliding Scopes, Bas Nijholt"},"license":"MIT","homepage":"https://github.com/basnijholt/particular-drift#readme","repository":{"type":"git","url":"git+https://github.com/basnijholt/particular-drift.git"},"description":"Reusable WebGL particle drift renderer for image-based animations.","maintainers":[{"name":"basnijholt","email":"basnijholt@gmail.com"}],"readme":"# Particular Drift\n\nReusable WebGL2 particle drift renderer for turning a fixed image into a flowing particle animation.\n\n**Original project:** [collidingScopes/particular-drift](https://github.com/collidingScopes/particular-drift) by [Colliding Scopes](https://collidingScopes.github.io).\n\nThis fork is packaged as an embeddable library. It intentionally removes the original demo UI, upload controls, and MP4 export stack so applications can hardcode their own image and own the surrounding interface.\n\n## Install\n\n```bash\nbun add github:basnijholt/particular-drift\n```\n\nAfter publishing to npm, install with:\n\n```bash\nbun add @basnijholt/particular-drift\n```\n\n## Vanilla Usage\n\n```ts\nimport { createParticularDrift } from '@basnijholt/particular-drift';\n\nconst canvas = document.querySelector('#background');\n\nif (canvas) {\n const drift = await createParticularDrift(canvas, {\n imageUrl: '/res/branding/mindroom-logo.png',\n backgroundColor: '#0f0d2e',\n particleColor: '#dda290',\n particleCount: 120000,\n cursorMode: 'repel',\n });\n\n window.addEventListener('resize', drift.resize);\n}\n```\n\n## React Usage\n\n```tsx\nimport { ParticularDriftCanvas } from '@basnijholt/particular-drift/react';\n\nexport function AuthBackground() {\n return (\n \n );\n}\n```\n\n## API\n\n`createParticularDrift(canvas, options)` returns:\n\n- `loadImage(image)` to load an existing `TexImageSource`.\n- `loadImageUrl(url)` to load an image URL.\n- `resize()` to resize the backing canvas to its rendered CSS size.\n- `start()` and `stop()` to control animation.\n- `destroy()` to cancel animation and release WebGL resources.\n\nMain options:\n\n- `imageUrl`\n- `imageFit`: `'contain'` preserves image aspect ratio inside the canvas; `'stretch'` uses the original full-canvas mapping.\n- `particleCount`\n- `particleSpeed`\n- `attractionStrength`\n- `particleOpacity`\n- `particleSize`\n- `edgeThreshold`\n- `edgeSearchSteps`: `1`, `2`, or `3`; controls the bounded grid radius used when particles search for nearby edges.\n- `flowFieldScale`\n- `searchRadius`\n- `noiseType`: `'2D'` or `'3D'`\n- `interactive`: enables pointer interaction when `true`.\n- `cursorMode`: `'repel'` pushes particles away from the cursor; `'attract'` pulls them toward it.\n- `cursorRadius`: normalized cursor influence radius.\n- `cursorStrength`: cursor force multiplier.\n- `cursorReturnStrength`: force that pulls disturbed particles back toward their stored image target.\n- `cursorReturnDamping`: damping applied while particles settle back after cursor disturbance.\n- `backgroundColor`\n- `particleColor`\n- `autoStart`\n- `maxDevicePixelRatio`\n\n## Development\n\n```bash\nbun install\nbun run dev\nbun test\nbun run typecheck\nbun run build\n```\n\n## Publishing\n\nCI publishes to npm from GitHub Actions when a GitHub Release is published, or when the `Publish` workflow is run manually.\n\nConfigure npm Trusted Publishing for this package with:\n\n- Provider: GitHub Actions\n- Owner: `basnijholt`\n- Repository: `particular-drift`\n- Workflow filename: `publish.yml`\n\nThen release with a semver tag. The workflow strips the leading `v`, updates `package.json` in CI, and publishes that version to npm:\n\n```bash\ngh release create v0.1.1 --generate-notes\n```\n\n## Browser Requirements\n\n- WebGL2\n- Canvas image loading must satisfy browser CORS rules when using remote image URLs.\n\n## License\n\nMIT. See [LICENSE.txt](LICENSE.txt).\n\n## Original Author\n\nParticular Drift was created by Colliding Scopes. This package is a library-focused fork of that work.\n\n- Original repository: [github.com/collidingScopes/particular-drift](https://github.com/collidingScopes/particular-drift)\n- Original live demo: [collidingScopes.github.io/particular-drift](https://collidingScopes.github.io/particular-drift)\n- Original author site: [collidingScopes.github.io](https://collidingScopes.github.io)\n- Support the original author: [Buy Me a Coffee](https://www.buymeacoffee.com/stereoDrift)\n\n\"Buy\n","readmeFilename":"README.MD"}