shaders

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shaders

Shaders is a WebGPU component library. One package,

shaders

, with components that compose like layers in Figma. Everything below is free and MIT licensed. Pro, where it applies, is marked.

Shaders 是一个 WebGPU 组件库。只需一个

shaders

包，其组件的组合方式就像 Figma 中的图层。以下所有内容均免费，并采用 MIT 许可证。Pro 功能（如有）都会明确标注。

Setting up a project

项目设置

Run the CLI inside the user's project before writing any shader code:

bash

npx shaders connect

It detects the framework, installs

shaders

with the project's package manager, writes

shaders.config.ts

, signs the user in through their browser, connects the codebase to a Shaders project (a canvas in the design editor), and installs this skill. Always use explicit subcommands like these: bare

npx shaders

is an interactive menu for humans. In CI or without a browser, set

SHADERS_API_KEY

to a personal API key.

--no-auth

skips the sign-in,

--yes

skips every prompt.

Once connected, three commands cover the workflow:

bash

npx shaders install              # pick shaders from the connected project; writes component files
npx shaders search "<look>"      # search the preset library by describing the look (free, no sign-in)
npx shaders preview offsets-1    # open a preset on shaders.com so the user can see it running
npx shaders install offsets-1    # a preset from the library, by name (Pro)
npx shaders update               # pull in what the user changed in the design editor
npx shaders open                 # open the connected project in the design editor

Each install writes one component file into

outDir

(recorded in

shaders.lock.json

) with the full component tree and every prop inline. Treat it as ordinary source: edit props, bind them to state, compose it with other effects.

update

leaves files with local edits alone unless

--force

is passed.

When a user asks for an effect:

If a component or two can make it (a gradient with a cursor trail, a blurred image, glass over a logo, noise behind text), compose it by hand from the components below. Try this first.
Otherwise search the preset library:
```
npx shaders search "liquid chrome hero background" --json
```
. Results carry a name, a description, a match score and a page URL. Let the user see a candidate running with
```
npx shaders preview <name>
```
(opens shaders.com), then install it with
```
npx shaders install <name>
```
(Pro, see below).
If the user already designed it in the editor:
```
npx shaders install
```
and pick it.

The MCP server (

npx shaders install-mcp

) gives you tools to search presets, read a shader's props, and generate SDF files from SVGs. Use it when installed.

在编写任何 shader 代码之前，在用户的项目中运行 CLI：

bash

npx shaders connect

它会检测所用框架，使用项目的包管理器安装

shaders

，写入

shaders.config.ts

，通过浏览器让用户登录，将代码库连接到一个 Shaders 项目（即设计编辑器中的画布），并安装此 skill。务必使用如下显式子命令：直接运行

npx shaders

会打开供人工操作的交互式菜单。在 CI 或无法使用浏览器时，将

SHADERS_API_KEY

设置为个人 API key。

--no-auth

会跳过登录，

--yes

会跳过所有提示。

连接完成后，以下三个命令覆盖整个工作流：

bash

npx shaders install              # pick shaders from the connected project; writes component files
npx shaders search "<look>"      # search the preset library by describing the look (free, no sign-in)
npx shaders preview offsets-1    # open a preset on shaders.com so the user can see it running
npx shaders install offsets-1    # a preset from the library, by name (Pro)
npx shaders update               # pull in what the user changed in the design editor
npx shaders open                 # open the connected project in the design editor

每次安装都会在

outDir

中写入一个组件文件，

outDir

记录在

shaders.lock.json

中；文件包含完整的组件树，并将所有 props 内联。将其视为普通源代码：可以编辑 props、将其绑定到 state，也可以与其他效果组合。

update

会保留存在本地编辑的文件，除非传入

--force

。

当用户要求某种效果时：

如果一两个组件就能实现该效果（例如带光标拖尾的渐变、模糊图片、覆盖 logo 的玻璃效果、文字背后的噪声），请使用下方组件手动组合。始终先尝试这种方式。
否则搜索预设库：
```
npx shaders search "liquid chrome hero background" --json
```
。结果包含名称、描述、匹配分数和页面 URL。让用户通过
```
npx shaders preview <name>
```
查看候选效果的运行情况（会打开 shaders.com），然后使用
```
npx shaders install <name>
```
安装（Pro，见下文）。
如果用户已经在编辑器中完成设计： 运行
```
npx shaders install
```
并进行选择。

MCP 服务器（

