fablecut 0.0.0-stage → 1.12.0

package/library/fonts/LICENSES.md

@@ -0,0 +1,31 @@
+# Font licenses
+
+All fonts in this folder were downloaded from [Google Fonts](https://fonts.google.com)
+and are redistributed under the **SIL Open Font License 1.1** (OFL). Each family's
+license text and author information are available on its Google Fonts page.
+
+| Family | Google Fonts page |
+| --- | --- |
+| Abril Fatface | https://fonts.google.com/specimen/Abril+Fatface |
+| Anton | https://fonts.google.com/specimen/Anton |
+| Archivo Black | https://fonts.google.com/specimen/Archivo+Black |
+| Bangers | https://fonts.google.com/specimen/Bangers |
+| Barlow | https://fonts.google.com/specimen/Barlow |
+| Bebas Neue | https://fonts.google.com/specimen/Bebas+Neue |
+| Bungee | https://fonts.google.com/specimen/Bungee |
+| Caveat | https://fonts.google.com/specimen/Caveat |
+| DM Sans | https://fonts.google.com/specimen/DM+Sans |
+| Inter | https://fonts.google.com/specimen/Inter |
+| Lato | https://fonts.google.com/specimen/Lato |
+| Montserrat | https://fonts.google.com/specimen/Montserrat |
+| Oswald | https://fonts.google.com/specimen/Oswald |
+| Pacifico | https://fonts.google.com/specimen/Pacifico |
+| Playfair Display | https://fonts.google.com/specimen/Playfair+Display |
+| Poppins | https://fonts.google.com/specimen/Poppins |
+| Righteous | https://fonts.google.com/specimen/Righteous |
+| Roboto | https://fonts.google.com/specimen/Roboto |
+| Rubik | https://fonts.google.com/specimen/Rubik |
+| Teko | https://fonts.google.com/specimen/Teko |
+
+The OFL permits free use, modification, and redistribution of the fonts, provided
+they are not sold on their own. Full license: https://openfontlicense.org

package/library/sfx/README.md

@@ -0,0 +1,18 @@
+# Sound FX (bring your own)
+
+This folder is **not** distributed with the repo — sound-effect sites usually
+license their files for use *in your videos* but prohibit redistributing the
+files themselves in a public collection, so FableCut doesn't ship any.
+
+Drop `.mp3` / `.wav` files in here and they appear in the editor's **Sound FX**
+tab instantly (the open UI live-refreshes). Subfolders are fine.
+
+Good sources of free sounds:
+
+- **freesound.org** — filter by the CC0 license for no-strings sounds
+- **pixabay.com/sound-effects** — free for use in your projects
+- **mixkit.co/free-sound-effects** — free for use in your projects
+
+Handy starter set: a whoosh, an impact/boom, a pop, a camera shutter, a
+typewriter tick, a riser, and a couple of UI clicks — most editing recipes in
+CLAUDE.md reference sounds like these by role.

package/library/svg/ai-star.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
+  <!-- FableCut animated SVG · loops · central AI star + three twinkling satellites (white) -->
+  <style>
+    .tw { transform-box: fill-box; transform-origin: center;
+          animation: twinkle 1.8s ease-in-out infinite; }
+    @keyframes twinkle {
+      0%, 100% { transform: scale(0.15) rotate(0deg); opacity: 0; }
+      50%      { transform: scale(1) rotate(45deg); opacity: 1; }
+    }
+  </style>
+  <g fill="#ffffff">
+    <path d="M400 148 l26 74 74 26 -74 26 -26 74 -26 -74 -74 -26 74 -26z"/>
+    <path class="tw" style="--d:0s"   d="M528 148 l8 20 20 8 -20 8 -8 20 -8 -20 -20 -8 20 -8z"/>
+    <path class="tw" style="--d:0.55s" d="M290 167 l7 18 18 7 -18 7 -7 18 -7 -18 -18 -7 18 -7z"/>
+    <path class="tw" style="--d:1.1s"  d="M288 295 l9 22 22 9 -22 9 -9 22 -9 -22 -22 -9 22 -9z"/>
+  </g>
+</svg>

package/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/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/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/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/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/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/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/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/library/svg/heart-pop.svg

@@ -0,0 +1,28 @@
+<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;
+             opacity: 0;
+             animation: rise 3s ease-in infinite both; }
+    @keyframes rise {
+      0%   { transform: translate(0,0) scale(0.3); opacity: 0; }
+      22%  { opacity: 0; }
+      38%  { opacity: 0.85; }
+      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:0.45s; --tx:-70px" 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:1.45s; --tx:60px"  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:2.45s; --tx:15px"  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/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/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/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/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/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/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/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/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>

package/library/svg/sparkles.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
+  <!-- FableCut animated SVG · loops · twinkling sparkles overlay -->
+  <style>
+    .sp { transform-box: fill-box; transform-origin: center; animation: tw 1.6s ease-in-out infinite; }
+    @keyframes tw {
+      0%, 100% { transform: scale(0.2) rotate(0deg); opacity: 0; }
+      50%      { transform: scale(1) rotate(90deg);  opacity: 1; }
+    }
+  </style>
+  <g fill="#fff8d8">
+    <path class="sp" style="--d:0s"    d="M120 90 l10 26 26 10 -26 10 -10 26 -10 -26 -26 -10 26 -10z"/>
+    <path class="sp" style="--d:0.35s" d="M640 70 l8 20 20 8 -20 8 -8 20 -8 -20 -20 -8 20 -8z"/>
+    <path class="sp" style="--d:0.7s"  d="M420 180 l12 30 30 12 -30 12 -12 30 -12 -30 -30 -12 30 -12z"/>
+    <path class="sp" style="--d:1.05s" d="M200 320 l8 20 20 8 -20 8 -8 20 -8 -20 -20 -8 20 -8z"/>
+    <path class="sp" style="--d:1.3s"  d="M660 330 l10 24 24 10 -24 10 -10 24 -10 -24 -24 -10 24 -10z"/>
+  </g>
+</svg>