Shaders and effects

How to

Put a moving gradient behind a title

1. Select the layer (the Shader title template's backdrop is one), open its fill and choose Shader as the fill type.
2. Pick Mesh gradient from Backgrounds. Each tile plays a short loop of what the preset draws. It moves on its own: a shader that reads time animates in Animate, in present mode and in exports, on the timeline's clock, so a frame always renders the same.
3. Its params (Mesh speed, Mesh spread and four colours) show under the presets. Click a param's ◆ to key it, the way you'd key opacity: key Mesh speed from 0.3 to 2 over the last second for a burst.
4. Every preset is a node graph: Edit nodes opens it in the node editor, where you can wire the music or another node into any of its knobs.

1. 1.Open the fill and choose Shader0:00
2. 2.Pick Mesh gradient0:02
3. 3.Press Space: it moves on its own0:04

Description

A launch post in Animate with its frame selected. Its fill opens, Shader is picked, and Mesh gradient from Presets fills the frame with a slowly moving gradient. Space plays it: a shader that reads time animates on its own.

Write your own shader

Click Edit WGSL, write a fn shade(uv, res, time) that returns a colour, and Apply (or press Ctrl+Enter, Cmd+Enter on a Mac). The fields of a struct Params { … } become controls, and // @range, // @default and // @color annotations on them set their sliders, defaults and colour pickers. A colour or vector param is keyed per component.

While you type, the preview above the code draws your draft. Nothing changes on the canvas until you apply, and Not applied shows until you do. When the code doesn't compile, the preview keeps the last version that did. The gutter marks each line with an error, and the list under the code says what's wrong: click an error to jump to its line. A problem that isn't on one of your lines, like a shade with the wrong arguments, is listed without a line. Tab indents; press Ctrl+M to make Tab move focus out of the code instead.

An f32 field marked // @audio bass (or any other audio signal) follows the music as soon as you apply the code. Applying a shader, its audio binding included, is one undo step.

1. 1.Click Edit WGSL: the code under a live preview0:00
2. 2.A mistake is marked on its line and explained0:01
3. 3.Fix it: the preview follows as you type0:03
4. 4.Press Cmd+Enter to apply it0:04

Description

A launch post whose frame has the Plasma shader fill, with its fill open. Edit WGSL shows the code under a live preview. A number in the code is replaced with nope: the gutter marks its line and the list under the code says the value is unresolved, while the preview keeps the last version that compiled. Typing 1.5 instead clears the error and the preview draws tighter bands; Cmd+Enter applies it to the canvas.

1. Click Edit WGSL: the code opens under a live preview.
2. A mistake is marked on its line and explained in the list under the code.
3. Fix it: the preview follows as you type.
4. Press Cmd+Enter (Ctrl+Enter) to apply it to the canvas.

Save and share your shaders

Save keeps the shader under My shaders with the name you type, its param values included, so the same code with other colours can be saved as another look. Saving under a name you already used replaces that shader (the button says Replace). A shader built with nodes keeps its graph: picking it again opens in the node editor. Each saved or installed shader's tile plays a short loop of it with its values (a still when it doesn't move). Hover a saved shader to rename it (the pencil) or delete it.

Publish shares some of your saved shaders on the marketplace as a shader pack. Each one's preview in the dialog is its first frame with its values. The listing shows each shader's loop, or that first frame when the loop is too large. A node shader keeps its graph in the pack, so whoever installs it can edit the nodes too. Publishing the same pack name again updates the listing, also after you rename the pack in My packs.

The package button next to Publish opens My packs: the shader packs you've published. List or unlist each one, rename it, or delete it. Deleting takes a pack off the marketplace; copies people already installed keep working. The brush library has the same My packs for brush packs.

1. 1.Click Save and name it0:00
2. 2.Publish: each shader shows its first frame0:02
3. 3.The package button opens My packs0:06
4. 4.List or unlist a pack, rename it, or delete it0:08

