@tikagent/video-editor-cli 0.0.0-stage → 1.5.0-preview.1

package/dist/runtime/library/README.md

@@ -0,0 +1,12 @@
+# FableCut 素材库
+
+这里是默认可复用素材。内容会实时出现在编辑器左侧面板，可以直接拖到时间线上。文件按原路径引用（`/library/...`），不会复制进项目。
+
+| 文件夹 | 编辑器标签 | 内容 |
+| --- | --- | --- |
+| `sfx/` | 音效 | 呼啸、点击、上升音、冲击等（`.mp3 .wav .ogg .m4a`） |
+| `elements/` | 元素 | 叠加素材：带透明通道的 PNG、漏光、纹理、短循环 |
+| `svg/` | SVG | 按 CLAUDE.md 约定编写的矢量动画 |
+| `fonts/` | （字体编辑器） | `.ttf .otf .woff .woff2`，自动注册，字体族名等于文件名 |
+
+把网上找到的可自由使用素材放进对应文件夹，已打开的编辑器会自动刷新列表。允许子文件夹，列表中也会显示。

package/dist/runtime/library/elements/bokeh-drift.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <!-- FableCut element · drifting bokeh (loops ~8s) · blend:"screen", fit:"cover" -->
+  <style>
+    .b { animation: drift 8s ease-in-out infinite alternate; }
+    @keyframes drift {
+      from { transform: translate(0, 0); }
+      to   { transform: translate(60px, -50px); }
+    }
+  </style>
+  <g fill="#ffffff">
+    <circle class="b" style="--d:0s"    cx="140" cy="560" r="70" opacity="0.16"/>
+    <circle class="b" style="--d:-1.5s" cx="380" cy="180" r="45" opacity="0.12"/>
+    <circle class="b" style="--d:-3s"   cx="720" cy="500" r="95" opacity="0.10"/>
+    <circle class="b" style="--d:-4.5s" cx="980" cy="150" r="55" opacity="0.15"/>
+    <circle class="b" style="--d:-6s"   cx="1160" cy="420" r="80" opacity="0.11"/>
+    <circle class="b" style="--d:-2s"   cx="560" cy="640" r="38" opacity="0.18"/>
+    <circle class="b" style="--d:-5s"   cx="860" cy="300" r="28" opacity="0.20"/>
+  </g>
+</svg>

package/dist/runtime/library/elements/light-leak-cool.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <!-- FableCut element · cool light leak · use with blend:"screen", fit:"cover", opacity ~0.7 -->
+  <defs>
+    <radialGradient id="a" cx="80%" cy="15%" r="60%">
+      <stop offset="0%" stop-color="#7cc7ff" stop-opacity="0.85"/>
+      <stop offset="50%" stop-color="#4f8cff" stop-opacity="0.35"/>
+      <stop offset="100%" stop-color="#3355ff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="b" cx="10%" cy="90%" r="55%">
+      <stop offset="0%" stop-color="#b39dff" stop-opacity="0.55"/>
+      <stop offset="100%" stop-color="#7b6cff" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="1280" height="720" fill="url(#a)"/>
+  <rect width="1280" height="720" fill="url(#b)"/>
+</svg>

package/dist/runtime/library/elements/light-leak-warm.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <!-- FableCut element · warm light leak · use with blend:"screen", fit:"cover", opacity ~0.7 -->
+  <defs>
+    <radialGradient id="a" cx="15%" cy="20%" r="55%">
+      <stop offset="0%" stop-color="#ffb36b" stop-opacity="0.95"/>
+      <stop offset="45%" stop-color="#ff7a3c" stop-opacity="0.45"/>
+      <stop offset="100%" stop-color="#ff5d2e" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="b" cx="85%" cy="80%" r="60%">
+      <stop offset="0%" stop-color="#ffd9a0" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#ff8a5c" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="c" x1="0" y1="0" x2="1" y2="0.3">
+      <stop offset="0%" stop-color="#ff6b35" stop-opacity="0.35"/>
+      <stop offset="30%" stop-color="#ff6b35" stop-opacity="0"/>
+      <stop offset="100%" stop-color="#ff6b35" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <rect width="1280" height="720" fill="url(#a)"/>
+  <rect width="1280" height="720" fill="url(#b)"/>
+  <rect width="1280" height="720" fill="url(#c)"/>
+</svg>

