{"_id":"@brochington/shader-backgrounds","_rev":"3-d699b0367750ac1e7f15a285fc3439da","name":"@brochington/shader-backgrounds","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@brochington/shader-backgrounds","version":"0.1.0","_id":"@brochington/shader-backgrounds@0.1.0","maintainers":[{"name":"brochington","email":"brochington@gmail.com"}],"dist":{"shasum":"2d520cdf68af04d4998590c1921329727f1104e5","tarball":"https://registry.npmjs.org/@brochington/shader-backgrounds/-/shader-backgrounds-0.1.0.tgz","fileCount":25,"integrity":"sha512-r4YdJ6xbG//mC4+haWevueN6YgpBheBE3Z+EPQjx2O6gWdzlmCEz9vaThqUe3l24pUl98MtcJRZnXjXy6x1NGA==","signatures":[{"sig":"MEUCID4U8hOMtkgyfebCzCTluG1hn8Cf97OK4455O+f8rmGaAiEAu4dJ1LdNBDWnts6UFaTkO0SG8atsB2h5jUwh1GGGNxE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":131437},"main":"./dist/shader-backgrounds.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/shader-backgrounds.js","gitHead":"93b59dc1b22c48243ed0492271b495db880db765","scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","build:demo":"vite build --config vite.demo.config.ts","preview:demo":"vite preview --config vite.demo.config.ts"},"_npmUser":{"name":"brochington","email":"brochington@gmail.com"},"_npmVersion":"11.6.0","description":"Small shader-based background library built on [OGL](https://github.com/oframe/ogl). It provides:","directories":{},"_nodeVersion":"24.9.0","dependencies":{"ogl":"^1.0.11"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.0","typescript":"^5.9.3","vite-plugin-dts":"^4.5.4"},"_npmOperationalInternal":{"tmp":"tmp/shader-backgrounds_0.1.0_1766463454456_0.024438838597765633","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@brochington/shader-backgrounds","version":"0.1.1","_id":"@brochington/shader-backgrounds@0.1.1","maintainers":[{"name":"brochington","email":"brochington@gmail.com"}],"dist":{"shasum":"71622670fffbb287e82635117b51988889439591","tarball":"https://registry.npmjs.org/@brochington/shader-backgrounds/-/shader-backgrounds-0.1.1.tgz","fileCount":43,"integrity":"sha512-br+zt9JZ0ivoH1cqUH/1f6zriSMcyuuy12H5e0TMGIHhXwjlJQmbE/spzQvimu4KV1rk8f6FDqXI9FtufjNBdw==","signatures":[{"sig":"MEYCIQDCEVpYMqGD3yhJZ3cGXnp6ymMZv69UEugMZTNaY/MZCgIhALJUKHJH8SnHSl+pXJyLuQUg6w4P5Wov/oBSKjz5GIu8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":353271},"main":"./dist/shader-backgrounds.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/shader-backgrounds.js","gitHead":"93b59dc1b22c48243ed0492271b495db880db765","scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","build:demo":"vite build --config vite.demo.config.ts","preview:demo":"vite preview --config vite.demo.config.ts"},"_npmUser":{"name":"brochington","email":"brochington@gmail.com"},"_npmVersion":"11.6.0","description":"Small shader-based background library built on [OGL](https://github.com/oframe/ogl). It provides:","directories":{},"_nodeVersion":"24.9.0","dependencies":{"ogl":"^1.0.11"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.0","typescript":"^5.9.3","vite-plugin-dts":"^4.5.4"},"_npmOperationalInternal":{"tmp":"tmp/shader-backgrounds_0.1.1_1767145058783_0.2665690921682562","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@brochington/shader-backgrounds","version":"0.1.2","type":"module","main":"./dist/shader-backgrounds.umd.cjs","module":"./dist/shader-backgrounds.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/shader-backgrounds.js","require":"./dist/shader-backgrounds.umd.cjs"}},"scripts":{"dev":"vite","build":"vite build && tsc --emitDeclarationOnly","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.demo.config.ts","preview":"vite preview","preview:demo":"vite preview --config vite.demo.config.ts"},"devDependencies":{"typescript":"^5.9.3","vite":"^7.3.0"},"dependencies":{"ogl":"^1.0.11"},"_id":"@brochington/shader-backgrounds@0.1.2","gitHead":"e6ce6b83074de81a587593bf1d6350342fb653da","description":"A Simple Web Component that allows setting of WebGL shader-based backgrounds for other DOM elements.","_nodeVersion":"24.9.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-NAjVr0SWGLC+LWfpIZuAiNsbYX2yZSkxzlInec4Nio1ZSVpWYqzk1ugG+9Wv/FA/2l80lWxfxG3exWukCX+u0Q==","shasum":"80cead2a49e831ca344e46f78b67e076f14c791a","tarball":"https://registry.npmjs.org/@brochington/shader-backgrounds/-/shader-backgrounds-0.1.2.tgz","fileCount":21,"unpackedSize":236296,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDsw6dlWpGldMtIY11+iKIY31lx9HFGHgO3re4niLBGWAiEA5RrK/l7pFsXGNmz5i3vqeXNu247TPyWzXBDLgd6kMZk="}]},"_npmUser":{"name":"brochington","email":"brochington@gmail.com"},"directories":{},"maintainers":[{"name":"brochington","email":"brochington@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/shader-backgrounds_0.1.2_1767221428992_0.4096073486649434"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-23T04:17:34.373Z","modified":"2025-12-31T22:50:29.400Z","0.1.0":"2025-12-23T04:17:34.617Z","0.1.1":"2025-12-31T01:37:38.939Z","0.1.2":"2025-12-31T22:50:29.171Z"},"description":"A Simple Web Component that allows setting of WebGL shader-based backgrounds for other DOM elements.","maintainers":[{"name":"brochington","email":"brochington@gmail.com"}],"readme":"# shader-backgrounds\n\nA Simple Web Component that allows setting of WebGL shader-based backgrounds for other DOM elements.\n\n[Kapture 2025-12-22 at 20.31.22.webm](https://github.com/user-attachments/assets/40047c24-3c0f-467b-82ba-e614954d4746)\n\n[Kapture 2025-12-22 at 20.34.55.webm](https://github.com/user-attachments/assets/a7583eb5-89c8-4fb0-aa10-eeaa9e0734ca)\n\n[Kapture 2025-12-22 at 20.37.31.webm](https://github.com/user-attachments/assets/911fd30f-30f8-405e-8bd5-cbbb217672b9)\n\n[Kapture 2025-12-22 at 20.38.44.webm](https://github.com/user-attachments/assets/d05e4299-4894-41f4-95ed-232ae56c9dde)\n\n[Kapture 2025-12-22 at 20.39.54.webm](https://github.com/user-attachments/assets/30912a87-a1f1-4307-9fc4-8a3cbdad4827)\n\n[Kapture 2025-12-22 at 20.42.40.webm](https://github.com/user-attachments/assets/29c6c031-e0a9-4a24-8be7-58dfac97cd3c)\n\n## Install\n\n```bash\nnpm install @brochington/shader-backgrounds\n```\n\n## Quick start (Web Component)\n\nImport the package once to register the custom element, then assign a plugin instance.\n\n```ts\nimport '@brochington/shader-backgrounds';\nimport { SoftStarfieldPlugin } from '@brochington/shader-backgrounds';\n\nconst el = document.querySelector('shader-background') as any;\nel.plugin = new SoftStarfieldPlugin({\n  backgroundBottom: '#040512',\n  backgroundTop: '#0b1630',\n  starColor: '#ffffff',\n});\n```\n\nHTML:\n\n```html\n<shader-background style=\"position:fixed; inset:0; z-index:-1;\"></shader-background>\n```\n\n### Web component API\n\n- **`plugin: ShaderPlugin`**: set the active plugin (recreates the renderer).\n- **`renderScale: number`**: internal render resolution multiplier (0.1..2.0).\n- **`singleRender: boolean`**: if true, render once (manual) instead of animating.\n- **`render()`**: triggers a render when `singleRender === true`.\n- **Attributes**\n  - **`render-scale=\"0.5\"`**: same as `renderScale`.\n  - **`single-render`** or **`single-render=\"true\"`**: same as `singleRender`.\n\nStyling the internal canvas from outside the shadow root:\n\n```css\nshader-background::part(canvas) {\n  filter: blur(10px) saturate(1.15);\n}\n```\n\n## Quick start (ShaderCanvas)\n\nUse this if you want to manage the `<canvas>` yourself.\n\n```ts\nimport { ShaderCanvas, CausticsPlugin } from '@brochington/shader-backgrounds';\n\nconst canvas = document.querySelector('canvas')!;\nconst plugin = new CausticsPlugin({\n  color: '#b9fff7',\n  backgroundColor: '#031028',\n});\n\nconst engine = new ShaderCanvas(canvas, plugin, {\n  renderScale: 1.0,     // internal buffer scale\n  pixelRatio: 1.0,      // additional multiplier (clamped 0.1..4.0)\n  singleRender: false,\n});\n\nengine.start();\n// engine.resize() is available if you manage sizing yourself.\n```\n\n## Built-in plugins\n\nSee `PLUGINS.md` for full configuration details for each plugin.\n\nAvailable exports:\n\n- `GradientPlugin`\n- `GrainyFogPlugin`\n- `RetroGridPlugin`\n- `LiquidOrbPlugin`\n- `CausticsPlugin`\n- `AuroraWavesPlugin`\n- `SoftStarfieldPlugin`\n- `ContourLinesPlugin`\n- `DreamyBokehPlugin`\n- `InkWashPlugin`\n- `StainedGlassPlugin`\n\n## Writing your own plugin\n\nImplement the `ShaderPlugin` interface from `src/lib/core/types.ts`:\n\n- **`name`**: unique identifier.\n- **`fragmentShader`**: GLSL fragment shader string.\n- **`uniforms`**: object of `{ value }` entries (OGL wraps these).\n- Optional hooks: **`onInit(gl, program)`**, **`onRender(dtMs, totalTimeSeconds)`**, **`onResize(width, height)`**\n\nThe engine always provides these uniforms:\n\n- **`uTime`**: elapsed time in seconds.\n- **`uResolution`**: display resolution in CSS pixels (`vec2(width, height)`), suitable for aspect-correct math.\n\n### Minimal example plugin\n\n```ts\nimport type { ShaderPlugin } from '@brochington/shader-backgrounds';\n\nexport class SolidColorPlugin implements ShaderPlugin {\n  name = 'solid-color';\n\n  fragmentShader = /* glsl */ `\n    precision highp float;\n    uniform vec3 uColor;\n    void main() {\n      gl_FragColor = vec4(uColor, 1.0);\n    }\n  `;\n\n  uniforms = {\n    uColor: { value: [0.10, 0.12, 0.18] },\n  };\n}\n```\n\n### Notes and conventions\n\n- **Time units**: `onRender` receives `dt` in milliseconds. `uTime` and `totalTime` are seconds.\n- **Uniform arrays**: for GLSL `uniform vec3 uData[N]`, pass an array of triplets like `[[x,y,z], ...]` (not a packed `Float32Array`).\n- **Aspect correction**: typical pattern is:\n  - `float aspect = uResolution.x / uResolution.y;`\n  - `vec2 p = (vUv - 0.5) * vec2(aspect, 1.0);`\n- **Derivatives / antialiasing**: if you use `fwidth`, include:\n  - `#ifdef GL_OES_standard_derivatives` / `#extension GL_OES_standard_derivatives : enable`\n\n## Repository development\n\n```bash\nnpm install\nnpm run dev     # run demo via Vite\nnpm run build   # generate dist bundles + .d.ts\nnpm run preview # preview Vite build\n```\n\n### Demo (GitHub Pages)\n\nThis repo’s demo (`index.html` + `demo.js`) can be deployed to GitHub Pages via GitHub Actions.\n\n- **Build the demo site**: `npm run build:demo` (outputs `dist-demo/`)\n- **Workflow**: `.github/workflows/deploy-demo-to-pages.yml`\n\n\n","readmeFilename":"README.md"}