Repolode
Submit
shader-effects-inc

shader-effects-inc/shaders

WebGPU shader effects packaged as drop-in components for React, Vue, Svelte, Solid and plain JavaScript, with a visual editor that exports code.

Open-source alternative to:Paper ShadersSpline

View on GitHubWebsite
Stars
5,001
Forks
212
Open issues
0
Last commit
9 days ago

What is it?

Shaders is a component library that renders WebGPU visual effects such as gradients, noise, glass, distortions, transitions, blurs and cursor-driven effects. Each effect is a component, and a Shader wrapper stacks child layers that are blended on the GPU. The same components and props are available for React, Vue, Svelte, Solid and plain JavaScript from a single npm package.

Beyond hand-written code, the project pairs with a browser-based design editor where effects are tuned visually and the resulting component tree can be exported for the chosen framework. A CLI links a codebase to a Shaders project, installs selected effects as component files, and keeps them updated. It also ships an agent skill and an MCP server so coding assistants can find and edit effects.

Advanced users can define custom components by writing WGSL pixel code through a defineShader API. The engine is MIT licensed, while the hosted editor, preset library and some platform features are covered by separate terms.

Key features

  • 01Over 200 WebGPU effect components such as gradients, glass, noise and transitions
  • 02Same component API across React, Vue, Svelte, Solid and plain JavaScript
  • 03Visual design editor that exports the component tree as framework code
  • 04CLI for linking a project, installing effects as files and pulling updates
  • 05Custom components written with defineShader and WGSL
  • 06Agent skill and MCP server for AI coding assistants

Use cases

  • Adding animated gradient or glass backgrounds to a marketing site or landing page
  • Building interactive cursor effects and hover transitions in a React or Vue app
  • Designing hero visuals visually and exporting them into an existing frontend project
  • Letting an AI coding agent install and adjust shader effects in a web project

Topics

#webgpu#shaders#animation#react#vue#svelte#graphics#creative-coding#cli#javascript

FAQ

What is shaders?
WebGPU shader effects packaged as drop-in components for React, Vue, Svelte, Solid and plain JavaScript, with a visual editor that exports code. Shaders is a component library that renders WebGPU visual effects such as gradients, noise, glass, distortions, transitions, blurs and cursor-driven effects. Each effect is a component, and a Shader wrapper stacks child layers that are blended on the GPU. The same components and props are available for React, Vue, Svelte, Solid and plain JavaScript from a single npm package.
Is shaders free to use? What license does it have?
shaders is open source under the MIT license. Check the license terms before using it in commercial products.
Is shaders still maintained?
Actively maintained. The last commit to shaders was on Oct 9, 2026.
What can I use shaders for?
Adding animated gradient or glass backgrounds to a marketing site or landing page Building interactive cursor effects and hover transitions in a React or Vue app Designing hero visuals visually and exporting them into an existing frontend project Letting an AI coding agent install and adjust shader effects in a web project
Where can I get shaders?
The source code and installation instructions are on GitHub: https://github.com/shader-effects-inc/shaders

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects