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' },
);