package/dist/runtime/library/elements/vhs-scanlines.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <!-- FableCut element · VHS scanlines + edge tint · blend:"overlay" or "soft-light",
+       fit:"stretch", opacity ~0.5. Pair with rgbSplit + grain props for full VHS. -->
+  <defs>
+    <pattern id="lines" width="4" height="4" patternUnits="userSpaceOnUse">
+      <rect width="4" height="2" fill="#000000" opacity="0.55"/>
+      <rect y="2" width="4" height="2" fill="#ffffff" opacity="0.05"/>
+    </pattern>
+    <linearGradient id="edge" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#00ffc8" stop-opacity="0.14"/>
+      <stop offset="8%" stop-color="#00ffc8" stop-opacity="0"/>
+      <stop offset="92%" stop-color="#ff00a8" stop-opacity="0"/>
+      <stop offset="100%" stop-color="#ff00a8" stop-opacity="0.14"/>
+    </linearGradient>
+  </defs>
+  <rect width="1280" height="720" fill="url(#lines)"/>
+  <rect width="1280" height="720" fill="url(#edge)"/>
+</svg>

package/dist/runtime/library/elements/vignette-frame.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <!-- FableCut element · cinematic letterbox bars + soft frame · fit:"stretch" -->
+  <defs>
+    <linearGradient id="soft" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#000" stop-opacity="0.55"/>
+      <stop offset="12%" stop-color="#000" stop-opacity="0"/>
+      <stop offset="88%" stop-color="#000" stop-opacity="0"/>
+      <stop offset="100%" stop-color="#000" stop-opacity="0.55"/>
+    </linearGradient>
+  </defs>
+  <rect width="1280" height="76" fill="#000"/>
+  <rect y="644" width="1280" height="76" fill="#000"/>
+  <rect width="1280" height="720" fill="url(#soft)"/>
+</svg>

package/dist/runtime/library/sfx/README.md

@@ -0,0 +1,13 @@
+# 音效（请自行放入）
+
+本文件夹**不**随仓库分发。音效网站通常允许把文件用在你的视频里，但禁止把文件本身再分发到公开合集中，因此 FableCut 不附带音效。
+
+把 `.mp3` / `.wav` 放在这里，它们会立刻出现在编辑器的**音效**标签中（已打开的界面会实时刷新）。可以使用子文件夹。
+
+可用的免费音效来源：
+
+- **freesound.org**：筛选 CC0 许可，使用限制最少
+- **pixabay.com/sound-effects**：可在项目中免费使用
+- **mixkit.co/free-sound-effects**：可在项目中免费使用
+
+实用的起步组合：一声呼啸、一声冲击或低音、一声弹出、一声快门、一声打字、一声上升音，再加几个界面点击。CLAUDE.md 里的多数剪辑配方按这些角色引用音效。

