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

<h2>Mapa mikro-animacji Swoosh</h2>
<p class="subtitle">Przegląd wszystkich proponowanych animacji per ekran. Kliknij ekran aby zobaczyć szczegóły.</p>

<style>
  .screen-map { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
  .screen-card { background: var(--card-bg, #1a1a2e); border: 1px solid var(--border, #333); border-radius: 12px; padding: 20px; cursor: default; transition: transform 0.2s; }
  .screen-card:hover { transform: translateY(-2px); }
  .screen-name { font-size: 1.1em; font-weight: 700; color: var(--accent, #6c63ff); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
  .screen-name .icon { font-size: 1.4em; }
  .anim-list { list-style: none; padding: 0; margin: 0; }
  .anim-list li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: flex-start; gap: 8px; font-size: 0.9em; }
  .anim-list li:last-child { border: none; }
  .anim-tag { font-size: 0.7em; padding: 2px 6px; border-radius: 4px; font-weight: 600; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
  .tag-spring { background: #2d1b69; color: #b39ddb; }
  .tag-fade { background: #1b3a2d; color: #81c784; }
  .tag-slide { background: #3a2a1b; color: #ffb74d; }
  .tag-scale { background: #1b2d3a; color: #64b5f6; }
  .tag-bounce { background: #3a1b2d; color: #f06292; }
  .count-badge { background: var(--accent, #6c63ff); color: white; font-size: 0.75em; padding: 2px 8px; border-radius: 10px; margin-left: auto; }
  .shared-section { margin-top: 32px; padding: 20px; background: rgba(108,99,255,0.08); border-radius: 12px; border: 1px solid rgba(108,99,255,0.2); }
  .shared-section h3 { margin-top: 0; color: var(--accent, #6c63ff); }
  .spec-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.85em; }
  .spec-table th { text-align: left; padding: 8px; border-bottom: 1px solid var(--border, #333); color: var(--accent, #6c63ff); }
  .spec-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .spec-table code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
</style>

<div class="screen-map">

  <!-- FEED SCREEN -->
  <div class="screen-card">
    <div class="screen-name"><span class="icon">📋</span> Feed Screen <span class="count-badge">7</span></div>
    <ul class="anim-list">
      <li><span class="anim-tag tag-spring">SPRING</span> <span><b>FAB wejście</b> — scale 0→1 z overshoot przy starcie ekranu</span></li>
      <li><span class="anim-tag tag-spring">SPRING</span> <span><b>FAB press</b> — sprężyste zmniejszenie przy tapnięciu (0.85→1.0)</span></li>
      <li><span class="anim-tag tag-slide">SLIDE</span> <span><b>Karty postów</b> — staggered wejście od dołu, każda karta z lekkim opóźnieniem</span></li>
      <li><span class="anim-tag tag-spring">SPRING</span> <span><b>"Show more" expand</b> — animateContentSize ze sprężyną</span></li>
      <li><span class="anim-tag tag-fade">FADE</span> <span><b>Empty state</b> — fade in + delikatny scale up</span></li>
      <li><span class="anim-tag tag-bounce">BOUNCE</span> <span><b>Queue status</b> — pulsujący chip podczas uploadu, bounce przy zmianie statusu</span></li>
      <li><span class="anim-tag tag-slide">SLIDE</span> <span><b>Snackbar</b> — slide in od dołu z overshoot</span></li>
    </ul>
  </div>

  <!-- COMPOSER SCREEN -->
  <div class="screen-card">
    <div class="screen-name"><span class="icon">✏️</span> Composer Screen <span class="count-badge">6</span></div>
    <ul class="anim-list">
      <li><span class="anim-tag tag-scale">SCALE</span> <span><b>Image preview</b> — scale in z spring przy dodaniu zdjęcia</span></li>
      <li><span class="anim-tag tag-slide">SLIDE</span> <span><b>Link preview card</b> — slide up + fade in po załadowaniu</span></li>
      <li><span class="anim-tag tag-spring">SPRING</span> <span><b>Schedule chip</b> — sprężyste pojawienie się po wybraniu daty</span></li>
      <li><span class="anim-tag tag-bounce">BOUNCE</span> <span><b>Publish button</b> — subtle bounce na hover/focus, loading pulse</span></li>
      <li><span class="anim-tag tag-fade">FADE</span> <span><b>Character counter</b> — color crossfade przy przekroczeniu limitu</span></li>
      <li><span class="anim-tag tag-scale">SCALE</span> <span><b>Action buttons row</b> — staggered scale-in wejście</span></li>
    </ul>
  </div>

  <!-- DETAIL SCREEN -->
  <div class="screen-card">
    <div class="screen-name"><span class="icon">📖</span> Detail Screen <span class="count-badge">4</span></div>
    <ul class="anim-list">
      <li><span class="anim-tag tag-fade">FADE</span> <span><b>Content reveal</b> — sekwencyjne fade-in elementów (status → tekst → obraz → metadata)</span></li>
      <li><span class="anim-tag tag-spring">SPRING</span> <span><b>Status badge</b> — scale-in z bounce przy wejściu</span></li>
      <li><span class="anim-tag tag-scale">SCALE</span> <span><b>Delete dialog</b> — scale z center + backdrop fade</span></li>
      <li><span class="anim-tag tag-slide">SLIDE</span> <span><b>Metadata sekcja</b> — slide up od dolnej krawędzi</span></li>
    </ul>
  </div>

  <!-- SETTINGS SCREEN -->
  <div class="screen-card">
    <div class="screen-name"><span class="icon">⚙️</span> Settings Screen <span class="count-badge">2</span></div>
    <ul class="anim-list">
      <li><span class="anim-tag tag-spring">SPRING</span> <span><b>"Saved!" feedback</b> — scale-in z bounce + auto fade-out po 2s</span></li>
      <li><span class="anim-tag tag-fade">FADE</span> <span><b>Disconnect confirm</b> — dialog fade + scale</span></li>
    </ul>
  </div>

</div>

<!-- SHARED ANIMATION SPECS -->
<div class="shared-section">
  <h3>🎛️ Wspólne parametry animacji (SwooshMotion)</h3>
  <p style="font-size:0.9em; opacity:0.8;">Centralny obiekt z predefiniowanymi specyfikacjami — zapewnia spójny "character" w całej aplikacji</p>
  <table class="spec-table">
    <tr><th>Nazwa</th><th>Typ</th><th>Parametry</th><th>Zastosowanie</th></tr>
    <tr><td><code>Bouncy</code></td><td>Spring</td><td>dampingRatio=0.55, stiffness=400</td><td>FAB, buttony, chipy</td></tr>
    <tr><td><code>Snappy</code></td><td>Spring</td><td>dampingRatio=0.7, stiffness=800</td><td>Expand/collapse, dialogi</td></tr>
    <tr><td><code>Gentle</code></td><td>Spring</td><td>dampingRatio=0.8, stiffness=300</td><td>Karty, content reveal</td></tr>
    <tr><td><code>Quick</code></td><td>Tween</td><td>200ms, FastOutSlowIn</td><td>Fade, color transitions</td></tr>
    <tr><td><code>StaggerDelay</code></td><td>Offset</td><td>50ms per item</td><td>List item wejścia</td></tr>
  </table>
</div>

<!-- NAVIGATION -->
<div class="shared-section" style="margin-top: 16px;">
  <h3>🔀 Przejścia między ekranami</h3>
  <table class="spec-table">
    <tr><th>Przejście</th><th>Animacja</th></tr>
    <tr><td>Feed → Composer</td><td>Slide up z dołu + fade (shared element z FAB → ekran)</td></tr>
    <tr><td>Feed → Detail</td><td>Slide in z prawej + fade (karta "wyrasta" w pełny widok)</td></tr>
    <tr><td>Feed → Settings</td><td>Slide in z prawej, standard</td></tr>
    <tr><td>Composer/Detail → Back</td><td>Reverse odpowiedniego wejścia</td></tr>
    <tr><td>Setup → Feed</td><td>Crossfade (płynne przejście z animowanego tła)</td></tr>
  </table>
</div>