[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73933":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},73933,"shaders","paper-design\u002Fshaders","paper-design","Zero-dependency canvas shaders that can be installed from npm or designed in Paper","https:\u002F\u002Fshaders.paper.design",null,"TypeScript",2155,89,11,3,0,15,33,87,45,103.06,"Other",false,"main",true,[27,5,28],"react","webgl","2026-06-12 04:01:12","# Paper Shaders\n\n![mesh-gradient-shader](.\u002Fdocs\u002Fpublic\u002Fimages\u002Fgit-readme-picture.webp)\n\n### Getting started\n\n```\n\u002F\u002F React\nnpm i @paper-design\u002Fshaders-react\n\n\u002F\u002F vanilla\nnpm i @paper-design\u002Fshaders\n\n\u002F\u002F Please pin your dependency – we will ship breaking changes under 0.0.x versioning\n```\n\n### Documentation\n\n[React documentation and interactive examples →](https:\u002F\u002Fshaders.paper.design\u002F)\n\n### React example\n\n```jsx\nimport {MeshGradient, DotOrbit} from '@paper-design\u002Fshaders-react';\n\n\u003CMeshGradient\n    colors={['#5100ff', '#00ff80', '#ffcc00', '#ea00ff']}\n    distortion={1}\n    swirl={0.8}\n    speed={0.2}\n    style={{width: 200, height: 200}}\n\u002F>\n\n\u003CDotOrbit\n    colors={['#d2822d', '#0c3b7e', '#b31a57', '#37a066']}\n    colorBack={'#000000'}\n    scale={0.3}\n    style={{width: 200, height: 200}}\n\u002F>\n\n\u002F\u002F these settings can be configured in code or designed in Paper\n```\n\n### Goals:\n\n- Give designers a visual way to use common shaders in their designs\n- What you make is directly exportable as lightweight code that works in any codebase\n\n### What it is:\n\n- Zero-dependency HTML canvas shaders that can be installed from npm or designed in Paper\n- To be used in websites to add texture as backgrounds or masked with shapes and text\n- Animated (or not, your choice) and highly customizable\n\n### Values:\n\n- Very lightweight, maximum performance\n- Visual quality\n- Abstractions that are easy to play with\n- Wide browser and device support\n\n### Framework support:\n\n- Vanilla JS ([@paper-design\u002Fshaders](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@paper-design\u002Fshaders))\n- React JS ([@paper-design\u002Fshaders-react](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@paper-design\u002Fshaders-react))\n- Vue and others: intent to accept community PRs in the future\n\n## Release notes\n\n[View changelog →](.\u002FCHANGELOG.md)\n\n## Building and publishing\n\n1. Bump the version numbers as desired manually\n2. Use `bun run build` on the top level of the monorepo to build each package\n3. Use `bun run publish-all` to publish all (or `bun run publish-all-test` to do a dry run). You can do this even if you just bumped one package version. The others will fail to publish and continue.\n\n## License and use\n\nPaper Shaders uses the PolyForm Shield license. This means the code is free to use in any commercial or non-commercial apps, products, and libraries, as long as they do not compete with Paper or Paper Shaders.\n\nYou may NOT use this code in library or in a design tool that competes with Paper or Paper Shaders.\n\nWe ask that you link to Paper Shaders if you use this code (it helps us continue investing in this project). Thank you!\n\n[Read the full license →](.\u002FLICENSE)\n\nRequired Notice: Copyright Lost Coast Labs, Inc. (http:\u002F\u002Fpaper.design)\n","Paper Shaders 是一个无依赖的 HTML canvas 着色器库，可以从 npm 安装或在 Paper 中设计。其核心功能包括支持 React 和原生 JavaScript 的着色器组件，如 MeshGradient 和 DotOrbit，这些组件高度可定制且支持动画效果。技术上追求极致轻量级和高性能，同时确保广泛的浏览器和设备兼容性。适用于需要为网站添加纹理背景或与形状、文本结合使用的场景，尤其适合希望在设计中直接使用高质量视觉效果的开发者。",2,"2026-06-11 03:47:58","high_star"]