Shaders, WebGPU Components for React, Vue, Svelte, Solid, JavaScript and Framer

Shaders is a platform that provides effects as components for popular JavaScript frameworks such as React, Vue, Svelte, Solid, JavaScript, and Framer. Every effect is represented as a component that renders the canvas, with its children being layers evaluated top to bottom and blended on the GPU. The platform offers 200+ components with live previews and documented props.

Most users do not write their effects manually; instead, they design them using the design editor at shaders.com. This infinite canvas allows users to stack components, adjust each prop with real-time controls, drive props from the cursor or timeline, and see the results live. When the design is complete, users can export the code, which generates the component tree in their chosen framework, ready to be pasted.

The design and export features are free with an account; the saved projects can be accessed and edited later. The Command Line Interface (CLI) connects a user's codebase to their Shaders account, allowing the designed effects to be saved as real component files and kept in sync. The CLI automatically detects the framework and writes the components to the designated folder, recording the installed packages in a lock file.

The platform is free to use, with a Pro version offering additional benefits, including the ability to write new components. A component is a plain object passed to defineShader, which specifies the component's name, its props, and the drawing instructions for each pixel. Users can mount the component using CustomShader, just like any other component.

To write a custom component, users can choose between composing it from standard primitives (experimental) or writing WGSL directly (stable). The contributing guide is available for those interested in contributing to the engine, which lives in packages/core. Each component is located in a separate folder under src/shaders/. The framework packages are generated from the engine code.

The Shaders platform supports WebGPU components for multiple JavaScript frameworks, including React, Vue, Svelte, Solid, JavaScript, and Framer.