@motion-script/core

@motion-script/core / ShaderFillProp

Interface: ShaderFillProp

Defined in: attributes/shape/fill/implementations/shader.ts:60

A custom SkSL shader, painted as a fill.

The escape hatch at the end of the procedural spectrum: where NoiseFillProp and FractalNoiseFillProp expose a fixed set of knobs over a fixed field, this hands the whole fragment function to the author. It is still a fill, so it paints inside the shape's own path — an Ellipse, a Path, a run of Text — stacks as one layer in the fill array, and inherits the layer's opacity/blend/space like every other kind.

<Rect fill={Fills.shader(src, { uniforms: { u_amount: 0.4 } })} />

The contract on the source is vec4 main(vec2 fragCoord) returning premultiplied rgba. It must not fold opacity in: the fill layer's opacity is already on the paint as an alpha the shader's output is modulated by, so a shader applying it again renders at the square of what was asked for. That is also why no u_alpha built-in is offered.

Uniforms are supplied by name, not by position, and marshalled by reflecting the compiled program. So declaration order doesn't matter, a declared-but-unsupplied uniform reads as zero with a warning instead of silently refusing to paint, and the renderer can fill in built-ins (u_size, u_origin, u_resolution, u_aspect, u_time, u_scale) for whichever of them the source happens to declare.

source is the compile-cache key, so it snaps at a tween's midpoint rather than interpolating — tweening it would compile a program per frame. Keep the source constant (hoist it to module scope) and put everything that changes in a uniform, which costs nothing: uniform values are an in-place write.

Properties

blend?

optional blend?: "color" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "luminosity" | "normal"

Defined in: attributes/shape/fill/implementations/shader.ts:75

coords?

optional coords?: ShaderFillCoords

Defined in: attributes/shape/fill/implementations/shader.ts:71

What fragCoord means. Default 'normalized'. See ShaderFillCoords.

opacity?

optional opacity?: number

Defined in: attributes/shape/fill/implementations/shader.ts:74

source

source: string

Defined in: attributes/shape/fill/implementations/shader.ts:63

SkSL source declaring vec4 main(vec2 fragCoord). Hoist it; don't rebuild it per frame.

textures?

optional textures?: readonly ShaderTexture[]

Defined in: attributes/shape/fill/implementations/shader.ts:73

Images bound to the source's uniform shader declarations, matched by name.

type

type: "shader"

Defined in: attributes/shape/fill/implementations/shader.ts:61

uniforms?

optional uniforms?: SkSLUniformRecord | readonly SkSLUniform[]

Defined in: attributes/shape/fill/implementations/shader.ts:69

Uniform values keyed by their declared name. The sksl effect's positional [{name, value}] array is accepted too, so a shader can move between an effect and a fill unchanged.