npx shaders install-mcp

）提供工具，用于搜索预设、读取 shader 的 props，以及从 SVG 生成 SDF 文件。安装后即可使用。

Composing an effect

组合效果

<Shader>

renders one

<canvas>

. Components inside it are layers, drawn in order: first child at the bottom, last on top.

jsx

import { Shader, LinearGradient, CursorTrail } from 'shaders/react'

<Shader className="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" angle={45} colorSpace="oklch" />
  <CursorTrail />
</Shader>

Rules that hold for every component:

Size the canvas with CSS on
<Shader>
(
```
class
```
,
```
className
```
or
```
style
```
). The canvas has no size of its own and resizes with its container. Never style the inner
```
<canvas>
```
.
Effects apply to what's drawn before them. A component that transforms imagery (blurs, distortions, adjustments, stylize, shape effects, transitions) is an effect. Placed as a sibling, it applies to every layer above it in the tree, so a flat stack is the default: image, then Blur, then Vignette. Nest layers inside an effect only when it must touch those layers and nothing else (a ripple on one grid while the swirl behind it stays still). Effects are marked "needs input" in
```
components.md
```
; they need something drawn before them or nested inside them. Generators (textures, shapes) draw on their own.

Universal props on every component:

blendMode

(

normal

multiply

screen

overlay

softLight

hardLight

linearDodge

linearBurn

colorDodge

colorBurn

darken

lighten

difference

exclusion

hue

saturation

color

luminosity

opacity

(0–1),

visible

maskSource

maskType

boundingBox

absolute

Masking: give the mask layer an
```
id
```
, set
```
visible={false}
```
on it, and set
```
maskSource="thatId"
```
on the layer to mask. Hidden layers still exist in the tree, so they work as masks.

Placement:

boundingBox={{ x: { unit: 'px', value: 24 }, y: { unit: 'uv', value: 0.1 }, width: ..., height: ..., origin: 'top-left', rotation: 15 }}

uv

is a 0–1 fraction of the canvas,

px

is CSS pixels and survives resizes.

Group is a container. Its
```
flow
```
prop (
```
{ mode: 'column' | 'row', gap, align }
```
) stacks its children like flexbox.
Color props take CSS hex strings. Components with a
```
colorSpace
```
prop blend in
```
linear
```
,
```
oklch
```
,
```
oklab
```
,
```
hsl
```
,
```
hsv
```
or
```
lch
```
.
```
oklab
```
and
```
oklch
```
keep gradient midpoints bright.

<Shader>

会渲染一个

<canvas>

。其内部组件是图层，按顺序绘制：第一个子组件位于底部，最后一个位于顶部。

jsx

import { Shader, LinearGradient, CursorTrail } from 'shaders/react'

<Shader className="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" angle={45} colorSpace="oklch" />
  <CursorTrail />
</Shader>

以下规则适用于每个组件：

使用 CSS 在
```
<Shader>
```
上设置 canvas 尺寸（
```
class
```
、
```
className
```
或
```
style
```
）。canvas 自身没有尺寸，会随容器调整大小。绝不要设置内部
```
<canvas>
```
的样式。
效果会作用于此前绘制的内容。对图像进行变换的组件（模糊、扭曲、调整、风格化、形状效果、转场）是一种 effect。作为同级组件放置时，它会作用于组件树中排在它之前的每一层，因此默认采用扁平堆叠：图片、然后 Blur、然后 Vignette。仅当某个效果必须作用于特定图层而不影响其他图层时，才将图层嵌套在该效果内；例如，让涟漪作用于一个网格，同时让其后的漩涡保持静止。
```
components.md
```
会将需要输入的组件标记为 “needs input”；它们前面需要有已绘制的内容，或需要将内容嵌套在其中。生成器（纹理、形状）会自行绘制内容。

每个组件的通用 props：

blendMode

（

normal

、

multiply

、

screen

、

overlay

、

softLight

、

hardLight

、

linearDodge

、

linearBurn

、

colorDodge

、

colorBurn

、

darken

、

lighten

、

difference

、

exclusion

、

hue

、

saturation

、

color

、

luminosity

）、

opacity

（0–1）、

visible

、

maskSource

maskType

、

boundingBox

、

absolute

。

遮罩：为 mask 图层设置
```
id
```
，将其设为
```
visible={false}
```
，并在目标图层上设置
```
maskSource="thatId"
```
以应用遮罩。隐藏图层仍存在于组件树中，因此可用作 mask。

放置：

boundingBox={{ x: { unit: 'px', value: 24 }, y: { unit: 'uv', value: 0.1 }, width: ..., height: ..., origin: 'top-left', rotation: 15 }}

。

uv

是 canvas 的 0–1 比例，

px

是 CSS 像素，并会在尺寸变化后保持不变。

Group 是一个容器。其
```
flow
```
prop（
```
{ mode: 'column' | 'row', gap, align }
```
）会像 flexbox 一样堆叠子组件。
颜色 props 接受 CSS 十六进制字符串。带有
```
colorSpace
```
prop 的组件可使用
```
linear
```
、
```
oklch
```
、
```
oklab
```
、
```
hsl
```
、
```
hsv
```
或
```
lch
```
进行混合。
```
oklab
```
和
```
oklch
```
可让渐变中点保持明亮。

Dynamic props

动态 Props

Pass an object with a

type

in place of a number or

{x, y}

value. No animation code needed:

jsx

<Circle radius={{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6, speed: 1 }} />
<Circle center={{ type: 'mouse-position', smoothing: 0.12, momentum: 0.2 }} />
<Blur intensity={{ type: 'mouse', axis: 'x', outputMin: 0, outputMax: 40, smoothing: 0.1 }} />
<LinearGradient id="grad" colorA="#000000" colorB="#ffffff" />
<Circle radius={{ type: 'map', source: 'grad', channel: 'luminance', inputMin: 0, inputMax: 1, outputMin: 0.02, outputMax: 0.12 }} />

mouse-position

drives any

{x, y}

prop (

center

position

offset

mouse

maps one cursor axis to a number.

map

reads another layer by

id

. Framework state works on any prop too and updates on the next frame without recompiling.

在数字或

{x, y}

值的位置传入一个带

type

的对象。无需编写动画代码：

jsx

<Circle radius={{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6, speed: 1 }} />
<Circle center={{ type: 'mouse-position', smoothing: 0.12, momentum: 0.2 }} />
<Blur intensity={{ type: 'mouse', axis: 'x', outputMin: 0, outputMax: 40, smoothing: 0.1 }} />
<LinearGradient id="grad" colorA="#000000" colorB="#ffffff" />
<Circle radius={{ type: 'map', source: 'grad', channel: 'luminance', inputMin: 0, inputMax: 1, outputMin: 0.02, outputMax: 0.12 }} />

mouse-position

可驱动任何

{x, y}

prop（

center

、

position

、

offset

）。

mouse

会将光标的一个轴映射为数值。

map

会通过

id

读取另一个图层。框架的 state 也适用于任何 prop，并会在下一帧更新，无需重新编译。

Framework idioms

框架惯用法

Framework	Import	Notes
React	`shaders/react`	`className` ; add `'use client'` in Next.js files that render `<Shader>`
Vue	`shaders/vue`	kebab-case attributes, `:` for non-strings ( `:angle="45"` ); wrap in `<ClientOnly>` in Nuxt
Svelte	`shaders/svelte`	plain props; SvelteKit needs nothing extra, `<Shader>` renders nothing on the server
Solid	`shaders/solid`	pass accessor values ( `angle={angle()}` ); load with `clientOnly` in SolidStart
Vanilla	`shaders/js`	`createShader(canvas, { components: [{ type: 'Circle', props: {...}, children: [] }] })`

Shaders needs a browser with WebGPU. It can't render on the server, so keep

<Shader>

client-only in meta-frameworks.

框架	导入	说明
React	`shaders/react`	使用 `className` ；在渲染 `<Shader>` 的 Next.js 文件中添加 `'use client'`
Vue	`shaders/vue`	使用 kebab-case 属性，非字符串值前加 `:` （ `:angle="45"` ）；在 Nuxt 中用 `<ClientOnly>` 包裹
Svelte	`shaders/svelte`	使用普通 props；SvelteKit 无需额外配置， `<Shader>` 在服务端不会渲染任何内容
Solid	`shaders/solid`	传入 accessor 值（ `angle={angle()}` ）；在 SolidStart 中使用 `clientOnly` 加载
Vanilla	`shaders/js`	`createShader(canvas, { components: [{ type: 'Circle', props: {...}, children: [] }] })`

Shaders 需要支持 WebGPU 的浏览器。它无法在服务端渲染，因此在 meta-frameworks 中应让

<Shader>

保持 client-only。

Recipes

配方

Four trees that cover most requests. Props are real; change the values, keep the structure.

Hero background. Generators stack as siblings, noise at low opacity adds grain, the trail sits on top:

jsx

<Shader className="absolute inset-0 -z-10">
  <MeshGradient colorA="#1a0533" colorB="#ffdf8e" colorSpace="oklab" speed={0.6} />
  <SimplexNoise scale={3} speed={0.5} opacity={0.12} blendMode="softLight" />
  <CursorTrail colorA="#ffffff" colorB="#e04b9e" radius={0.3} length={0.4} opacity={0.5} blendMode="screen" />
</Shader>

Glass over a logo. Glass comes after the image, so it refracts everything drawn before it. The shape is a circle SDF that follows the cursor:

jsx

<Shader className="w-full h-96">
  <ImageTexture url="/logo.png" objectFit="contain" />
  <Glass
    shape={{ type: 'circleSDF', radius: 0.35 }}
    center={{ type: 'mouse-position', smoothing: 0.15, momentum: 0.2 }}
    refraction={1.3}
    thickness={0.6}
    aberration={0.4}
    fresnel={0.25}
  />
</Shader>

Blurred image behind text. A flat stack: image, then Blur, then Vignette, each applying to what's above it. The text is ordinary HTML layered above the canvas with CSS, not a component:

jsx

<div className="relative">
  <Shader className="absolute inset-0 -z-10">
    <ImageTexture url="/hero.jpg" objectFit="cover" />
    <Blur intensity={60} />
    <Vignette intensity={0.8} radius={0.6} />
  </Shader>
  <h1 className="relative">Headline</h1>
</div>

Masked reveal. The circle is hidden and only shapes the gradient. Animate

radius

to reveal:

jsx

<Shader className="w-full h-64">
  <Circle id="reveal" visible={false} radius={{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.1, outputMax: 0.9, speed: 0.5 }} softness={0.2} />
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" angle={45} colorSpace="oklch" maskSource="reveal" />
</Shader>

以下四种组件树可覆盖大多数请求。Props 均为真实可用属性；请修改属性值并保留结构。

Hero 背景。 生成器以同级方式堆叠，低不透明度噪声添加颗粒感，光标拖尾置于顶层：

jsx

<Shader className="absolute inset-0 -z-10">
  <MeshGradient colorA="#1a0533" colorB="#ffdf8e" colorSpace="oklab" speed={0.6} />
  <SimplexNoise scale={3} speed={0.5} opacity={0.12} blendMode="softLight" />
  <CursorTrail colorA="#ffffff" colorB="#e04b9e" radius={0.3} length={0.4} opacity={0.5} blendMode="screen" />
</Shader>

Logo 上方的玻璃效果。 Glass 位于图片之后，因此会折射此前绘制的一切。形状是一个跟随光标的圆形 SDF：

jsx

<Shader className="w-full h-96">
  <ImageTexture url="/logo.png" objectFit="contain" />
  <Glass
    shape={{ type: 'circleSDF', radius: 0.35 }}
    center={{ type: 'mouse-position', smoothing: 0.15, momentum: 0.2 }}
    refraction={1.3}
    thickness={0.6}
    aberration={0.4}
    fresnel={0.25}
  />
</Shader>

文字背后的模糊图片。 扁平堆叠：先图片，再 Blur，最后 Vignette；每个效果都作用于其上方的内容。文字是普通 HTML，通过 CSS 叠放在 canvas 上，而不是组件：

jsx

<div className="relative">
  <Shader className="absolute inset-0 -z-10">
    <ImageTexture url="/hero.jpg" objectFit="cover" />
    <Blur intensity={60} />
    <Vignette intensity={0.8} radius={0.6} />
  </Shader>
  <h1 className="relative">Headline</h1>
</div>

遮罩显现。 圆形图层处于隐藏状态，仅用于塑造渐变。动画化

radius

以实现显现效果：

jsx

<Shader className="w-full h-64">
  <Circle id="reveal" visible={false} radius={{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.1, outputMax: 0.9, speed: 0.5 }} softness={0.2} />
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" angle={45} colorSpace="oklch" maskSource="reveal" />
</Shader>

Picking components

选择组件

199 components, by category:

Textures (54): Aurora, Beam, Blob, BlockNoise, BlueNoise, BrickPattern, Checkerboard, Chevron, ColorWheel, ConicGradient, CurlNoise, DiamondGradient, DotGrid, ErosionNoise, FallingLines, FloatingParticles, FlowingGradient, FractalNoise, GaborNoise, Godrays, Grid, HexGrid, HTMLInCanvas, ImageTexture, IsometricCubes, LinearGradient, Marble, MeshGradient, MultiPointGradient, PerlinNoise, Plasma, Prism, RadialGradient, Ripples, Scratches, SimplexNoise, SineWave, SolidColor, Spiral, Strands, Stripes, StudioBackground, SunBurst, Swirl, Text, TriangularGrid, Truchet, VideoTexture, Voronoi, Waveform, WaveletNoise, Weave, WebcamTexture, WorleyNoise
Shapes (16): Arc, Circle, Crescent, Cross, Ellipse, Flower, Heart, Line, Parallelogram, Polygon, Ring, RoundedRect, Star, Teardrop, Trapezoid, Vesica
Shape Effects (23): BrushedMetal, CarbonFiber, Chrome, Crystal, Emboss, Frost, Glass, Goo, Heatmap, Hologram, Holographic, Irradiance, LightEdge, LiquidMetal, Nebula, Neon, Obsidian, Particles, Plastic, SmokeFill, ThinFilm, Voxels, Water
Blurs (9): AngularBlur, Blur, BokehBlur, ChannelBlur, DiffuseBlur, LinearBlur, ProgressiveBlur, TiltShift, ZoomBlur
Distortions (22): BarShift, Bend, Bulge, ConcentricSpin, CornerPin, DisplacementMap, Flip, FlowField, FlutedGlass, Form3D, GlassTiles, Kaleidoscope, Mirror, Perspective, PolarCoordinates, RectangularCoordinates, Repeater, Spherize, Stretch, Surface3D, Twirl, WaveDistortion
Adjustments (14): BrightnessContrast, Duotone, Exposure, FilmStock, Grayscale, HueShift, Invert, Posterize, Saturation, Sharpness, Solarize, Tint, Tritone, Vibrance
Stylize (31): Ascii, Chalkboard, ChromaticAberration, CompressionArtifacts, ContourLines, CRTScreen, DataMosh, Dither, DropShadow, Engraving, FilmGrain, Glitch, Glow, GradientMap, Halftone, KeyFrames, LensDistortion, LensFlare, LightLeak, ObjectTracker, Paper, ParticleField, Pixelate, ReflectivePlane, Sparkle, Stone, TimeTrail, VHS, Vignette, Watercolor, Wool
Interactive (16): Boids, ChromaFlow, CursorRipples, CursorTrail, Fog, GridDistortion, InkFlow, Liquify, MagneticFilings, ParticleFlow, PixelSort, PixelThrow, ReactionDiffusion, Shatter, Smoke, SmokeFlow
Transitions (13): BarnDoors, BlockDissolve, CheckerWipe, DiamondWipe, IrisWipe, LinearWipe, NoiseDissolve, PagePeel, RadialWipe, RandomBars, RippleWipe, SliceWipe, VenetianBlinds
Utilities (1): Group

components.md

next to this file has a one-line description of every component and marks the effects that need input. For a component's exact props, defaults and ranges, fetch its docs page with an

Accept: text/markdown

header:

https://shaders.com/docs/components/<Name>

The whole reference in one file is https://shaders.com/llms-full.txt (large). Guides live at https://shaders.com/docs/guide (composing, blending and masking, dynamic props, layout, transforms, shape effects, performance).

Shape effects (Glass, Neon, Chrome, LiquidMetal, Frost, ...) draw inside a

shape

prop: a 2D SDF such as

{ type: 'circleSDF', radius: 0.5 }

roundedRectSDF

starSDF

polygonSDF

, a 3D solid such as

{ type: 'sphere3D' }

cube3D

torus3D

, or the user's own SVG converted to an SDF file (the MCP

generate-sdf

tool does this). See https://shaders.com/docs/guide/shape-effects.

按类别划分的 199 个组件：

Textures (54): Aurora, Beam, Blob, BlockNoise, BlueNoise, BrickPattern, Checkerboard, Chevron, ColorWheel, ConicGradient, CurlNoise, DiamondGradient, DotGrid, ErosionNoise, FallingLines, FloatingParticles, FlowingGradient, FractalNoise, GaborNoise, Godrays, Grid, HexGrid, HTMLInCanvas, ImageTexture, IsometricCubes, LinearGradient, Marble, MeshGradient, MultiPointGradient, PerlinNoise, Plasma, Prism, RadialGradient, Ripples, Scratches, SimplexNoise, SineWave, SolidColor, Spiral, Strands, Stripes, StudioBackground, SunBurst, Swirl, Text, TriangularGrid, Truchet, VideoTexture, Voronoi, Waveform, WaveletNoise, Weave, WebcamTexture, WorleyNoise
Shapes (16): Arc, Circle, Crescent, Cross, Ellipse, Flower, Heart, Line, Parallelogram, Polygon, Ring, RoundedRect, Star, Teardrop, Trapezoid, Vesica
Shape Effects (23): BrushedMetal, CarbonFiber, Chrome, Crystal, Emboss, Frost, Glass, Goo, Heatmap, Hologram, Holographic, Irradiance, LightEdge, LiquidMetal, Nebula, Neon, Obsidian, Particles, Plastic, SmokeFill, ThinFilm, Voxels, Water
Blurs (9): AngularBlur, Blur, BokehBlur, ChannelBlur, DiffuseBlur, LinearBlur, ProgressiveBlur, TiltShift, ZoomBlur
Distortions (22): BarShift, Bend, Bulge, ConcentricSpin, CornerPin, DisplacementMap, Flip, FlowField, FlutedGlass, Form3D, GlassTiles, Kaleidoscope, Mirror, Perspective, PolarCoordinates, RectangularCoordinates, Repeater, Spherize, Stretch, Surface3D, Twirl, WaveDistortion
Adjustments (14): BrightnessContrast, Duotone, Exposure, FilmStock, Grayscale, HueShift, Invert, Posterize, Saturation, Sharpness, Solarize, Tint, Tritone, Vibrance
Stylize (31): Ascii, Chalkboard, ChromaticAberration, CompressionArtifacts, ContourLines, CRTScreen, DataMosh, Dither, DropShadow, Engraving, FilmGrain, Glitch, Glow, GradientMap, Halftone, KeyFrames, LensDistortion, LensFlare, LightLeak, ObjectTracker, Paper, ParticleField, Pixelate, ReflectivePlane, Sparkle, Stone, TimeTrail, VHS, Vignette, Watercolor, Wool
Interactive (16): Boids, ChromaFlow, CursorRipples, CursorTrail, Fog, GridDistortion, InkFlow, Liquify, MagneticFilings, ParticleFlow, PixelSort, PixelThrow, ReactionDiffusion, Shatter, Smoke, SmokeFlow
Transitions (13): BarnDoors, BlockDissolve, CheckerWipe, DiamondWipe, IrisWipe, LinearWipe, NoiseDissolve, PagePeel, RadialWipe, RandomBars, RippleWipe, SliceWipe, VenetianBlinds
Utilities (1): Group

与本文件同目录的

components.md

提供了每个组件的单行说明，并会标记需要输入的 effects。要获取某个组件的准确 props、默认值和取值范围，请使用

Accept: text/markdown

请求头获取其文档页面：

https://shaders.com/docs/components/<Name>

完整参考资料集中在一个文件中：https://shaders.com/llms-full.txt（文件较大）。指南位于 https://shaders.com/docs/guide，涵盖组合、混合与遮罩、动态 props、布局、变换、形状效果和性能。

形状效果（Glass、Neon、Chrome、LiquidMetal、Frost 等）会在

shape

prop 内部绘制：可以是 2D SDF，例如

{ type: 'circleSDF', radius: 0.5 }

或

roundedRectSDF

、

starSDF

、

polygonSDF

；也可以是 3D 实体，例如

{ type: 'sphere3D' }

、

cube3D

、

torus3D

；还可以是用户自己的 SVG 转换成的 SDF 文件（MCP 的

generate-sdf

工具可完成此操作）。参见 https://shaders.com/docs/guide/shape-effects。

Presets and sections (Shaders Pro)

预设与区块（Shaders Pro）

The preset library at https://shaders.com/presets holds over a thousand designed effects in collections, plus complete website sections. Each preset page shows its name (collection slug plus variant number, such as

offsets-1

), a live render, and its code. Installing one needs a Shaders Pro subscription on the signed-in account:

bash

npx shaders install offsets-1

Without Pro the CLI says so and offers to open the pricing page, sign in to a different account, or install a watermarked preview component so the user can see the preset in place. Once the account has Pro,

npx shaders update

swaps the preview for the real component. Don't work around this: tell the user the preset is Pro, install the preview if they want to evaluate it, and move on.

When the look takes more than a couple of components, search the library before building it from scratch. A preset is a designed, tuned tree; say so and name it when one fits.

https://shaders.com/presets 上的预设库包含一千多个按集合分类的设计效果，以及完整的网站区块。每个预设页面会显示其名称（集合 slug 加变体编号，例如

offsets-1

）、实时渲染效果及其代码。安装其中一个预设需要已登录账号订阅 Shaders Pro：

bash

npx shaders install offsets-1

如果没有 Pro，CLI 会说明这一点，并提供以下选项：打开定价页、改用其他账号登录，或安装带水印的预览组件，让用户能在实际页面中查看预设。账号拥有 Pro 后，运行

npx shaders update

会将预览组件替换为正式组件。不要绕过此限制：告知用户该预设为 Pro 功能；如果用户想评估效果，可以安装预览，然后继续。

当所需效果无法仅用少数几个组件实现时，先搜索预设库，再从头构建。预设是经过设计和调校的组件树；若某个预设适合需求，应明确说明并说出其名称。

