Effects
Effects are GPU shaders the renderer applies on top of a layer's normal paint. Add them via the effects property — an array of { effect, params?, enabled? } entries that run in order, each pass reading the previous pass's output. Every effect parameter is animatable using dot-path strings — 'effects.pixelate.pixelSize' — as the key into animate().
Pixelate reveal
const $ = new VideoFlow({ width: 512, height: 512, fps: 30, backgroundColor: '#000' });
const t = $.addText({
text: 'PIXELATED',
fontSize: 13, fontWeight: 900, color: '#ff5a1f',
position: [0.5, 0.5],
effects: [
{ effect: 'pixelate', params: { pixelSize: 8 } },
],
});
// Effect params animate via dot-path: effects.<name>.<param>.
t.animate({ 'effects.pixelate.pixelSize': 8 }, { 'effects.pixelate.pixelSize': 0.2 }, { duration: '1.5s', easing: 'easeOut' });
$.wait('1.2s');
return $;Available effects
The renderer ships 42 GLSL effects. The complete catalogue, grouped by family:
| Group | Effects |
|---|---|
| Blur | gaussianBlur, motionBlur, zoomBlur, streakBlur, spinBlur |
| Glow / bloom | glow, bloom, edgeGlow, lightRays, volumetricLight, lightLeak |
| Color | colorGrade, vignette, duotone, halftone, invert |
| Distortion | displacement, lensDistortion, fisheye, waveWarp, liquidRipple, shockwave, heatHaze |
| Glass / refraction | frostedGlass, glassRefraction, prismSplit |
| Chromatic / RGB | chromaticAberration, rgbSplit |
| Glitch / VHS | sliceGlitch, digitalBlocks, datamoshSmear, vhsDistortion, filmGrain, crtScanlines |
| Pixel / mosaic | pixelate, mosaicReveal, burnDissolve |
| Reveal / mask | wipeMask, noiseDissolve, scanReveal, radialReveal, lightSweep |
Each preset registers its own fieldsConfig describing parameter names, types, and ranges — the API reference picks these up automatically. See renderer-browser API.
Combining effects
const layer = $.addImage(
{
fit: 'cover',
effects: [
{ effect: 'vignette', params: { intensity: 0.4, radius: 0.7 } },
{ effect: 'chromaticAberration', params: { amount: 0.002 } },
{ effect: 'bloom', enabled: false, params: { threshold: 0.7, intensity: 0.8 } },
],
},
{ source: 'https://videoflow.dev/samples/sample.jpg' },
);
// Animate one effect param using a dot-path key.
layer.animate(
{ 'effects.chromaticAberration.amount': 0.002 },
{ 'effects.chromaticAberration.amount': 0.012 },
{ duration: '800ms', easing: 'easeOut' },
);Effect stacking order. Entries in the array are applied in order — each pass's output feeds the next. Set enabled: false on any entry to keep its config but skip the pass at render time (useful for A/B iteration in the editor without losing tuning).
Multiple instances of the same effect
When the same effect appears more than once in effects (for example two rgbSplit passes on different bands), address each one by index:
layer.animate(
{ 'effects.rgbSplit[0].amount': 0 },
{ 'effects.rgbSplit[0].amount': 0.02 },
{ duration: '600ms' },
);
layer.animate(
{ 'effects.rgbSplit[1].amount': 0 },
{ 'effects.rgbSplit[1].amount': 0.04 },
{ duration: '600ms' },
);The index counts passes of that same effect, not positions in the array. With effects: [blur, rgbSplit] the rgbSplit pass is still effects.rgbSplit[0] — [1] addresses nothing and the keyframes are silently ignored. Only a second rgbSplit creates an [1]. Disabled entries keep their number, so toggling one off never renumbers the others.
Discrete params
bool and option params hold their value between keyframes rather than blending — there is nothing halfway between true and false, or between two option names. Keyframe them to switch a pass's mode at an exact time. float, vec* and color params interpolate normally.