{"id":32454200,"url":"https://github.com/tldraw/shader-starter-kit","last_synced_at":"2026-07-09T08:31:12.285Z","repository":{"id":318909672,"uuid":"1076851439","full_name":"tldraw/shader-starter-kit","owner":"tldraw","description":"Use interactive WebGL shaders as backgrounds on a tldraw canvas","archived":false,"fork":false,"pushed_at":"2026-07-01T10:33:46.000Z","size":76,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-01T12:22:25.841Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/tldraw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-15T12:39:16.000Z","updated_at":"2026-07-01T10:33:50.000Z","dependencies_parsed_at":"2025-10-17T06:20:48.469Z","dependency_job_id":"a760ed79-afc3-421f-b961-3ecaa4b0bdf7","html_url":"https://github.com/tldraw/shader-starter-kit","commit_stats":null,"previous_names":["tldraw/shader-starter-kit"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/tldraw/shader-starter-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fshader-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fshader-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fshader-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fshader-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tldraw","download_url":"https://codeload.github.com/tldraw/shader-starter-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fshader-starter-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35293216,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-09T02:00:07.329Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-10-26T07:54:20.480Z","updated_at":"2026-07-09T08:31:12.279Z","avatar_url":"https://github.com/tldraw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv alt style=\"text-align: center; transform: scale(.5);\"\u003e\n\t\u003cpicture\u003e\n\t\t\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/tldraw/tldraw/main/assets/github-hero-dark.png\" /\u003e\n\t\t\u003cimg alt=\"tldraw\" src=\"https://raw.githubusercontent.com/tldraw/tldraw/main/assets/github-hero-light.png\" /\u003e\n\t\u003c/picture\u003e\n\u003c/div\u003e\n\nThis template demonstrates how to integrate WebGL shaders with [tldraw](https://github.com/tldraw/tldraw), creating dynamic backgrounds that respond to canvas interactions. It includes four complete examples and a reusable `WebGLManager` base class for building custom shader effects.\n\n## Local development\n\nInstall dependencies with `yarn` or `npm install`.\n\nRun the development server with `yarn dev` or `npm run dev`.\n\nOpen `http://localhost:5173/` in your browser to see the app.\n\n## What's included\n\n- **WebGLManager base class** ([`src/WebGLManager.ts`](src/WebGLManager.ts)) - Handles WebGL lifecycle, viewport synchronization, and animation loop integration with tldraw's reactive system\n- **Four example shaders** - Fluid simulation, rainbow gradients, dynamic shadows, and a minimal starter template\n- **Config panel components** ([`src/config-panel/`](src/config-panel/)) - Pre-built UI controls for adjusting shader parameters with localStorage persistence\n- **Full TypeScript support** - Strongly typed throughout\n\nSwitch between examples using the toggle buttons in the tldraw style panel.\n\n## Examples\n\n### Fluid Simulation\n\nA real-time fluid simulation that creates dynamic flows from shape interactions. Based on Pavel Dobryakov's WebGL fluid implementation.\n\n- Navier-Stokes fluid dynamics\n- Shape movements create velocity-based splats\n- Configurable physics and visual effects\n\n**See:** [`src/fluid/`](src/fluid/) | [Documentation](src/fluid/fluid.md)\n\n### Rainbow\n\nAn animated gradient shader demonstrating time-based effects and uniform management.\n\n**See:** [`src/rainbow/`](src/rainbow/)\n\n### Shadows\n\nDynamic shadow casting from tldraw shapes using raymarching and signed distance fields.\n\n**See:** [`src/shadow/`](src/shadow/)\n\n### Minimal\n\nA bare-bones template for starting new shader projects. Renders a solid color that adapts to dark mode.\n\n**See:** [`src/minimal/`](src/minimal/) | [Documentation](src/minimal/minimal-example.md)\n\n## Architecture\n\n### WebGLManager\n\nThe `WebGLManager` class ([`src/WebGLManager.ts`](src/WebGLManager.ts)) provides the foundation for all shader examples. It handles:\n\n- WebGL2 context creation and lifecycle management\n- Automatic viewport synchronization with tldraw's canvas\n- Animation loop with lifecycle hooks: `onInitialize()`, `onUpdate()`, `onRender()`, `onDispose()`\n- Quality/resolution management\n- Integration with tldraw's reactive state system\n\nTo create a custom shader, extend `WebGLManager` and implement the lifecycle hooks. See the minimal example for a starting point.\n\n### Config Panel\n\nThe config panel system ([`src/config-panel/`](src/config-panel/)) provides reusable UI components for creating interactive shader controls:\n\n- `ConfigPanel` - Collapsible container with reset functionality\n- `ConfigPanelSlider` - Numeric slider control\n- `ConfigPanelBooleanControl` - Checkbox control\n\nConfig values are stored in reactive atoms and automatically persisted to localStorage. See [config-panel.md](src/config-panel/config-panel.md) for usage details.\n\n### Renderer Pattern\n\nEach example follows this pattern:\n\n1. Define a config interface extending `WebGLManagerConfig` in `config.ts`\n2. Create a shader manager class extending `WebGLManager`\n3. Write GLSL shaders (vertex and fragment)\n4. Create a React renderer component using `useLayoutEffect` to initialize the manager\n5. Build a config panel for live parameter adjustment\n6. Register the renderer as tldraw's `Background` component\n\nSee any of the example directories for complete implementations.\n\n## Creating a custom shader\n\nThe fastest way to create a custom shader is to copy the minimal example:\n\n```bash\ncp -r src/minimal src/my-shader\n```\n\nThen customize the following files:\n\n- `config.ts` - Define your configuration parameters\n- `fragment.glsl` / `vertex.glsl` - Write your shader code\n- `MyShaderManager.ts` - Extend WebGLManager and implement rendering logic\n- `MyRenderer.tsx` - Create the React component\n- `MyConfigPanel.tsx` - Build UI controls\n\nFinally, register your shader in [`src/App.tsx`](src/App.tsx).\n\nFor a detailed walkthrough, see [src/minimal/minimal-example.md](src/minimal/minimal-example.md).\n\n## Integration with tldraw\n\nThe `WebGLManager` has direct access to the tldraw editor instance, allowing you to:\n\n- Access shapes: `this.editor.getCurrentPageShapes()`\n- Listen to shape changes: `this.editor.store.listen()`\n- Get camera state: `this.editor.getCamera()`\n- Convert coordinates: `this.editor.pageToViewport()`\n- Track pointer position: `this.editor.inputs.getCurrentPagePoint()`\n\nThe fluid simulation example ([`src/fluid/FluidManager.ts`](src/fluid/FluidManager.ts)) demonstrates shape integration in depth.\n\n## Resources\n\n- [WebGL2 Fundamentals](https://webgl2fundamentals.org/) - WebGL tutorials\n- [The Book of Shaders](https://thebookofshaders.com/) - GLSL shader programming\n- [Shadertoy](https://www.shadertoy.com/) - Shader examples\n- [tldraw Documentation](https://tldraw.dev) - tldraw SDK docs\n\n## License\n\nThis project is provided under the MIT license found [here](https://github.com/tldraw/vite-template/blob/main/LICENSE.md). The tldraw SDK is provided under the [tldraw license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md).\n\n## Trademarks\n\nCopyright (c) 2024-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our [trademark guidelines](https://github.com/tldraw/tldraw/blob/main/TRADEMARKS.md) for info on acceptable usage.\n\n## Distributions\n\nYou can find tldraw on npm [here](https://www.npmjs.com/package/@tldraw/tldraw?activeTab=versions).\n\n## Contribution\n\nFound a bug? Please [submit an issue](https://github.com/tldraw/tldraw/issues/new).\n\n## Community\n\nHave questions, comments or feedback? [Join our discord](https://discord.tldraw.com/?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=sociallink). For the latest news and release notes, visit [tldraw.dev](https://tldraw.dev).\n\n## Contact\n\nFind us on Twitter/X at [@tldraw](https://twitter.com/tldraw).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftldraw%2Fshader-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftldraw%2Fshader-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftldraw%2Fshader-starter-kit/lists"}