Writing a component that doesn't exist

编写尚不存在的组件

If no component or preset produces the look, write one. A component is a plain object passed to

defineShader

from

shaders/std

: a name, its props, and what to draw at each pixel, built from the same primitives the library uses, or a raw WGSL body. Mount it with

<CustomShader src={MyShader}>

in any framework, no build step. Read https://shaders.com/docs/guide/custom-shaders first and the primitives reference at https://shaders.com/docs/primitives (or https://shaders.com/std/llms.txt as one document).

如果没有任何组件或预设能实现该效果，就自行编写一个。组件是一个传给

shaders/std

中

defineShader

的普通对象：包含名称、props，以及每个像素要绘制的内容；它可以使用该库所用的相同 primitives 构建，也可以直接使用原始 WGSL 代码。在任意框架中，都可以通过

<CustomShader src={MyShader}>

挂载，无需构建步骤。请先阅读 https://shaders.com/docs/guide/custom-shaders，以及 https://shaders.com/docs/primitives 的 primitives 参考文档（或将 https://shaders.com/std/llms.txt 作为一份完整文档阅读）。

Keeping effects fast

保持效果高性能

Build backgrounds from generators (gradients, noise, plasma); they cost almost nothing.
Keep effects as siblings in a flat stack. Nesting adds a render pass per level, and a sibling effect already covers everything drawn before it.
Hide layers with
```
visible={false}
```
, not
```
opacity={0}
```
. A hidden layer costs nothing; a transparent one still renders.
Animate runtime props. A few props are compile-time (component pages flag them) and recompile the effect when changed.
Offscreen canvases drop to about 1fps on their own; nothing to do.