package/dist/runtime/library/svg/arrow-bounce.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="360" viewBox="0 0 240 360">
+  <!-- FableCut animated SVG · loops · downward chevrons bouncing (swipe-up / CTA / "look here") -->
+  <style>
+    .ch { transform-box: fill-box; transform-origin: center;
+          animation: fall 1.6s ease-in-out infinite; }
+    @keyframes fall {
+      0%   { transform: translateY(-30px); opacity: 0; }
+      40%  { opacity: 1; }
+      70%  { transform: translateY(20px); opacity: 1; }
+      100% { transform: translateY(50px); opacity: 0; }
+    }
+  </style>
+  <g fill="none" stroke="#fff" stroke-width="20" stroke-linecap="round" stroke-linejoin="round">
+    <path class="ch" style="--d:0s"    d="M60 70 L120 130 L180 70"/>
+    <path class="ch" style="--d:0.2s"  d="M60 150 L120 210 L180 150"/>
+    <path class="ch" style="--d:0.4s"  d="M60 230 L120 290 L180 230"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/arrow-scribble.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <!-- FableCut animated SVG · one-shot (~0.7s) · hand-drawn arrow, points down-right.
+       Flip/rotate with clip props to point anywhere. -->
+  <style>
+    .s { stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw 0.55s cubic-bezier(.3,.8,.3,1) both; }
+    .h { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 0.25s ease-out both; }
+    @keyframes draw { to { stroke-dashoffset: 0; } }
+  </style>
+  <path class="s" style="--d:0s" d="M60 60 C 200 40, 320 140, 300 300" fill="none"
+        stroke="#ffd166" stroke-width="16" stroke-linecap="round"/>
+  <path class="h" style="--d:0.45s" d="M240 260 L 300 306 L 344 240" fill="none"
+        stroke="#ffd166" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/library/svg/burst-lines.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="700" viewBox="0 0 700 700">
+  <!-- FableCut animated SVG · one-shot (~0.6s) · radial impact/speed lines. Align to a hard cut on V4. -->
+  <style>
+    .ln { stroke-dasharray: 170; stroke-dashoffset: 170;
+          animation: shoot 0.55s cubic-bezier(.2,.8,.3,1) both; }
+    @keyframes shoot {
+      0%   { stroke-dashoffset: 170; opacity: 1; }
+      65%  { stroke-dashoffset: 0;   opacity: 1; }
+      100% { stroke-dashoffset: -60; opacity: 0; }
+    }
+    .flash { transform-box: fill-box; transform-origin: center;
+             animation: fl 0.4s ease-out both; }
+    @keyframes fl { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(1.3); opacity: 0; } }
+  </style>
+  <circle class="flash" style="--d:0s" cx="350" cy="350" r="150" fill="#fff6d8"/>
+  <g stroke="#ffd166" stroke-width="16" stroke-linecap="round">
+    <line class="ln" style="--d:0s" x1="350.0" y1="200.0" x2="350.0" y2="40.0"/>
+    <line class="ln" style="--d:0.02s" x1="425.0" y1="220.1" x2="505.0" y2="81.5"/>
+    <line class="ln" style="--d:0.04s" x1="479.9" y1="275.0" x2="618.5" y2="195.0"/>
+    <line class="ln" style="--d:0.01s" x1="500.0" y1="350.0" x2="660.0" y2="350.0"/>
+    <line class="ln" style="--d:0.03s" x1="479.9" y1="425.0" x2="618.5" y2="505.0"/>
+    <line class="ln" style="--d:0.05s" x1="425.0" y1="479.9" x2="505.0" y2="618.5"/>
+    <line class="ln" style="--d:0s" x1="350.0" y1="500.0" x2="350.0" y2="660.0"/>
+    <line class="ln" style="--d:0.02s" x1="275.0" y1="479.9" x2="195.0" y2="618.5"/>
+    <line class="ln" style="--d:0.04s" x1="220.1" y1="425.0" x2="81.5" y2="505.0"/>
+    <line class="ln" style="--d:0.01s" x1="200.0" y1="350.0" x2="40.0" y2="350.0"/>
+    <line class="ln" style="--d:0.03s" x1="220.1" y1="275.0" x2="81.5" y2="195.0"/>
+    <line class="ln" style="--d:0.05s" x1="275.0" y1="220.1" x2="195.0" y2="81.5"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/checkmark-success.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <!-- FableCut animated SVG · one-shot (~1s) · success check: ring draws, badge pops, tick draws -->
+  <style>
+    .ring { fill: none; stroke: #22c55e; stroke-width: 14; stroke-linecap: round;
+            stroke-dasharray: 880; stroke-dashoffset: 880;
+            animation: draw 0.7s cubic-bezier(.3,.8,.3,1) both; }
+    .disc { transform-box: fill-box; transform-origin: center;
+            animation: pop 0.4s cubic-bezier(.34,1.56,.64,1) both; }
+    .tick { fill: none; stroke: #fff; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round;
+            stroke-dasharray: 200; stroke-dashoffset: 200;
+            animation: draw2 0.4s cubic-bezier(.3,.8,.3,1) both; }
+    @keyframes draw  { to { stroke-dashoffset: 0; } }
+    @keyframes draw2 { to { stroke-dashoffset: 0; } }
+    @keyframes pop   { 0% { transform: scale(0); } 100% { transform: scale(1); } }
+  </style>
+  <circle class="ring" style="--d:0s" cx="200" cy="200" r="140"/>
+  <circle class="disc" style="--d:0.5s" cx="200" cy="200" r="120" fill="#22c55e"/>
+  <path class="tick" style="--d:0.7s" d="M140 205 l40 42 82 -92"/>
+</svg>

