Swoosh/.superpowers/brainstorm/17336-1773912049/animation-map-v2.html

<h2>Mapa mikro-animacji Swoosh</h2>
<p class="subtitle">19 animacji + 5 przejść nawigacyjnych. Ekspresyjny styl: sprężynki, bounce, overshoot.</p>

<style>
  .screen-section { margin: 28px 0; }
  .screen-title { font-size: 1.2em; font-weight: 700; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid rgba(108,99,255,0.3); }
  .anim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .anim-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px 14px; }
  .anim-name { font-weight: 700; font-size: 0.95em; margin-bottom: 4px; }
  .anim-desc { font-size: 0.85em; opacity: 0.75; line-height: 1.4; }
  .anim-type { display: inline-block; font-size: 0.65em; padding: 2px 6px; border-radius: 3px; font-weight: 700; margin-left: 6px; vertical-align: middle; }
  .t-spring { background: #7c4dff; color: #fff; }
  .t-fade { background: #00c853; color: #000; }
  .t-slide { background: #ff9100; color: #000; }
  .t-scale { background: #448aff; color: #fff; }
  .t-bounce { background: #ff4081; color: #fff; }
  .spec-box { margin-top: 32px; padding: 18px; background: rgba(108,99,255,0.08); border: 1px solid rgba(108,99,255,0.25); border-radius: 10px; }
  .spec-box h3 { margin: 0 0 12px 0; }
  .spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .spec-item { background: rgba(255,255,255,0.04); border-radius: 6px; padding: 10px 12px; }
  .spec-name { font-weight: 700; font-size: 0.9em; }
  .spec-val { font-size: 0.8em; opacity: 0.7; margin-top: 2px; }
  .nav-table { width: 100%; margin-top: 12px; font-size: 0.85em; }
  .nav-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-table td:first-child { font-weight: 600; white-space: nowrap; width: 40%; }
</style>

<!-- ===== FEED SCREEN ===== -->
<div class="screen-section">
  <div class="screen-title">📋 Feed Screen — 7 animacji</div>
  <div class="anim-grid">
    <div class="anim-item">
      <div class="anim-name">FAB wejście <span class="anim-type t-spring">SPRING</span></div>
      <div class="anim-desc">Przy otwarciu ekranu FAB skaluje się z 0 do 1 z wyraźnym overshootem — "wyskakuje" na ekran</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">FAB press <span class="anim-type t-spring">SPRING</span></div>
      <div class="anim-desc">Przy tapnięciu kurczy się do 85% i sprężyście wraca do 100%. Czujesz "klik"</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Karty postów wejście <span class="anim-type t-slide">SLIDE</span></div>
      <div class="anim-desc">Karty wjeżdżają od dołu kaskadowo — każda z 50ms opóźnieniem. Efekt "wodospadu"</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">"Show more" expand <span class="anim-type t-spring">SPRING</span></div>
      <div class="anim-desc">Karta rozszerza się sprężyście (animateContentSize). Tekst wchodzi z fade</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Empty state <span class="anim-type t-fade">FADE</span></div>
      <div class="anim-desc">Ikona i tekst "No posts yet" fade-in + delikatny scale z 0.9 do 1.0</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Queue status chip <span class="anim-type t-bounce">BOUNCE</span></div>
      <div class="anim-desc">Podczas uploadu chip pulsuje. Przy zmianie statusu (success/fail) — bounce + zmiana koloru</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Snackbar error <span class="anim-type t-slide">SLIDE</span></div>
      <div class="anim-desc">Wjeżdża od dołu z lekkim overshootem. Znika z fade po timeout</div>
    </div>
  </div>
</div>

<!-- ===== COMPOSER SCREEN ===== -->
<div class="screen-section">
  <div class="screen-title">✏️ Composer Screen — 6 animacji</div>
  <div class="anim-grid">
    <div class="anim-item">
      <div class="anim-name">Image preview <span class="anim-type t-scale">SCALE</span></div>
      <div class="anim-desc">Po wybraniu zdjęcia — preview skaluje się z 0 z bouncy spring. Przycisk "X" rotuje wchodząc</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Link preview card <span class="anim-type t-slide">SLIDE</span></div>
      <div class="anim-desc">Po załadowaniu — karta wysuwa się od dołu z fade. Shimmer placeholder podczas ładowania</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Schedule chip <span class="anim-type t-spring">SPRING</span></div>
      <div class="anim-desc">Po wybraniu daty chip "wyskakuje" sprężyście. Ikonka zegara lekko się obraca</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Publish button <span class="anim-type t-bounce">BOUNCE</span></div>
      <div class="anim-desc">Delikatny bounce przy aktywacji. Podczas publishingu — loading pulse. Po sukcesie — checkmark z scale-in</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Character counter <span class="anim-type t-fade">FADE</span></div>
      <div class="anim-desc">Płynna zmiana koloru (crossfade) przy przekroczeniu 280 znaków — neutral → czerwony</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Action buttons <span class="anim-type t-scale">SCALE</span></div>
      <div class="anim-desc">Rząd przycisków (Draft, Schedule, Publish) — kaskadowy scale-in z 50ms opóźnieniem</div>
    </div>
  </div>
</div>

<!-- ===== DETAIL SCREEN ===== -->
<div class="screen-section">
  <div class="screen-title">📖 Detail Screen — 4 animacje</div>
  <div class="anim-grid">
    <div class="anim-item">
      <div class="anim-name">Content reveal <span class="anim-type t-fade">FADE</span></div>
      <div class="anim-desc">Elementy pojawiają się sekwencyjnie: status → tekst → obraz → metadata. Każdy z 80ms opóźnieniem</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Status badge <span class="anim-type t-spring">SPRING</span></div>
      <div class="anim-desc">Badge skaluje się z 0 z bounce — pierwszy element na ekranie, przyciąga uwagę</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Delete dialog <span class="anim-type t-scale">SCALE</span></div>
      <div class="anim-desc">Dialog skaluje się z centrum ekranu (0.8→1.0) + backdrop fade. Sprężyste wejście</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Metadata sekcja <span class="anim-type t-slide">SLIDE</span></div>
      <div class="anim-desc">Dolna sekcja z metadanymi wysuwa się od dołu — ostatnia w sekwencji reveal</div>
    </div>
  </div>
</div>

<!-- ===== SETTINGS SCREEN ===== -->
<div class="screen-section">
  <div class="screen-title">⚙️ Settings Screen — 2 animacje</div>
  <div class="anim-grid">
    <div class="anim-item">
      <div class="anim-name">"Saved!" feedback <span class="anim-type t-spring">SPRING</span></div>
      <div class="anim-desc">Zielony tekst "Saved!" wyskakuje z bounce (scale 0→1). Po 2s fade out</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Disconnect dialog <span class="anim-type t-fade">FADE</span></div>
      <div class="anim-desc">Analogicznie do delete — scale z centrum + backdrop. Przycisk "Disconnect" z lekkim czerwonym pulsem</div>
    </div>
  </div>
</div>

<!-- ===== SHARED SPECS ===== -->
<div class="spec-box">
  <h3>🎛️ SwooshMotion — wspólne parametry</h3>
  <div class="spec-grid">
    <div class="spec-item">
      <div class="spec-name">Bouncy</div>
      <div class="spec-val">Spring: damping=0.55, stiffness=400<br>→ FAB, buttony, chipy</div>
    </div>
    <div class="spec-item">
      <div class="spec-name">Snappy</div>
      <div class="spec-val">Spring: damping=0.7, stiffness=800<br>→ expand/collapse, dialogi</div>
    </div>
    <div class="spec-item">
      <div class="spec-name">Gentle</div>
      <div class="spec-val">Spring: damping=0.8, stiffness=300<br>→ karty, content reveal</div>
    </div>
    <div class="spec-item">
      <div class="spec-name">Quick</div>
      <div class="spec-val">Tween: 200ms FastOutSlowIn<br>→ fade, color transitions</div>
    </div>
  </div>
</div>

<!-- ===== NAVIGATION ===== -->
<div class="spec-box" style="margin-top: 14px;">
  <h3>🔀 Przejścia nawigacyjne</h3>
  <table class="nav-table">
    <tr><td>Feed → Composer</td><td>Slide up z dołu ekranu + fade. FAB "transformuje się" w pełny ekran</td></tr>
    <tr><td>Feed → Detail</td><td>Slide in z prawej + fade. Karta posta płynnie przechodzi w pełny widok</td></tr>
    <tr><td>Feed → Settings</td><td>Standardowy slide z prawej</td></tr>
    <tr><td>Back (powrót)</td><td>Reverse wejścia — slide out w odpowiednią stronę</td></tr>
    <tr><td>Setup → Feed</td><td>Crossfade — płynne przejście z animowanego tła setup do feedu</td></tr>
  </table>
</div>