Example 03 — Animated BFS output

4-step scene với full widget. Thử: click Next/Prev, bấm ← →, hoặc Play. Click vào widget trước để focus cho keyboard nav.

Notes on what you're seeing

• 1 SVG master, không phải 4 SVG crossfade. Step state được compute bằng JS từ IR (data-driven), áp dụng vào element attr (fill, stroke, text content).
• Narration là <p data-step="N">, chỉ 1 active tại mỗi step. KaTeX render $...$ delimiters ở load time.
• Progress bars = 4 div, fill theo current step (step N → N bar đầu có class done).
• Keyboard: ← prev, → next, Space toggle play, Home/End first/last. Widget phải focus trước (click vào).
• Cumulative: step 4 kế thừa state từ step 3, 2, 1. Step 1 → A xanh dương. Step 2 → A vàng (current). Step 3 → B, C xanh dương. Step 4 → A xanh lá (done), B vàng.
• Data-scriba-src: inspect các <g class="g-node"> → thấy data-scriba-src="input.md:10" (nơi khai báo graph). Production có thể strip.
• Cái script bên dưới là scriba-steps.js được embed inline cho demo. Trong production, consumer <script src="/static/scriba/scriba-steps.js"></script> và script tự discover mọi .scriba-widget trên page.