Shaders 这个开源 WebGPU 着色器特效组件库必须收藏，200+ 种视觉效果封装成声明式组件、React / Vue / Svelte / Solid / 原生 JS 共用一个包、同一套 props、MIT 协议

爱点赞的同志君

Shaders 这个开源 WebGPU 着色器特效组件库必须收藏，200+ 种视觉效果封装成声明式组件、React / Vue / Svelte / Solid / 原生 JS 共用一个包、同一套 props、MIT 协议
@npm_i_shaders


开源地址：https://github.com/shader-effects-inc/shaders

Textures 纹理生成器（54 个）最大板块，页面背景的主力。 各方向渐变（Linear / Radial / Conic / Diamond / Mesh / MultiPoint，均支持 oklch/oklab 等色彩空间插值）；一整个噪声家族（Perlin、Simplex、Fractal、Curl、Worley、Voronoi、Wavelet、Gabor、Block、Erosion，每种噪声视觉性格不同）；自然现象类 Aurora（极光）、Godrays（体积光）、SunBurst、Plasma、Nebula 风 Spiral；图案类 BrickPattern、HexGrid、Truchet、IsometricCubes、Weave、Marble、Strands、StudioBackground（摄影棚背景布）。

Stylize 风格化（31 个）“变成某种介质/年代感”。 模拟介质的：Ascii（字符画）、Halftone（印刷网点）、Paper、Watercolor、Engraving（雕版线）、Wool、Stone；模拟显示设备的：CRTScreen、VHS、CompressionArtifacts（视频压缩损坏）、DataMosh、Pixelate、Dither；摄影/影视附件的：FilmGrain、LensFlare、LensDistortion、LightLeak（漏光）、Vignette、DropShadow、Glow；还有两个很特别的，KeyFrames 和 ObjectTracker，直接把“动作跟踪关键帧框”和“目标检测框”这种后期软件 UI 画成特效。

Shape Effects 形状特效（23 个）材质与质感。 Glass、Frost（磨砂）、Chrome、LiquidMetal、BrushedMetal、Obsidian（黑曜石）、Plastic、ThinFilm（薄膜干涉/皂泡色）、Hologram、Neon、Emboss、Heatmap、Goo（粘连）、Water、Crystal、Voxels（把形状重建成体素积木，带环境光遮蔽和投影）。

Distortions 扭曲变形（22 个）几何操作。 经典的 Bulge、Twirl、Swirl（在 Textures 里）、Kaleidoscope、Mirror、Spherize、Stretch、Flip、Perspective、CornerPin（四角拉扯）；波浪类的 Bend、WaveDistortion、FlutedGlass；坐标系统互换的 Polar ↔ Rectangular；排布类的 Repeater（阵列重复）。三个 3D 的也在这类：Form3D（把内容包到 3D 形体上做光线步进）、Surface3D（内容覆盖在 3D 波面上）。

Interactive 交互（16 个）响应输入的活效果。 光标类的 CursorTrail（拖尾）、CursorRipples（涟漪）、PixelThrow、PixelSort（像素排序，可被鼠标触发）；模拟类的 Boids（鸟群）、MagneticFilings（磁粉）、ParticleFlow、InkFlow（墨水扩散）、Smoke / SmokeFlow（烟雾）、ReactionDiffusion（拖拽处开花的一直在“活着”的图灵斑图）、Shatter（打碎）、Liquify（液化涂抹）、Fog、ChromaFlow、GridDistortion。

Adjustments 调色（14 个）标准调色带。 亮度对比度、曝光、灰度、色相/饱和度/自然饱和度、反色、色调分离、渐变映射、双色调/三色调、色调、锐化、过度曝光（Solarize）、FilmStock（胶片调色）。

Blurs 模糊（9 个）模糊的细分形态。 基础 Blur 之外：BokehBlur（焦外）、TiltShift（移轴）、ZoomBlur、AngularBlur（旋转模糊）、LinearBlur（方向模糊）、ChannelBlur（分通道模糊）、DiffuseBlur（扩散）、ProgressiveBlur（渐进模糊，苹果发布会海报那种上下渐隐）。

Transitions 转场（13 个）。LinearWipe / RadialWipe / IrisWipe / DiamondWipe 等经典划像，CheckerWipe、SliceWipe、RandomBars、BlockDissolve、NoiseDissolve、VenetianBlinds（百叶窗）、BarnDoors、PagePeel（翻页）。

组件之外：这些“非特效”组件同样重要
· 媒体输入：ImageTexture、VideoTexture、WebcamTexture（摄像头实时画面，可控 object-fit），任何特效都能直接作用于真实媒体。
· Text：任意 Google 字体的文字，支持多行、对齐、行高，作为普通图层参与混合和特效。
· Group：容器，flow prop 提供 flexbox 式的行列布局，可以像排版一样组织图层。
· HTMLInCanvas：把活的 DOM 内容渲染成纹理图层（目前需 Chrome Canary 开实验 flag），很激进的能力。

每个组件都自带的通用能力
这部分让 200 个组件实际膨胀成“200 × 组合空间”：
· 18 种混合模式（normal、multiply、screen、overlay、colorDodge、hue、luminosity……与 Photoshop 同名同义）加 opacity、visible；
· 遮罩：任意图层可作另一个图层的遮罩（亮度/alpha 等方式）；
· boundingBox 定位：uv（画布百分比）或 px 双单位，支持旋转和原点，resize 不跑位；
· 动态 prop 驱动器，不写动画代码的动画系统：auto-animate（乒乓/往复动画）、mouse-position / mouse（光标驱动任意参数，带平滑和动量）、map（读取另一个图层的亮度/通道来驱动本层参数）。也就是说 Blur 的强度可以跟随鼠标、Circle 的半径可以由背景渐变的亮度驱动；
· defineShader 自定义扩展：写自己的组件（定义 props + 一个 paint 函数），注册后与 200 个内置组件同等地参与组合、遮罩、混合。