shaders

一行组件接入 WebGPU 炫酷着色器效果

开源 🏷️定价信息待确认 ⏳ 访问状态待核验设计创意 🍴 复刻 238 🐛 待处理 6 👀 关注 7

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 5271

维护状态活跃

是否开源开源

定价模式 🏷️定价信息待确认

项目预览

项目数据

分类设计创意

开发团队shader-effects-inc

官网地址https://shaders.com

GitHubhttps://github.com/shader-effects-inc/shaders

定价模式🏷️定价信息待确认

价格说明定价信息待确认

访问状态⏳ 访问状态待核验

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型cli,javascript,mcp,react,shaders,solid,svelte,vue,webgpu-shaders

GitHub 星标★ 5271

上线时间2026-09-29 00:00:00

代码更新2026-10-21

仓库体积7.8 MB

本站数据更新2026-10-22

维护状态活跃

收录时间2026-10-22

浏览次数0

项目介绍

shaders 是一套面向 WebGPU 的着色器组件库，让前端开发者无需深入 WGSL 着色器语言，就能在 React、Vue、Svelte、Solid、原生 JS 以及 Framer 中直接使用高质量的 GPU 视觉效果。它解决的是 WebGPU 上手门槛高、着色器代码难以复用、跨框架适配成本大的问题。核心能力包括：提供开箱即用的着色器组件与预设效果，统一封装 WebGPU 渲染管线，支持多框架的声明式调用；附带 CLI 工具和 MCP 集成，方便在开发流程中生成、调试与接入着色器；基于 TypeScript 编写，类型友好。项目定位为设计创意方向的视觉增强工具，适合做背景动效、过渡动画、交互式视觉等场景，让创意实现从写底层 GPU 代码变成组合组件。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-10-22 · 当前星标 ★ 5271

技术标签

cli javascript mcp react shaders

使用教程

⚠ 本教程由 AI 依据该项目 README 整理；原始文档不完整，部分步骤为通用流程推断，实际安装请以项目官方文档为准。

难度：入门约 10 分钟部署方式：库/依赖 4 步

⚠ 该项目 README 未提供完整安装说明，以下步骤为通用流程，请以官方文档为准。

环境要求

Node.js 与 npm（用于 npm install shaders）
已有一个前端项目：React、Vue、Svelte、Solid 或原生 JavaScript
运行环境为支持 WebGPU 的现代浏览器（如新版 Chrome / Edge）

安装与启动步骤

1确认 Node 环境

先确认本机已装 Node.js 与 npm，能在项目目录执行 npm 命令；版本无特殊要求说明。
```
node -v && npm -v
```
2安装 shaders 包

在项目根目录执行安装命令，把 shaders 添加为项目依赖，README 只给出这一条安装命令。
```
npm install shaders
```
3查看组件与用法

README 未给出具体引入代码，请到官网浏览 200+ 组件示例与各框架的接入方式，再照着写。
4在页面中挂载效果

在 React / Vue / Svelte / Solid 或原生 JS 中按官网示例声明式引入组件，作为背景或过渡动效使用。