Swoosh/.superpowers/brainstorm/46859-1773916456/animation-map-v3.html

<h2>Zaktualizowana mapa mikro-animacji Swoosh</h2>
<p class="subtitle">Pełna mapa uwzględniająca nowe funkcje: multi-account, search, swipe-to-dismiss, galeria, stats, preview. Ekspresyjny styl.</p>

<style>
  .screen-section { margin: 24px 0; }
  .screen-title { font-size: 1.15em; font-weight: 700; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid rgba(108,99,255,0.3); display: flex; justify-content: space-between; align-items: center; }
  .badge { background: var(--accent, #6c63ff); color: white; font-size: 0.7em; padding: 2px 8px; border-radius: 10px; }
  .badge-new { background: #00c853; }
  .anim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .anim-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 12px; }
  .anim-item.new { border-color: rgba(0,200,83,0.3); background: rgba(0,200,83,0.04); }
  .anim-name { font-weight: 700; font-size: 0.9em; margin-bottom: 3px; }
  .anim-desc { font-size: 0.8em; opacity: 0.75; line-height: 1.35; }
  .t { display: inline-block; font-size: 0.6em; padding: 1px 5px; border-radius: 3px; font-weight: 700; margin-left: 4px; vertical-align: middle; }
  .t-sp { background: #7c4dff; color: #fff; }
  .t-fa { background: #00c853; color: #000; }
  .t-sl { background: #ff9100; color: #000; }
  .t-sc { background: #448aff; color: #fff; }
  .t-bo { background: #ff4081; color: #fff; }
  .new-tag { font-size: 0.55em; background: #00c853; color: #000; padding: 1px 4px; border-radius: 3px; font-weight: 700; margin-left: 4px; vertical-align: middle; }
  .spec-box { margin-top: 24px; padding: 16px; 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 10px 0; font-size: 1em; }
  .spec-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .spec-item { background: rgba(255,255,255,0.04); border-radius: 6px; padding: 8px 10px; }
  .spec-name { font-weight: 700; font-size: 0.85em; }
  .spec-val { font-size: 0.75em; opacity: 0.7; margin-top: 2px; }
  .nav-table { width: 100%; margin-top: 10px; font-size: 0.8em; }
  .nav-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-table td:first-child { font-weight: 600; white-space: nowrap; width: 35%; }
  .summary { margin-top: 24px; padding: 14px; background: rgba(255,255,255,0.04); border-radius: 8px; font-size: 0.85em; }
  .summary strong { color: var(--accent, #6c63ff); }
</style>

<!-- ===== FEED SCREEN ===== -->
<div class="screen-section">
  <div class="screen-title">📋 Feed Screen <span class="badge">12</span></div>
  <div class="anim-grid">
    <div class="anim-item">
      <div class="anim-name">FAB wejście <span class="t t-sp">SPRING</span></div>
      <div class="anim-desc">Scale 0→1 z overshoot przy otwarciu feedu. Znika gdy search aktywny.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">FAB press <span class="t t-sp">SPRING</span></div>
      <div class="anim-desc">Kurczy się do 85% na tap, sprężyście wraca. BouncyQuick — kończy przed nawigacją.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Karty — staggered wejście <span class="t t-sl">SLIDE</span></div>
      <div class="anim-desc">Kaskadowe slide-in od dołu, 50ms delay. Tylko initial load, max 8 kart. Tracking via mutableStateMapOf.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">"Show more" expand <span class="t t-sp">SPRING</span></div>
      <div class="anim-desc">AnimatedContent z expandVertically/shrinkVertically. Sprężysta zmiana wysokości.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Empty state <span class="t t-fa">FADE</span></div>
      <div class="anim-desc">Fade-in + scale 0.9→1.0. Dotyczy wszystkich empty state'ów (connection error, filter empty, search no results).</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Queue status chip <span class="t t-bo">BOUNCE</span></div>
      <div class="anim-desc">Puls podczas uploadu. Bounce + color crossfade na zmianę statusu. Shake na FAILED.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Snackbar <span class="t t-sl">SLIDE</span></div>
      <div class="anim-desc">Slide-in od dołu z overshoot (error snackbar + pin/unpin confirmation).</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Search bar <span class="t t-sl">SLIDE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">SearchTopBar wjeżdża od góry z fade. Zamknięcie — reverse. Focus z delay.</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Filter chips <span class="t t-fa">FADE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">Chips bar fade-in/out przy przełączeniu search. Już ma animateColorAsState — rozszerzyć o wejście.</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Account switcher <span class="t t-sl">SLIDE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">ModalBottomSheet ma domyślną animację — dodać staggered wejście account items.</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Pinned section header <span class="t t-fa">FADE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">Header "📌 Pinned" — fade-in z slide gdy pojawiają się pinned posty.</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Account switch overlay <span class="t t-fa">FADE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">Crossfade "Switching account..." — płynne przejście z fade + scale spinner.</div>
    </div>
  </div>
</div>

<!-- ===== COMPOSER SCREEN ===== -->
<div class="screen-section">
  <div class="screen-title">✏️ Composer Screen <span class="badge">9</span></div>
  <div class="anim-grid">
    <div class="anim-item">
      <div class="anim-name">Image grid preview <span class="t t-sc">SCALE</span></div>
      <div class="anim-desc">Nowe zdjęcia scale-in z bounce. Usunięcie — scale-out z fade. Cały ImageGridPreview.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Link preview card <span class="t t-sl">SLIDE</span></div>
      <div class="anim-desc">Slide-up + fade po załadowaniu. Pulsing placeholder zamiast LinearProgressIndicator.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Schedule chip <span class="t t-sp">SPRING</span></div>
      <div class="anim-desc">Pop-in z bouncy spring po wybraniu daty.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Publish button <span class="t t-bo">BOUNCE</span></div>
      <div class="anim-desc">Bounce na aktywację. Loading pulse. Checkmark scale-in na success.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Character counter color <span class="t t-fa">FADE</span></div>
      <div class="anim-desc">Trzy-stopniowy color crossfade: neutral → tertiary (280) → error (500).</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Action buttons <span class="t t-sc">SCALE</span></div>
      <div class="anim-desc">Kaskadowy scale-in: Publish → [Draft, Schedule]. Dopasowany do Column+Row layout.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Error text <span class="t t-sl">SLIDE</span></div>
      <div class="anim-desc">Slide-in z lewej + fade.</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Hashtag chips <span class="t t-sp">SPRING</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">Extracted tags FlowRow — staggered scale-in chipów gdy tagi się pojawiają.</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Edit/Preview tabs <span class="t t-fa">FADE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">Crossfade między edit mode a preview mode. Płynne przejście contentu.</div>
    </div>
  </div>
</div>

<!-- ===== DETAIL SCREEN ===== -->
<div class="screen-section">
  <div class="screen-title">📖 Detail Screen <span class="badge">5</span></div>
  <div class="anim-grid">
    <div class="anim-item">
      <div class="anim-name">Content reveal <span class="t t-fa">FADE</span></div>
      <div class="anim-desc">Sekwencyjne: status → tekst → tagi → galeria → link → stats. 80ms delay each.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Status badge <span class="t t-sp">SPRING</span></div>
      <div class="anim-desc">Scale-in z bounce — pierwszy element w sekwencji.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Delete dialog <span class="t t-sc">SCALE</span></div>
      <div class="anim-desc">AnimatedDialog — scale z centrum + backdrop fade.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">PostStatsSection <span class="t t-sl">SLIDE</span></div>
      <div class="anim-desc">Slide-up jako ostatni w sekwencji. Expand/collapse już animowane.</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Pin toggle feedback <span class="t t-bo">BOUNCE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">Ikona pina bouncy rotate przy toggle. Zmiana filled↔outlined z crossfade.</div>
    </div>
  </div>
</div>

<!-- ===== SETTINGS SCREEN ===== -->
<div class="screen-section">
  <div class="screen-title">⚙️ Settings Screen <span class="badge">3</span></div>
  <div class="anim-grid">
    <div class="anim-item new">
      <div class="anim-name">Account card <span class="t t-fa">FADE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">Card z current account — fade-in + subtle scale przy wejściu na ekran.</div>
    </div>
    <div class="anim-item">
      <div class="anim-name">Disconnect confirm <span class="t t-sc">SCALE</span></div>
      <div class="anim-desc">AnimatedDialog z scale-in. Nowe zachowanie: dialog przed disconnect.</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Theme chip selection <span class="t t-sp">SPRING</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">Bouncy scale pulse na wybranym theme chipie (System/Light/Dark).</div>
    </div>
  </div>
</div>

<!-- ===== STATS SCREEN ===== -->
<div class="screen-section">
  <div class="screen-title">📊 Stats Screen <span class="badge badge-new">3 NEW</span></div>
  <div class="anim-grid">
    <div class="anim-item new">
      <div class="anim-name">Stats cards wejście <span class="t t-sc">SCALE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">4 StatsCards — staggered scale-in z bounce. Efekt "odliczania" statystyk.</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Writing stats reveal <span class="t t-sl">SLIDE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">OutlinedCard slide-up z fade po cards. Kaskadowe pojawienie WritingStatRows.</div>
    </div>
    <div class="anim-item new">
      <div class="anim-name">Number count-up <span class="t t-fa">FADE</span> <span class="new-tag">NEW</span></div>
      <div class="anim-desc">Wartości liczbowe animowane od 0 do docelowej (animateIntAsState). Subtelne ale efektowne.</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">damping=0.65, stiff=400<br>→ FAB, chipy, badges</div>
    </div>
    <div class="spec-item">
      <div class="spec-name">BouncyQuick</div>
      <div class="spec-val">damping=0.7, stiff=1000<br>→ press feedback</div>
    </div>
    <div class="spec-item">
      <div class="spec-name">Snappy</div>
      <div class="spec-val">damping=0.7, stiff=800<br>→ expand, dialogi</div>
    </div>
    <div class="spec-item">
      <div class="spec-name">Gentle</div>
      <div class="spec-val">damping=0.8, stiff=300<br>→ karty, reveal</div>
    </div>
    <div class="spec-item">
      <div class="spec-name">Quick</div>
      <div class="spec-val">200ms FastOutSlowIn<br>→ fade, color</div>
    </div>
    <div class="spec-item">
      <div class="spec-name">ReducedMotion</div>
      <div class="spec-val">Checks ANIMATOR_DURATION_SCALE<br>→ snap() fallback</div>
    </div>
  </div>
</div>

<!-- ===== NAVIGATION ===== -->
<div class="spec-box" style="margin-top: 12px;">
  <h3>🔀 Przejścia nawigacyjne — 8 tras</h3>
  <table class="nav-table">
    <tr><td>Feed → Composer</td><td>Slide up + fade</td></tr>
    <tr><td>Feed → Detail</td><td>Slide right + fade</td></tr>
    <tr><td>Feed → Settings</td><td>Slide right</td></tr>
    <tr><td>Settings → Stats</td><td>Slide right</td></tr>
    <tr><td>Detail/Composer → Preview</td><td>Slide up + fade</td></tr>
    <tr><td>Feed → AddAccount</td><td>Slide up + fade (jak Composer)</td></tr>
    <tr><td>Setup → Feed</td><td>Crossfade 500ms</td></tr>
    <tr><td>Back (wszystkie)</td><td>Reverse via popEnter/popExit</td></tr>
  </table>
</div>

<!-- ===== SUMMARY ===== -->
<div class="summary">
  <strong>Podsumowanie:</strong> 32 animacje + 8 przejść nawigacyjnych.<br>
  <strong>Nowe pliki:</strong> SwooshMotion.kt, AnimatedDialog.kt, PulsingPlaceholder.kt (3 pliki)<br>
  <strong>Modyfikowane:</strong> FeedScreen, ComposerScreen, DetailScreen, SettingsScreen, StatsScreen, NavGraph (6 plików)<br>
  <strong>12 nowych animacji</strong> względem pierwotnego planu (zielone NEW), wynikające z nowych funkcji aplikacji.
</div>