使用 generators（渐变、噪声、plasma）构建背景；其成本几乎为零。
将 effects 保持为扁平堆叠中的同级组件。每嵌套一层都会增加一次 render pass，而同级 effect 已经能覆盖此前绘制的一切。
使用
```
visible={false}
```
隐藏图层，而不是
```
opacity={0}
```
。隐藏图层不产生任何成本；透明图层仍会被渲染。
对 runtime props 做动画。少数 props 属于 compile-time（组件页面会标记），修改它们会重新编译效果。
离屏 canvas 自行渲染时帧率会降至约 1fps；无需处理。

Don't

禁止事项

Don't install
```
three
```
,
```
@react-three/fiber
```
,
```
ogl
```
or write raw WebGL for an effect a component covers.
Don't invent prop names. Check
```
components.md
```
, then the component's docs page.
Don't nest layers inside an effect when a sibling stack gives the same result. Nest only to scope an effect to specific layers.
Don't style or query the inner
```
<canvas>
```
; its markup can change between releases.

对于已有组件可以覆盖的效果，不要安装
```
three
```
、
```
@react-three/fiber
```
、
```
ogl
```
或编写原始 WebGL 代码。
不要臆造 prop 名称。先查看
```
components.md
```
，再查看该组件的文档页面。
当同级堆叠能实现相同效果时，不要将图层嵌套在 effect 内。仅在需要将 effect 限定于特定图层时才嵌套。
不要设置内部
```
<canvas>
```
的样式或查询它；其标记结构可能在版本发布后发生变化。