{"_id":"@anarkisti/igyb","_rev":"5-b1e0de2ce79f4fc663293a32f89918ee","name":"@anarkisti/igyb","dist-tags":{"latest":"0.5.0"},"versions":{"0.1.0":{"name":"@anarkisti/igyb","version":"0.1.0","keywords":["background","backgrounds","pattern","generative","generative-art","webgl","canvas","svelte","geometric","animation","tree-shakeable"],"license":"MIT","_id":"@anarkisti/igyb@0.1.0","maintainers":[{"name":"anarkisti","email":"anarkisti@protonmail.com"}],"homepage":"https://eetu.github.io/i-got-your-back/","bugs":{"url":"https://github.com/eetu/i-got-your-back/issues"},"dist":{"shasum":"6b6fda51c0bae50d9d8c15c8b1f5bdbb90f5d870","tarball":"https://registry.npmjs.org/@anarkisti/igyb/-/igyb-0.1.0.tgz","fileCount":83,"integrity":"sha512-JSVb2nLLmXRleVIknRrbIG9Q31c6RAaral/iOFU5C05a8nZCxDb5cZopSoU0O/n/EGV8h4tpJdLX4pJ3Qf9E0A==","signatures":[{"sig":"MEQCICy0odMYuMRSnTJb0rd4uGjrSlLZZg2JxFb6ohARZj5XAiAQEtuvOhtx3IQn17rlYjpwKgHdxsTiLiFrH1EakeGLIQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":161329},"type":"module","exports":{"./core":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./svelte":{"types":"./src/svelte/Background.svelte.d.ts","svelte":"./src/svelte/Background.svelte","default":"./src/svelte/Background.svelte"},"./patterns/*":{"types":"./dist/patterns/*/index.d.ts","import":"./dist/patterns/*/index.js"}},"gitHead":"cf31b69c18d1b1ff78288ca7111c38b70ba2323a","scripts":{"lint":"eslint .","size":"size-limit","test":"vitest run","build":"vite build","prepack":"vite build","lint:fix":"eslint . --fix","typecheck":"svelte-check --tsconfig ./tsconfig.json"},"_npmUser":{"name":"anarkisti","email":"anarkisti@protonmail.com"},"repository":{"url":"git+https://github.com/eetu/i-got-your-back.git","type":"git","directory":"packages/igyb"},"size-limit":[{"name":"core — every pattern imported","path":"dist/index.js","limit":"10 kB"},{"name":"tree-shaken: one WebGL pattern (flowField)","path":"dist/index.js","limit":"5 kB","import":"{ flowField }"},{"name":"tree-shaken: one Canvas2D pattern (truchet)","path":"dist/index.js","limit":"3 kB","import":"{ truchet }"}],"_npmVersion":"11.6.2","description":"Tree-shakeable repeating & generative backgrounds — geometric tiles and WebGL generative art, framework-agnostic with a Svelte wrapper.","directories":{},"sideEffects":false,"_nodeVersion":"24.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1","eslint":"^10","svelte":"^5.56","vitest":"^4.1","playwright":"^1.61","typescript":"^6","svelte-check":"^4.7","@vitest/browser":"^4.1","vite-plugin-dts":"^5","@anarkisti/eslint-config":"^1","@vitest/browser-playwright":"^4.1","@sveltejs/vite-plugin-svelte":"^7"},"peerDependencies":{"svelte":"^5"},"peerDependenciesMeta":{"svelte":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/igyb_0.1.0_1784713120692_0.5217255281829905","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@anarkisti/igyb","version":"0.2.0","keywords":["background","backgrounds","pattern","generative","generative-art","webgl","canvas","svelte","geometric","animation","tree-shakeable"],"license":"MIT","_id":"@anarkisti/igyb@0.2.0","maintainers":[{"name":"anarkisti","email":"anarkisti@protonmail.com"}],"homepage":"https://eetu.github.io/i-got-your-back/","bugs":{"url":"https://github.com/eetu/i-got-your-back/issues"},"dist":{"shasum":"e3209c66f8e8ceb768f422b999d9587c6d61cfd9","tarball":"https://registry.npmjs.org/@anarkisti/igyb/-/igyb-0.2.0.tgz","fileCount":83,"integrity":"sha512-9QAOsWBLRyR/a9y4vaaBDBbxeH4e0ekUZQH+NBI6SB0hquAOp0mWSSmxitg/CDd9GHlcseohIRjw7n/Y0frBKg==","signatures":[{"sig":"MEUCIDbguFrwsnHfm7MfntG+wBAc53Uagv2MCGaPkBTLopOKAiEA8qbLqNPKo7RzZqKvlJVccUzu31SBPmAopP8JAFQt7VU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":162237},"type":"module","exports":{"./core":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./svelte":{"types":"./src/svelte/Background.svelte.d.ts","svelte":"./src/svelte/Background.svelte","default":"./src/svelte/Background.svelte"},"./patterns/*":{"types":"./dist/patterns/*/index.d.ts","import":"./dist/patterns/*/index.js"}},"gitHead":"c96d53f3bcf85657320064ae05c0b63abf0060b8","scripts":{"lint":"eslint .","size":"size-limit","test":"vitest run","build":"vite build","prepack":"vite build","lint:fix":"eslint . --fix","typecheck":"svelte-check --tsconfig ./tsconfig.json"},"_npmUser":{"name":"anarkisti","email":"anarkisti@protonmail.com"},"repository":{"url":"git+https://github.com/eetu/i-got-your-back.git","type":"git","directory":"packages/igyb"},"size-limit":[{"name":"core — every pattern imported","path":"dist/index.js","limit":"10 kB"},{"name":"tree-shaken: one WebGL pattern (flowField)","path":"dist/index.js","limit":"5 kB","import":"{ flowField }"},{"name":"tree-shaken: one Canvas2D pattern (truchet)","path":"dist/index.js","limit":"3 kB","import":"{ truchet }"}],"_npmVersion":"11.6.2","description":"Tree-shakeable repeating & generative backgrounds — geometric tiles and WebGL generative art, framework-agnostic with a Svelte wrapper.","directories":{},"sideEffects":false,"_nodeVersion":"24.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1","eslint":"^10","svelte":"^5.56","vitest":"^4.1","playwright":"^1.61","typescript":"^6","svelte-check":"^4.7","@vitest/browser":"^4.1","vite-plugin-dts":"^5","@anarkisti/eslint-config":"^1","@vitest/browser-playwright":"^4.1","@sveltejs/vite-plugin-svelte":"^7"},"peerDependencies":{"svelte":"^5"},"peerDependenciesMeta":{"svelte":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/igyb_0.2.0_1784731709873_0.021110584989152192","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@anarkisti/igyb","version":"0.3.0","keywords":["background","backgrounds","pattern","generative","generative-art","webgl","canvas","svelte","geometric","animation","tree-shakeable"],"license":"MIT","_id":"@anarkisti/igyb@0.3.0","maintainers":[{"name":"anarkisti","email":"anarkisti@protonmail.com"}],"homepage":"https://eetu.github.io/i-got-your-back/","bugs":{"url":"https://github.com/eetu/i-got-your-back/issues"},"dist":{"shasum":"8c8e0aaafe2d61293ccf9e46267e0300762f318e","tarball":"https://registry.npmjs.org/@anarkisti/igyb/-/igyb-0.3.0.tgz","fileCount":81,"integrity":"sha512-8ROe21BECDkS7xzXMixFkS/BP+8ypzBnYhDFMccFKvwI1XzPaKTkE/NZ6PF1JRPxfLBOdxjNSfO8MzsYc+YPSQ==","signatures":[{"sig":"MEUCIDgmQHCERRneC6YRqdU0ygF/VM6tA3tpUrDIxqpaULnZAiEAm27IUZ8/m2aO37nZvvNKU7ZUUENzoyFdWr1vLILY2bM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@anarkisti%2figyb@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":162657},"type":"module","_from":"file:/tmp/igyb.tgz","exports":{"./core":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./svelte":{"types":"./src/svelte/Background.svelte.d.ts","svelte":"./src/svelte/Background.svelte","default":"./src/svelte/Background.svelte"},"./patterns/*":{"types":"./dist/patterns/*/index.d.ts","import":"./dist/patterns/*/index.js"}},"scripts":{"lint":"eslint .","size":"size-limit","test":"vitest run","build":"vite build","prepack":"vite build","lint:fix":"eslint . --fix","typecheck":"svelte-check --tsconfig ./tsconfig.json"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:fc17d7fc-8f09-4c7e-99a7-e3c36908ba05"}},"_resolved":"/tmp/igyb.tgz","_integrity":"sha512-8ROe21BECDkS7xzXMixFkS/BP+8ypzBnYhDFMccFKvwI1XzPaKTkE/NZ6PF1JRPxfLBOdxjNSfO8MzsYc+YPSQ==","repository":{"url":"git+https://github.com/eetu/i-got-your-back.git","type":"git","directory":"packages/igyb"},"size-limit":[{"name":"core — every pattern imported","path":"dist/index.js","limit":"10 kB"},{"name":"tree-shaken: one WebGL pattern (flowField)","path":"dist/index.js","limit":"5 kB","import":"{ flowField }"},{"name":"tree-shaken: one Canvas2D pattern (truchet)","path":"dist/index.js","limit":"3 kB","import":"{ truchet }"}],"_npmVersion":"11.17.0","description":"Tree-shakeable repeating & generative backgrounds — geometric tiles and WebGL generative art, framework-agnostic with a Svelte wrapper.","directories":{},"sideEffects":false,"_nodeVersion":"26.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1","eslint":"^10","svelte":"^5.56","vitest":"^4.1","playwright":"^1.61","typescript":"^6","svelte-check":"^4.7","@vitest/browser":"^4.1","vite-plugin-dts":"^5","@anarkisti/eslint-config":"^1","@vitest/browser-playwright":"^4.1","@sveltejs/vite-plugin-svelte":"^7"},"peerDependencies":{"svelte":"^5"},"peerDependenciesMeta":{"svelte":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/igyb_0.3.0_1784733863313_0.7651227407886751","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@anarkisti/igyb","version":"0.4.0","keywords":["background","backgrounds","pattern","generative","generative-art","webgl","canvas","svelte","geometric","animation","tree-shakeable"],"license":"MIT","_id":"@anarkisti/igyb@0.4.0","maintainers":[{"name":"anarkisti","email":"anarkisti@protonmail.com"}],"homepage":"https://eetu.github.io/i-got-your-back/","bugs":{"url":"https://github.com/eetu/i-got-your-back/issues"},"dist":{"shasum":"c6e08e14577c9f90750e680a260c052d579c52ca","tarball":"https://registry.npmjs.org/@anarkisti/igyb/-/igyb-0.4.0.tgz","fileCount":81,"integrity":"sha512-cfPrpVd3XrIjZJwMyp3FqDWxJHwrxDGwVWcKqcFnql8TBK9BlfwaDVhRBSenHqW5vcuE9yiZ/0MMtZCsR2Gyqg==","signatures":[{"sig":"MEYCIQDDSFlJ7aMm82mARCOZ8ELDh18aFptwOSQAtTWSRDA0nwIhALgqSgsQzHWRNkyriIna3VfUIg6iUWjK/RFyLTTRgHB5","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@anarkisti%2figyb@0.4.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":172789},"type":"module","_from":"file:/tmp/igyb.tgz","exports":{"./core":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./svelte":{"types":"./src/svelte/Background.svelte.d.ts","svelte":"./src/svelte/Background.svelte","default":"./src/svelte/Background.svelte"},"./patterns/*":{"types":"./dist/patterns/*/index.d.ts","import":"./dist/patterns/*/index.js"}},"scripts":{"lint":"eslint .","size":"size-limit","test":"vitest run","build":"vite build","prepack":"vite build","lint:fix":"eslint . --fix","typecheck":"svelte-check --tsconfig ./tsconfig.json"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:fc17d7fc-8f09-4c7e-99a7-e3c36908ba05"}},"_resolved":"/tmp/igyb.tgz","_integrity":"sha512-cfPrpVd3XrIjZJwMyp3FqDWxJHwrxDGwVWcKqcFnql8TBK9BlfwaDVhRBSenHqW5vcuE9yiZ/0MMtZCsR2Gyqg==","repository":{"url":"git+https://github.com/eetu/i-got-your-back.git","type":"git","directory":"packages/igyb"},"size-limit":[{"name":"core — every pattern imported","path":"dist/index.js","limit":"10 kB"},{"name":"tree-shaken: one WebGL pattern (flowField)","path":"dist/index.js","limit":"5 kB","import":"{ flowField }"},{"name":"tree-shaken: one Canvas2D pattern (truchet)","path":"dist/index.js","limit":"3 kB","import":"{ truchet }"}],"_npmVersion":"11.17.0","description":"Tree-shakeable repeating & generative backgrounds — geometric tiles and WebGL generative art, framework-agnostic with a Svelte wrapper.","directories":{},"sideEffects":false,"_nodeVersion":"26.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1","eslint":"^10","svelte":"^5.56","vitest":"^4.1","playwright":"^1.61","typescript":"^6","svelte-check":"^4.7","@vitest/browser":"^4.1","vite-plugin-dts":"^5","@anarkisti/eslint-config":"^1","@vitest/browser-playwright":"^4.1","@sveltejs/vite-plugin-svelte":"^7"},"peerDependencies":{"svelte":"^5"},"peerDependenciesMeta":{"svelte":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/igyb_0.4.0_1784738457968_0.7056700632736757","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@anarkisti/igyb","version":"0.5.0","description":"Tree-shakeable repeating & generative backgrounds — geometric tiles and WebGL generative art, framework-agnostic with a Svelte wrapper.","keywords":["background","backgrounds","pattern","generative","generative-art","webgl","canvas","svelte","geometric","animation","tree-shakeable"],"license":"MIT","type":"module","sideEffects":false,"exports":{"./core":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./registry":{"types":"./dist/registry.d.ts","import":"./dist/registry.js"},"./element":{"types":"./dist/web-component.d.ts","import":"./dist/web-component.js"},"./patterns/*":{"types":"./dist/patterns/*/index.d.ts","import":"./dist/patterns/*/index.js"},"./svelte":{"types":"./src/svelte/Background.svelte.d.ts","svelte":"./src/svelte/Background.svelte","default":"./src/svelte/Background.svelte"}},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/eetu/i-got-your-back.git","directory":"packages/igyb"},"homepage":"https://eetu.github.io/i-got-your-back/","scripts":{"build":"vite build","prepack":"vite build","test":"vitest run","lint":"eslint .","lint:fix":"eslint . --fix","typecheck":"svelte-check --tsconfig ./tsconfig.json","size":"size-limit"},"size-limit":[{"name":"core — every pattern imported","path":"dist/index.js","limit":"12 kB"},{"name":"tree-shaken: one WebGL pattern (flowField)","path":"dist/index.js","import":"{ flowField }","limit":"5 kB"},{"name":"tree-shaken: one Canvas2D pattern (truchet)","path":"dist/index.js","import":"{ truchet }","limit":"4 kB"}],"peerDependencies":{"svelte":"^5"},"peerDependenciesMeta":{"svelte":{"optional":true}},"devDependencies":{"@anarkisti/eslint-config":"^1","@sveltejs/vite-plugin-svelte":"^7","@vitest/browser":"^4.1","@vitest/browser-playwright":"^4.1","eslint":"^10","playwright":"^1.61","svelte":"^5.56","svelte-check":"^4.7","typescript":"^6","vite":"^8.1","vite-plugin-dts":"^5","vitest":"^4.1"},"_id":"@anarkisti/igyb@0.5.0","bugs":{"url":"https://github.com/eetu/i-got-your-back/issues"},"_integrity":"sha512-b2FITc40aVw31bhVKYzeWpIC11BsoM8aWRi5beJbiMOhVEYSwT2P6zQad6PW+Gr7rCSrPVpp/JyBdVp8ngpDVg==","_resolved":"/tmp/igyb.tgz","_from":"file:/tmp/igyb.tgz","_nodeVersion":"26.5.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-b2FITc40aVw31bhVKYzeWpIC11BsoM8aWRi5beJbiMOhVEYSwT2P6zQad6PW+Gr7rCSrPVpp/JyBdVp8ngpDVg==","shasum":"aef5236bf250c77db1c425a2f84dc25205671e41","tarball":"https://registry.npmjs.org/@anarkisti/igyb/-/igyb-0.5.0.tgz","fileCount":111,"unpackedSize":265120,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@anarkisti%2figyb@0.5.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCw1SAWZ4kae4aom4Ng/L3ZN4xJpszISW8Nx2dJ1OIfvwIhAJlN5IAVFf79gVrBAT7P1DJa2JUSQAwtFIP6wvFbx0AR"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:fc17d7fc-8f09-4c7e-99a7-e3c36908ba05"}},"directories":{},"maintainers":[{"name":"anarkisti","email":"anarkisti@protonmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/igyb_0.5.0_1784817454699_0.8560868981832188"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-22T09:38:40.559Z","modified":"2026-07-23T14:37:35.167Z","0.1.0":"2026-07-22T09:38:40.838Z","0.2.0":"2026-07-22T14:48:30.076Z","0.3.0":"2026-07-22T15:24:23.465Z","0.4.0":"2026-07-22T16:40:58.130Z","0.5.0":"2026-07-23T14:37:34.846Z"},"bugs":{"url":"https://github.com/eetu/i-got-your-back/issues"},"license":"MIT","homepage":"https://eetu.github.io/i-got-your-back/","keywords":["background","backgrounds","pattern","generative","generative-art","webgl","canvas","svelte","geometric","animation","tree-shakeable"],"repository":{"type":"git","url":"git+https://github.com/eetu/i-got-your-back.git","directory":"packages/igyb"},"description":"Tree-shakeable repeating & generative backgrounds — geometric tiles and WebGL generative art, framework-agnostic with a Svelte wrapper.","maintainers":[{"name":"anarkisti","email":"anarkisti@protonmail.com"}],"readme":"# @anarkisti/igyb\n\nTree-shakeable repeating & generative **backgrounds** — geometric tiles and WebGL generative\nart. A framework-agnostic core (Canvas2D + WebGL) with a thin Svelte wrapper.\n\n### ▶ [Live playground →](https://eetu.github.io/i-got-your-back/)\n\n```sh\nyarn add @anarkisti/igyb\n```\n\n## Vanilla\n\n```ts\nimport { flowField } from '@anarkisti/igyb/core';\n\nconst bg = flowField(document.querySelector('#hero')!, { theme: 'neon', interactive: true });\nbg.start();\n// bg.update({ theme: 'terminal' });  // live re-theme\n// bg.destroy();\n```\n\n## Svelte\n\n```svelte\n<script>\n\timport Background from '@anarkisti/igyb/svelte';\n\timport { plasma } from '@anarkisti/igyb/core';\n</script>\n\n<div style=\"height: 100vh\">\n\t<Background pattern={plasma} options={{ theme: 'ink', interactive: true }} />\n</div>\n```\n\n## Web component (any framework)\n\n`<igyb-background>` resolves a pattern by name from the registry — drop it into plain HTML,\nReact, Vue, anything:\n\n```ts\nimport { register } from '@anarkisti/igyb/element';\nregister(); // defines <igyb-background> once\n```\n\n```html\n<igyb-background\n\tpattern=\"gradientMesh\"\n\ttheme=\"sunset\"\n\tinteractive\n\tstyle=\"display:block; inline-size:100%; block-size:100vh\"\n></igyb-background>\n```\n\n## React\n\nUse `<igyb-background>` above, or this ~20-line wrapper that takes a tree-shakeable factory:\n\n```tsx\nimport { useEffect, useRef } from 'react';\nimport type { AnyBackgroundFactory, BaseOptions } from '@anarkisti/igyb/core';\n\nexport function Background({\n\tpattern,\n\toptions,\n\tpaused\n}: {\n\tpattern: AnyBackgroundFactory;\n\toptions?: BaseOptions & Record<string, unknown>;\n\tpaused?: boolean;\n}) {\n\tconst host = useRef<HTMLDivElement>(null);\n\tconst bg = useRef<ReturnType<AnyBackgroundFactory>>();\n\tuseEffect(() => {\n\t\tbg.current = pattern(host.current!, options);\n\t\tif (!paused) bg.current.start();\n\t\treturn () => bg.current?.destroy();\n\t}, [pattern]); // eslint-disable-line react-hooks/exhaustive-deps\n\tuseEffect(() => bg.current?.update(options ?? {}), [options]);\n\tuseEffect(() => (paused ? bg.current?.stop() : bg.current?.start()), [paused]);\n\treturn <div ref={host} style={{ position: 'relative', width: '100%', height: '100%' }} />;\n}\n```\n\n## Patterns\n\n| Pattern       | Import (`@anarkisti/igyb/core`) | Renderer | Category   |\n| ------------- | ------------------------------- | -------- | ---------- |\n| Flow field    | `flowField`                     | WebGL    | Generative |\n| Plasma        | `plasma`                        | WebGL    | Generative |\n| Gradient mesh | `gradientMesh`                  | WebGL    | Generative |\n| Aurora        | `aurora`                        | WebGL    | Generative |\n| Metaballs     | `metaballs`                     | WebGL    | Generative |\n| Voronoi       | `voronoi`                       | WebGL    | Generative |\n| Particles     | `particles`                     | Canvas2D | Generative |\n| Ripple        | `ripple`                        | Canvas2D | Generative |\n| Matrix rain   | `matrixRain`                    | Canvas2D | Generative |\n| Starfield     | `starfield`                     | Canvas2D | Generative |\n| Truchet       | `truchet`                       | Canvas2D | Geometric  |\n| Hex           | `hex`                           | Canvas2D | Geometric  |\n| Isometric     | `iso`                           | Canvas2D | Geometric  |\n| Dot grid      | `dotGrid`                       | Canvas2D | Geometric  |\n| Wave lines    | `waveLines`                     | Canvas2D | Geometric  |\n| Low poly      | `lowPoly`                       | Canvas2D | Geometric  |\n| Glyph tile    | `glyphTile`                     | Canvas2D | Geometric  |\n\nOverlays for layering: `grain`, `vignette`, `scanlines`, `spotlight`.\n\nDeep imports (`@anarkisti/igyb/patterns/flow-field`) keep bundles minimal even without\ntree-shaking. Every pattern also takes `theme`, `animate`, `speed`, `interactive`\n(`true` | `'fine'`), `pointerSource`, `pointerSmoothing`, `themeTransition`, `reducedMotion`,\n`autoPause` and `dpr`. Interactive patterns track multitouch (`pointer.points`); the loop\nauto-pauses while the tab is hidden or the host scrolls offscreen. Set `themeTransition`\n(seconds) to crossfade palettes on a theme change, and pattern authors can read `env.scroll`\n(window scroll progress) for scroll-linked effects. Themes: `ink` (default), `neon`, `pastel`,\n`terminal`, `mono`, `paper`, `halo`, `sunset`, `ocean`, `cyberpunk`, `forest`, or a custom\n`Palette`.\n\n## Composing layers\n\nStack patterns into one background with per-layer opacity and blend — WebGL and Canvas2D mix\nfreely, since each layer keeps its own canvas:\n\n```ts\nimport { layers, aurora, particles, grain, vignette } from '@anarkisti/igyb/core';\n\nconst bg = layers(\n\t[\n\t\t{ pattern: aurora },\n\t\t{ pattern: particles, blend: 'screen', opacity: 0.6 },\n\t\t{ pattern: grain, blend: 'overlay', opacity: 0.5 },\n\t\t{ pattern: vignette, options: { animate: false } }\n\t],\n\t{ theme: 'sunset' } // shared across every layer\n)(document.querySelector('#hero')!);\nbg.start();\n\nconst poster = bg.capture(); // data URL — a static first-frame for SSR/LCP\n```\n\n`bg.capture()` works on any background (single or layered). For a gallery or a randomize\nbutton, `@anarkisti/igyb/registry` lists every pattern with metadata; `@anarkisti/igyb/element`\nships an `<igyb-background>` custom element.\n\n## Theming from CSS variables\n\nFor token-driven apps, read the palette straight from CSS custom properties and pass `theme`\nas a **thunk**. On a light/dark flip, call `bg.refresh()` — it re-invokes the thunk and\nrepaints in place, no teardown:\n\n```ts\nimport { glyphTile, paletteFromCSS } from '@anarkisti/igyb/core';\n\nconst map = { bg: '--surface', fg: '--ink', accents: ['--accent'] };\nconst bg = glyphTile(el, { theme: () => paletteFromCSS(map) });\nbg.start();\n\n// when your theme toggles (after the new tokens land on the element):\nbg.refresh();\n```\n\nDrawing your own glyph/marks? The `glyphTile` callback receives the resolved `palette`, and\n`@anarkisti/igyb/core` exports small color helpers so you don't re-roll them:\n\n```ts\nimport { lighten, mix, toRgb } from '@anarkisti/igyb/core';\n\nglyphTile(el, {\n\tglyph(ctx, size, i, { palette, highlight }) {\n\t\tctx.strokeStyle = mix(palette.fg, lighten(palette.fg, 0.8), highlight); // reacts to the pointer\n\t\tctx.strokeRect(-size / 4, -size / 4, size / 2, size / 2);\n\t}\n});\n```\n\n`toRgb` / `toRgbString`, `mix`, `lighten`, `darken` accept hex or `rgb()` strings.\n\n## Authoring\n\n```ts\nimport { defineCanvas2D } from '@anarkisti/igyb/core';\n\nexport const stripes = defineCanvas2D<{ width?: number }>({\n\tdefaults: { width: 20 },\n\tframe({ ctx, surface, palette, time, options }) {\n\t\t/* draw one frame */\n\t}\n});\n```\n\n`defineWebGL` is the same shape with a WebGL2 `gl` context. Cache resources in `env.state`.\n","readmeFilename":"README.md"}