Design a new animated SVG element for the built-in library

[ronak-create]

The asset library ships animated vector overlays in library/svg/ (sparkles, confetti burst, lower third, subscribe bell, …) that render frame-accurately in previews and exports. Adding a new one requires zero JavaScript — just an .svg file that follows the project convention.

The convention (documented in CLAUDE.md → "Authoring animated SVGs"):

1. Root <svg> needs width/height (or a viewBox)
2. Animate with CSS @keyframes in a <style> block — SMIL (<animate>) is not time-controlled
3. Never write a literal animation-delay; stagger with the --d custom property instead: style="--d:0.4s"
4. animation-fill-mode: both for one-shot intros, infinite for loops
5. For rotation/scale around an element's own center: transform-box: fill-box; transform-origin: center;
6. Self-contained — no external hrefs

Look at library/svg/underline-swoosh.svg (draw-on via stroke-dashoffset) or confetti-burst.svg for working examples.

Ideas: countdown ring (3-2-1), animated fire/flame, wavy section divider, "swipe up" hand, laurel-wreath award badge, live-recording REC dot, arrow-circle CTA.

Checklist

• New .svg in library/svg/ following the rules above
• Verify: node server.js → http://localhost:7777 → SVG tab → drag it onto a video track → scrub the playhead back and forth (the animation must follow the playhead, not wall-clock time)

If scrubbing doesn't drive your animation, the usual culprit is rule 3 (a literal animation-delay).