Description

Signed in, a launch post whose frame has a tweaked Plasma shader fill, its fill open. Save asks for a name; Neon plasma is typed and the shader joins My shaders. Publish opens Publish a shader pack with Neon plasma ticked beside its first frame. Cancel closes it, and the package button opens My shader packs: two published packs, each with its picture, item and install counts, a Listed switch, a link to its page and delete. Turning off the first pack's switch makes it unlisted.

1. Click Save and name the shader.
2. Click Publish: each of your shaders shows its first frame. Pick the ones for the pack, name it, and publish.
3. The package button opens My packs.
4. List or unlist a pack with its switch, rename it, or delete it.

Reference

Built-in shader presets

The fill picker lists the presets in three groups: Backgrounds, Effects and Audio visualizers. Every one is a node graph, so Edit nodes opens any of them, and its knobs are the inputs of its nodes nobody wired. A knob is named after its node and input: mesh_speed is the speed of the node called mesh, shown as Mesh speed in the panel and keyed at fills[@f1].shaderParams.mesh_speed.

Each tile plays a 2.5-second loop of the preset at its starting values. A visualizer's loop is driven by a made-up beat, so you can see what follows the music before you add any.

Backgrounds fill the layer:

Effects: particles, lines, bursts and light

These draw with transparency, so put them on a layer over the picture (a full-frame rectangle) and set its blend mode — Screen for light, sparkles and rain. Each one is a single node in the Effect group of the node editor's library, so you can also drop one into a graph of your own. Its knobs are keyable (key a burst's Burst progress 0 → 1 on the hit, a line's Lines amount up as a charge builds), and every frame renders the same.

Audio visualizers

Zoom feedback, Kaleidoscope, Plasma pulse, Synth tunnel, Starfield warp and Liquid ink are MilkDrop-style graphs whose Audio nodes follow the timeline's sound in real time. They're described, knob by knob, in Shader graph and Audio-reactive animation.

Shaders from older files

Before every preset was a graph, the backgrounds and effects were hand-written shaders whose params had plain names (speed, colorA). A fill from an older file keeps drawing exactly as it did. The first time you click Edit nodes on it, or the agent edits its graph, it becomes the preset's graph: the picture doesn't change, its values move to the matching knobs (speed to mesh_speed), and so do its keys, behaviours and variable bindings. Templates and the agent still accept the old names when they set a preset's params.

The particle presets are one particle system: space is cut into cells that scroll along the angle at the speed (in thousandths of the layer's height per second, so a particle is the same size on any layer), each cell holding a particle when its hash is under the density, swaying across its path. They share their params, so switching a layer from snow to petals keeps its keys. A shader fill renders at the layer's size up to 2048 px on its longer side, keeping its shape.

Texture and noise fills

The Texture / noise fill type makes a shader from a noise: Cloudy, Perlin, Value, Cells, Paper or Canvas, with Scale, Contrast, Seed, Color A, Color B and Animate (so it moves with time).

Effects

1. 1.Click + by Effects and pick Noise0:00
2. 2.The grain shows at once0:02

Description

A launch post with its frame selected. The + of Effects lists the effects, and Noise adds film grain over the frame, which shows on the canvas at once.

Every number and colour of every effect is keyable:

Motion blur and smears

Motion blur smears a layer along one direction: its Length in px at its Angle (0° is left–right, 90° top–bottom). Key the length up and down with a move for a smear, or leave it on for a streak (a reflection in a wet road is the picture flipped, faded and motion-blurred straight down).

On a group, frame or instance it smears everything inside, so a whole character or a scene's camera group streaks as one — and smears add up: a character smeared inside a camera group that whips smears by both. (Text inside is not smeared.) The Whip pan preset and scene transitions are built on it.

Lottie can't carry shader fills, blurs, glass, halftone, noise or texture: see Exporting. The agent sets shader fills with set_shader_fill, and builds node shaders with edit_shader_graph.