ASCII Trail Reveal

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/ascii-trail-reveal" effect-version="1" props='{&quot;parameters&quot;:{&quot;label&quot;:&quot;The reveal&quot;,&quot;accent&quot;:&quot;green&quot;,&quot;trail_width&quot;:&quot;narrow&quot;}}' 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 { registerCatalogC001 } from '@videoml/stdlib/effects/catalog-c001';

const root = document.querySelector<HTMLElement>('#effect-root');
if (!root) throw new Error('Missing #effect-root');
const assets: Record<string, string> = {};
const registry = createEffectRegistry();
registerCatalogC001(registry);
const effect = mountEffect(root, registry, {
  "id": "videoml/ascii-trail-reveal",
  "version": "1",
  "parameters": {
    "label": "The reveal",
    "accent": "green",
    "trail_width": "narrow"
  },
  "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.

Upstream Apache-2.0 license · GSAP license