Shader fills

Formo's Shader fill type turns a fill into a programmable surface: start from one of seven built-in presets, then wire its exposed parameters to formulas so the fill reacts to the mouse, the clock, or another object in the document, all without writing code.

Built-in shader presets

Most shader work starts from a preset, not a blank shader. Pick one from the dropdown and adjust its exposed parameters, no code involved.

Opening the shader tab. Select an object, then click on its Fill swatch in the right panel to open the paint popup. Along the top is a type-toggle row: Solid, Linear, Radial, Angular, Image, and Shader. Click Shader. A dropdown lists every available shader; the first time you open it on a shape, it defaults to Glass.

The seven shipped presets:

- Checker: a two-color checkerboard, with Color A, Color B, and Cells (density, 1–32) as adjustable parameters.

- Glass: refracts whatever's rendered behind the shape, with Tint, Tint Amount, Refraction, Frost, a Rim edge (with its own Rim Width), Gloss, and a movable Highlight position and size — the deepest parameter set of any preset, and a good tour of what a shader parameter can be (a color, a ranged slider, a draggable point).

- Glitch: a self-contained animated neon field, corrupted with block displacement, RGB channel splitting, scanlines, static, and occasional full-row tearing, driven by time, so it animates on its own and can be keyframed. Its parameters (two neon colors, Glitch Intensity, Block Rows, RGB Split, Scanline Strength and Density, Speed, Static Noise, Tear Frequency, and a Seed for reproducible randomness) give you control over how aggressive the corruption reads.

- GlitchBackdrop: the same glitch mechanics as Glitch, minus the two neon colors, applied as an overlay to whatever's actually behind the shape instead of generating its own colored field — real content underneath, visibly torn and shifted like a failing signal.

- Ocean Waves: a full raymarched ocean surface, converted from a well-known Shadertoy piece. Unlike every other preset, it ships with no exposed parameters at all. It's a single, self-contained, purely time-driven animation, the one preset you apply and just let run rather than tune. Worth knowing: the original Shadertoy version supports dragging the mouse to move the camera, but Formo's shader environment maps that specific input to a fixed value, so that particular interaction doesn't carry over here. It's a drop-in animated backdrop, not a mouse-driven one, unless you add your own mouse-reactive binding using the technique in section 3.

- Red X Blue Y: a simple reference shader: red rises along the X axis, blue along Y, green independently adjustable. Useful for understanding how a shader reads position, not intended as a finished look.

- Tint Gradient: a vertical fade of one adjustable tint color.

Adjusting a preset. Whichever shader you pick, its own declared parameters appear right below the dropdown as normal, editable fields. Under the hood, every preset is shader source code where each adjustable value is declared with its type, default, and range right in the code, which is exactly what lets the UI generate the right widget automatically: a Color parameter gets a color swatch, a numeric parameter with a declared range gets a bounded slider (often with its own step size, so Cells moves in whole numbers while Refraction moves in fine fractional steps), and a Point parameter gets a draggable handle directly on the shape. You're never looking at a generic "type a number" field when the preset's author meant something more specific.

Reactive shader fills

A shader parameter isn't limited to a fixed value you set once. Because it renders through the exact same property system as everything else in Formo, it can be bound to a formula the same way any property can.

Why this matters. This is what makes a shader fill "reactive" rather than just animated on its own timer: instead of a fixed Cells value on Checker, or a fixed Tint on Tint Gradient, that value can be an expression — recalculating live as whatever it depends on changes.

Binding a parameter. Select a shape with a shader fill applied, find the parameter you want to drive, and bind it to a formula the same way you'd bind any other field. A simple expression is enough to start: reference another value, do a little math on it, and the shader parameter updates as that value changes. This works identically whether the parameter is a Color, a ranged slider value, or a Point. All three parameter kinds sit on the same formula-binding mechanism, not just the numeric ones.

A first example. Take Tint Gradient and bind its Tint color's brightness to a formula referencing the shape's own opacity, as the shape fades, the tint driving the gradient shifts along with it, without you touching the shader itself.

A second example, using a parameter with a real range. Glass's Refraction parameter is declared with a tight 0.0–0.1 range and a fine 0.001 step. Bind it to a formula that oscillates with time, and the glass distortion visibly ripples in and out on its own, moving within exactly the bounds the shader's author intended, since the binding still respects the parameter's declared range.

Making shader fills respond to the mouse, time, and other shapes

The same formula-binding mechanism from the last section opens up specifically to live inputs — your cursor, the play clock, and other objects in the document.

Reacting to the mouse. Bind a shader parameter to an expression referencing the cursor's position, and the fill responds live as you move the mouse across the canvas — Glass's Highlight position, for instance, becoming something that follows your cursor instead of sitting fixed. This is also the way to give a preset like Ocean Waves mouse-driven behavior despite its own built-in camera control not carrying over. Since it has no exposed parameters, mouse-reactivity there would need to come from a property outside the shader itself (an object's rotation or position bound to the cursor, for example) rather than from a shader parameter binding.

Reacting to time. Several presets (Glitch and GlitchBackdrop, in particular, and Ocean Waves entirely) already animate on their own using the play clock internally, but any parameter on any preset can also be explicitly bound to a time-based expression for a custom animated response beyond what the preset does by default.

Reacting to another shape. A shader parameter can reference a completely different object's property in its formula — Checker's Cells density tied to another shape's size, or Tint Gradient's color tied to a different object's own fill color — so one shape's shader fill visibly responds to something happening elsewhere in your scene, not just to itself.

A note on custom shader code. Formo's rendering engine supports fully custom shader logic underneath all of this. It's what the built-in presets themselves are built from, real shader source with typed, ranged parameter declarations, not a fixed set of hidden effects. Writing or uploading your own shader from scratch isn't available in the editor yet, though; today's workflow is picking from the built-in set and making its exposed parameters reactive, as covered in this and the previous section.