Visualizes the Information Bottleneck trade-off by animating a Markov chain Y → X → T with a cycling β parameter. As β increases, the bottleneck T expands its effective capacity (more filled slots) and more “relevant” information packets flow from T to Y; as β decreases, fewer packets and a tighter T emphasize compression. Side meters show the changing balance between I(X;T) (capacity/complexity) and I(T;Y) (relevance/predictiveness).
Uses time-based cycling (3.6s) to animate β with provided cubic ease(). Packets are simple snapped rectangles moving along two paths; T’s capacity is shown as a 3×2 slot grid with fill count driven by β. All geometry is responsive via scale=Math.min(w,h)/240 with 4–8px snapping for a blocky aesthetic.