Components

An explainer is a handful of blocks. Each one takes its color and type from the theme, places itself, and answers enter, next and exit.

Title card

let title = view.add(TitleCard::new("Binary search").subtitle("O(log n)"));
title.enter().await;
title.next().await;
title.exit().await;

enter fades the card and the title in. next reveals the subtitle.

Chapter marker

let chapter = view.add(ChapterMarker::new("1  Search"));
chapter.enter().await;

A label pinned to the top safe area, including on a vertical frame.

Bullet list

let steps = view.add(BulletList::new(["Take the middle", "Compare", "Drop half"]));
steps.enter().await;
for _ in 0..steps.len() { steps.next().await; }

enter shows the stack. Each next reveals one row.

Code explainer

let code = view.add(
    CodeExplainer::new("lo + (hi - lo) / 2").step(1, 1, "the middle"),
);
code.enter().await;
code.next().await;

enter shows the source. Each next focuses the next line range (1-based, inclusive) and sets the caption. A light theme uses a light code theme.

Flow diagram

let flow = view.add(FlowDiagram::new().edge("Client", "API").edge("API", "DB"));
flow.enter().await;
for _ in 0..flow.len() { flow.next().await; }

You name the links. The diagram lays the nodes out in layers, left to right. .down() stacks the layers. next highlights the next node.

Callout

let card = view.add(Rect::new().size(280.0).fill(Surface));
let call = view.add(Callout::new(card).text("the middle"));
call.enter().await;
call.next().await;

The caption sits above the target. enter draws the arrow, next shows the words.

Lower third

let lower = view.add(LowerThird::new("Ada").role("walks the half"));
lower.enter().await;
lower.next().await;

Pinned to the bottom safe area. next reveals the role.

End card

let end = view.add(EndCard::new("That's the search").note("Repeat from the top"));
end.enter().await;
end.next().await;
end.exit().await;

Same rhythm as a title card. The note waits for next.

The gallery example components is a full explainer in under 40 lines. Project::aspects makes oxframe check look at 16:9, 9:16 and 1:1.