To enhance explanations that are difficult to describe statically, use one of the three interactive components. Use them sparingly: 2–4 per deck, and no more than 1 per slide.
Component Types
| Component | Use Case | Markup Structure |
|---|---| sorry |
| .frag (Sequential Reveal) | When the order of appearance is part of the explanation (e.g., pipeline steps, layering, problem $\rightarrow$ answer). | Add class="frag" to the element. Use data-frag="N" to group elements that should appear simultaneously. |
| .term (Terminal Demo) | For CLI workflows where seeing the command execution is vital. Preferred over static pre.code blocks. | .term > .term-head(.term-play) + .term-body > .tl.cmd / .tl.out. Clicking plays the typing animation and shows output. |
| .tabs (Tab Switching) | For comparing alternatives, scenarios, or before/after states within a single slide. | .tabs > .tabbar(.tab-btn) + .tab-panel. Add the on class to the first button/panel to set the default state. |
Behavior Rules
- Navigation:
\rightarrow/Space reveals the next .frag in the current slide. Once all fragments are revealed, it advances the slide. \leftarrow rewinds the last fragment. - Terminal: Clicking
.term plays the sequence (command typing $\rightarrow$ output display). A \circlearrowleft reset button appears at the end. The .tl.cmd element automatically prepends a $ prompt. - Document/Print Mode: In print (PDF) or Document Mode, all
.frag, .tabs, and .term components are shown in their fully expanded state for reading.
<!-- Example .frag usage -->
<div class="frag" data-frag="1">Step 1</div>
<div class="frag" data-frag="2">Step 2</div>
<!-- Example .term usage -->
<div class="term">
<div class="term-head"><button class="term-play"></button></div>
<div class="term-body">
<div class="tl cmd">ls -al</div>
<div class="tl out">total 0...</div>
</div>
</div>
<!-- Example .tabs usage -->
<div class="tabs">
<div class="tabbar">
<button class="tab-btn on">Option A</button>
<button class="tab-btn">Option B</button>
</div>
<div class="tab-panel on">Content A</div>
<div class="tab-panel">Content B</div>
</div>