Particle Image Reveal

Use this effect

VideoML XML

Save this example as example.videoml.xml and place the downloaded asset in an assets/ directory beside it. Run vml pipeline example.videoml.xml with a VideoML installation that supports frame effects.

Download neutral-image.svg to assets/.

<vml id="catalog-example" width="1280" height="720" fps="30" duration="4s">
  <voiceover seed="0"/>
  <assets>
    <asset id="image" src="assets/neutral-image.svg" media-type="image/svg+xml"/>
  </assets>
  <scene id="example" start="0s" duration="4s">
    <frame-effect id="effect" effect-id="videoml/particle-image-reveal" effect-version="1" props='{&quot;parameters&quot;:{&quot;density&quot;:&quot;med&quot;,&quot;accent&quot;:&quot;green&quot;,&quot;direction&quot;:&quot;ltr&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 { registerParticleEffects } from '@videoml/stdlib/effects/particles';

const root = document.querySelector<HTMLElement>('#effect-root');
if (!root) throw new Error('Missing #effect-root');
const assets: Record<string, string> = {};
const assetResponse = await fetch('/catalog-assets/neutral-image.svg');
if (!assetResponse.ok) throw new Error('Asset unavailable');
assets.image = URL.createObjectURL(await assetResponse.blob());
const registry = createEffectRegistry();
registerParticleEffects(registry);
const effect = mountEffect(root, registry, {
  "id": "videoml/particle-image-reveal",
  "version": "1",
  "parameters": {
    "density": "med",
    "accent": "green",
    "direction": "ltr"
  },
  "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