{"id":26983813,"url":"https://github.com/paper-design/shaders","last_synced_at":"2025-04-03T17:04:49.138Z","repository":{"id":258006523,"uuid":"870282240","full_name":"paper-design/shaders","owner":"paper-design","description":"Zero-dependency canvas shaders that can be installed from npm or designed in Paper","archived":false,"fork":false,"pushed_at":"2025-03-27T13:25:48.000Z","size":2162,"stargazers_count":488,"open_issues_count":7,"forks_count":13,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-27T14:28:58.037Z","etag":null,"topics":["react","shaders","webgl"],"latest_commit_sha":null,"homepage":"https://paper.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paper-design.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-09T18:57:05.000Z","updated_at":"2025-03-27T03:18:14.000Z","dependencies_parsed_at":"2025-01-14T11:22:45.699Z","dependency_job_id":"9de7403f-d87d-4097-b402-79fe38d2d18f","html_url":"https://github.com/paper-design/shaders","commit_stats":null,"previous_names":["paper-design/shaders"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paper-design%2Fshaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paper-design%2Fshaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paper-design%2Fshaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paper-design%2Fshaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paper-design","download_url":"https://codeload.github.com/paper-design/shaders/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247043339,"owners_count":20874086,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","shaders","webgl"],"created_at":"2025-04-03T17:03:18.321Z","updated_at":"2025-04-03T17:04:49.119Z","avatar_url":"https://github.com/paper-design.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Paper Shaders\n\n![mesh-gradient-shader](https://github.com/user-attachments/assets/2db6e087-764c-4c36-bee7-451b09c4c91e)\n\n### Getting started\n\n```\n// React\nnpm i @paper-design/shaders-react\n\n// vanilla\nnpm i @paper-design/shaders\n\n// Please pin your dependency – we will ship breaking changes under 0.0.x versioning\n```\n\n### React example\n\n```jsx\nimport { MeshGradient } from '@paper-design/shaders-react';\n\n\u003cMeshGradient\n  color1=\"#FFC0CB\" // pink\n  color2=\"#FFFF00\" // yellow\n  color3=\"#0000FF\" // blue\n  color4=\"#800080\" // purple\n  speed={0.25}\n  style={{ width: 500, height: 200 }}\n/\u003e;\n\n// 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/shaders)\n- React JS (@paper-design/shaders-react)\n- Vue and others: intent to accept community PRs in the future\n\n### Examples:\n\n#### React\n\n```jsx\nimport { MeshGradient } from '@paper-design/shaders-react';\n\n\u003cMeshGradient\n  color1=\"#FFC0CB\" // pink\n  color2=\"#FFFF00\" // yellow\n  color3=\"#0000FF\" // blue\n  color4=\"#800080\" // purple\n  speed={0.25}\n  style={{ width: 500, height: 200 }}\n/\u003e;\n\n// these settings can be configured in code or designed in Paper\n```\n\n#### Vanilla JS\n\n```js\nimport { ShaderMount, meshGradientFragmentShader, getShaderColorFromString } from '@paper-design/shaders';\n\nconst myDiv = document.createElement('div');\ndocument.body.appendChild(myCanvas);\nmyDiv.style.width = '600px';\nmyDiv.style.height = '400px';\n\nconst shaderParams = {\n  u_color1: getShaderColorFromString('#283BFC'),\n  u_color2: getShaderColorFromString('#FF2828'),\n  u_color3: getShaderColorFromString('#dddddd'),\n  u_color4: getShaderColorFromString('#800080'),\n};\n\nconst speed = 0.25;\nconst meshGradient = new ShaderMount(myDiv, meshGradientFragmentShader, shaderParams, undefined, speed);\n```\n\n## Roadmap:\n\n### Patterns:\n\n- Perlin noise (done)\n- Meta balls (done)\n- Mesh gradient (done)\n- Dot Grid (done)\n- Voronoi\n- Dither\n- Vector fields\n- Sine wave\n\n### VFX\n\n- God rays\n- Stripe\n- Water\n- Lo-fi\n- Warp\n- Swirl\n- Crystals\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\nFeel free to use this code in any projects, commercial or otherwise.\n\nIf you use this code or wrap the library to create another shader library or tool, we ask that you give attribution and link to Paper Shaders (it helps us continue investing in this project). Thank you!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaper-design%2Fshaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaper-design%2Fshaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaper-design%2Fshaders/lists"}