package/dist/runtime/library/svg/confetti-burst.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800">
+  <!-- FableCut animated SVG · one-shot (~1.8s) · confetti explosion from center -->
+  <style>
+    .c { transform-box: fill-box; transform-origin: center; animation: fly 1.6s cubic-bezier(.15,.7,.4,1) both; }
+    @keyframes fly {
+      0%   { transform: translate(0,0) rotate(0turn) scale(0.4); opacity: 1; }
+      70%  { opacity: 1; }
+      100% { transform: translate(var(--tx,0px), var(--ty,-300px)) rotate(2turn) scale(1); opacity: 0; }
+    }
+  </style>
+  <g>
+    <rect class="c" style="--d:0s;    --tx:-260px; --ty:-200px" x="392" y="392" width="18" height="26" fill="#ff5d73"/>
+    <rect class="c" style="--d:0.04s; --tx:230px;  --ty:-260px" x="392" y="392" width="16" height="24" fill="#ffd166"/>
+    <rect class="c" style="--d:0.08s; --tx:-140px; --ty:-320px" x="392" y="392" width="14" height="22" fill="#6ee7b7"/>
+    <rect class="c" style="--d:0.02s; --tx:300px;  --ty:-120px" x="392" y="392" width="18" height="18" fill="#7b6cff"/>
+    <rect class="c" style="--d:0.06s; --tx:-320px; --ty:-60px"  x="392" y="392" width="16" height="20" fill="#4f8cff"/>
+    <circle class="c" style="--d:0.03s; --tx:120px;  --ty:-340px" cx="400" cy="400" r="10" fill="#ff9f43"/>
+    <circle class="c" style="--d:0.07s; --tx:-60px;  --ty:-380px" cx="400" cy="400" r="8"  fill="#ff5d73"/>
+    <circle class="c" style="--d:0.05s; --tx:260px;  --ty:60px"   cx="400" cy="400" r="9"  fill="#6ee7b7"/>
+    <rect class="c" style="--d:0.09s; --tx:-230px; --ty:120px"  x="392" y="392" width="14" height="14" fill="#ffd166"/>
+    <rect class="c" style="--d:0.01s; --tx:60px;   --ty:200px"  x="392" y="392" width="16" height="22" fill="#7b6cff"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/countdown-ring.svg

