大家好，我是 xy。
前端做炫酷动效，最头疼的就是效果难调、代码难写，尤其涉及 WebGL、WebGPU 这些图形技术。
现在，好消息来了！
曾经商用需要付费的网页特效神器 Shaders，突然宣布开源！
而且一口气开放了 200+ 特效组件，支持 Vue、React、Svelte 等框架，MIT 协议，免费商用！
更有意思的是，官方连 AI Skill 都安排好了，支持 Codex、Cursor、Claude Code。
Shaders 是什么？
Shaders 是一个基于 WebGPU 的网页特效组件库，可以把复杂的 GPU 渲染效果当成普通前端组件使用。
目前官方提供了 200+ 特效组件，涵盖：
渐变与光效：动态渐变、流光、光照。 玻璃与金属：玻璃折射、金属质感。 交互动效：鼠标跟随、波纹、扭曲。 视觉滤镜：模糊、噪点、转场效果。
这些效果可以自由叠加、混合，甚至响应鼠标操作，非常适合产品官网、活动页、作品集等场景。
以前收费，现在免费商用！
10 月 6 日，Shaders 官方宣布正式开源，核心项目采用 MIT 协议。
这次开放的不只是几个 Demo，而是包含了 渲染引擎、基础特效组件以及多框架适配层。
个人项目、商业网站、SaaS 产品都可以免费使用。
不过需要注意，官方的 Pro 高级预设、网页模板等仍然收费，并不是整个平台完全免费。
Vue、React 直接使用
使用方式非常简单，先安装依赖：
npm install shaders
以 Vue 3 为例：
<script setup>
import {
Shader,
LinearGradient,
CursorTrail
} from 'shaders/vue'
</script>
<template>
<Shader class="w-full h-64">
<LinearGradient
colorA="#0f172a"
colorB="#7c3aed"
/>
<CursorTrail />
</Shader>
</template>
几行代码，就能实现 动态渐变背景 + 鼠标跟随特效。
React、Svelte、Solid 也提供了对应入口，不需要自己编写复杂的 Shader 代码。
可视化编辑器也免费了！
不想写代码？直接打开官方编辑器就行。
在编辑器中可以组合各种特效、调整颜色和参数、实时预览效果。
最关键的是，现在登录免费账号，就能直接导出对应前端框架的组件代码！
调好效果，点击 Export Code，复制到项目就能用。
AI Skill 也安排上了！
这次还有个非常实用的更新。
Shaders 官方推出了 Agent Skill，让 Codex、Claude Code、Cursor 等 AI 编程工具了解整个组件体系。
安装只需要一条命令：
npx shaders skill
也可以通过 skills 安装：
npx skills add shader-effects-inc/shaders
安装后，AI 可以了解特效组件如何组合，并查询官方文档获取对应的参数和使用方法。
例如直接告诉 Codex：
「使用 Shaders，帮我的 Vue 官网添加动态渐变背景、玻璃质感和鼠标交互动效。」
如果还想让 AI 搜索、安装、修改 Shaders 项目，也可以接入官方 MCP：
npx shaders@latest install-mcp
对经常用 AI 写前端页面的开发者来说，这套组合值得尝试。
写在最后
200+ 特效免费开源、多框架支持、可视化编辑器免费导出，再加上 AI Skill。
这次 Shaders 确实很有诚意。
现在 AI 写网页越来越方便，但生成的页面经常缺少视觉亮点。以后觉得网页太普通，不妨让 AI 配合 Shaders 改一版。
不过实际开发时，记得考虑 WebGPU 的浏览器兼容性。
相关链接：
官网： https://shaders.comGitHub： https://github.com/shader-effects-inc/shaders可视化编辑器： https://shaders.com/design-editorAI Skill： https://shaders.com/docs/guide/agent-skill官方开源公告： https://shaders.com/updates/shaders-is-open-source