Asset library

Sound effects, overlays, fonts and animated SVGs that ship with the editor, and how to make your own.

The asset library#

Reusable assets, visible in the editor's left-panel tabs and never copied:

Folder	Editor tab	Purpose
`library/sfx/`	Sound FX	whooshes, impacts, risers, UI clicks
`library/elements/`	Elements	overlay art: alpha PNGs, light leaks, textures, stickers
`library/svg/`	SVG	animated vector graphics you author (convention below)
`library/fonts/`	font editor	`.ttf/.otf/.woff/.woff2`, auto-registered, family name = file name; a variable font draws every `weight`

List via GET /api/library?dir=sfx|elements|svg|fonts (recursive; subfolders OK).
To use one in the timeline, add a media entry whose src is its library path, e.g. { "id":"m_x", "name":"whoosh.mp3", "kind":"audio", "src":"/library/sfx/whoosh.mp3" } - then reference it from clips like any other media.
Dropping files into these folders live-refreshes the open UI.

Authoring animated SVGs#

You can create your own vector animations/overlays: write an .svg file into library/svg/ (or media/), register it as media with "kind": "svg", and place it on a video track. The compositor renders it frame-accurately, driven by the clip's local time (preview and export).

Conventions (required for time-driven animation):

Root <svg> must carry width and height attributes (or a viewBox).
Animate with CSS @keyframes inside a <style> block - SMIL (<animate>) is NOT time-controlled.
Never write a literal animation-delay. For staggered starts set the custom property --d on the element instead: style="--d:0.4s". (The engine drives time by overriding animation-delay to calc(var(--d,0s) - t) with animations paused.)
animation-fill-mode: both (or the both keyword in the shorthand) for one-shot intros; infinite for loops - both work.
For rotations/scales around an element's own center add transform-box: fill-box; transform-origin: center;.
Keep files self-contained (no external hrefs).

Skeleton:

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
  <style>
    .a { transform-box: fill-box; transform-origin: center;
         animation: pop 0.5s cubic-bezier(.34,1.56,.64,1) both; }
    @keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  </style>
  <circle class="a" style="--d:0s"   cx="200" cy="225" r="60" fill="#7b6cff"/>
  <circle class="a" style="--d:0.2s" cx="400" cy="225" r="60" fill="#ffd166"/>
</svg>

Examples in library/svg/: sparkles.svg (loop), lower-third.svg, confetti-burst.svg, underline-swoosh.svg (draw-on via stroke-dashoffset).

Edit this in CLAUDE.md The whole manual as Markdown