Advanced Configuration

Server-Side Rendering (SSR)

WebGPU requires a browser environment and won't work during server-side rendering. For SSR frameworks, wrap shaders in a client-only component:

This ensures shaders only render on the client where WebGPU is available.

Color Space Configuration

By default, Shaders uses Display P3 linear color space for output. However, if you're working with designs from tools like Figma, Sketch, or Adobe XD, they use sRGB color space. When you copy a hex color like #5b18ca from Figma and use it in Shaders with the default settings, it may appear slightly different due to color space conversion.

To fix this, use the colorSpace prop on the root Shader component to control how colors are interpreted:

Color Space Options

• p3-linear (default): Uses Display P3 linear color space for vibrant, wide-gamut colors.
• srgb: Uses sRGB linear color space, matching design tools like Figma, Sketch, and Adobe XD. Use this when you need exact color matching with your designs.

Anonymous Telemetry

Shaders captures optional anonymous telemetry to help improve the library. This information includes the domain where the shader is installed, and runtime performance (fps) data. You can disable it if needed:

Telemetry is automatically disabled when running locally or in development environments.