{"_id":"@digiko-npm/ds-shaders","_rev":"3-bf35e35c18a929ccbf39b5b156169f87","name":"@digiko-npm/ds-shaders","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@digiko-npm/ds-shaders","version":"0.1.0","keywords":["design-system","shaders","webgl","react","framer","paper-design"],"license":"SEE LICENSE IN LICENSE","_id":"@digiko-npm/ds-shaders@0.1.0","maintainers":[{"name":"digiko-npm","email":"riccardo@digiko.io"}],"homepage":"https://github.com/digiko-dev/designsystem#readme","bugs":{"url":"https://github.com/digiko-dev/designsystem/issues"},"dist":{"shasum":"f4ed5480bbeee4298544a0646a6fe0ed2b9403f5","tarball":"https://registry.npmjs.org/@digiko-npm/ds-shaders/-/ds-shaders-0.1.0.tgz","fileCount":174,"integrity":"sha512-ojIAo+b04n2Kxp3Uw/vpkUj0L04WmY1gs+7CkqsznLKMNhcZj8TdWa9jMNkLupQgQKeWrIhbm957QeEhHprYHw==","signatures":[{"sig":"MEQCIEhP9YqKO0MzZB9ltn56Yp5jhohOXaeXAkQRYOkPoPNiAiBwi//fksP02cc2wsy0F4EK6F9w6Loa114+Q7Fs9OjZXg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":98331},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./logos":{"types":"./dist/logos/index.d.ts","import":"./dist/logos/index.js"},"./tokens":{"types":"./dist/lib/use-ds-colors.d.ts","import":"./dist/lib/use-ds-colors.js"},"./effects":{"types":"./dist/effects/index.d.ts","import":"./dist/effects/index.js"},"./filters":{"types":"./dist/filters/index.d.ts","import":"./dist/filters/index.js"}},"gitHead":"6206c9726550d21763b1e0da20f695833d51c787","scripts":{"dev":"tsc --watch","build":"tsc"},"_npmUser":{"name":"digiko-npm","email":"riccardo@digiko.io"},"repository":{"url":"git+https://github.com/digiko-dev/designsystem.git","type":"git","directory":"packages/ds-shaders"},"_npmVersion":"11.6.2","description":"WebGL shaders for @digiko-npm/designsystem — opinionated React wrappers around @paper-design/shaders-react with DS token palettes.","directories":{},"sideEffects":false,"_nodeVersion":"25.2.1","dependencies":{"@paper-design/shaders-react":"^0.0.76"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.0.0","typescript":"^5.7.0","@types/react":"^19.0.0"},"peerDependencies":{"react":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ds-shaders_0.1.0_1777298525489_0.46669081089705333","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed: install @adamarant/ds-shaders instead. The @digiko-npm scope is no longer maintained."},"0.1.1":{"name":"@digiko-npm/ds-shaders","version":"0.1.1","keywords":["design-system","shaders","webgl","react","framer","paper-design"],"license":"SEE LICENSE IN LICENSE","_id":"@digiko-npm/ds-shaders@0.1.1","maintainers":[{"name":"digiko-npm","email":"riccardo@digiko.io"}],"homepage":"https://github.com/digiko-dev/designsystem#readme","bugs":{"url":"https://github.com/digiko-dev/designsystem/issues"},"dist":{"shasum":"50026d513b63da1adad7e857dcd5730483cb85ac","tarball":"https://registry.npmjs.org/@digiko-npm/ds-shaders/-/ds-shaders-0.1.1.tgz","fileCount":174,"integrity":"sha512-lttRZlEZXuFIqFC58KO++2ZqHI2GbvQmvOEaBNuucEb31A8XPMxngD0PFTgTPxntaiW1rZ+mjggRUaFQHuw4GA==","signatures":[{"sig":"MEQCIHjKrt99i9P/TZBbpYtCWfUwcDBHpnUhWBoxsfasMNYGAiBsL+P4sSAIX+MrKfEJkKed4ElAKvRLzx/mSMxTN5cC7Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@digiko-npm%2fds-shaders@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":98331},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./logos":{"types":"./dist/logos/index.d.ts","import":"./dist/logos/index.js"},"./tokens":{"types":"./dist/lib/use-ds-colors.d.ts","import":"./dist/lib/use-ds-colors.js"},"./effects":{"types":"./dist/effects/index.d.ts","import":"./dist/effects/index.js"},"./filters":{"types":"./dist/filters/index.d.ts","import":"./dist/filters/index.js"}},"gitHead":"5607a9036bc53800d56167dd2e98e087571b729e","scripts":{"dev":"tsc --watch","build":"tsc"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:cbeac797-73d4-4a9f-b0db-92e28ce03da2"}},"repository":{"url":"git+https://github.com/digiko-dev/designsystem.git","type":"git","directory":"packages/ds-shaders"},"_npmVersion":"11.16.0","description":"WebGL shaders for @digiko-npm/designsystem — opinionated React wrappers around @paper-design/shaders-react with DS token palettes.","directories":{},"sideEffects":false,"_nodeVersion":"24.16.0","dependencies":{"@paper-design/shaders-react":"^0.0.76"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.0.0","typescript":"^5.7.0","@types/react":"^19.0.0"},"peerDependencies":{"react":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ds-shaders_0.1.1_1780211982468_0.006179379229498183","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed: install @adamarant/ds-shaders instead. The @digiko-npm scope is no longer maintained."}},"time":{"created":"2026-04-27T14:02:05.321Z","modified":"2026-06-01T12:56:08.795Z","0.1.0":"2026-04-27T14:02:05.684Z","0.1.1":"2026-05-31T07:19:42.635Z"},"bugs":{"url":"https://github.com/digiko-dev/designsystem/issues"},"license":"SEE LICENSE IN LICENSE","homepage":"https://github.com/digiko-dev/designsystem#readme","keywords":["design-system","shaders","webgl","react","framer","paper-design"],"repository":{"url":"git+https://github.com/digiko-dev/designsystem.git","type":"git","directory":"packages/ds-shaders"},"description":"WebGL shaders for @digiko-npm/designsystem — opinionated React wrappers around @paper-design/shaders-react with DS token palettes.","maintainers":[{"name":"digiko-npm","email":"riccardo@digiko.io"}],"readme":"# @digiko-npm/ds-shaders\n\nWebGL shaders for the Digiko Design System. Opinionated React wrappers around [`@paper-design/shaders-react`](https://github.com/paper-design/shaders) that read DS color tokens at runtime and react to theme changes.\n\n## Install\n\n```bash\nnpm install @digiko-npm/ds-shaders\n```\n\nPeer dep: `react >= 18`.\n\n## Use\n\nAll components are client components. Add `\"use client\"` to the parent file when consuming from a Next.js Server Component.\n\n```tsx\n\"use client\";\nimport { MeshGradient } from \"@digiko-npm/ds-shaders/effects\";\n\nexport function Hero() {\n  return (\n    <MeshGradient\n      palette=\"brand\"\n      style={{ width: \"100%\", height: \"60vh\" }}\n      distortion={1}\n      swirl={0.8}\n      speed={0.2}\n    />\n  );\n}\n```\n\n## Palettes\n\nEvery shader accepts a `palette` prop that resolves to DS tokens at mount and re-resolves on `data-theme` change.\n\n| Palette | Tokens |\n|---------|--------|\n| `brand` (default) | `--ds-color-brand`, `--ds-color-brand-hover`, `--ds-color-interactive`, `--ds-color-text` |\n| `mono` | `--ds-color-text`, `--ds-color-text-secondary`, `--ds-color-text-tertiary`, `--ds-color-border-active` |\n| `editorial` | `--ds-color-brand`, `--ds-color-brand-subtle`, `--ds-color-surface-elevated`, `--ds-color-text-tertiary` |\n| `surface` | `--ds-color-surface`, `--ds-color-surface-muted`, `--ds-color-surface-elevated`, `--ds-color-border` |\n\nYou can always override with explicit color props:\n\n```tsx\n<MeshGradient colors={[\"#ff00ff\", \"#00ffff\", \"#ffff00\", \"#ff8800\"]} />\n```\n\n## Categories\n\n```ts\nimport { /* 20 components */ } from \"@digiko-npm/ds-shaders/effects\";\nimport { /* 6 components */ } from \"@digiko-npm/ds-shaders/filters\";\nimport { /* 3 components */ } from \"@digiko-npm/ds-shaders/logos\";\n```\n\n**Effects** (background, no input): `MeshGradient`, `StaticMeshGradient`, `StaticRadialGradient`, `SmokeRing`, `NeuroNoise`, `PerlinNoise`, `SimplexNoise`, `DotOrbit`, `DotGrid`, `Metaballs`, `Waves`, `Voronoi`, `Warp`, `GodRays`, `Spiral`, `Swirl`, `Dithering`, `GrainGradient`, `PulsingBorder`, `ColorPanels`.\n\n**Filters** (image input, optional): `PaperTexture`, `FlutedGlass`, `Water`, `ImageDithering`, `HalftoneDots`, `HalftoneCmyk`.\n\n**Logos** (image input, required for shape): `Heatmap`, `LiquidMetal`, `GemSmoke`. Pass `image=\"/logo.svg\"` to apply the shader to your logo's silhouette.\n\n## SSR\n\nShaders need a browser canvas. The wrappers use `useEffect` for token resolution; on the server they render with hardcoded fallback colors and hydrate once mounted. No `next/dynamic` required, but adding `ssr: false` is fine if you want to skip the fallback flash.\n\n## License\n\n`@paper-design/shaders-react` is licensed under PolyForm Shield 1.0.0 — free for commercial use except for products competing with Paper. This package inherits the same license. See [LICENSE](./LICENSE) and [REQUIRED-NOTICES.md](./REQUIRED-NOTICES.md).\n","readmeFilename":"README.md"}