@@ -0,0 +1,92 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <!-- FableCut animated SVG · one-shot (~3s) · countdown ring 3 → 2 → 1
+       Useful for video intros, transitions, and "ready" cues. -->
+  <style>
+    /* Ring sweep — draws a circular arc over 1s per digit */
+    .ring {
+      fill: none;
+      stroke-width: 8;
+      stroke-linecap: round;
+      stroke-dasharray: 502.65;
+      stroke-dashoffset: 502.65;
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: sweep 1s cubic-bezier(.4,0,.2,1) both;
+      animation-delay: var(--d, 0s);
+    }
+    @keyframes sweep {
+      0%   { stroke-dashoffset: 502.65; opacity: 0.3; }
+      10%  { opacity: 1; }
+      100% { stroke-dashoffset: 0; opacity: 1; }
+    }
+
+    /* Digit pop-in */
+    .digit {
+      font-family: 'Helvetica Neue', Arial, sans-serif;
+      font-weight: 700;
+      font-size: 120px;
+      text-anchor: middle;
+      dominant-baseline: central;
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: pop 0.4s cubic-bezier(.34,1.56,.64,1) both,
+                 hideAtEnd 0.01s linear 1s both;
+      animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.99s);
+      opacity: 0;
+    }
+    @keyframes pop {
+      0%   { transform: scale(0.3); opacity: 0; }
+      60%  { transform: scale(1.1); opacity: 1; }
+      100% { transform: scale(1);   opacity: 1; }
+    }
+    @keyframes hideAtEnd {
+      to { opacity: 0; }
+    }
+
+    /* Digit fade-out at end of each second */
+    .digit-out {
+      animation: fadeOut 0.25s ease-in both;
+    }
+    @keyframes fadeOut {
+      0%   { opacity: 1; transform: scale(1); }
+      100% { opacity: 0; transform: scale(0.8); }
+    }
+
+    /* Outer glow pulse */
+    .glow {
+      fill: none;
+      stroke-width: 2;
+      opacity: 0;
+      animation: glowPulse 1s ease-out both;
+      animation-delay: var(--d, 0s);
+    }
+    @keyframes glowPulse {
+      0%   { opacity: 0.6; stroke-width: 8; }
+      100% { opacity: 0;   stroke-width: 30; }
+    }
+  </style>
+
+  <!-- "3" group — 0s to 1s -->
+  <g>
+    <!-- glow -->
+    <circle class="glow" style="--d:0s" cx="200" cy="200" r="150" stroke="#ff6b6b"/>
+    <!-- ring -->
+    <circle class="ring" style="--d:0s" cx="200" cy="200" r="80" stroke="#ff6b6b"/>
+    <!-- digit -->
+    <text class="digit" style="--d:0s" x="200" y="200" fill="#ff6b6b">3</text>
+  </g>
+
+  <!-- "2" group — 1s to 2s -->
+  <g>
+    <circle class="glow" style="--d:1s" cx="200" cy="200" r="150" stroke="#ffd166"/>
+    <circle class="ring" style="--d:1s" cx="200" cy="200" r="80" stroke="#ffd166"/>
+    <text class="digit" style="--d:1s" x="200" y="200" fill="#ffd166">2</text>
+  </g>
+
+  <!-- "1" group — 2s to 3s -->
+  <g>
+    <circle class="glow" style="--d:2s" cx="200" cy="200" r="150" stroke="#6ee7b7"/>
+    <circle class="ring" style="--d:2s" cx="200" cy="200" r="80" stroke="#6ee7b7"/>
+    <text class="digit" style="--d:2s" x="200" y="200" fill="#6ee7b7">1</text>
+  </g>
+</svg>

