| <div class="storage-rain"> | |
| <p class="rain-intro"><strong>🤗 = 1 byte.</strong> Different display sizes.</p> | |
| <div class="rain-bins"> | |
| <div class="rain-bin"><h4>2D image <span data-image-amount>3.00 MiB</span></h4><div class="rain-container"><canvas data-rain="image" role="img" aria-label="3,145,728 one-byte balls."></canvas><span class="rain-fallback">3,145,728 bytes</span></div><p data-image-count>3,145,728 balls</p></div> | |
| <div class="rain-bin"><h4>3D volume <span data-volume-amount>3.00 GiB</span></h4><div class="rain-container"><canvas data-rain="volume" role="img" aria-label="3,221,225,472 one-byte balls."></canvas><span class="rain-fallback">3,221,225,472 bytes</span></div><p data-rain-count>3,221,225,472 balls</p></div> | |
| </div> | |
| <div class="rain-controls"><button type="button" data-rain-pause aria-pressed="false">Pause</button><button type="button" data-rain-replay>Drop again</button><span data-rain-status aria-live="polite"></span></div> | |
| <p class="rain-key" data-byte-scale>1,024× more bytes in the volume.</p> | |
| </div> | |
| <details class="byte-math"><summary>Storage math</summary><div class="memory-pair"><div><span>2D image</span><strong data-storage-image>3.00 MiB</strong><code data-storage-image-formula>1024² × 3 × 8/8</code></div><div><span>3D volume</span><strong data-storage-volume>3.00 GiB</strong><code data-storage-volume-formula>1024³ × 3 × 8/8</code></div></div><p class="diagram-note" data-storage-ratio>3 MiB = 3,145,728 bytes; 3 GiB = 3,221,225,472 bytes.</p><p class="byte-render-note">Totals are exact; the boxes show a sample of individual byte balls, drawn larger for the image and smaller for the volume. Ball sizes and visible counts are illustrative, not a shared area scale. Each ball denotes one byte, never a KiB, MiB or GiB. Falling and bouncing are procedural; billions of particles are not simulated individually.</p></details> | |