The Elastic Window

This animation hunts the longest substring without repeating characters. The string is a row of letter tiles with an elastic highlighted band over the current window. The right edge stretches tile by tile; the moment a duplicate letter enters, it flashes red and the left edge contracts tile by tile until the duplicate clears. A side panel shows the window's live letter counts as a mini bar chart, and a ruler above records the longest band seen in gold.

What to watch for:

• The right edge never retreats, and the left edge never retreats either. Both only move forward. Count total tile-moves across the whole run: each tile enters once and leaves at most once — that's why the nested-looking shrink is still O(n).
• Shrinking stops the instant validity returns. The band sheds exactly enough tiles to clear the red, never more.
• The gold ruler only updates while the band is clean. Recording during a violation would log an illegal window — watch the timing of when the ruler moves versus when the red flashes.

The frequency bars are the window state: every stretch bumps a bar up, every contraction bumps one down, perfectly symmetrically.