Composing Effects

Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The <Shader> component is the root of your effect. Every instance of this renders its own GPU canvas. Visual output is created by stacking child components.

Stacking Components

Components are evaluated top-to-bottom, in the order they appear in your markup, similar to how regular DOM elements are rendered.

Nesting Components

Notice how the <GlassTiles> component in the above example applies to all proceeding sibling components. If you wanted to only apply glass tiles to the <Circle> component, you can nest it inside the <GlassTiles> component:

You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as LinearGradient) don't accept children, whereas components that apply effects (such as GlassTiles) do. The component reference in this documentation shows if the particular component accepts children.