Shaders Guides, components & presets

Menu

Home
Components
Colors
Shaders
Typeset
Create

Guides

What is Shaders?
Quickstart
Quickstart
Composing Effects
Blending & Masking
Layout & Positioning
Transforms
Props & Reactivity
Dynamic Props
Hooks & Events
Color Space
Shape / SDF Effects
Performance
Nuxt / SSR
Telemetry
Shaders MCP (Pro)

Pro Notes

Adding Interactions - Interactive Components and Dynamic Prop Mapping
Color Spaces - Choosing How Colors Blend
Composition - Layering, Opacity, and Transparency
Dynamic Prop Mapping - Driving Props from Mouse, Animation, and Layers
Finishing Touches - Texture, Grain, and Ambient Motion
Hero Section Masking Techniques
Media Effects - Images, Video, and Webcam
Shape Effects - Placement, Sizing, and Stacking

Components

Toggle Sidebar B

Light & dark mode D

Grayscale

Convert colors to black and white

Convert colors to black and white

Usage

vue

<Shader>
  <Grayscale>
    <Circle />
  </Grayscale>
</Shader>

On this page