package/dist/runtime/library/svg/equalizer.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
+  <!-- FableCut animated SVG · loops · audio equalizer bars (music sections / podcast) -->
+  <style>
+    .bar { transform-box: fill-box; transform-origin: center bottom;
+           animation: eq 0.8s ease-in-out infinite; }
+    @keyframes eq {
+      0%, 100% { transform: scaleY(0.25); }
+      50%      { transform: scaleY(1); }
+    }
+  </style>
+  <g fill="#4f8cff">
+    <rect class="bar" style="--d:0s"    x="40"  y="40" width="34" height="220" rx="8"/>
+    <rect class="bar" style="--d:0.25s" x="104" y="40" width="34" height="220" rx="8" fill="#7b6cff"/>
+    <rect class="bar" style="--d:0.5s"  x="168" y="40" width="34" height="220" rx="8" fill="#6ee7b7"/>
+    <rect class="bar" style="--d:0.15s" x="232" y="40" width="34" height="220" rx="8" fill="#ffd166"/>
+    <rect class="bar" style="--d:0.4s"  x="296" y="40" width="34" height="220" rx="8" fill="#ff5d73"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/glow-orbs.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <!-- FableCut animated SVG · loops · floating bokeh orbs. Use on V4 with props {blend:"screen", opacity:0.7, fit:"cover"} -->
+  <style>
+    .o { transform-box: fill-box; transform-origin: center;
+         animation: drift 9s ease-in-out infinite; }
+    @keyframes drift {
+      0%, 100% { transform: translate(0,0) scale(1); opacity: 0.35; }
+      50%      { transform: translate(30px,-50px) scale(1.25); opacity: 0.85; }
+    }
+    .p { animation: puff 5s ease-in-out infinite; }
+    @keyframes puff { 0%,100% { opacity: 0.2; } 50% { opacity: 0.7; } }
+  </style>
+  <defs>
+    <radialGradient id="g" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#fff" stop-opacity="0.95"/>
+      <stop offset="45%" stop-color="#bfa8ff" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#7b6cff" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <g fill="url(#g)">
+    <circle class="o" style="--d:0s"   cx="220" cy="180" r="120"/>
+    <circle class="o" style="--d:2.5s" cx="980" cy="230" r="160"/>
+    <circle class="o" style="--d:1.2s" cx="640" cy="520" r="100"/>
+    <circle class="o" style="--d:4s"   cx="1120" cy="560" r="90"/>
+    <circle class="p" style="--d:3s"   cx="430" cy="600" r="60"/>
+    <circle class="p" style="--d:1.8s" cx="820" cy="120" r="50"/>
+    <circle class="o" style="--d:5.5s" cx="120" cy="480" r="70"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/heart-pop.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="600" viewBox="0 0 500 600">
+  <!-- FableCut animated SVG · loops · beating heart with floating hearts (like / reaction) -->
+  <style>
+    .beat { transform-box: fill-box; transform-origin: center;
+            animation: beat 1.2s ease-in-out infinite; }
+    @keyframes beat {
+      0%, 100% { transform: scale(1); }
+      15%      { transform: scale(1.18); }
+      30%      { transform: scale(1); }
+      45%      { transform: scale(1.12); }
+    }
+    .float { transform-box: fill-box; transform-origin: center;
+             animation: rise 3s ease-in infinite; }
+    @keyframes rise {
+      0%   { transform: translate(0,0) scale(0.3); opacity: 0; }
+      20%  { opacity: 0.9; }
+      100% { transform: translate(var(--tx,0px),-360px) scale(1); opacity: 0; }
+    }
+  </style>
+  <g fill="#ff4d6d">
+    <path class="beat" style="--d:0s" d="M250 470 C120 380 70 300 70 220 C70 150 120 110 175 110 C215 110 240 135 250 160 C260 135 285 110 325 110 C380 110 430 150 430 220 C430 300 380 380 250 470z"/>
+    <path class="float" style="--d:0s; --tx:-70px" opacity="0.8" d="M150 460 c-40 -28 -56 -52 -56 -78 c0 -22 16 -34 33 -34 c12 0 20 8 23 15 c3 -7 11 -15 23 -15 c17 0 33 12 33 34 c0 26 -16 50 -56 78z"/>
+    <path class="float" style="--d:1s; --tx:60px"  opacity="0.7" d="M330 470 c-40 -28 -56 -52 -56 -78 c0 -22 16 -34 33 -34 c12 0 20 8 23 15 c3 -7 11 -15 23 -15 c17 0 33 12 33 34 c0 26 -16 50 -56 78z"/>
+    <path class="float" style="--d:2s; --tx:15px"  opacity="0.6" d="M250 480 c-30 -21 -42 -39 -42 -58 c0 -16 12 -26 25 -26 c9 0 15 6 17 11 c2 -5 8 -11 17 -11 c13 0 25 10 25 26 c0 19 -12 37 -42 58z"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/loading-dots.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="120" viewBox="0 0 300 120">
+  <!-- FableCut animated SVG · loops · three bouncing dots (loading / buffering) -->
+  <style>
+    .d { transform-box: fill-box; transform-origin: center;
+         animation: bob 0.9s cubic-bezier(.4,0,.6,1) infinite; }
+    @keyframes bob {
+      0%, 80%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
+      40%           { transform: translateY(-26px) scale(1.15); opacity: 1; }
+    }
+  </style>
+  <g fill="#7b6cff">
+    <circle class="d" style="--d:0s"    cx="80"  cy="60" r="18"/>
+    <circle class="d" style="--d:0.15s" cx="150" cy="60" r="18"/>
+    <circle class="d" style="--d:0.3s"  cx="220" cy="60" r="18"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/location-pin.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500" viewBox="0 0 400 500">
+  <!-- FableCut animated SVG · pin drops in once (~0.9s), then ground ring pulses forever (map / travel) -->
+  <style>
+    .pin { transform-box: fill-box; transform-origin: center bottom;
+           animation: drop 0.8s cubic-bezier(.5,1.6,.5,1) both; }
+    @keyframes drop {
+      0%   { transform: translateY(-320px) scale(0.6); opacity: 0; }
+      60%  { opacity: 1; }
+      80%  { transform: translateY(0) scaleY(0.82) scaleX(1.12); }
+      100% { transform: translateY(0) scale(1); opacity: 1; }
+    }
+    .ping { transform-box: fill-box; transform-origin: center;
+            animation: ping 1.8s ease-out infinite; }
+    @keyframes ping {
+      0%   { transform: scale(0.3); opacity: 0.8; }
+      100% { transform: scale(1.6); opacity: 0; }
+    }
+  </style>
+  <ellipse class="ping" style="--d:0.9s" cx="200" cy="430" rx="90" ry="26" fill="none" stroke="#ff5d73" stroke-width="6"/>
+  <g class="pin" style="--d:0s">
+    <path d="M200 90 C120 90 70 150 70 220 C70 300 160 380 200 430 C240 380 330 300 330 220 C330 150 280 90 200 90z" fill="#ff5d73"/>
+    <circle cx="200" cy="215" r="46" fill="#fff"/>
+    <circle cx="200" cy="215" r="22" fill="#ff5d73"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/lower-third.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <!-- FableCut animated SVG · one-shot (~1.2s in) · lower-third bar.
+       Put your name/role with FableCut TEXT clips on top of this. -->
+  <style>
+    .bar  { animation: slide 0.7s cubic-bezier(.2,.9,.25,1) both; }
+    .rule { animation: grow 0.6s cubic-bezier(.2,.9,.25,1) both; transform-origin: left center; }
+    .dot  { transform-box: fill-box; transform-origin: center; animation: pop 0.45s cubic-bezier(.34,1.56,.64,1) both; }
+    @keyframes slide { from { transform: translateX(-110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+    @keyframes grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+    @keyframes pop   { from { transform: scale(0); } to { transform: scale(1); } }
+  </style>
+  <g>
+    <rect class="bar" style="--d:0s" x="60" y="540" width="520" height="86" rx="14" fill="#101018" opacity="0.85"/>
+    <rect class="rule" style="--d:0.35s" x="60" y="632" width="520" height="6" rx="3" fill="#7b6cff"/>
+    <circle class="dot" style="--d:0.55s" cx="96" cy="583" r="14" fill="#7b6cff"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/new-badge.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="360" viewBox="0 0 360 360">
+  <!-- FableCut animated SVG · badge pops + starburst spins forever (sticker / "NEW" / sale).
+       Add your own TEXT clip on top for the label. -->
+  <style>
+    .burst { transform-box: fill-box; transform-origin: center;
+             animation: spin 14s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .in { transform-box: fill-box; transform-origin: center;
+          animation: pop 0.6s cubic-bezier(.34,1.56,.64,1) both; }
+    @keyframes pop { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: scale(1) rotate(0deg); } }
+  </style>
+  <g class="in" style="--d:0s">
+    <path class="burst" style="--d:0s" fill="#ff5d73" d="M180 20
+      l26 34 40 -18 6 44 44 6 -18 40 34 26 -34 26 18 40 -44 6 -6 44 -40 -18 -26 34 -26 -34 -40 18 -6 -44 -44 -6 18 -40 -34 -26 34 -26 -18 -40 44 -6 6 -44 40 18z"/>
+    <circle cx="180" cy="180" r="96" fill="#ffd166"/>
+    <circle cx="180" cy="180" r="96" fill="none" stroke="#fff" stroke-width="5" stroke-dasharray="10 12"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/progress-bar.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="120" viewBox="0 0 800 120">
+  <!-- FableCut animated SVG · one-shot (~2s) · progress bar fills left→right with a moving shine -->
+  <style>
+    .fill { transform-box: fill-box; transform-origin: left center;
+            animation: grow 2s cubic-bezier(.5,.05,.2,1) both; }
+    @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+    .knob { animation: run 2s cubic-bezier(.5,.05,.2,1) both; }
+    @keyframes run { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateX(720px); opacity: 1; } }
+  </style>
+  <rect x="40" y="46" width="720" height="28" rx="14" fill="#2a2a3a"/>
+  <clipPath id="track"><rect x="40" y="46" width="720" height="28" rx="14"/></clipPath>
+  <g clip-path="url(#track)">
+    <rect class="fill" style="--d:0s" x="40" y="46" width="720" height="28" fill="#7b6cff"/>
+  </g>
+  <circle class="knob" style="--d:0s" cx="40" cy="60" r="22" fill="#fff"/>
+</svg>

package/dist/runtime/library/svg/radial-pulse.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
+  <!-- FableCut animated SVG · loops · concentric pulse rings (attention / notify / sonar) -->
+  <style>
+    .r { transform-box: fill-box; transform-origin: center;
+         animation: pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
+    @keyframes pulse {
+      0%   { transform: scale(0.1); opacity: 0; }
+      15%  { opacity: 0.9; }
+      100% { transform: scale(1); opacity: 0; }
+    }
+  </style>
+  <g fill="none" stroke="#7b6cff" stroke-width="5">
+    <circle class="r" style="--d:0s"   cx="300" cy="300" r="290"/>
+    <circle class="r" style="--d:0.6s" cx="300" cy="300" r="290"/>
+    <circle class="r" style="--d:1.2s" cx="300" cy="300" r="290"/>
+    <circle class="r" style="--d:1.8s" cx="300" cy="300" r="290"/>
+  </g>
+  <circle cx="300" cy="300" r="30" fill="#7b6cff"/>
+</svg>

package/dist/runtime/library/svg/rating-stars.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="240" viewBox="0 0 800 240">
+  <!-- FableCut animated SVG · one-shot (~1.1s) · 5 stars pop in sequence (review / rating) -->
+  <style>
+    .st { transform-box: fill-box; transform-origin: center;
+          animation: pop 0.5s cubic-bezier(.34,1.56,.64,1) both; }
+    @keyframes pop {
+      0%   { transform: scale(0) rotate(-60deg); opacity: 0; }
+      100% { transform: scale(1) rotate(0deg);   opacity: 1; }
+    }
+    .shine { transform-box: fill-box; transform-origin: center;
+             animation: gl 0.4s ease-out both; }
+    @keyframes gl { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.4); } }
+  </style>
+  <g fill="#ffd166">
+    <path class="st" style="--d:0s"    d="M110 40 l24 60 64 4 -50 42 17 62 -55 -36 -55 36 17 -62 -50 -42 64 -4z"/>
+    <path class="st" style="--d:0.12s" d="M255 40 l24 60 64 4 -50 42 17 62 -55 -36 -55 36 17 -62 -50 -42 64 -4z"/>
+    <path class="st" style="--d:0.24s" d="M400 40 l24 60 64 4 -50 42 17 62 -55 -36 -55 36 17 -62 -50 -42 64 -4z"/>
+    <path class="st" style="--d:0.36s" d="M545 40 l24 60 64 4 -50 42 17 62 -55 -36 -55 36 17 -62 -50 -42 64 -4z"/>
+    <path class="st" style="--d:0.48s" d="M690 40 l24 60 64 4 -50 42 17 62 -55 -36 -55 36 17 -62 -50 -42 64 -4z"/>
+  </g>
+  <g fill="#fffbe6">
+    <circle class="shine" style="--d:0.62s" cx="110" cy="120" r="30"/>
+    <circle class="shine" style="--d:0.74s" cx="700" cy="120" r="30"/>
+  </g>
+</svg>

package/dist/runtime/library/svg/rec-indicator.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="80" viewBox="0 0 200 80">
+  <!-- FableCut animated SVG · loop · live-recording REC indicator
+       Pulsing red dot + "REC" label. Great for "live" overlays. -->
+  <style>
+    .dot {
+      fill: #ff3b30;
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: pulse 1.2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%      { opacity: 0.4; transform: scale(0.75); }
+    }
+    .ring {
+      fill: none;
+      stroke: #ff3b30;
+      stroke-width: 2;
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: ringPulse 1.2s ease-out infinite;
+    }
+    @keyframes ringPulse {
+      0%   { opacity: 0.8; r: 14; }
+      100% { opacity: 0;   r: 28; }
+    }
+    .label {
+      font-family: 'Helvetica Neue', Arial, sans-serif;
+      font-weight: 700;
+      font-size: 28px;
+      fill: #ff3b30;
+      letter-spacing: 3px;
+    }
+  </style>
+  <!-- Pulsing ring -->
+  <circle class="ring" style="--d:0s" cx="30" cy="40" r="14"/>
+  <!-- Solid dot -->
+  <circle class="dot" style="--d:0s" cx="30" cy="40" r="10"/>
+  <!-- REC text -->
+  <text class="label" x="58" y="48">REC</text>
+</svg>