Text effects, pad crossfade, playback progress + per-track durations

- Scrolling text: font, size, weight, colour and movement effects (up/down, wave,
  zoom, flash, rotate) rendered per-letter (and captured in recordings).
- Larger multiline text input.
- Pad bank: crossfade between pads (per-source gain ramps in the audio engine).
- Duration + remaining-time and progress bars for the playlist and the active pad,
  via metadata probing and live progress reports from the output window.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/control.html

@@ -119,6 +119,8 @@
           <button id="btn-pad-stop">⏹ Stop</button>
           <button id="btn-pad-clear">🗑 Svuota tutti</button>
         </div>
+        <label>Crossfade tra pad <span id="pad-xfade-val">0.0s</span></label>
+        <input type="range" id="pad-xfade" min="0" max="8" step="0.5" value="0" />
         <div id="pad-grid" class="pad-grid"></div>
         <input type="file" id="pad-input" accept="audio/*" hidden />
         <div class="hint-mini">Clic su un pad vuoto (o trascina un brano) per assegnarlo · clic su un pad pieno per avviarlo · premendone un altro ferma quello in corso · <b>tasto destro</b> per ricaricare · ✕ per svuotare.</div>
@@ -191,7 +193,7 @@
     <div class="tab-panel" data-tab="testo">
       <section class="span2">
         <label>Testo scorrevole</label>
-        <input type="text" id="ticker-text" class="textfield" placeholder="Es. NOME DJ · EVENTO" />
+        <textarea id="ticker-text" class="textfield textarea-lg" rows="4" placeholder="Scrivi qui il testo da far scorrere…&#10;Es. NOME DJ · TITOLO EVENTO · DATA"></textarea>
         <div class="row">
           <label class="chk"><input type="checkbox" id="ticker-on" /> Mostra</label>
           <select id="ticker-pos">
@@ -202,6 +204,32 @@
         </div>
         <label>Velocità testo <span id="ticker-speed-val">1.0×</span></label>
         <input type="range" id="ticker-speed" min="0.2" max="4" step="0.1" value="1" />
+        <label>Carattere</label>
+        <select id="ticker-font">
+          <option value="-apple-system, BlinkMacSystemFont, sans-serif">Sistema</option>
+          <option value="'Arial Black', Impact, sans-serif">Arial Black</option>
+          <option value="Impact, sans-serif">Impact</option>
+          <option value="Georgia, 'Times New Roman', serif">Georgia</option>
+          <option value="'Courier New', monospace">Monospace</option>
+          <option value="'Brush Script MT', 'Snell Roundhand', cursive">Corsivo</option>
+          <option value="Verdana, Geneva, sans-serif">Verdana</option>
+          <option value="'Trebuchet MS', sans-serif">Trebuchet</option>
+        </select>
+        <label>Grandezza <span id="ticker-size-val">6.0</span></label>
+        <input type="range" id="ticker-size" min="2" max="18" step="0.5" value="6" />
+        <div class="row">
+          <label class="chk"><input type="checkbox" id="ticker-bold" checked /> Grassetto</label>
+          <label class="chk">Colore <input type="color" id="ticker-color" value="#ffffff" /></label>
+        </div>
+        <label>Effetto movimento</label>
+        <select id="ticker-fx">
+          <option value="none">Nessuno</option>
+          <option value="updown">Su e giù</option>
+          <option value="wave">Onda</option>
+          <option value="zoom">Zoom / pulse</option>
+          <option value="flash">Flash</option>
+          <option value="rotate">Rotazione</option>
+        </select>
       </section>
     </div>