{"_id":"@adamarant/ds-shaders","name":"@adamarant/ds-shaders","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@adamarant/ds-shaders","version":"0.1.1","description":"WebGL shaders for @adamarant/designsystem — opinionated React wrappers around @paper-design/shaders-react with DS token palettes.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.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"},"./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"}},"scripts":{"build":"tsc","dev":"tsc --watch"},"dependencies":{"@paper-design/shaders-react":"^0.0.76"},"peerDependencies":{"react":">=18.0.0"},"devDependencies":{"@types/react":"^19.0.0","react":"^19.0.0","typescript":"^5.7.0"},"keywords":["design-system","shaders","webgl","react","framer","paper-design"],"license":"SEE LICENSE IN LICENSE","repository":{"type":"git","url":"git+https://github.com/adamarant/designsystem.git","directory":"packages/ds-shaders"},"publishConfig":{"access":"public"},"gitHead":"427fda7841c48be85c8b21827e82449c8d3c4de0","_id":"@adamarant/ds-shaders@0.1.1","bugs":{"url":"https://github.com/adamarant/designsystem/issues"},"homepage":"https://github.com/adamarant/designsystem#readme","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-pdslyHLuEGyOpd2aSzjIJh87Wyj/CilEDkwxOjZSky3gcM6P0syHaAj3YlO1vp5ZDLvM4RP3OOJO04iqlTRQbg==","shasum":"7b302e49ac805da6ac31ecdeadf8297d36cec958","tarball":"https://registry.npmjs.org/@adamarant/ds-shaders/-/ds-shaders-0.1.1.tgz","fileCount":174,"unpackedSize":98322,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBALvmjU0SYD+qeTQdQd0hJo4WcWuYI+6S6rmYWA3d+aAiBh79GcJgoDo3ERZ+0kfvM8MgVD/7hdKvQpHm9/6N95uQ=="}]},"_npmUser":{"name":"digiko-npm","email":"riccardo@digiko.io"},"directories":{},"maintainers":[{"name":"digiko-npm","email":"riccardo@digiko.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ds-shaders_0.1.1_1780318322279_0.6496207778929206"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-01T12:52:02.042Z","0.1.1":"2026-06-01T12:52:02.460Z","modified":"2026-06-01T12:52:02.744Z"},"maintainers":[{"name":"digiko-npm","email":"riccardo@digiko.io"}],"description":"WebGL shaders for @adamarant/designsystem — opinionated React wrappers around @paper-design/shaders-react with DS token palettes.","homepage":"https://github.com/adamarant/designsystem#readme","keywords":["design-system","shaders","webgl","react","framer","paper-design"],"repository":{"type":"git","url":"git+https://github.com/adamarant/designsystem.git","directory":"packages/ds-shaders"},"bugs":{"url":"https://github.com/adamarant/designsystem/issues"},"license":"SEE LICENSE IN LICENSE","readme":"# @adamarant/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 @adamarant/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 \"@adamarant/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 \"@adamarant/ds-shaders/effects\";\nimport { /* 6 components */ } from \"@adamarant/ds-shaders/filters\";\nimport { /* 3 components */ } from \"@adamarant/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","_rev":"1-4750b46f6ec142c4ea2b655714d95e2c"}