← Back to catalog
component / echo-smear
Echo Smear
Distance-adaptive streak — records each element's real trajectory (position, rotation, scale, opacity), then trails time-offset copies behind it in proportion to its speed, combined by brightest pixel, so fast moves smear and slow ones stay sharp; spinning edges stay smooth
Use this effect
VideoML XML
Save this example as example.videoml.xml. Run vml pipeline example.videoml.xml with a VideoML installation that supports frame effects.
<vml id="catalog-example" width="1280" height="720" fps="30" duration="4s">
<voiceover seed="0"/>
<scene id="example" start="0s" duration="4s">
<frame-effect id="effect" effect-id="videoml/echo-smear" effect-version="1" props='{"parameters":{"length":100,"threshold":40,"color":"#71f5a7"}}' start="0s" duration="4s"/>
</scene>
</vml>
TypeScript
Requires the frozen stdlib package, a page element with id="effect-root", and the referenced local assets. Revoke any generated object URLs when the host disposes the effect.
import { createEffectRegistry, mountEffect } from '@videoml/stdlib/effects';
import { registerEchoSmear } from '@videoml/stdlib/effects/echo-smear';
const root = document.querySelector<HTMLElement>('#effect-root');
if (!root) throw new Error('Missing #effect-root');
const assets: Record<string, string> = {};
const registry = createEffectRegistry();
registerEchoSmear(registry);
const effect = mountEffect(root, registry, {
"id": "videoml/echo-smear",
"version": "1",
"parameters": {
"length": 100,
"threshold": 40,
"color": "#71f5a7"
},
"startFrame": 0,
"endFrame": 120
}, { width: 1280, height: 720, fps: 30, seed: 0, assets });
await effect.seek(0);
// Call await effect.dispose() and revoke asset URLs when finished.implemented · interactive preview
This entry is implemented but not yet verified.